[레이아웃 디자인 템플릿] 웹용 상세페이지 부분 레이아웃 템플릿002,웹 카탈로그 표지 레이아웃, 상세이미지 인트로 디자인 소스(PSD파일+포토샵액션)

어제에 이어 오늘도 웹카탈로그 또는 쇼핑몰 상세페이지의 인트로 이미지를 제작하는 데 도움을 줄수 있는 레이아웃 템플릿을
제작하여 포스팅합니다.  위 레이아웃은 외국 패션잡지의 한 페이지에서 영감을 받아 재 구성하여 만들어 보았습니다.

위 이미지에 사용된 사진들은 모두 저작권 프리의 이미지를 사용하였으며 아래에 첨부된 템플릿 PSD파일에는 이미지는 따로 포함되어 있지 않습니다.  (여러분께서 판매하시는 아이템의 컨셉에 맞는 이미지를 준비하시고 템플릿에 하나하나 넣어주시면 되겠습니다.

먼저 본 디자인을 완성하기 위해서는10개의 이미지가 필요합니다.  레이아웃의 영문 텍스트에 사용된 폰트는 네이버에서 무료로 배포하는 '나눔명조' 폰트와 '나눔고딕'폰트입니다.

위 폰트가 컴퓨터에 설치되어 있지 않을 경우 네이버 검색창에서 위 폰트 이름을 키워드로 하여 검색 후 다운로드 하시면 됩니다.
(물론 여러분께서 좋아하시는 다른 폰트를 이용하여 편집하셔도 되며, 유료로 구입하신 폰트가 아니라면 반드시 개인적, 상업적용도로 무료인 폰트를 사용하셔야 추후 폰트판매업체와 법적문제가 발생하지 않습니다)

이미지 10개가 준비가 되었다면 바로 하단의 압축파일을 다운로드 합니다.

웹용_상세페이지_인트로_템플릿002.zip

참고로 첨부파일에는 이미지나 폰트가 포함되어 있지 않고 레이아웃파일(PSD파일)과 이미지 삽입용 포토샵액션파일(atn파일)만 첨부되어 있습니다.

먼저 포토샵을 열고 다운로드 받은 '웹용_상세페이지_인트로_템플릿002'를 불러들입니다.
총 10개의 포토영역이 숫자로 표시되어 있고, 레이어 패널에 각각의 포토영역이 레이어로 잘 정리되어 있습니다.
템플릿 안의 문자들은 'text'폴더로 그룹화하여 넣어 두었습니다.

포토샵 상단 메뉴의  Window->Actions [Alt+F9] 메뉴를 클릭하면 아래 이미지처럼 액션패널(Actions)이 나타납니다.

액션패널의 우측 상단 모서리부분(가로줄4개있는부분) 마우스로 클릭하여 나타나는 팝업메뉴에서 'Load Actions'를 클릭합니다.

압축파일에 포함되어 있던 placephotoaction.atn 파일이 저장된 곳으로 가서 해당액션파일 선택 후 포토샵으로 불러옵니다.
atn파일 선택후 'Load'클릭.

액션 패널에 placephotoaction 이라는 새로운 포토샵액션이 추가되었음을 확인할 수 있습니다.

이제 본젹적으로 포토샵의 레이아웃 템플릿내의 숫자로 표기된 각각의 포토영역에 이미지를 넣는 연습을 해 보겠습니다.

먼저 레이어 패널(Layers) 에 있는 '1**********image' 레이어를 클릭하여 선택한 후, 액션패널(Actions)의  placephotoaction~ 액션 제목 바로 아래의 'place image'를 선택하고, 하단의 ▶ 버튼(액션실행버튼)을 클릭합니다.

액션실행버튼 클릭시 사전에 포토샵액션에 저장된 순서대로 명령이 실행되는데, 자동으로 사진을 추가하기 위해 열기 창이 뜨며 템플릿에 적용하고자 하는 첫번째 사진을 선택하여 'place'를 클릭후 포토샵의 템플릿 안으로 불러옵니다.

첫번째 1번 포토영역에 넣을 사진을 포토샵으로 불러오면 위이미지와 같이 우측 레이어창에 '포토1'이라는 클리핑 마스크가 적용된 새로운 레이어가 생기며 템플릿에 이미지가 선택된 상태로 있습니다.
위 화면을 보면 이미지의 대부분이 잘려서 보이는데요, 그 이유는 불러들인 이미지의 대부분이 1번 포토영역 밖에 있기 때문이며, 아래 이미지처럼 마우스로 선택된 이미지를 드래그(이동)하여 1번 포토영역으로 이동합니다.

이미지를 1번 포토영역으로 이동시킨 후 이미지 끝 부분 꼭지점 포인트를 오른 손으로 마우스로 클릭한 상태에서(클릭한 손을 떼면 안됨) 동시에 왼손으로 Alt +Shift 를 선택하여(역시 손을 떼면 안됨) 마우스를 안쪽으로 이동하면서 이미지의 사이즈를 1번 포토영역 사이즈에 맞게 적당히 축소시켜 줍니다. (사진을 축소시킬 때 Alt+shift 를 같이 누르는 이유는 사진을 동일한 비율로 축소시키기 위함입니다.). 

그런다음 'Enter'키를 쳐서 첫번째 이미지 넣기 작업을 완료합니다. 

1번이미지가 1번 포토영역에 잘 추가가 되었다면 이제 2번 포토영역에 앞의 과정과 똑같은 방식으로 레이어 창의 '2********image' 레이어를 선택하고 액션창에서 place 부분 선택후 포토샵액션 실행버튼 ▶을 클릭합니다. 

여기서는 생략하였지만, 1번 이미지 넣을 때와 같이 액션버튼 실행후 사진을 불러들이는 창이 뜨며 2번사진을 불러들이면 위와 같이 되는데요, 역시 마우스를 한쪽꼭지점을 클릭한 상태에서(손가락을 마우스에서 놓으면 안됨) 왼손으로 Alt+shift)를 클릭후 우측의 마우스를 이미지 안쪽으로 움직여 동일한 비율로 이미지 축소 후 2번 사진 영역으로 이미지를 드래그 하여 이동시킵니다.

2번 사진영역으로 이미지가 적당한 크기로 잘 축소되었음을 확인하고, 마지막으로 'Enter'키를 누르면 2번 이미지 추가 완성!

나머지 3번포토 부터 10번포토까지 모두 앞의 과정과 동일한 방법대로 여러분께서 미리 준비한 이미지를 순서대로 추가하면 위와 비슷한 효과가 나타나게 됩니다. 어때요~ 참 쉽고 편리하죠?

이번에는 템플릿 안의 텍스트를 수정하는 방법에 대해 알려드릴께요.  레이어 패널에 보시면 'text'라는 그룹(폴더)가 있는데요, 그 폴더아이콘 왼쪽의 V 를 마우스로 클릭하면 그룹내의 각각의 텍스트가 위 이미지처럼 펼쳐지는데, 수정을 원하시는 문구를 선택후 좌측 툴바의 'T' 선택하고 수정하고자 하는 문구위에 마우스를 클릭하여 선택하면 텍스트를 수정할 수 있게 됩니다.

설명이 길었지만, 여러분께서 사진 10장만 있으면 정말 순식간에 작업할 수 있도록 제작된 템플릿과 포토샵액션파일입니다.

본 템플릿은 솔트파파가 직접 제작한 것이며  개인의 디자인 작업이나 회사의 웹 카탈로그 혹은 상세페이지의 인트로 또는 컨셉페이지작업시 자유롭게 사용하시면 되겠습니다.

단 본 템플릿 파일 자체를 여러분의 블로그나 카페에 업로드 하는 행위는 엄격히 금하오니 양해바랍니다.

자료가 마음에 드신다면 공감버튼 클릭 + 댓글 부탁드립니다~