쇼핑몰 포토샵 & 레이아웃

목차 (Table of Contents)

• 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
• 포인트 픽토그램 만들기