쇼핑몰 디자인 실무

PART 01 쇼핑몰 디자인을 위한 포토샵 활용

Chapter 01 포토샵 CS6 시작하기

01 포토샵 CS6 인터페이스 살펴보기
1. 포토샵 CS6 화면구성
2. 툴 박스 (Tool box)
3. 자주 사용하는 작업 영역 패널(팔레트)
4. 작업 영역 및 환경설정

Chapter 02 포토샵 기본 기능 알고가기

01 이미지 불러오기
1. File 메뉴에서 불러오기
2. Mini Bridge에서 불러오고 관리하기
3. 열려 있는 작업창 정렬하기
4. 작업창 분리하기
5. 여러 장의 이미지를 레이어로 불러오기
6. 이미지 확대/축소하기
7. 눈금자와 가이드라인으로 작업 기준 설정하기

02 새로운 캔버스 만들고 저장하기
1. 새로운 캔버스 만들기
2. 이미지 저장하기

03 원하는 영역을 선택하고 편집하기
1. 선택 툴과 이동 툴 살펴보기
2. 전체 이미지를 새 컨버스에 이동하기
3. 선택한 영역을 새 컨버스에 이동하기
4. 선택한 영역의 가장자리를 부드럽게 처리하기
5. 올가미 툴을 이용하여 상품이미지에서 필요한 부분만 선택하기
6. 빠른 선택 툴을 이용하여 상품 배경에 색상 채우기
7. 선택한 영역에 패턴 채우고 선 그리기

04 이미지와 캔버스 사이즈 조절하고 회전하기
1. 이미지 사이즈 조절하기
2. 캔버스 사이즈 조절하기
3. 이미지 회전하기

05 이미지 자르기
1. 자르기 툴 옵션 바 살펴보기
2. 불필요한 이미지 자르기
3. 기울어진 이미지 회전하며 자르기
4. 원하는 폭과 높이로 자르기

06 이미지 변형하기
1. Transform으로 이미지 변형하기
2. 자유변형 Free Transform

07 브러시와 그라디언트 툴 살펴보기
1. 전경색과 배경색 설정하기
2. 브러시로 이미지 꾸미기
3. 그라디언트로 채색하기
4. 그라디언트 활용하기

08 이미지를 복제하고 복구하기
1. 스탬프 툴과 힐링 툴 살펴보기
2. 스탬프 툴로 배경에서 필요 없는 부분 지우기
3. 힐링 툴로 원하는 부분을 원본 이미지와 자연스럽게 섞이도록 복사하기
4. 힐링 툴로 상품 얼룩 지우기

09 이미지 선명도 조정하기
1. 이미지 선명도 보정하기

10 Type 툴과 벡터 이미지
1. Type 툴 알기
2. Character 패널과 Paragraph 패널 살펴보기
3. 다양한 모양의 셰이프 툴 다루기

11 펜 툴
1. 펜 툴 다루기
2. 펜 툴로 말풍선 그리기
3. 펜 툴로 패스 만들어 상품 이미지와 외곽 깔끔하게 오리기

Chapter 03 쇼핑몰 디자인 관리에 필요한 필수기능 살펴보기

01 스마트 오브젝트 활용하기
1. 일반 이미지를 스마트 오브젝트로 변환하기
2. 스마트 오브젝트로 이미지를 불러온 후 비트맵 방식으로 변환하기;
3. 스마트 오브젝트로 불러온 이미지 분리하기

02 포토샵의 핵심! 레이어 알아보기
1. 레이어 살펴보기
2. 레이어 스타일 활용하기

03 이미지 보정기능 활용하기
1. 필터(Filter)로 보정하기
2. 조정(Adjustment)메뉴로 이미지의 밝기 보정하기
3. 조정(Adjustment)메뉴로 이미지의 색상 보정하기
4. Liquify(픽셀 유동화)로 이미지 성형하기

04 원하지 않는 부분을 가려주는 마스크
1. 레이어 마스크
2. 클리핑 마스크

05 이미지 슬라이스/웹용으로 저장하기
1. 슬라이스 툴 다루기

Chapter 04 알아두면 유용한 포토샵 기능

01 Gif 애니메이션 만들기
1. 움직이는 상품 이미지 만들기
2. 움직이는 메인 이미지 만들기

02 반복 작업 한 번에 끝내기
1. Action으로 이미지 사이즈 한 번에 실행하기
2. Batch기능을 이용하여 여러 이미지에 일괄적으로 Action 적용하기

Chapter 05 쇼핑몰에 바로 적용하는 포토샵 활용

01 상품이 반사되어 비치는 느낌의 이미지 만들기

02 상품 상세 페이지 폼 만들기
1. 상품 페이지 폼 만들기
2. 상품 페이지 폼에 이미지 적용하기

03 텍스트 디자인하기
1. 럭셔리한 골드 문자 만들기

04 다양하게 쓰이는 배경 만들기
1. 실크 배경 만들기
2. 구겨진 종이질감 만들기
3. 중앙으로 집중되어 보이는 배경 만들기

05 자주 쓰이는 리본, 아이콘 등 디자인 소스 만들기
1. 책갈피 리본띠 만들기
2. 골드 마크 만들기

PART 02 쇼핑몰에 생명을 불어넣는 플래시

Chapter 01 플래시 CS6 시작하기

01 플래시 CS6 살펴보기
1. 시작 페이지 살펴보기
2. 플래시 CS6 인터페이스 (화면구성)
3. 툴 박스(Tool box)
4. Properties / Library 패널&문서 초기 환경설정
5. 작업 환경설정하기

Chapter 02 플래시 CS6 기본 기능 알고가기

01 플래시 문서 다루기
1. 새 파일 만들기
2. 플래시 파일 열고 저장하기
3. Test Movie로 플래시 파일 미리 보기와 SWF 확장자 파일 생성
4. 플래시 파일의 이미지만 교체하기

02 드로잉/채색하기
1. 드로잉 툴 살펴보기
2. 그라디언트 채색 툴

03 문자 툴 알기
1. 문자 툴 Properties (Classic Text)
2. 문자 입력하기
3. 문자를 벡터 도형으로 변환하기
4. 레이어에 나누어 분배하기

04 타임라인과 Scene 패널 살펴보기
1. 타임라인(Timeline)
2. Scene 패널
3. 레이어 다루기

05 프레임과 키프레임 알기
1. 프레임의 종류
2. 애니메이션 이해하기(글자 깜빡이는 애니메이션 만들기)

06 심벌 속성 알기
1. 심벌의 특징
2. 심벌의 종류
3. 심벌 등록 및 편집하기

07 이미지와 이미지를 연결해주는 트윈 알기
1. 셰이프 트윈으로 이미지가 커튼처럼 서서히 나타나는 애니메이션 만들기
2. 클래식 트윈으로 글자가 날아왔다가 사라지는 애니메이션 만들기
3. 모션 트윈으로 위에서 차례대로 나타나는 이벤트 배너 만들기

08 특정 부분을 가리는 마스크 알기
1. 마스크 이해하기
2. 마스크로 메인 노출 애니메이션 만들기

09 간단한 액션 스크립트 알기
1. Action 패널 살펴보기
2. 액션 스크립트 시작하기
3. 반복되는 애니메이션을 멈추는 Stop 액션 추가하기
4. URLRequest로 URL 링크걸기(액션 스크립트 3.0)

PART 03 쇼핑몰 제작을 위한 HTML+드림위버

Chapter 01 HTML 살펴보기

01 HTML 태그 기초 익히기
1. HTML 기본 구조 알기
2. 텍스트의 속성을 지정하는 폰트>font>태그 알기
3. >img>태그로 이미지 삽입하기
4. >a>태그로 하이퍼링크 만들기
5. >table>태그로 표 만들기

Chapter 02 드림위버 CS6 시작하기

01 드림위버 CS6 살펴보기
1. 시작 페이지
2. 드림위버 CS6 인터페이스(화면구성)
3. insert 삽입 패널 살펴보기
4. 문서 편집창 뷰 모드 살펴보기

02 HTML 문서 다루기
1. 새 문서 만들기
2. 저장하기
3. 문서 열기
4. 미리 보기

Chapter 03 드림위버 CS6 기본 기능 알고가기

01 쇼핑몰 제작을 위한 환경설정
1. 작업 영역 레이아웃을 Classic으로 선택하기
2. 사이트 정의

02 텍스트 입력과 편집하기
1. 텍스트 속성창 살펴보기(HTML 탭)
2. 문단과 줄 바꿈
3. 목록 만들기

03 CSS 살펴보기
1. 스타일 시트 패널과 속성창 살펴보기
2. NEW CSS Rule 대화상자 살펴보기
3. 선택자
4. CSS 스타일 만들고 저장하기

04 이미지 삽입하고 속성 설정하기
1. 이미지 속성창 알기
2. 이미지 삽입하기

05 텍스트와 이미지에 하이퍼링크 지정하기
1. 텍스트에 하이퍼링크 지정하기
2. 이미지에 하이퍼링크 지정하기
3. CSS 스타일로 하이퍼링크 테두리선 없애기
4. 이미지맵과 하이퍼링크
5. 롤오버로 상품 페이지 편집하기
6. 네임랭커로 페이지 안에서 원하는 위치로 이동하기

06 테이블 다루기
1. 테이블 대화상자 살펴보기
2. 테이블 속성 패널 살펴보기
3. 테이블 만들기
4. 테이블 다루기

07 멀티미디어 삽입하기
1. 플래시 속성 패널 살펴보기
2. 플래시 삽입
3. 동영상 삽입하기

Chapter 04 쇼핑몰에 바로 적용하는 고급 기능

01 Spry menu bar로 2단 메뉴 만들기

02 Swap image로 메인 갤러리 만들기

PART 04 대박 쇼핑몰 디자인 기획

Chapter 01 쇼핑몰 디자인 전 뼈대 세우기

01 디자인 콘셉트와 벤치마킹
1. 쇼핑몰 디자인 콘셉트와 타겟 정하기
2. 경쟁 쇼핑몰 벤치마킹하기

02 쇼핑몰 정보 정리하기

Chapter 02 쇼핑몰 디자인 기획

01 디자인 기획하기

02 쇼핑몰 디자인 레이아웃
1. 레이아웃-MAIN
2. 레이아웃-TYPE
3. 레이아웃-정렬

03 쇼핑몰 느낌을 좌우하는 색상 선택하기
1. COLOR
2. 색 온도
3. 색상 설계
4. 분위기별 쇼핑몰 컬러 배색

04 글꼴 사용

05 상품 상세 페이지 디자인
1. 상품 상세 페이지 디자인 방법
2. 상품 상세 페이지 레이아웃
3. 색상 설계

06 이벤트 디자인
1. 공지사항 디자인
2. 팝업창 디자인
3. 이벤트 배너 디자인

07 스토리보드 만들기

Chapter 03 아이템별 쇼핑몰 디자인 분석

01 여성 의류 쇼핑몰 분석
1. 쇼핑몰 정보
2. 레이아웃
3. 컬러
4. 메인 디자인
5. 상품 상세 페이지 디자인

02 남성 의류 쇼핑몰 분석
1. 쇼핑몰 정보
2. 레이아웃
3. 컬러
4. 메인 디자인
5. 상품 상세 화면 디자인

03 쥬얼리 쇼핑몰 분석
1. 쇼핑몰 정보
2. 레이아웃
3. 컬러
4. 메인 디자인
5. 상품 상세 화면 디자인

PART 05 내 쇼핑몰은 내가 디자인한다!

Chapter 01 쇼핑몰 디자인 기획

01 쇼핑몰 디자인 기획
1. 디자인 방법 선택하기
2. 쇼핑몰 디자인 기획하기
3. 스토리보드 작성하기

Chapter 02 메이크샵 솔루션 세팅하기

01 메인/상품 화면 관련 세팅하기
1. 디자인 템플릿 설정
2. 메인/상품 화면 설정
3. 상품 상세 공통 정보 입력

02 대분류(상품 카테고리)만들기

03 판매 상품 등록하기
1. 상품 신규 등록
2. 등록한 상품의 상세 페이지 이미지 등록
3. 추천 상품 등록

04 게시판 만들기

05 플래시 템플릿 설정
1. 메인 플래시 배너
2. 흐르는 하이라이트 플래시

Chapter 03 이미지 업로드와 개별디자인 명령어

01 메이크샵 웹FTP에 이미지 업로드
02 개별디자인 방법 선택하기
1. 개별디자인 방법 선택하기

03 메이크샵 개별디자인 명령어

Chapter 04 드림위버로 HTML문서 만들어 적용하기

01 작업순서와 드림위버 초기 설정하기
1. 작업순서
2. 드림위버 초기 설정하기

02 상단 디자인 편집하고 적용하기
1. 테이블 생성/디자인 편집
2. 메뉴 링크 연결하기
3. 검색창 입력폼
4. 이미지 메이크샵 경로로 바꾸고 적용하기
5. 완성된 소스코드 메이크샵에 적용하고 마이샵 확인하기

03 로그인 폼 편집하고 적용하기
1. 로그인 디자인
2. 로그아웃 디자인

04 오른쪽 디자인 편집하고 적용하기
1. 테이블 생성/디자인 편집
2. 메뉴에 링크 지정하기
3. 이미지 메이크샵 경로로 바꾸고 적용하기
4. 완성된 소스코드 메이크샵에 적용하고 마이샵 확인하기

05 중앙 디자인 편집하고 적용하기
1. 테이블 생성/디자인 편집
2. 메뉴에 링크 지정하기
3. 이미지 메이크샵 경로로 바꾸고 적용하기
4. 소스코드 메이크샵에 적용하고 마이샵 확인하기

06 하단 디자인 편집하고 적용하기
1. 테이블 생성/디자인 편집
2. 메뉴에 링크 지정하기
3. [명령어] 앞뒤 쌍따옴표 일괄 삭제
4. 메이크샵 경로로 바꾸고 적용하기
5. 완성된 소스코드 메이크샵에 적용하고 마이샵 확인

07 하단 디자인 편집하고 적용하기
1. 이벤트 개별 페이지 만들기
2. 윙배너 만들기

Chapter 05 쇼핑몰 세부 페이지 디자인하기

01 상품 분류(카테고리)페이지 디자인
1. 메이크샵 FTP에 폴더&이미지 업로드
2. 드림위버로 편집하기
3. 경로 바꾸고 소스코드 메이크샵에 적용하기

02 상품 상세 페이지 디자인
1. 메이크샵 FTP에 폴더&이미지 업로드
2. 드림위버로 편집하기
3. 경로 바꾸고 소스코드 메이크샵에 적용하기

03 서브 페이지 디자인
1. 메이크샵 FTP에 폴더&이미지 업로드
2. 이용안내 페이지
3. 회사소개 페이지

Chapter 06 쉬운 디자인 서비스

01 쉬운 텍스트속성과 게시판 스타일 변경
1. 쉬운 텍스트속성과 일괄변경
2. 쉬운 게시판 스타일 변경

02 타이틀 이미지 교체하기