쇼핑몰 포토샵 디자인

Part 1. 상품페이지에 대한 이해
Section 01 상품페이지의 유행 흐름과 포토샵의 중요성
1.품목별 상품페이지의 유행 동향
2.쇼핑몰 운영의 기본, 포토샵의 중요성

Section 02 포토샵의 기본화면 구성 이해
1.포토샵 CS5 시험버전 다운로드 및 설치하기
2.포토샵 CS5 화면 기본구성 및 각 패널에 대한 이해

Part 2. 상품페이지의 다양한 구성
1.사진의 사이즈를 다양하게 조절하여 블럭처럼 배치한 쥬얼리 상세페이지
2.Path 툴을 이용하여 필요한 부분만 잘라내어 그라데이션 배경에 자연스럽게 합성한 운동화 상세페이지
3.상품이미지를 가장자리가 둥근 라운드 사각형으로 표현한 여성구두 상세페이지
4.상품의 디테일 부분을 원형테두리 안에 표현한 식품(과일) 상세페이지

Part 3. 고급 보정기능을 활용한 상품페이지
Section 01 색상 보정하기
1.상품페이지에 넣을 여러 장의 사진 명암, 사이즈 조절을 Action 기능으로 한방에!
2.이미지의 특정 부분을 밝게 표현하고 스포트라이트를 비춘 듯한 효과를 나타낸 상세페이지
3.사진컬러를 흑백으로 바꾸고 상품만 컬러로 표현하여 포인트를 준 모던한 느낌의 상세페이지
4.사진의 색감과 명도, 채도를 조절하여 따뜻하고 빈티지한 느낌을 표현한 상세페이지

Section 02 고급 보정기능 활용
1.모델 얼굴의 잡티를 지우고, 제품의 떨어진 단추를 만들어낸 상세페이지
2.모델의 다리를 긴 다리로 표현하고 허리라인을 쏙 집어넣기
3.제품의 보이고 싶지 않은 부분을 흐릿하게 하거나 모자이크 처리한 상세페이지

Section 03 포토샵 CS5의 새로운 기능을 활용한 고급 보정
1.자연스럽게 이미지의 불필요한 부분을 제거하고, 특정 부분은 그대로 두고 나머지 부분을 늘린 상세페이지
2.모델의 머리카락까지 자연스럽게 추출하여 배경에 합성한 상세페이지
3.모델의 동작을 내 맘대로 변형한 상세페이지

Part 4. 따라하고 싶은 디자인 유형
Section 01 주목성을 높이는 타이포그래피를 활용한 상세페이지
1.잡지 표지처럼 글씨를 배치하고 자간과 행간을 조절하여 가독성을 높인 여성의류 상세페이지
2.Alias 설정으로 가늘고 깔끔한 폰트를 사용한 심플 의류 상세페이지(웹폰트 사용하기)
3.메인 글씨에 그라데이션과 바닥에 투영된 효과를 넣은 고급 가전제품 상세페이지
4.금속 느낌의 입체감 있는 글씨를 표현한 운동화 상세페이지
5.네온사인 느낌의 글씨를 표현한 전자제품 상세페이지
6.글씨 안에 아기자기한 패턴을 적용하고 테두리를 준 액세서리 상세페이지
7.포토샵 CS5의 3D 기능을 이용하여 입체문자로 포인트를 준 여성 언더웨어 상세페이지
8.물결 모양의 글씨로 재미있고 동적인 느낌을 준 식품 상세페이지

Section 02 아기자기한 손그림을 이용한 상세페이지
1.손그림을 이용하여 귀여운 상세페이지 꾸미기
2.손글씨와 손그림을 이용한 귀여운 배송 정보 이미지 만들기
3.손그림+점선, 화살표를 이용한 아기자기한 의류 사이즈표 만들기
4.GIF Animation을 이용하여 한 글자씩 위로 움직이는 생동감 있는 쇼핑몰 아이콘 만들기
5.GIF Animation을 이용하여 손그림이 깜빡이고 글씨가 순서대로 쓰이는 쇼핑몰 아이콘 만들기

Section 03 다양한 테두리를 적용하여 돋보이게 표현한 상세페이지
1.귀여운 도트무늬 테두리를 사용한 구두 상세페이지
2.점선테두리를 이용하여 앙증맞게 표현한 모자 상세페이지
3.폴라로이드 사진 모양의 테두리로 색다르게 표현한 화장품 기획전
4.배경이 비치는 투명박스 테두리로 심플하게 표현한 화장품 상세페이지

Section 04 자꾸만 보고 싶은 고급 상세페이지
1.과일에 물방울이 맺힌 효과를 준 프레쉬한 느낌의 식품 상세페이지
2.꽃(생화) 사진을 이용하여 은은하고 부드럽게 표현한 여성의류 상세페이지
3.연기 브러시를 이용하여 몽환적인 분위기를 연출한 전자제품 상세페이지
4.그라데이션 배경에 제품이 비치는 반투명 그림자 효과를 이용한 고급스러운 상세페이지
5.브러시를 이용하여 가장자리에 붓터치 효과를 준 전통식품 상세페이지
6.지정한 부분만 밝게 하고 모델의 얼굴만 확대하여 재미있게 표현한 선글라스 상세페이지

Part 5. 클릭하고 싶은 상세페이지
Section 01 알아두면 유용한 HTML
1.포토샵에서 작업한 파일을 링크가 걸린 HTML 파일로 만들기
2.마우스 오버 시 이미지가 바뀌고 클릭하면 새 창으로 뜨는 페이지로 링크를 건 HTML 소스
3.호스팅을 신청하고 웹에 이미지를 업로드하여 실제로 사용가능한 HTML 소스 만들기
4.만들어진 HTML 소스를 G마켓에 적용하기

Section 02 포토샵 애니메이션 타임라인으로 플래시 효과를 주자!
1.글씨 로고 위로 빛이 지나가는 효과를 준 배너 만들기
2.모델이미지가 서서히 나타나고 글씨 가장자리에 빛이 발광하는 배너 만들기
3.ANIMATION(TIMELINE)으로 만든 파일을 GIF 확장자 파일로 저장하기

Section 03 쇼핑몰 이벤트/기획전
1.다양한 상품을 한눈에 보여주는 기획전의 리본장식표현 : 많은 상품을 효과적으로 보여주기 위한 의류
2.자유로운 구성과 말풍선을 이용한 이벤트 페이지 : 10대~20대 젊은이들의 시선을 끌기 위한 여성의류
3.럭셔리 쇼핑몰 기획전 : 고급스러운 이미지를 부각시키기 위한 명품잡화
4.한지 느낌과 물감이 번지는 효과를 이용한 기획전 : 한국적인 느낌을 보여주는 명절 선물 세트
5.반짝 빛이 나는 곡선라인 효과를 적용한 팝업창 : 시선을 사로잡는 제품런칭기념 할인 이벤트 팝업창
6.팝업창을 MakeShop과 Cafe24에 적용하기