1 웹 디자인의 기초 ... 18 1. 인터넷(Internet) ... 23 인터넷의 역사 ... 23 인터넷의 종류 ... 24 인터넷의 발전 ... 26 인터넷의 현재상황 ... 27 2. 웹미디어(Webmedia) ... 31 미디어의 개념 ... 31 매스미디어와 웹 ... 32 웹미디어 ... 33 3. 웹커뮤니케이션 ... 33 4. 웹디자인 ... 34 웹디자인의 개념 ... 34 웹디자인의 현재와 미래 ... 42 2장 홈페이지 제작기법 ... 44 1. 기획(디자인 기획) ... 48 디자인 계획 ... 48 사이트 기획서 분석회의 ... 48 2. 디자인 회의 및 디자인 컨셉설정 ... 68 웹 페이지 이미지 ... 68 3. 레이아웃(Lay - out) ... 78 레이아웃의 개념 ... 78 레이아웃의 종류 ... 82 동적 레이아웃 ... 83 레이아웃에 따른 컨텐츠의 위치 ... 85 그리드 ... 85 4. 컨셉에 따른 색채 선택 ... 88 색이란 무엇인가? ... 89 색채학이란 무엇인가? ... 92 색의 의미 ... 92 색과 색채 ... 94 물체의 색 ... 94 색의 종류 ... 95 색의 표시방법 ... 98 색채의 심리적 반응 ... 101 사이트 색채, C, I의 관계 ... 102 사이트 색채, 클라이언트 마케팅 홍보 ... 104 5. Typographic ... 105 타이포그래피의 개념 ... 105 타이포그래피 표현 원리 ... 116 타입을 활용한 표현 ... 119 타이포그래피를 활용한 웹사이트 ... 125 6. 메인 페이지 ／ 서브 페이지 디자인 수립 ... 126 메인 페이지 디자인 ... 127 서브 페이지 디자인 ... 129 스토리 보드 작업 ... 130 일괄된 스타일(style) 적용을 위한 웹스타일 가이드 제작 ... 130 3 포토샵(Photoshop) ... 134 1. 웹디자인에서의 포토샵 ... 136 시안 작업시 시안요소 참고자료 ... 137 2. 브라우저 해상도에 따른 도큐먼트 설정 ... 137 3. 작업시 필요한 환경설정 ... 138 4. 이미지 효과 ... 140 필터에 의한 이미지 처리 ... 141 이미지 색 보정 ... 155 Mask ... 158 Crop ... 161 5. 레이어(Layer) ... 162 레이어의 이미지 처리기능 ... 162 폰트 레이어(Font Layer) ... 164 레이어 효과(Layer Effect) ... 164 6. 폰트(Font) ... 169 Type ... 169 포토샵에서의 단순한 아이콘 만들기 ... 170 기타이미지 폰트를 돋보이게 하는 법 ... 173 폰트 표현의 다양한 기법 ... 175 7. 도트(Dot) 디자인 ... 175 안티알리아스(Anti - aliased) ... 176 8. 포토샵의 테크닉을 소개하는 사이트 ... 177 9. 그래픽 관련 프로그램 ... 178 Painter ... 179 Illustrator ... 179 3D MAX ... 180 10. Action ... 180 11. 그래픽디자인과의 연계 ... 183 12. 웹디자인에서 사용되는 다양한 표현기법 ... 184 디지털(Digital) 느낌의 이미지 표현하기 ... 184 모서리 둥글게 만들기 ... 188 3D 무비창 만들기 ... 191 인물 이미지 돋보이게 하기 ... 194 웹 페이지에서의 버튼 만들기 ... 197 13. 웹사이트에 이미지 삽입시에 특정컬러 추출하기 ... 216 Photoshop5.5에서의 추출기능 ... 216 14. 투명한 이미지 만들기에 대해서 ... 222 15. 이미지 포맷의 종류 ... 224 GIF ... 224 JPEG ... 224 PNG ... 224 16. Image Ready ... 225 Image Ready의 특징 ... 225 이미지 분할기능 ... 226 17. 이미지 레디에서의 웹 애니메이션 ... 229 이미지 레디에서의 배너광고 만들기 ... 231 18. 디지털 카메라를 이용한 이미지 조정 ... 232 19. 탭 아이콘(Tab Icon) 디자인 ... 235 20. 패턴을 이용한 이미지 만들기 ... 241 21. 듀오톤(Duotone) 이미지 만들기 ... 245 Duotone 모드 이용법 ... 246 Variation 명령을 이용하는 방법 ... 247 Saturation 명령을 이용하는 방법 ... 249 22. 알파 채널을 이용하여 Flash에서 투명한 이미지 만들기 ... 251 23. 점선 이미지 만들기 ... 255 24. 뽀사시 효과 ... 258 4 플래시(Flash) ... 262 1. 플래시 작업하기전 단축키 숙지하기 ... 265 2. 무비창 설정하기 ... 266 3. 플래시 디자인 접근 ... 268 풀 사이즈 ... 268 페이지내에 삽입되는 플래시 무비 ... 269 4. 플래시 동적 구현의 조형적 접근 ... 271 5. 플래시 애니메이션 연출 계획 ... 275 6. 라이브러리(Library) ... 276 7. Motion Tweening(모션 트위닝) ... 278 비트맵 이미지를 불러 효과내기 ... 278 비트맵 이미지 위에 텍스트 보여주기 ... 280 8. Shape Tweening(쉐입 트위닝) ... 282 조형요소로서의 움직임 ... 283 9. 종합애니메이션 ... 284 배너광고등의 기업로고등을 강조할 때 ... 284 GIF 애니메이션 기법 응용하기 ... 286 10. 로딩무비(Loading Movie) 만들기 ... 287 11. 로드무비(Load Movie) ... 295 로드무비 분석 ... 298 12. 텔타겟(tell target) ... 300 무비클립을 이용한 인터페이스 만들기 ... 304 13. 플래쉬 이외의 SWF파일을 추출하는 유틸리티들 ... 310 스위시(Swish), 플렉스(Flex) ... 310 swift 3D ... 310 벡터 3D(Vector 3D) ... 311 14. 사운드(Sound) ... 312 골드웨이브 ... 313 녹음기 ... 314 15. 배경음악(Background Sound) ... 315 16. 사운드 극대화 시키기 ... 316 17. 사운드 모음 사이트 ... 317 18. 스위시(Swish)의 텍스트 애니메이션 ... 318 19. 배경이미지 용량줄이는 방법 ... 322 20. 플래쉬 용량 줄이기 ... 325 21. 마스크(Mask) ... 326 마스크 기법의 응용사례 ... 329 22. 플래시의 기초적인 기법을 응용하는 발상 ... 332 액션 스크립트를 이용하는 기법 ... 334 5 드림위버(Dreamweaver) ... 340 1. 드림위버 4.0에서 새로워진 기능 ... 343 show code view ... 343 show code view and Design view ... 343 INSERT FLASH BUTTON ... 344 INSERT FLASH TEXT ... 344 LAYOUT & VIEW ... 344 자산 패널(Asset Panel) ... 345 사이트 보고서 작성 ... 345 통합된 O'Reilly 코드 참조 ... 346 JavaScript 디버거 ... 346 브라우저 체크 ... 347 2. 사이트 사용법 ... 348 로컬 사이트의 정의 ... 348 사이트 맴 보기 ... 349 FTP의 설정 ... 350 3. 테이블의 활용 ... 351 테이블의 이해 ... 351 테이블을 이용한 이미지 삽입 ... 352 테이블 배경 이미지를 이용한 디자인 ... 354 배경이미지를 이용한 점선 테이블 만들기 ... 355 배경이미지를 이용한 이미지의 양 줄이기 ... 357 Bg color를 이용한 타이틀 바 만들기 ... 358 4. 텍스트(Text)의 입력 ... 360 문장과 문단 나누기 ... 360 한칸 띄어쓰기 ... 361 들여쓰기 ／ 내어쓰기 ... 361 리스트 사용하기 ... 363 특수문자의 사용 ... 365 5. 스타일 시트 활용 ... 371 스타일 시트의 생성 ... 371 Type 패널 설정 ... 373 Background 패널 설정 ... 374 Black 패널 설정 ... 375 Box 패널 설정 ... 375 Barder 패널 설정 ... 376 List 패널 설정 ... 377 Positioning 패널 설정 ... 377 Extention 패널 설정 ... 378 재미있는 CSS효과 ... 379 6. 프레임(Frame) ... 380 프레임으로 구분된 웹페이지 구조 ... 381 프레임 문서 만들기 ... 382 프레임 속성 팔레트 ... 384 프레임 옵션 설정 ... 385 프레임으로 구성된 도큐먼트 저장 ... 388 7. Extension ... 392 랜덤 이미지 ... 392 서브 메뉴(Expandable Outlines) ... 394 Right Click Menu Builder ... 397 MFX Slide Menu ... 399 Floating Frame ... 401 Marquee ... 402 Cross Browser Tooltip ... 404 Homepage ... 406 Print ... 408 Insert Sliding Tile ... 409 News Ticker ... 411 Window Launcher ... 413 Close on Blur ... 414 Swap Flash ... 415 Open Chromeless ... 416 Mouse Trail Window ... 418 Banner Image Builder ... 420 Text Rollover with Box ... 422 8. 레이어와 타임 라인 ... 424 트레이싱 이미지의 활용 ... 425 레이어를 이용한 화면구성 ... 426 레이어를 레이블로 변환하기 ... 429 타임라인을 이용한 애니메이션 만들기 ... 430 타임라인에 비헤이비어 추가하기 ... 434 9. Shock wave ... 438 플래쉬 무비의 투명도 설정 ... 441 10. 추천 사이트 ... 443