Part 1 웹디자인 그리고 웹디자이너 Style Base 01 웹디자인의 기본 개념과 웹디자인 산업 ... 22 Step 01 웹디자인 기본 개념과 범위 ... 22 Step 02 웹디자이너의 분류와 역할 ... 23 Step 03 웹디자인을 위한 기술과 프로그램 ... 28 Style Base 02 웹디자인 콘셉트 도출을 위한 과정 ... 32 Step 01 웹사이트 구축 과정에 대한 이해 ... 32 Step 02 웹디자인 과정에 대한 이해 ... 36 Style Base 03 전략적인 웹디자이너 ... 41 Step 01 크리에이티브가 경쟁력이다 ... 41 Step 02 디자이너와 프레젠테이션 ... 44 Step 03 웹디자이너와 셀프 프로모션 ... 46 Style Base 04 웹 스타일 가이드 ... 50 Step 01 레이아웃 시스템(LAYOUT SYSTEM) ... 50 Step 02 그리드 시스템(GRID SYSTEM) ... 51 Step 03 컬러 시스템(COLOR SYSTEM) ... 52 Step 04 비주얼 가이드(VISUAL GUIDE) ... 53 Step 05 요소 가이드(ELEMENT GUIDE) ... 54 Step 06 타이포그래피 시스템(TYPOGRAPHY SYSTEM) ... 54 Step 07 플래시 영역 가이드(FLASH AREA GUIDE) ... 55 Part 2 웹사이트 디자인을 위한 다양한 콘셉트 도출 방법 Style Base 01 로고를 활용한 디자인 전개 ... 58 Step 01 로고 형태를 응용한 레이아웃 ... 58 Step 02 로고와 웹사이트 디자인의 컬러 ... 61 Style Base 02 콘텐츠에 따른 디자인 콘셉트 도출 ... 64 Step 01 젊고 재미있는 디자인 콘셉트 ... 64 Step 02 인간적이고 감성적인 디자인 콘셉트 ... 69 Step 03 한국적이고 동양적인 디자인 콘셉트 ... 72 Step 04 복고적이고 낡은 듯한 디자인 콘셉트 ... 75 Step 05 빛으로 표현한다, 첨단적인 디자인 콘셉트 ... 76 Step 06 고급스럽고 중후한 디자인 콘셉트 ... 80 Style Base 03 브랜드로 만드는 가상의 공간 ... 83 Step 01 가상공간을 활용한 기업 사이트 디자인 ... 83 Step 02 브랜드로 도시를 만들다 ... 86 Step 03 입체 그림 속의 또 다른 세상을 만들다 ... 89 Step 04 3D를 이용한 가상공간 만들기 ... 92 Style Base 04 일상에서의 발견 ... 94 Step 01 다이어리를 활용한 1인 디자인 ... 94 Step 02 살아있는 이야기를 담아내다, 책 ... 96 Step 03 나만의 특별한 공간, 책상 ... 98 Step 04 그 밖의 다양한 소재를 활용한 디자인 ... 100 Style Base 05 타이포를 활용한 디자인 전개 ... 103 Step 01 타이포에 옷을 입히다 ... 103 Step 02 입체 공간에서의 타이포 ... 106 Step 03 타이포만으로 디자인하기 ... 108 Step 04 손 글씨와 웹사이트의 만남 ... 111 Style Base 06 고정된 틀을 깨는 디자인 전개 ... 114 Step 01 사각형의 틀을 깨는 다양한 레이아웃 ... 114 Step 02 심플함이 주는 고급스러움 ... 118 Step 03 통합 디자인 시대, 아트 필(Art Feel) ... 121 Part 3 트렌드 기법 익히기 Style 01 가상공간 구성하여 영화 사이트 인터페이스 만들기 ... 126 Step 01 공간감이 느껴지는 배경 만들기 ... 127 Step 02 쪽지를 들고 있는 왼손 표현하기 ... 133 Step 03 봉투의 내비게이션과 오른손 넣기 ... 141 Style 02 쇼윈도 가상공간으로 의류 사이트 인터페이스 만들기 ... 148 Step 01 숍의 내부 공간 구성하기 ... 149 Step 02 벽 장식하여 숍 꾸미기 ... 155 Step 03 숍의 카운터 만들고 마네킹 배치하기 ... 165 Step 04 로고와 테두리 설정하여 인터페이스 구성하기 ... 168 Step 05 플래시 모션 작업하기 ... 170 Style 03 3D 텍스트를 이용한 가상공간으로 인터페이스 만들기 ... 175 Step 01 일러스트레이터에서 3D 텍스트 만들기 ... 176 Step 02 포토샵에서 3D 텍스트 보정하기 ... 179 Step 03 주변에 오브젝트 삽입하기 ... 184 Step 04 3D 메뉴 바 만들기 ... 186 Style 04 종이 공예를 응용한 여행사 인터페이스 만들기 ... 189 Step 01 접힌 종이 모양 만들기 ... 190 Step 02 어울리는 관광 이미지 삽입하기 ... 193 Step 03 텍스트 삽입 후 효과 적용하여 완성하기 ... 196 Style 05 오브젝트와 그래픽 효과 결합시켜 이벤트 페이지 만들기 ... 200 Step 01 원으로 배경 만들기 ... 201 Step 02 다양한 오브젝트 삽입하여 그래픽 효과 적용하기 ... 203 Step 03 텍스트 입력 후 레이어 스타일로 표현하기 ... 208 Style 06 유행하는 핸드폰 이미지로 화면 구성하기 ... 212 Step 01 금속 질감의 핸드폰 외형 만들기 ... 213 Step 02 핸드폰 안쪽 인터페이스 꾸미기 ... 216 Step 03 반사 이미지 삽입하여 완성하기 ... 222 Style 07 주변 사물을 사용자 중심으로 배치한 인터페이스 만들기 ... 225 Step 01 책상에 노트북 배치하기 ... 226 Step 02 다양한 사물 배치하기 ... 231 Step 03 요소별로 저장하여 플래시로 불러오기 ... 234 Step 04 모션 적용하여 애니메이션 작업하기 ... 238 Style 08 신문을 이용한 인터페이스 디자인 ... 245 Step 01 신문지 위에 레이아웃 만든 후 타이틀 만들기 ... 246 Step 02 신문 내용 삽입하여 레이아웃 꾸미기 ... 249 Style 09 환상적인 분위기 연출하여 인터페이스 구성하기 ... 253 Step 01 일러스트레이터에서 궁전 모양 만들기 ... 254 Step 02 포토샵 배경 이미지 만들기 ... 258 Step 03 궁전 이미지 삽입하기 ... 262 Step 04 주변 묘사하여 인터페이스 구성하기 ... 265 Style 10 개성 있는 팝아트 이미지로 웹페이지 만들기 ... 274 Step 01 라인 이미지 만들기 ... 275 Step 02 팝아트 분위기 연출하기 ... 280 Step 03 레이어 정리 후 배경 꾸미기 ... 283 Style 11 라인으로 만든 일러스트 이미지 디자인 ... 287 Step 01 손으로 그린 이미지 벡터 이미지로 만들기 ... 288 Step 02 포토샵으로 가져온 일러스트 이미지 리터칭하기 ... 296 Step 03 세밀한 부분 리터칭하기 ... 301 Style 12 다이어리를 활용한 인터페이스 디자인 ... 302 Step 01 다이어리 커버 만들기 ... 303 Step 02 메뉴 디자인하기 ... 310 Step 03 다이어리 안쪽 꾸미기 ... 313 Style 13 다양한 오브젝트 합성하여 이미지 만들기 ... 318 Step 01 기준 오브젝트 뒤로 이미지 합성하기 ... 319 Step 02 기준 오브젝트 오른쪽으로 이미지 합성하기 ... 322 Step 03 기준 오브젝트 앞쪽으로 이미지 합성하기 ... 325 Style 14 벡터 이미지와 비트맵 이미지 합성하여 이미지 만들기 ... 330 Step 01 일러스트 이미지 만들기 ... 331 Step 02 일러스트레이터로 그린 이미지 포토샵에 붙여 넣기 ... 334 Step 03 묘사하여 완성하기 ... 337 Style 15 이미지 합성하여 몽환적인 분위기 연출하기 ... 339 Step 01 불꽃 이미지 만들기 ... 340 Step 02 배경 이미지 수정하기 ... 343 Step 03 다양한 요소 삽입하여 이미지 완성하기 ... 345