스스로도 이 타이틀을 붙이고 있어 잘 모르는 느낌이 듭니다만, 최근의 PhotoShop는 대단하네요라는 실험 메모적인.

PhotoShopCC(2017.1) 시작.

적당히 레이어 스타일로 장식한 텍스트나 마우스로 그린 그림이나 레이어마다 레이어마다 만들어 본다.

텍스트를 출력해 보자.

1.CSS 복사

텍스트의 레이어를 오른쪽 클릭하면 이런 메뉴가 나온다.


CSS 복사를 클릭합니다. CSS가 복사 할 수 있습니다.
DreamWeaver에서 적당히 html 파일을 만들고 <style> 안에 ctrl + v를 해 보면 ...



레이어명이 클래스명이 되어, 레이어 순서가 z-index가 되어 출력되고 있다고! ?
이것은 감동했습니다… … 게다가 절대 위치까지… … 아니 이것 대단하다…

2.SVG 복사

음, CSS만으로는 어쩔 수 없기 때문에, 이번에는 내용도 출력할 수 없을까.



"SVG 복사"를 클릭하십시오. 텍스트 데이터가 좋을까요?
HTML에 붙여 보았습니다만, 음. SVG는 전혀 모르겠다…



자, 브라우저에서 확인해 보겠습니다.

출력 결과

어쩌면 이 이미지가 아니야?
라고 생각했습니다만, 브라우저 출력의 스쿠쇼입니다…
텍스트계는 꽤 충실하게 출력할 수 있는 것 같네요!

그림은 출력할 수 있을까?

그래서 이번에는 여기 고양이의 그림이 그려져있는 레이어를 같은 순서로 출력해 보겠습니다.

1.CSS 복사

이것은 누가 무엇이라고 말하면 고양이입니다.

2.SVG 복사

출력 결과

방금전의 html 파일에 붙여, 브라우저로 표시해 보았습니다.



위치야말로 어긋나고 있습니다만, 거의 거의 완벽하게 재현되고 있네요… !

설마 마우스로 그린 이런 요보 요보인 선까지 재현할 수 있다고는…

텍스트나 버튼계라면 실용에 견딜 수 있을까 생각했습니다.
그러나 역시 출력된 CSS 자체의 수치 등은 소수점까지 산출되어 버리기 때문에, 거기는 인력에서의 조정이 필요할까~라는 생각도 듭니다.
코딩 룰이라도 있으면 더욱더라고 하는 느낌이기도 합니다만, 잘 잘 다루어 Photoshop만으로 코딩 할 수 있게 될 수 있습니까?