Png2Layer 0.1

엘프화가의 독자분들을 위한 첫번째 선물이 드디어 공개!!

여러 png 이미지를 한장의 PSD로 합쳐주는 스크립트입니다. 합쳐줄뿐만 아니라, 이름에 따라 합성속성과 색상 등을 바꿔서 합쳐주므로 웹툰 작업시 시간을 대폭 절약할수 있습니다.


왜 이런걸?

웹툰 스케치업 서적을 통해 Ch 플러그인을 이용한 자연스러운 레이어 합성기법을 소개한바 있습니다. 스케치업의 딱딱한 이미지를 자신의 웹툰에 맞게 원하는 스타일로 구성하기도 편하고, 작업 뒤 관리하기도 좋아 편리한 기법이죠. 다만, 여러장의 이미지를 일일이 불러와서 합성해야 하는지라 초반 번거로움이 있는 편입니다. 특히 컷이 늘어날수록…할일이 많아지죠;

이에 이 귀찮은 과정을 자동으로 해주는 스크립트를 만들어 공개합니다. 디폴트 텍스쳐를 열고, 스크립트를 실행하면, 해당 폴더에서 관련된 파일들을 찾아 적절히 합성해주는 편리한 스크립트입니다.

단, 책구매자를 위한 서비스차원으로 제작한 거라, 다른 툴들과 달리 일반공개는 하지않을 예정입니다. 독자분들은 소중하니까요!! 책구매한 걸 인증하시면 Reader회원이 되어 다운받을수 있습니다.1)

↓아래 버튼이 안보이신다면? 엘프화가의 도서 구매 인증 페이지 바로가기2)

사용영상

3가지 이미지에 각각 적용해본 동영상입니다. (첨부된 예제파일로 테스트해볼수 있습니다)


스트립트 설치방법

포토샵 스크립트는 더블클릭해 실행할수도 있지만, 프리셋에 등록하는 쪽이 좀더 편합니다.

1) 스크립트폴더 (포토샵폴더\Presets\Scripts\) 에 png2layer.jsx 파일을 넣고, 포토샵을 켭니다.

2) 메뉴 파일 → 스크립트 → Png2Layer 가 추가된 것을 확인할수 있습니다. 이 메뉴를 선택하면 스크립트가 실행됩니다.


사용방법

1) [Su]CH 툴 등에서 추출한 png파일들을 한 폴더에 넣어둡니다. 필요없는 파일은 굳이 추출 안하셔도 되며, Lightup 등 다른 프로그램에서 가져와도 됩니다.

2) 기본이 될 파일을 불러옵니다. 제목_Default.png 나 제목_.png 등이면 됩니다. _Line 등 불러와야 하는 파일은 피하세요.오류납니다;

3) 스크립트 메뉴에서, Png2Layer를 선택합니다. 그럼, 끝~! 알아서 관련 파일들을 불러옵니다.

제가 세팅한 기본 순서와 합성모드는 아래와 같습니다. 파일이 없으면 없는대로 안부릅니다.

파일명합성속성투명도설명
_Color.pngNormal100색깔레이어입니다.
_Texture.pngNormal100텍스쳐레이어입니다.
_Clay.pngOverlay100명암레이어입니다. 오버레이로 합성합니다.
_Shadow.pngMultiply50그림자레이어입니다. 컬러밸런스 42,0,-27로 조정해 따듯한 그림자로 만듭니다.
_Line.pngMultiply70기본선레이어입니다.
_Profile.pngMultiply100외곽선레이어입니다.
_Lightupov.pngOverlay100오버레이용으로 라이트업에서 추출한 이미지입니다. 컬러밸런스로 차가운 색을 만듭니다.
_Lightupsc.pngScreen100스크린용으로 라이트업에서 추출한 이미지입니다.
_Zdepth.pngNormal숨김깊이값은 참고용이라 숨깁니다. 차후 알파채널에 적용하는 방식으로 변경예정입니다.
_Alpha.pngNormal숨김알파값 역시 참고용입니다. 하늘 등을 합성할떄 편리하죠.
_Color_by_Layer.pngNormal숨김레이어별 색깔 역시 참고역할이라 숨깁니다.

문제점

  • 아직은 PNG 확장자만 지원합니다.
  • 탭으로 문서열기가 체크안되어있을 경우, 오류가 발생할 경우가 있네요.

의견받습니다~~~

이 스크립트는 꾸준히 발전시킬 예정입니다. 다만, 제 성향상(….) 제가 편리하면 그만두는 편이라(….)

다른 분들의 의견도 궁금하네요. 무슨 기능이 더 들어가면 좋을까요? ㅇㅂㅇ?

지금생각하는건… 다양한 확장자 지원이랑, 크기가 다른 이미지일 경우 자동으로 사이즈 맞춘다던가…UI 추가 정도???


커스터마이징

나름 최적의 세팅이라 생각하긴 하지만, 취향에 따라 조정하고 싶으실 분들이 계실 것 같습니다. 물론 각자의 성향에 맞게 세팅을 할수 있도록 속성을 분리해 스크립트를 짜긴 했습니다만, 아직은 별도의 UI가 없어3) 직접 스크립트를 수정하셔야 합니다.

난이도가 살짝 있는 편이니, 수정하실 분들은 아래 내용을 잘 따라오세요.

1) Png2Layer.jsx 파일을 메모장 등으로 엽니다.

2) 수정해야 하는 부분은 아래부분입니다.

ch_png.push(['_shadow',BlendMode.MULTIPLY,50,'42,0,-27']);

3) 위와 같은 항목을 추가하면 원하는 레이어를 추가할수 있으며 대괄호 안에, 쉼표로 분리된 4가지 항목을 수정하시면 됩니다.

  • 첫번째 항목은 불러올 파일이름입니다.
  • 두번째 항목은 합성방식입니다. BlendMode.속성이름 을 사용합니다.
  • 세번째 항목은 투명도입니다.
  • 네번째 속성은 추가할 경우 색상을 변경해줍니다. Shadow 등에 사용하면 편리하며. ColorBalance의 값을 이용합니다.

아래 이미지를 참고해보세요.

1)
아래 다운로드 버튼이 안보이신다면? 인증부터해주세요
2)
책은 필요없고, 스크립트만 필요하실경우ㅡ 스벅 그린티프라프치노 기프트콘 쏘시면 보내드립니다. 훗.
3)
차후 지원예정입니다