'포알못'도 하루 만에 만드는 '고퀄' 제품 상세페이지

쇼핑몰이나 오픈 마켓과 같이 온라인상에서 제품을 판매하려면 제품을 상세하게 설명해 주는 페이지가 필요합니다. 이번 아티클에서는 포토샵 초보자도 쉽게 따라 할 수 있는 고퀄 상세페이지 디자인을 배워봅시다.

Editor's Comment

본 콘텐츠는 2020년 3월에 발간된 <진짜 하루만에 끝내는 포토샵>의 본문 내용을 발췌하여 구성하였습니다.

[완성작 미리 보기]

 

메인 이미지 및 텍스트 만들기

1) 우선 포토샵을 켜고, 왼편의 새로 만들기(New) 버튼을 클릭합니다. 상단에 있는 '웹' 탭을 클릭한 다음, '웹용 대형(1920*1080px)'을 선택합니다. 지금은 상세페이지를 제작할 거라 오른쪽 설정 부분에서 세로 길이를 대략 1000으로 길게 설정하고, 아트보드(Artboard)의 체크 표시를 해제한 다음에 제작(Create) 버튼을 클릭합니다.

1) 포토샵 열어서 '새로 만들기' 클릭, 대지 사이즈 설정하기

 

2) 창이 닫히면 세로가 긴 사이즈의 캔버스가 만들어졌는지 확인합니다.

2) 캔버스 크기 확인하기

 

3) 일단 상단에 제품을 한눈에 보여주는 메인 이미지부터 만들어줄게요. 만들기에 앞서 Ctrl+'+' 단축키를 눌러서 캔버스를 확대합니다.

3) 단축키 캔버스 크기 확대하기

💡여기서 잠깐!

Ctrl+'+'는 캔버스 확대하기, Ctrl+'-'는 캔버스 축소하기, Ctrl+0은 화면 맞춤 단축키입니다. 빠르게 작업하려면 간단한 단축키는 기억해 주세요. 

 

4) 먼저 배경색부터 채워줄게요. 배경색을 바꾸려면, 오른쪽 레이어 패널의 '배경 레이어' 잠금 표시를 더블 클릭해서 풀어줘야 합니다.

4) 배경 레이어의 잠금 표시 풀기

 

5) 그다음, 오른쪽 색상 창에서 검은색을 지정하고 Alt+Backspace 단축키를 눌러서 배경색을 채워줍니다.

5) 검은색으로 배경색 채우기

 

6) 배경에 들어갈 꽃 이미지를 캔버스로 드래그해서 가져옵니다.

6) 캔버스에 이미지 드래그해서 불러오기

 

7) 이미지 크기와 위치를 조절한 다음 엔터키를 눌러서 고정합니다.

7) 이미지 크기 및 위치 조정하기