쇼핑몰 포토샵 레이아웃

작가정보
저자 김현미는
현) 프리랜서 웹디자이너
쇼핑몰 상품 페이지 디자인 BY 포토샵(성안당) 저서
2001년 ‘nalaree’ 쇼핑몰 오픈
백하우스 쇼핑몰 매니저
Shosemall 웹디자이너
Coolhani 온라인 기획전 매니저
저자(글) 네모기획
목차
- Stylish 01 성공하기 위한 쇼핑몰의 시작
GOGO >>> 01 쇼핑몰을 시작하기 전에
1. 쇼핑몰 기획하기
판매 아이템 결정하기
타깃 설정하기
디자인 컨셉 잡기
2. 디자인 컨셉을 위한 벤치마킹하기
벤치마킹하기 좋은 사이트
3. 디자인 세부사항 정리하기
로고
레이아웃
컬러 및 서체
참고 웹사이트
4. 사이트 디자인하기
업체에 맡겨 웹 작업을 할 경우
개인이 직접 웹 작업을 할 경우
GOGO >>> 02 사이트의 인상을 결정하는 레이아웃
1. 웹 레이아웃
2. 사이트 레이아웃의 종류
좌측 정렬 레이아웃
중앙 수평 정렬 레이아웃
중앙 수평 수직 정렬 레이아웃
화면 전체 정렬 레이아웃
3. 상품에 따른 상세 페이지 레이아웃
패션의류 및 잡화
전자제품 및 기능성 제품
식품
인테리어 관련 제품
GOGO >>> 03 구매를 결정하는 컬러 디자인
1. 컬러에 따라 느끼는 이미지 알아보기
귀여운 느낌의 컬러
다이내믹한 느낌의 컬러
내추럴한 느낌의 컬러
우아한 느낌의 컬러
고풍스러운 느낌의 클래식한 컬러
모던한 느낌의 컬러
화려한 느낌의 컬러
2. 성공한 컬러 마케팅 사례 알아보기
사랑스럽고 귀여운 여성의 컬러-Pink
심플하고 고급스러운 남성의 컬러-Black
경쾌하고 신나는 컬러-Yellow
정열적이고 에너지 넘치는 컬러-Red
엔티크하고 자연에 가까운 컬러-Brown
자유롭고 상쾌한 컬러-Blue
자연의 푸르름을 가진 컬러-Green
신비롭고 비밀스러운 컬러-Purple
3. 적절한 컬러를 쇼핑몰에 적용한 사례 알아보기
Pink 컬러 적용 사례
Black 컬러 적용 사례
Yellow 컬러 적용 사례
Red 컬러 적용 사례
Brown 컬러 적용 사례
Blue 컬러 적용 사례
Green 컬러 적용 사례
Purple 컬러 적용 사례
GOGO >>> 04 세상 모든 게 디자인 소스
1. 센스가 돋보이는 아이디어
작은 간판
메뉴판
모래 위의 낙서
나무 판넬
이 외의 아이템
2. 광고 속의 색다른 아이디어
유명 브랜드의 광고
일본 스트리트 브랜드의 광고
미국의 잡지 광고
다국적 기업의 잡지 광고
3. 폰트만으로도 완성되는 디자인
Vogue의 홈페이지
Tomoki Uematsu의 포트폴리오 표지
패션매거진 1AM의 화보
WORKSHOPDENIM의 화보
L’EDITO의 목록 부분
Stylish 02 쇼핑몰의 레이아웃을 완성하는 포토샵
GOGO >>> 01 웹용 파일 확장자
1. 상세 페이지의 기본, JPG
2. 움직이는 목록 이미지, GIF
3. 나만의 작업소스, PSD
4. 웹 기본 프로그래밍, HTML
5. 비트맵 파일과 벡터 파일
GOGO >>> 02 쇼핑몰 포토샵의 기본 메뉴 알아보기
1. 편리한 작업환경 만들기
2. 툴 박스 알아보기
3. 자주 쓰는 메뉴 살펴보기
File
Edit
Image
Layer
Select
Filter
View
Window
4. 패널 살펴보기
LAYERS 패널
PATHS 패널
ANIMATION 패널
CHARACTER 패널
HISTORY 패널
GOGO >>> 03 가장 많이 쓰이는 포토샵 효과
1. 그림을 그리는 Brush
2. 도형을 완성하는 Shape
3. 필터의 일인자 Sharpen
Sharpen
Sharpen Edges
Sharpen More
Smart Sharpen
UnSharp Mask
4. 이미지의 다양한 변형을 위한 Transform
GOGO >>> 04 상품 사진 리터칭
1. 이미지 리사이즈
Image Size
2. 불필요한 배경 잘라내기
Image Crop
Crop Tool
3. 잡티 제거하기
4. 흰 배경 만들기
5. 펜 툴 이용하기
6. 그림자 만들기
GOGO >>> 05 모델 사진 리터칭
1. 깨끗한 피부 만들기
상처 없애기
도자기 피부 만들기
2. 모델의 몸매 보정하기
3. 롱다리 만들기
Stylish 03 정보 전달의 필수 배너 디자인하기
GOGO >>> 01 빠르게 정보를 전달하는 공지사항
1. 간단한 디자인으로 완성되는 팝업 디자인
팝업이란?
팝업의 역할
디자인 시 주의사항
2. 배송지연 공지 배너
배경 그러데이션
그레이디언트 툴을 사용하는 경우
Layer Style을 사용하는 경우
다양한 컨셉을 적용한 예
3. 새해 인사 배너
‘복’ 강조하기
전통문양 만들기
다양한 컨셉을 적용한 예
4. 여름휴가 공지
바다 그리기
구름 그리기
다양한 컨셉을 적용한 예
5. 신상품 입고 공지
노트 만들기
모델의 그림자 만들기
다양한 컨셉을 적용한 예
GOGO >>> 02 눈을 사로잡는 이벤트 배너
1. 다양한 이벤트 배너 만들기
배너란?
배너의 역할
디자인 시 주의사항
2. 1+3 이벤트
복고 스티커 만들기
현수막 만들기
다양한 컨셉을 적용한 예
3. Day Day 이벤트
책장 넘기는 효과 만들기
큐빅이 박힌 글자 만들기
다양한 컨셉을 적용한 예
4. 크리스마스 세일 이벤트
크리스마스 카드 만들기
눈 내린 마을과 크리스마스 트리 만들기
다양한 컨셉을 적용한 예
5. 게릴라 세일 이벤트
입체감 있는 글자 만들기
다양한 컨셉을 적용한 예
6. 구매 금액별 사은 이벤트
폴라로이드 사진 만들기
다양한 컨셉을 적용한 예
Stylish 04 내가 만드는 상세 페이지
GOGO >>> 01 패션의류 디자인
1. 계절에 따라 어울리는 여성복 레이아웃 - 봄
메인 컷. 화려한 컬러의 글자 디자인
| Point 1 | 글자 디자인
이미지 컷. 글자를 이용한 다양한 디자인
| Point 1 | 글자로 꾸미는 이미지
사이즈 컷. 포스트 잇을 응용한 사이즈 컷
| Point 1 | 전신 모델 컷을 이용한 컬러감 있는 디자인
2. 계절에 따라 어울리는 여성복 레이아웃 - 여름
메인 컷. 심플한 폴라로이드와 원고용지의 느낌 활용하기
| Point 1 | 심플한 폴라로이드 만들기
| Point 2 | 원고용지의 느낌 만들기
| Point 3 | 클립 만들기
이미지 컷. 신나고 재미있게 그려보는 선
| Point 1 | 손으로 자유로운 그림 그리기
목록 컷. 클릭을 유도하는 목록 이미지
| Point 1 | 목록 경계선 만들기
| Point 2 | 클릭 돋보기 만들기
3. 계절에 따라 어울리는 여성복 레이아웃 - 가을
메인 컷. 화보처럼 강렬한 이미지 만들기
| Point 1 | 유리창에서 찍은 듯한 이미지 만들기
이미지 컷. 이미지 자체만으로 빛나게 만드는 페이지
| Point 1 | 얼굴만 밝게 만들기
| Point 2 | 빛바랜 느낌으로 분위기 있게 보정하기
| Point 3 | 채도로 느낌 있는 사진 만들기
목록 컷. 상세 이미지와 어울리는 목록 이미지 만들기
| Point 1 | 잡지를 펼친 것처럼 만들기
4. 계절에 따라 어울리는 여성복 레이아웃 - 겨울
메인 컷. 페이지 모양의 움직이는 메인 이미지
| Point 1 | 페이지 디자인
이미지 컷. 아기자기한 이미지의 배치와 포인트 주기
| Point 1 | 심플한 상세 이미지에 포인트 주기
사이즈 컷. 조명에서 시작하는 사이즈
| Point 1 | 불이 켜진 조명
5. 제품 컷만을 이용한 남성복 레이아웃
메인 컷. 심플한 메뉴 내비게이션 모양과 사이즈 표 만들기
| Point 1 | 쇼핑몰의 메뉴바 만들기
| Point 2 | 해외기준 사이즈 표 만들기
이미지 컷. 군더더기 없이 깔끔하게 상품 보여주기
| Point 1 | 중앙 정렬로 이미지 배치하기
목록 컷. 쇼핑몰의 상품을 목록처럼 보여주기
| Point 1 | 메인 이미지 활용하기
6. 브랜드의 컨셉을 살린 스포츠웨어 레이아웃
메인 컷. 브랜드의 이미지를 살린 메인 컷과 픽토그램
| Point 1 | 픽토그램으로 기능성 설명하기
이미지 컷. 상품에 충실하면서 포인트 주기
| Point 1 | 그룹을 이용한 상품 컷 정렬하기
디테일과 사이즈 컷. 익숙한 사이즈 표와 옅은 컬러로 공간 나누기
| Point 1 | 의류 일러스트와 사이즈 표 만들기
7. 상품 정보를 한눈에 볼 수 있는 유아복 레이아웃
메인 컷. 깔끔하게 배너처럼 설명하기
| Point 1 | 깔끔한 설명의 배너 만들기
| Point 2 | 깔끔한 빈티지 상품 설명 배너 만들기
이미지 컷. 상품을 최대한 귀엽게
| Point 1 | 패턴을 이용한 배경 만들기
| Point 2 | 크레파스 느낌의 구름으로 장식하기
사이즈 컷. 심플한 디테일과 사이즈 표 만들기
| Point 1 | 사이즈 표 만들기
GOGO >>> 02 패션잡화 디자인
1. 섹시하고 세련된 느낌의 여성 구두 레이아웃
메인 컷. 흑백 이미지와 포인트 컬러
| Point 1 | 마스크를 이용한 흑백 이미지 만들기
이미지 컷. 상품 컷, 이미지 컷, 디테일 컷을 깔끔하게 배열
| Point 1 | 과하지 않게 텍스트 활용하기
사이즈 컷. 그림자로 보다 분위기 있게 완성
| Point 1 | 그림자 만들기
2. 빈티지를 강조한 운동화 레이아웃
메인 컷. 옛 신문처럼 상품 설명하기
| Point 1 | 산뜻한 빈티지 타이틀 만들기
| Point 2 | 신문 만들기
이미지 컷. 빈티지한 사진 틀 활용하기
| Point 1 | 빈티지하게 더 빈티지하게
3. 다양한 컬러가 눈에 띄는 따스한 겨울 모자 레이아웃
메인 컷. 엽서의 느낌으로 만든 메인
| Point 1 | 글자 배경으로 문구 강조하기
| Point 2 | 밋밋한 문단에 줄긋기를 통하여 강조하기
모델 컷. 오리고 붙여 심플한 빈티지 모델 컷
| Point 1 | 찢어진 종이 효과
| Point 2 | 사진 꾸미기
상품 컷. 지그재그로 상품의 컬러 보여주기
| Point 1 | 나만의 브러시 만들기
디테일 컷. 빈티지 노트로 깔끔한 마무리
| Point 1 | 빈티지 색감의 종이 만들기
4. 깔끔하고 여성스러운 느낌의 머리띠 레이아웃
메인 컷. 오픈마켓에서 개인 쇼핑몰 메인처럼
| Point 1 | 베이지컬러의 투톤 하늘 만들기
| Point 2 | 코르크 바탕의 액자 만들기
제품 컷. 심플한 제품 컷 393
| Point 1 | 비행기 경계 라인 만들기
5. 화려한 액세서리를 더욱 눈에 띄게 하는 레이아웃
메인 컷. 화려함이 돋보이는 메인 이미지
| Point 1 | 화려한 액세서리로 보정하기
| Point 2 | 느낌이 있는 설명 페이지 만들기
분류 배너 컷. 깔끔한 분류 배너
| Point 1 | 주얼리 배너
상세 상품 컷. 실크와 2단 상품 목록
| Point 1 | 주얼리에 실크 배경 입히기
| Point 2 | 연결 고리로 목록 만들기
GOGO >>> 03 기타 잡화 디자인
1. 디테일을 잘 표현한 메이크업 박스 레이아웃
메인 컷. 별 비가 내리는 반짝이는 메인 이미지
| Point 1 | 별 비 내리는 모자이크 배경 만들기
이미지 컷. 정확한 상품의 모습과 간결한 설명
| Point 1 | 노트를 이용한 상품 설명하기
| Point 2 | 곡선라인으로 여성스러운 느낌 강조하기
디테일 사이즈 컷. 정확한 디테일과 심플한 사이즈 컷
| Point 1 | 라인 셰이프로 사이즈 표시하기
2. 제품의 포인트를 부각시킬 수 있는 패션 이어폰 레이아웃
메인 컷. 강렬한 물결 이미지
| Point 1 | 세로 선으로 물결 모양 만들기
| Point 2 | 블링블링 반짝이는 글자 만들기
이미지 컷. 은은하고 우아한 느낌의 배경
| Point 1 | 은은하고 우아한 느낌의 배경 만들기
스펙 컷. 지그재그 깔끔한 스펙 컷
| Point 1 | 반복되는 설명 라인 만들기
3. 신뢰도를 높이는 건강식품 선물 세트 레이아웃
메인 컷. 골드 배경의 고급스러운 메인
| Point 1 | 골드컬러를 이용한 고급스러움 강조하기
설명 컷. 관련 이미지와 마크로 믿음직스러운 설명 만들기
| Point 1 | 품질보증 마크 만들기
| Point 2 | 부드럽게 곡선으로 마무리하기
4. GIF 애니메이션을 이용한 인테리어 소품 레이아웃
메인 컷. 폰트만을 이용한 깔끔한 메인 컷
| Point 1 | 폰트로 꾸미기
이미지 컷. 다양한 느낌의 이미지 컷
| Point 1 | 화이트 배경의 깔끔한 이미지
| Point 2 | 빈티지하고 어두운 느낌의 이미지
| Point 3 | 초원 위의 자유롭고 상쾌한 이미지 만들기
마무리 컷. GIF 애니메이션으로 마무리하기
| Point 1 | 움직이는 애니메이션 이미지 만들기
5. 호감도를 높일 수 있는 다이어트 용품 레이아웃
메인 컷. 상큼함이 돋보이는 메인 이미지
| Point 1 | 물에 빠진 제품 표현하기
| Point 2 | 둥근 라인으로 집중력 높이기
이미지 설명 컷. 제품의 이해도를 높이는 설명 페이지
| Point 1 | 알록달록 이미지와 컬러를 이용한 감성 페이지
| Point 2 | 움직이는 것처럼 보이는 정지 이미지
디테일 컷. 포인트 점선 원과 픽토그램
| Point 1 | 포인트 점선 원
| Point 2 | 포인트 픽토그램 만들기
출판사 서평
매출을 잡기 위한 준비는 쇼핑몰 디자인에서부터 시작한다!
센스 있는 디자인과 성공한 쇼핑몰들의 노하우를 통해 간단한 사진 보정부터 쇼핑몰 상세 페이지 완성까지 쇼핑몰 디자인의 전체적인 흐름을 파악할 수 있도록 도와줍니다.
성공하기 위한 쇼핑몰을 시작하기 전에 고객의 눈을 사로잡을 수 있는 컬러부터 배너, 팝업, 상세 페이지 등을 단순하게 따라하는 것이 아니라 운영자 및 디자이너의 기획의도와 컨셉을 알 수 있도록 친절히 설명하였습니다. 무작정 따라할 것이 아니라 성공하는 쇼핑몰의 기획의도를 파악함으로써 자신의 쇼핑몰도 성공할 수 있도록 빠른 지름길을 알려줍니다.
컬러마케팅부터 포토샵까지, 제대로 배우는 쇼핑몰 디자인 전략!
현재 온라인 구매자들은 자신이 구매하고자 하는 상품을 쉽게 비교할 수 있는 시장이 구축되어 있습니다. 그래서 구매자들에게 상품이 더 좋고 더 예쁘게 보이도록 하기 위한 다양한 촬영방법, 깔끔한 이미지를 위한 포토샵 작업뿐 아니라 더 많은 지식과 정보를 필요로 합니다.
이 책은 최신 트렌드에 맞춰 다양한 사례를 보여줌으로써 쇼핑몰을 시작하려는 분이나 현재 쇼핑몰 업계에 종사하고 있는 분들에게 좋은 디자인을 볼 수 있는 눈과 센스 있는 감각을 키울 수 있도록 도와주는 지침서가 될 것입니다.
Design Box
Design Box 시리즈는 디자이너와 설계자에게 요구되는 실무 노하우를 가득 담은 선물 상자입니다. 초보자에게는 실전 업무에의 빠른 적응력을, 실무자에게는 업무 향상을 위한 전문성을 길러줌은 물론 똑똑한 멘토 역할을 해 줄 그래픽 전문 도서 시리즈입니다.
기본정보
ISBN | 9788956744780 |
---|---|
발행(출시)일자 | 2010년 10월 25일 |
쪽수 | 490쪽 |
크기 |
275 * 254
* 30
mm
/ 1532 g
|
총권수 | 1권 |
Klover 리뷰 (1)
구매 후 리뷰 작성 시, e교환권 200원 적립
사용자 총점
100%의 구매자가
집중돼요 라고 응답했어요
집중돼요
도움돼요
쉬웠어요
최고예요
추천해요
문장수집 (0)
e교환권은 적립 일로부터 180일 동안 사용 가능합니다. 리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 한 상품에 최초 1회만 제공됩니다.
주문취소/반품/절판/품절 시 리워드 대상에서 제외됩니다.
판매가 5,000원 미만 상품의 경우 리워드 지급 대상에서 제외됩니다. (2024년 9월 30일부터 적용)
구매 후 리뷰 작성 시, e교환권 100원 적립
-
반품/교환방법
* 오픈마켓, 해외배송 주문, 기프트 주문시 [1:1 상담>반품/교환/환불] 또는 고객센터 (1544-1900) -
반품/교환가능 기간
상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내 -
반품/교환비용
-
반품/교환 불가 사유
(단지 확인을 위한 포장 훼손은 제외)
2) 소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
예) 화장품, 식품, 가전제품(악세서리 포함) 등
3) 복제가 가능한 상품 등의 포장을 훼손한 경우
예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집
4) 소비자의 요청에 따라 개별적으로 주문 제작되는 상품의 경우 ((1)해외주문도서)
5) 디지털 컨텐츠인 ebook, 오디오북 등을 1회이상 ‘다운로드’를 받았거나 '바로보기'로 열람한 경우
6) 시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우
7) 전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에 해당되는 경우
8) 세트상품 일부만 반품 불가 (필요시 세트상품 반품 후 낱권 재구매)
9) 기타 반품 불가 품목 - 잡지, 테이프, 대학입시자료, 사진집, 방통대 교재, 교과서, 만화, 미디어전품목, 악보집, 정부간행물, 지도, 각종 수험서, 적성검사자료, 성경, 사전, 법령집, 지류, 필기구류, 시즌상품, 개봉한 상품 등 -
상품 품절
-
소비자 피해보상 환불 지연에 따른 배상
2) 대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의 소비자 보호에 관한 법률에 따라 처리함
상품 설명에 반품/교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다.)
기분 좋은 발견
이 분야의 베스트
이 분야의 신간
-
포토샵 판타지 아트 기본편+활용편10% 28,800 원
-
나 혼자 한다 포토샵 & 일러스트레이터 CC 202510% 26,100 원
-
맛있는 디자인 일러스트레이터 CC 202510% 24,300 원
-
CATIA V510% 35,550 원
-
브이레이 포 스케치업 feat 카오스 밴티지10% 37,800 원
도움이 됩니당ㅎㅎ