1장 쇼핑몰 디자인과 포토샵 Section 1 쇼핑몰 디자인을 왜 배워야 하나? ... 24 포토샵은 선택이 아니라 필수다 ... 26 컨셉에 맞는 디자인이 성공한다 ... 26 컨셉을 색으로 표현하라 ... 27 Section 2 포토샵과 쇼핑몰 ... 31 눈앞에서 본 듯한 사실적인 상품 사진 ... 31 시선을 끄는 움직이는 상품 사진 ... 31 옆에 서서 알려준 듯 꼼꼼한 상품 설명 ... 32 컨셉이 보이는 쇼핑몰 디자인 ... 32 2장 포토샵 기본기 확실히 다지기 Section 1 안녕하세요, 포토샵 CS2입니다 ... 36 [실습 01] 포토샵 CS2 설치하기 ... 36 [실습 02] 포토샵 CS2 실행하기 ... 39 [실습 03] 작업창 만들기, 이미지 열기와 저장하기 ... 40 Section 2 포토샵 화면구성 살펴보기 ... 42 Section 3 포토샵 툴 마음대로 다루기 ... 43 01. 선택, 이동, 자르기 툴 ... 44 선택 툴 ... 44 올가미 툴 ... 44 마술봉 툴 ... 46 이동 툴 ... 46 자르기 툴 ... 46 분할 툴 ... 46 [실습 01] 진주 귀걸이 내 맘대로 배치하기 ... 47 [실습 02] 긴 상세 페이지 가이드라인에 맞춰 자르기 ... 48 [실습 03] 이벤트 배너 내 마음대로 잘라두기 ... 53 02. 보정, 효과 툴 ... 55 도장 툴 ... 55 힐링 브러시 툴 ... 55 블러／샤픈／스머지 툴 ... 55 닷지／번／스펀지 툴 ... 55 지우개／배경 지우개／마술 지우개 툴 ... 55 [실습 01] 로고가 상품을 가릴 때, 쓱쓱싹싹 지우기 ... 56 [실습 02] 배경을 흐릿하게 하여 눈에 쏙 들어오는 상품 만들기 ... 57 [실습 03] 상품만 컬러링해서 상품으로 시선 모으기 ... 58 03. 그리기, 색칠하기 툴 ... 59 브러시 툴과 연필 툴 ... 59 페이트 통 툴과 그라디언트 툴 ... 59 [실습 01] 밑그림 대고 손 그림 그리기 ... 60 [실습 02] 회사 로고 브러시로 만들기 ... 64 [실습 03] 흰 배경이 밋밋하다면 깔끔한 배경색으로 마무리하기 ... 65 [실습 04] 부드러운 그라디언트 색으로 세련미 살리기 ... 66 04. 벡터 관련 툴 ... 67 문자 툴 ... 67 펜 툴 ... 67 기타 펜 툴과 패스 선택 툴 ... 70 쉐이프 툴 ... 70 [실습 01] 일러스트 이미지와 말풍선을 이용해서 이벤트 배너 만들기 ... 71 [실습 02] 글꼴 다운받아 다이모로 찍은 글자 효과내기 ... 74 [실습 03] 실루엣 따라 흐르는 상품 설명 만들기 ... 75 [실습 04] 반전 글자로 상품에 포인트 주기 ... 78 [실습 05] 펜 툴로 상품과 배경 분리해두기 ... 80 [실습 06] 실루엣 일러스트를 이용해서 심벌 만들기 ... 82 05. 스포이드 툴, 전경색／배경색, 손바닥 툴, 돋보기 툴, 메모 툴 ... 86 스포이드 툴, 전경색／배경색 ... 86 손바닥 툴, 돋보기 툴 ... 86 메모 툴 ... 86 표준 모드／퀵 마스크 모드 ... 86 화면보기(표준／전체보기／전체보기) ... 86 이미지레디 바로가기 ... 86 06. 이미지레디로 움직이는 배너 만들기 ... 87 애니메이션 팔레트 ... 87 최적화 팔레트 ... 88 [실습 01] 콩당콩당 하트가 뛰는 배너 이미지 만들기 ... 89 Section 4 포토샵 팔레트와 화면 정리하기 ... 94 포토샵 팔레트를 소개합니다 ... 94 내 맘대로 화면 정리하기 ... 96 Section 5 합성도 내 맘대로, 레이어 확실히 알기 ... 98 01. 레이어어와 레이어 팔레트 ... 98 02. 리에어 관리의 모든 것 ... 99 새 레이어 만들기 ... 99 레이어 복제하기 ... 100 레이어 순서 바꾸기 ... 100 레이어 이름 바꾸기 ... 101 레이어 여러 개 선택하기 ... 101 레이어 합치기 ... 101 레이어 그룹 짓기 ... 103 레이어 삭제하기 ... 103 03. 레이어 블랜딩 모드, 레이어 스타일, 레이어 마스크 ... 103 레이어 블랜딩 모드 ... 103 레이어 스타일 ... 106 [실습 01] 레이어 마스크를 이용해서 자연스럽게 합성하기 ... 112 3장 상품 사진 수정과 보정 Section 1 상품 사진 크기&모양 조절하기 ... 118 [실습 01] 필요 없는 배경은 싹둑 잘라내기 ... 119 [실습 02] 쇼핑몰에 맞춰 이미지 크기 조절하기 ... 120 [실습 03] 유리판에 세워둔 듯한 사진 만들기 ... 121 Section 2 상품 사진 색 보정과 수정하기 ... 126 [실습 01] 클릭 한 번으로 색상 보정하기 ... 127 [혼자해보기] Auto 메뉴를 이용해서 빠르게 색 보정하기 ... 127 [실습 02] 어두운 사진 밝게 보정하기 ... 128 [혼자해보기] 어두운 사진 밝게 보정하기 ... 129 [실습 03] 차가운 사진 따뜻하게 보정하기 ... 129 [실습 04] 명도와 대비를 이용해서 선명하게 보정하기 ... 131 [실습 05] 모던한 흑백 이미지 만들기 ... 133 Section 3 선명한 사진 만들기&모델 얼굴 가리기 ... 135 [실습 01] 초점이 맞지 않아 흐릿한 사진을 선명하게 보정하기 ... 136 [실습 02] 모델 얼굴만 뿌옇게 가리기 ... 138 Section 4 상품 사진 꾸미기와 테두리 만들기 ... 140 [실습 01] 액션으로 손쉽게 테두리 만들기 ... 141 [혼자해보기] 액션을 이용해서 다양한 테두리 만들기 ... 142 [실습 02] 깔끔한 테두리 만들기 ... 142 [혼자해보기] 상품 실루엣 따라 테두리 두르기 ... 143 [실습 03] 포토웍스를 이용해서 테두리 만들기 ... 144 [실습 04] 비네팅 효과로 분위기 있는 사진 만들기 ... 148 [실습 05] 패턴으로 상큼한 배경 만들기 ... 149 [혼자해보기] 레이어 블랜딩 모드를 이용해서 패턴 색상 더하기 ... 151 [실습 06] 꽃잎 브러시로 화사하게 사진 꾸미기 ... 152 4장 상품 목록 이미지&상품 상세 이미지 디자인 Section 1 눈길을 사로잡는 상품 목록 이미지 디자인 ... 156 눈에 띄는 상품 목록 이미지 ... 157 [Real Design 01] 명시성이 높은 색과 글자를 이용해서 상품 목록 이미지 만들기 ... 159 [Real Design 02] 패턴을 이용해서 시선을 모으는 상품 목록 이미지 만들기 ... 163 [Real Design 03] 테두리에 카피를 둘러 시선을 모으는 상품 목록 이미지 만들기 ... 169 [Real Design 04] 이미지가 차례로 바뀌는 GIF 애니메이션 상품 목록 이미지 만들기 ... 171 Section 2 구매를 결정짓는 상품 상세 이미지 디자인 ... 176 상품 상세 페이지 디자인 경향 ... 176 상품 상세 페이지 구성 요소 배치 ... 177 상품 상세 페이지 색상 배합 요령 ... 178 [Real Design 01] 원근감이 살아나는 화사한 상품 상세 이미지 만들기 ... 179 [Real Design 02] 백화점 갤러리가 연상되는 고급스러운 상품 상세 이미지 만들기 ... 190 [Real Design 03] 깔끔하게 정리해서 한눈에 들어오는 상품 상세 이미지 만들기 ... 204 [Real Design 04] 손 그림과 파스텔 색으로 아기자기한 상품 상세 이미지 만들기 ... 225 [Real Design 05] 깔끔한 영자 신문 스타일 상품 상세 이미지 만들기 ... 232 5장 실전, 쇼핑몰 요소 디자인 Section 1 쇼핑몰 상세 요소 디자인 ... 246 쇼핑몰 상세 요소 디자인 원칙 ... 247 Section 2 쇼핑몰 컨셉을 담은 로고 디자인 ... 248 [Real Design 01] 베벨&엠보스 효과로 고급스러운 엔틱 로고 만들기 ... 250 [혼자해보기] 바닥에서 돌출된 듯한 크리스탈 로고 만들기 ... 253 [Real Design 02] 그라데이션 효과를 이용한 색이 변하는 로고 만들기 ... 254 [Real Design 03] 어두운 곳에서 돋보이는 네온사인 효과 로고 만들기 ... 257 [Real Design 04] 라인으로 만든 텍스트 문자 로고 만들기 ... 262 [Real Design 05] 겨울맞이 눈 쌓인 로고 만들기 ... 265 [Real Design 06] 엔틱한 분위기, 거울 속 볼록 로고 만들기 ... 269 [Real Design 07] 손을 꼼지락 거리게 만드는 종이를 뚫은 로고 만들기 ... 277 [Real Design 08] 문자별로 레이어를 분리하여 겹친 로고 만들기 ... 280 Section 3 쇼핑몰의 얼굴, 메인 이미지 디자인 ... 283 좋은 인상으로 다시 찾게 만드는 이미지 광고형 메인 이미지 ... 283 매출에 바로 영향을 주는 대표 상품 진열형 메인 이미지 ... 284 하나 살 거 둘 사게 만드는 이벤트 홍보형 메인 이미지 ... 285 [Real Design 01] 모델을 부각시킨 이미지 광고형 메인 이미지 만들기 ... 286 [Real Design 02] 매출을 올려주는 대표 상품 진열형 메인 이미지 만들기 ... 294 [Real Design 03] 이벤트를 확실히 알려주는 메인 이미지 만들기 ... 302 Section 4 매출을 올려주는 아이콘 디자인 ... 310 매출을 올려주는 아이콘 사용법 ... 311 [Real Design 01] 아쿠아 말풍선 아이콘 만들기 ... 312 [Real Design 02] 톡톡 튀는 공짜 아이콘 만들기 ... 315 [혼자해보기] 튀어나올 듯한 눈 아이콘 만들기 ... 319 [Real Design 03] 픽셀을 이용한 품절 임박 아이콘 만들기 ... 320 [Real Design 04] 픽셀에 움직임을 더한 깜찍한 캐릭터 아이콘 만들기 ... 323 Section 5 쇼핑몰 속의 작은 광고판 배너 디자인 ... 331 [Real Design 01] 상품 홍보를 위한 이벤트 배너 만들기 ... 332 [Real Design 02] 텍스트와 이미지를 조화시킨 사이트 홍보 배너 만들기 ... 338 [Real Design 03] 주소창에 "~만" 치세요 GIF 애니메이션 배너 만들기 ... 343 [Real Design 04] 싸이월드 로고를 이용해서 배너 만들기 ... 352 [Real Design 05] 텍스트를 이용해서 깔끔하고 세련된 메뉴 역할 배너 만들기 ... 356 Section 6 효과적이나 남발하지 말아야 할 팝업 디자인 ... 359 쇼핑몰 이미지 제고를 위한 팝업창 ... 360 할인이나 파격적인 행사를 알리는 이벤트 팝업창 ... 360 공지사항을 전하는 팝업창 ... 360 [Real Design 01] 땡땡이 배경과 찢어진 연습장 느낌의 팝업 이미지 만들기 ... 361 [Real Design 02] 실로 꿰맨 느낌이 나는 팝업 이미지 만들기 ... 368 [Real Design 03] 종이를 접어 놓은 느낌이 나는 팝업 이미지 만들기 ... 373 6장 실전, 쇼핑몰 디자인 프로젝트 Section 1 진주 전문 쇼핑몰 Pearl Stone 디자인 ... 378 01. 기획 단계 ... 379 1. 고객(쇼핑몰 운영자)요청 듣기 ... 379 2. 경쟁사&트렌드 벤치마킹 ... 381 3. 컨셉 회의 ... 382 4. 디자인 기획서 제작 ... 385 02. 디자인 단계 ... 386 1. 가이드라인 작업하기 ... 386 2. 레이아웃 작업하기 ... 387 3. 카데고리 메뉴 디자인하기 ... 388 4. 로고 디자인하기 ... 395 5. 보조 메뉴 디자인하기 ... 398 6. 공지사항과 검색창 디자인하기 ... 403 7. 왼쪽 메뉴 디자인하기 ... 407 8. 배너 디자인하기 ... 410 9. 메인 이미지 디자인하기 ... 413 10. 상품 진열 디자인하기 ... 420 03. 디자인 수정 작업과 오픈 작업 ... 430 1. 완성 이미지를 분할 툴로 자르기 ... 430 2. 드림위버 작업하기(HTML 코딩) ... 433 3. 솔루션에 이미지 올리고 HTML 적용하기 ... 443 4. 솔루션별 링크 설정 방법 ... 447 Section 2 댄디한 남성 캐주얼 Style Impact 오픈마켓 디자인 ... 454 01. 기획 단계 ... 454 1. 고객 상담 ... 454 2. 컨셉 결정 ... 454 3. 페이지 구성 ... 455 02. 디자인 단계 ... 456 1. 작업할 사이즈 정하기 ... 456 2. 회사소개 이미지 디자인하기 ... 458 3. 대표상품 나열 이미지 만들기 ... 465 4. 개별 상품 상세 이미지 진열하기 ... 470 5. 좋은 상품평으로 강조 효과내기 ... 477 6. 사이즈표와 배송 안내 내용 넣기 ... 480 7. 완성 이미지 분할하고 저장하기 ... 482 03. 드림위버로 하는 코딩 작업 ... 484 1. 표 편집하기와 내용 배치하기 ... 484 2. 대표 상품에 링크 설정하기 ... 487 04. 이미지 호스팅 받기 ... 491 05. 오픈마켓에 등록하기 ... 492