포토샵 목업파일 사용방법

포토샵 목업 파일 사용 방법에 대해 포스팅하겠습니다.
목업은 생각보다 엄청 하기 쉽습니다. 물론 목업파일을 직접 제작한다면 굉장히 귀찮은 작업이지만 웹을 조금만 검색하면 무료 목업 psd 파일을 구하실 수 있을겁니다. 
구글에 mockup free psd 라고 검색만해도 쭈르륵 나올꺼예요. 하지만 귀찮으니 무료 목업사이트 링크를 게시해둔 게시글을 올려두겠습니다.
https://shine-study-exercise.tistory.com/119

목업 사이트 링크 공유

우선 사용할 psd 파일을 하나 다운받아줍니다. 저는 free ipad mockup 파일을 사용할꺼예요. 해당 파일을 업로드해드리고 싶지만 10mb가 넘는 용량상의 문제로 업로드는 불가능하네요. 

자고로 디자인의 완성은 목업이지요ㅎㅎ 명함도 그냥 제작해서 보여주는것과 목업해서 보여주는것에 따라 클라이언트들의 반응이 달라지기도 합니다. 또 로고 제작시 어플리케이션시스템까지는 제작을 안하더라도 한, 두가지 정도만 간단하게 목업하여서 적용예시를 보여주면 클라이언트의 선택에 도움을 주기 때문에 필수는 아니지만 있으면 훨신 좋다고 생각합니다. 이런 중요한 작업을 할때 엄청 쉽고 빠르게 할 수 있다는 사실을 알고 계셨나요? 저는 사실 작년까지 목업 파일을 사용할 줄 몰랐습니다. ㅜㅜ 목업을 할 일은 있어도 웹디자이너 따위가,,,, 해봤자 ㅎㅎ 모바일 화면이나 pc화면 목업이여서 그냥 그 간단한 선에 맞춰서 도형을 제작하고 클리핑 마스크를 사용하는게 끝이였거든요. psd 파일이 있어도 쓰지를 못하는 바보똥멍청이 ㅋㅎㅋㅎ 근데 저같은 사람이 의외로 좀 있더라구요! ㅋㅋ 좋은 정보는 나눠야죠. 

포토샵 우측 패널을 확인하시면 layer창이 있을꺼예요. 레이어창에서 스마트 오브젝트를 더블 클릭하여 내가 넣고자 하는 디자인을 넣은 후 저장하는 방식입니다. 만약 레이어창이 꺼졌다거나 숨김표시됐다던가 모종의 이유로 사라졌다면 당황하지 마시고  f7을 눌러주세요. 

이미지가 너무 작아서 확인이 가능할지 모르겠지만 Your Design Here이라고 쓰여있는 레이어의 앞 부분을 더블 클릭해주세요.(smart object/한글판에선 고급객체)

저는 왠만하면 원본파일을 건드리지 않기때문에 이 객체의 디자인 가장 위에 제가 만든 디자인을 사이즈에 맞게 얹어주고 저장합니다. 저장을 하지 않으면 원래 psd 파일에서 변경된 사항이 반영되지 않습니다. 

저는 현재 작업한걸 따로 컴퓨터에 저장해두지 않아서 재작년쯤 연습해둔 사진으로 대체하겠습니다. ㅎㅎ 오른쪽 하단 레이어창을 주목해주세요. 기존에 있던 디자인을 그대로 두고 가장 상단에만 디자인을 올리고 저장을 해도 상관없지만 용량상의 문제로 지우고 싶다면 지워도 무관합니다. 편하신대로 해주세요. 

8번 layer창을 저장한 후 끄거나 원래 psd 파일로 가서 확인하면 이렇게 변한 목업파일을 확인하실 수 있습니다. 그 외의 디자인적 요소는 기존의 포토샵을 쓰는것과 같으니 없앨 요소는 레이어 눈을 꺼도 되고 그대로 사용하셔도 됩니다. 저는 다음에 사용할 것을 대비해서 왠만하면 레이어창의 눈을 꺼두는데 삭제하셔도 됩니다.  제가 웹디자이너라서,,, 왠만하면 지우지 않고 주석처리하듯이 레이어를 꺼두는 버릇이 있어서 ,,, ㅎㅎ 선호도 차이라고 생각합니다. 

그리고 마지막으로 목업한 화면을 저장하실때 만약 웹에서만 사용하신다면 Save for Web[단축키: ctrl + alt + shift + s]을 하시는게 용량이 훨신 가볍고 좋습니다.  설정은 잘 모르시겠다면 jpeg (배경이 투명이라면 png)로 하고 high 퀄리티는 60~75사이가 적절하지만 저는 65를 사용하고 있습니다. 이미지 사이즈는 그대로 하셔도 되고 저는 보통 2140으로 저장합니다. 모니터가 요즘 워낙 해상도가 좋아서 27인치로 봣을때 2140이 풀 화면일때이고 22인치의 경우 1920이기 때문에 웹에 올릴때는 가로 2000정도 해서 저장합니다. 물론 인스타도 1대1의 비율이여서 폰 해상도 생각해서 가로세로2000으로 작업하여서 저장하는 편입니다. 

물론 저장방식은 각자 자유이며 저는 웹에 최적화하여 저장하는 법을 알려드렸습니다. 인쇄물은 작업해본적이 없기때문에 어떻게 저장해야할지 잘 모르겠네요. 책자의 경우 600 DPI로 잡는 것을 보긴했는데,, ㅎㅎ 웹은 2000정도면 크게 깨지지 않고 무난하게 사용가능하리라고 생각합니다. 도움이 되셨다면 좋겠네요. 감사합니다.