온라인쇼핑몰을 운영할 때 필요한 내공(?)을 쌓기 위해 포스팅하는 위대한쇼맨 강쉐프입니다.
지난 시간 동안은 HTML에 대해 알아보았고, 살짝 지루함을 피해가기 위해 오늘부터는 기초 포토샵 연재로 방향을 바꿨습니다.
어도비사의 포토샵 프로그램을 이용해 쇼핑몰 상품이미지 제작하는 방법을 소개해 드리려 합니다. 시작합니다.
예시로 많이 하시는 쿠팡과 스마트스토어 중심으로 설명하도록 하겠습니다.
포토샵, 초보에게 너무 어려운 거 아닙니까?
포토샵을 알면, 모든 인터넷 비즈니스에 날개를 달수 있습니다.
디자이너들의 필수 프로그램, 어도비 포토샵. 물론 따로 제가 어도비사로 부터 금품을 제공받아 이 포스팅을 하는건 아닙니다. 일체의 어떤 보상도 받지 않았습니다. 그 정도의 실력도 안되고, 기본적인 것만 여러분에게 알려줄 정도의 실력입니다. 초보분들에게는 다소 어려울 수도 있고, 나름 고가의 프로그램이다 보니 쉽게 접근할수 없을껍니다. 현재는 구독형으로 변경되어 월 사용료를 지불하셔야 하는 플랜으로 바뀌었습니다. 1주일의 무료 사용기간이 있으시니 체험용으로 사용가능합니다.
준비물 : 포토샵 프로그램. 버전상관없음
어도비 공식 웹사이트를 통해서 7일 무료체험 버전을 사용하실 수 있습니다.
쿠팡과 네이버 스마트스토어에 상품이미지 등록
#1. 쿠팡 상품이미지 등록하기(쿠팡wing)
쿠팡쇼핑몰 관리자 페이지인 쿠팡wing에 접속을 합니다.
상품관리 > 상품등록 화면으로 이동합니다.
스크롤을 내려서 중간쯤에 상품이미지라는 메뉴가 있습니다.
상품이미지는 PC와 모바일에 노출되는 '대표이미지'와 '기타이미지' 2가지로 나뉩니다.
모바일에서도 이용 가능하며, 화면 구성 등이 다르게 보일 수 있습니다.
대표이미지
1. 대표이미지는 '필수' 등록 항목이며, 1장을 등록할 수 있습니다. 다수 옵션의 대표이미지가 동일한 경우 기본등록을 선택하면 됩니다.
2. [+] 버튼으로 파일을 직접 선택하거나 이미지 URL 주소로 등록 버튼을 통해 등록할 수 있습니다.
3. 500픽셀 이상의 이미지는 업로드 후에 이미지 편집 기능으로 사이즈를 조정할 수 있습니다.
4. 다수 옵션의 대표이미지가 서로 다른 경우, 옵션별 등록을 선택하여 대표이미지를 등록합니다.
5. 옵션별로 일괄 등록이 필요한 경우 체크박스를 통해 옵션을 선택하고, 대표이미지 일괄등록 버튼을 눌러 이미지를 선택하면 일괄 적용 됩니다.
쿠팡의 경우 상품이미지는 1000픽셀 x 1000픽셀 사이즈를 권장합니다. (최소 500픽셀 이상이어야 합니다. 용량은 10Mb이하이며, JPG나 PNG 파일형태로 등록이 가능합니다.
기타이미지는 최대 9장까지 등록할 수 있습니다.
기타이미지는 대표이미지 왼쪽(PC), 혹은 대표이미지와 함께 롤링되는 방식(모바일)으로 노출됩니다.
여러 옵션에 동일하게 적용할 경우 체크박스를 통해 옵션을 선택하고 추가이미지 일괄등록 버튼을 눌러 이미지를 선택하면 일괄 적용됩니다.
이미지 URL 주소로 일괄 등록도 가능합니다.
등록한 이미지 순서를 변경하고 싶다면, 이미지를 선택해 원하는 곳에 놓으면 됩니다. (드래그&드롭)
500픽셀 이상의 이미지는 업로드 후에 이미지 편집 기능으로 사이즈를 조정할 수 있습니다. 일괄등록 버튼을 눌러 이미지를 선택하면 일괄 적용 됩니다.
#2. 네이버 상품이미지 등록하기(네이버 스마트스토어센터)
네이버는 최소사이즈가 300픽셀이상입니다. 권장사이즈는 1000픽셀로 쿠팡과 같습니다. 쿠팡과 네이버 동일하게 확대 기능이 제공됩니다. 네이버는 쿠팡과 다르게 1분이하의 동영상을 입력할 수 있게 했네요~ 스마트스토어도 추가이미지 9개까지 등록 가능합니다.
본격적으로, 저희는 포토샵을 이용해 1000픽셀 x 1000픽셀의 상품이미지를 제작해 보겠습니다.
1000픽셀 x 1000픽셀 상품이미지 만들기
포토샵은 여러 버전이 있습니다. 하위버전이나 최신 버전이나 기능의 차이일뿐 기본적인 사용방법은 비숫합니다. 좀더 편의적으로 많이 발전했으며, AI기술의 발전으로 포토샵도 더더더 진화하고 있습니다.
버전마다 좀 다르다는 것을 감안하고 따라오시면 될듯합니다. 한글판, 영문판에 따라서도 용어나 메뉴가 다를 수 있습니다.
일단 화장품 카테고리에 있는 제품들을 판매한다고 가정하고 상품이미지를 만들어 보겠습니다.
고해상도 핸드폰이나 디지털카메라로 찍은 사진이라면 사이즈나 색상을 보정해야 합니다. 기본적으로 여기서는 사이즈를 중심으로 설명하겠습니다. 1000픽셀로 제작을 해서 리사이즈를 통해서 500사이즈이든, 700사이즈든 변형을 하시면 됩니다. 하지만 처음부터 작은 사이즈로 작업을 하게 되면 사이즈를 키웠을때 이미지가 깨질 수 있습니다. 그래서 처음부터 1000사이즈로 제작을 하면 두루두루 무난하게 여러곳에 사용하기 편리합니다.
포토샵을 실행했습니다. 까만 화면에 복잡한 메뉴들이 가득가득하죠? 뭐가 뭔지 알수가 없네요? 초보자를 위한 포스팅이니... 눈감고도 하시는 고수님들은~ 살짝 다른곳으로... 전문 포토샵 강의가 아니고 온라인쇼핑몰에 특화해서 필요한 부분만 설명하겠습니다. 지금하려는것은 1000픽셀 x 1000픽셀 상품이미지 제작입니다.
상단 메뉴 > 파일 > 새로만들기(N) Ctrl+N 이라는 메뉴를 선택하세요. 포토샵이 익숙해 지면은 앞에 보이는 컨트롤+N을 눌러 빠르게 실행할 수 있습니다. 마우스 보다는 키보드가 작업이 빠르니까요. 오른쪽에 있는 컨트롤키, 알트키, 쉬프트키와 영문을 조합하는 단축키를 볼수 있습니다. 이러한 단축키만 모아 놓은 곳도 있으니 참고하시기 바랍니다.
검색엔진(구글, 네이버, 다음)에서 '자주쓰는 포토샵 단축키'로 검색하시면 유용한 자료들이 많이 검색됩니다. 같은 작업을 시간을 단축할수 있다면 효율이 좋아지니까요.
새로만들기 > 폭과 높이를 각각 1000픽셀로 적고 확인을 누릅니다. 해상도는 기본 72, 색상은 쇼핑몰용도니까 RGB색상으로 하시면 됩니다. 단위는 픽셀입니다. mm나 포인트 등으로 설정할 수도 있지만 픽셀로 많이 사용합니다.
1000픽셀 사이즈 정사각형이 만들어졌습니다. 작업하는 화면 크기는 66.7%라 100%로 설정하시려면 왼쪽의 돋보기를 사용하면 확대/축소가 가능합니다. 촬영한 이미지나 인터넷을 통해 가져온 이미지를 이 1000사이즈 캔버스에 가져와서 작업을 하면 됩니다.
상품이미지를 캔버스에 가져오거나 붙여넣기(ctrl+v) 할 수 있습니다. 샤넬 No.5를 캔버스 안에 집어 넣겠습니다.
파일 > 열기, 가져오기, 단축기를 이용한 붙여넣기, 편집 > 붙여넣기 등으로 집어 넣을 수 있습니다.
우측에 보면 레이어1이라고 있습니다. 사실 포토샵은 이 레이어 개념을 잘 이해 해야 합니다. 쉽게 설명해서 투명 유리판을 계속 위에 쌓아 가며 작업한다고 생각하면 좋습니다. 상품이미지를 불러 왔는데.. 사이즈가 1000사이즈에 비해 작거나 크면 사이즈 변형을 통해 크기를 바꿔 줄 수 있습니다.
이미지 크기를 자유롭게 변형하고자 편집>자유변형 (단축키 Ctrl+T)를 선택합니다.
선택된 이미지에 테두리에 포인트들이 생겼습니다. 마우스로 이 포인트 위치로 가서 조작해서 크기를 변경할 수 있습니다. 마우스 왼쪽 버튼을 누르고 움직이면 사이즈가 변경됩니다. 정비율로 크기를 변경하고자 할때는 alt키를 누르고 움직이면 됩니다.
쇼핑몰 마다 제작 가이드가 있기 때문에 가이드에 맞추어 제작해야 합니다.
파일 > 내보내기 > 웹용으로 저장을 하시면 되고, jpg 설정하시고(품질은 70정도가 적당합니다.) 저장하시면 됩니다.
그러면 원하는 1000사이즈의 상품 이미지가 만들어 졌습니다. 이미지는 색상보정 등의 과정을 거치는데.. 여기에서는 사이즈만 변경하도록 하겠습니다.
여기까지 쿠팡이나 네이버(다른 쇼핑몰도 비슷)에서 사용되는 대표이미지 1000픽셀 사이즈를 만들었습니다. 마지막으로 한가지 더 추가하면 이렇게 만든 사이즈를 500픽셀로 변경해 보도록 하겠습니다.
이미지 > 이미지 크기 메뉴를 선택합니다. 폭과 높이를 500으로 변경해 주면 됩니다.
기존의 1000픽셀 이미지를 500사이즈로 변경해서 다른이름으로 변경해서 사용하면 됩니다. 사이즈 변경시 화질이 좀 달라질 수 있습니다. 이러한 부분은 이미지 보정을 통해서 개선할 수 있습니다. 색상과 보정 부분은 기회가 되면 포스팅하겠습니다.
지금까지 온라인 쇼핑몰의 대표이미지 설정과 포토샵을 이용해 1000픽셀 크기의 상품이미지를 제작해 보았습니다. 참고로 요즘은 포토샵과 같은 프로그램을 이용하지 않고 미리캔버스 등과 같은 쉽고 직관적으로 제작이 가능한 사이트들을 많이 이용하고 있습니다. 제공되는 템플릿을 통해 쉽게 빠르게 퀄리티 높은 결과물을 만들어 낼 수 있습니다. 또한 AI를 이용해 더 쉽게 만들 수도 있습니다.
다음 연재는 상세페이지 제작이라는 포스팅으로 뵐게요~^^
'온라인쇼핑몰 이야기' 카테고리의 다른 글
| [연재 8편] 온라인쇼핑몰에 필요한 포토샵 기초 사용법 익히기 : 상세페이지 만들기2 (135) | 2024.01.03 |
|---|---|
| [연재 7편] 온라인쇼핑몰에 필요한 포토샵 기초 사용법 익히기 : 상세페이지 만들기1 (96) | 2023.12.30 |
| [연재 5편] 온라인쇼핑몰에 필요한 HTML 기초 사용법 익히기 : table태그 (99) | 2023.12.28 |
| [연재 4편] 온라인쇼핑몰에 필요한 HTML 기초 사용법 익히기 : a href태그 (151) | 2023.12.26 |
| [연재 3편] 온라인쇼핑몰에 필요한 HTML 기초 사용법 익히기 : img태그 (240) | 2023.12.23 |
