웹 카탈로그 또는 쇼핑몰 상세페이지를 디자인할때 부분 레이아웃 또는 인트로 디자인으로 사용할 수 있는 PSD파일로 된 템플릿을 제작하여 공유합니다.
공유하는 목적은 외주 디자인 의뢰비용이 부담스러운 쇼핑몰 운영자들께서 저희가 배포하는 무료 자료를 이용하여 빠른 시간내에 상세페이지 또는 웹카탈로그를 제작할 수 있도록 하기 위함입니다.
레이아웃 템플릿(PSD)파일과 포토샵액션 파일을 이용하여 1분도 안되는 짧은 시간내에 부분 디자인을 완성할 수 있도록 제작되었으며, 저도 레이아웃을 공부하고 있는 과정이므로, 당분간은 부분디자인을 위주로 포스팅하고 어느정도 자료가 축적되면 상품별 카테고리별로 특색있는 상세페이지 전체디자인 템플릿을 완성하여 공유하는것이 올해 계획입니다.
먼저 본 디자인을 완성하기 위해서는 8개의 이미지가 필요합니다. 레이아웃의 영문 텍스트에 사용된 폰트는 네이버에서 무료로 배포하는 '나눔명조' 폰트입니다.
만약에 여러분의 컴퓨터에 '나눔명조'폰트가 없다면, 아래의 링크를 클릭하여 다운로드 하여 복사 후윈도우 font폴더에 붙여넣기 하시고, 여러분께서 원하시는 다른 폰트를 사용하셔서 레이아웃 내의 영문텍스트를 수정하셔도 됩니다.
아래의 첨부파일을 다운로드 합니다.
쇼핑몰_상세페이지레이아웃001_웹용_saltpapa.blog.me.zip
첨부파일에는 이미지나 폰트가 포함되어 있지 않고 레이아웃파일과 이미지 삽입용 포토샵액션파일만 첨부되어 있으니 참고바랍니다.
포토샵으로 불러옵니다. 위 이미지는 psd파일을 포토샵으로 불러온 이미지 이며 우측에 각각의 사진을 삽입하게 될 각각의 포토영역을 구분하기 쉽도록 숫자로 표시되어 있는 것을 볼 수 있습니다.
포토샵 상단 메뉴에서 Window-> Actions [alt+F9]를 클릭하면 아래의 이미지와 같이 액션actions 패널이 나타납니다.
액션패널의 우측 상단 모서리부분(가로줄4개있는부분) 마우스로 클릭하여 나타나는 팝업메뉴에서 'Load Actions'를 클릭합니다.
압축파일에 포함되어 있던 placephotoaction.atn 파일이 저장된 곳을 찾아서 선택 후 포토샵으로 불러옵니다.atn파일 선택후 'Load'클릭.
이제 액션패널에 placephotoaction~ 의 새로운 액션이 추가되었음을 확인할 수 있습니다.
PSD템플릿과 액션파일 사용준비가 완료되었으므로 이제 템플릿에 이미지를 넣는 연습을 해 보겠습니다.
먼저 레이어 패널(Layers) 에 있는 '1**********image' 레이어를 클릭하여 선택한 후, 액션패널(Actions)의 placephotoaction~ 액션 제목 바로 아래의 'place image'를 선택하고, 하단의 ▶ 버튼(액션실행버튼)을 클릭합니다.
액션실행버튼을 클릭하면 자동으로 사진을 추가하기 위해 열기 창이 뜨며 템플릿에 적용하고자 하는 첫번째 사진을 선택하여 'place'를 클릭후 포토샵의 템플릿 안으로 불러옵니다.
경우에 따라서 위 이미지처럼 이미지가 나타나지 않을 수 있는데, 그 이유는 불러들인 이미지가 1번 포토영역 밖에 있기 때문이며, 아래 이미지처럼 마우스로 선택된 이미지를 드래그(이동)하여 1번 포토영역으로 이동합니다.
이미지를 1번 포토영역으로 이동시킨 후 이미지 끝 부분 꼭지점 포인트를 오른 손으로 마우스로 클릭한 상태에서(클릭한 손을 떼면 안됨) 동시에 왼손으로 Alt +Shift 를 선택하여(역시 손을 떼면 안됨) 마우스를 안쪽으로 이동하면서 이미지의 사이즈를 1번 포토영역 사이즈에 맞게 적당히 축소시켜 줍니다. (사진을 축소시킬 때 Alt+shift 를 같이 누르는 이유는 사진을 동일한 비율로 축소시키기 위함입니다.). 그런다음 'Enter'키를 쳐서 첫번째 이미지 넣기 작업을 완료합니다.
1번 이미지를 추가할 때와 마찬가지 방법으로 레이어패널에서 ' 2**********image' 레이어를 클릭하고, 액션패널에서 똑같은 방법으로 'place image'를 선택후 아래 액션 실행버튼 ▶ 을 클릭합니다.
템플릿의 2번포토영역에 들어갈 사진을 선택한 후 'place' 클릭 후 템플릿으로 불러들입니다.
나머지 3번, 4번, 5번, 6번,7번,8번 이미지도 앞의 2개의 이미지를 템플릿 안에 추가할 때와 동일한 방법을 이용하여
각각의 이미지를 템플릿 안에 넣어줍니다.
이제 위 이미지처럼 8개의 이미지가 모두 추가 되었습니다.
설명이 길었지만 8개의 이미지만 미리 준비되어 있다면 1분도 채 걸리지 않는 작업입니다^^.
작업의 시간을 절약하기 위해 포토샵 액션을 사용하였는데 아무쪼록 유용하게 사용하셨으면 좋겠네요.
본 템플릿은 제가 직접 만든것으로 개인이나 회사의 쇼핑몰 이미지 편집시 자유롭게 사용하시면 되겠습니다.
단 본 템플릿 파일 자체를 여러분의 블로그나 카페에 업로드 하는 행위는 엄격히 금하오니 양해바랍니다.
자료가 마음에 드신다면 공감버튼 클릭 + 댓글 부탁드립니다~
'디자인트렌드및자료실 > 상세페이지디자인' 카테고리의 다른 글
| [레이아웃 디자인 템플릿] 웹용 상세페이지 부분 레이아웃 템플릿002,웹 카탈로그 표지 레이아웃, 상세이미지 인트로 디자인 소스(PSD파일+포토샵액션) (2) | 2018.10.03 |
|---|---|
| [상세페이지 템플릿] 쇼핑몰 상세페이지 인트로 디자인 템플릿 No.3 (PSD파일+포토샵액션) (1) | 2018.10.03 |
| 잡지 레이아웃 참고스크랩- 중괄호디자인 참고자료 (0) | 2018.10.03 |
