목차 일부

1부 사이트 디자인을 위한 웹 컬러와 그래픽
   1. 웹 사이트, 어떻게 제작할 것인가? ... 38
      1 출판 디자인과 웹 디자인 ... 38
      2 웹 사이트의 구성 형태 ... 41
   2. 웹 디자인을 위한 그래픽 이미지 제어하기 ... 48
      1. 웹 이미지 구성과 색상 보정 ... 48
   3. 웹 사이트 제작에 필...

더보기

목차 전체

1부 사이트 디자인을 위한 웹 컬러와 그래픽
   1. 웹 사이트, 어떻게 제작할 것인가? ... 38
      1 출판 디자인과 웹 디자인 ... 38
      2 웹 사이트의 구성 형태 ... 41
   2. 웹 디자인을 위한 그래픽 이미지 제어하기 ... 48
      1. 웹 이미지 구성과 색상 보정 ... 48
   3. 웹 사이트 제작에 필요한 이미지 색상 표현하기 ... 54
      1 웹 디자인을 위한 이미지 ... 54
      2 웹 사이트 색상 미학 ... 56
      3 웹 상에서 사용할 이미지 색상 보정 기능 ... 59
      4 웹 문서에 사용할 스캔 이미지 보정하기 ... 62
      5 히스토그램을 이용한 웹 이미지 색상 보정하기 ... 63
      6 노출과 초점 조정으로 생동감 있는 이미지 표현하기 ... 65
      7 듀오톤을 이용한 웹 사이트에 맞는 색상 톤 조정하기 ... 66
2부 웹 디자인을 위한 구성 요소 제작과 그래픽 작업
   4. 이미지 합성을 위한 선택과 추출(Extract) ... 70
      1 포토샵에서의 선택과 추출 기능 ... 70
      2 마술지우개 툴을 이용한 이미지 추출하기 ... 73
      3 배경지우개 툴을 이용한 이미지 추출하기 ... 75
      4 익스트랙트의 마스킹 기능을 이용한 이미지 추출하기 ... 76
   5. 이미지 합성을 위한 레이어(Layer) 마스터하기 ... 78
      1 레이어의 구성 ... 78
      2 레이어 제어와 관리 ... 79
      3 레이어 셋(Layer Set) 구성 ... 81
      4 레이어 마스크(Layer Mask) ... 82
      5 어저스트먼트(Adjustment Layer) 레이어 사용하기 ... 83
      6 레이어의 혼합 모드 ... 85
   6. 색상 톤을 이용한 질감 표현과 이미지 합성하기 ... 88
      1 크롬 질감의 입체 인물 제작하기 ... 89
   7. 2D 드로잉 작업을 이용한 방향 아이콘 만들기 ... 92
      1 방향 아이콘의 형태 드로잉하기 ... 92
      2 에어브러시를 이용한 반사광 효과 표현하기 ... 97
      3 노이즈 질감을 이용한 배경 이미지 만들기 ... 99
      4 리퀴파이(Liquify) 명령을 이용한 이미지 변형 ... 101
   8. 벡터 레이어 스타일 기능을 이용한 스타일이 있는 웹 아이콘 만들기 ... 102
      1 웹 사이트 요소 제작의 기본 원칙, 반복과 일관성 ... 102
      2 포토샵의 레이어 스타일을 이용한 구성 요소 제작 ... 103
      3 레이어 팔레트에서 레이어 스타일 사용하기 ... 104
      4 이펙트 속성이 있는 반사 재질의 아이콘 제작하기 ... 107
      5 글래스 효과가 적용된 투명 재질 아이콘 만들기 ... 110
      6 쉐이프 편집과 왑패드 텍스트 기능으로 문자 입력하기 ... 113
      7 다양한 쉐이프 영역에 동일한 스타일의 아이콘 만들기 ... 115
   9. 웹에서 사용할 수 있는 투명한 GIF 이미지 만들기 ... 116
      1 GIF 마스크를 이용한 투명 이미지 ... 116
      2 투명 마법사를 이용한 GIF 투명 이미지 만들기 ... 117
      3 매트 기능을 이용하여 세밀한 투명 GIF 이미지 만들기 ... 120
   10. 스캔한 이미지를 이용한 입체 그래픽 효과 연출하기 ... 122
      1 스캔한 이미지의 색상 보정과 패스 선 제작하기 ... 122
      2 트랜스폼 기능을 이용한 그림자 이미지 합성하기 ... 124
   11. 픽셀 드로잉 디자인을 위한 아바타 캐릭터 제작하기 ... 126
      1 일러스트레이터에서 아바타 캐릭터 드로잉하기 ... 127
      2 포토샵에서 픽셀 다듬기 ... 131
   12. 웹 사이트에서 사용되는 배경 그래픽 이미지 디자인 ... 134
      1 효과적인 배경 이미지 제작과 삽입 ... 134
      2 타일 형태의 배경 이미지 만들기 ... 136
      3 사진 이미지를 이용한 배경 이미지 사용하기 ... 137
      4 엠보싱 재질과 패턴 이미지를 이용한 배경 이미지 만들기 ... 139
      5 방향성 패턴의 배경 이미지 만들기 ... 141
   13. 비트맵을 벡터 형식으로 변환하여 이미지 구성하기 ... 144
      1 패스 영역으로 사용될 외곽선을 위한 색상 보정하기 ... 145
      2 스트림라인과 일러스트레이터를 이용한 벡터 이미지 변환하기 ... 146
   14. 웹 상에서 사용할 이미지 최적화하기 ... 150
      1 웹 이미지 최적화를 위한 파일 형식 선택 ... 150
      2 웹 최적화를 위한 해결책, Save for Web 기능 ... 151
      3 일러스트 이미지일 경우 웹 최적화하기 ... 154
      4 일반 사진 이미지일 경우 웹 최적화하기 ... 156
      5 일러스트와 사진 이미지가 혼합된 경우 최적화하기 ... 158
   15. 드롭렛 기능을 이용한 자동 최적화하기 ... 160
      1 드롭렛 기능을 이용한 비트맵 이미지 최적화하기 ... 161
3부 웹 인터페이스 디자인(Web Interface Design)
   16. 웹 사이트 레이아웃 디자인하기 ... 164
      1 웹 사이트 레이아웃의 기본 원칙 ... 164
      2 테이블(Table)을 이용한 레이아웃 ... 168
      3 메타포(Metaphor)를 이용한 웹 디자인 ... 170
      4 웹 디자인을 위한 해상도와 레이아웃 ... 172
      5 웹 레이아웃의 형태와 색채 선택하기 ... 173
      6 제작 시간을 아껴주는 클립아트 사용하기 ... 181
   17. 캐릭터가 있는 대담한 형태의 레이아웃 디자인 ... 182
      1 패턴 형태의 배경 이미지 만들기 ... 183
      2 웹 사이트에 사용할 캐릭터 드로잉하기 ... 185
      3 배경 이미지에 캐릭터 이미지 삽입하기 ... 192
      4 TV선 모양의 패턴 이미지를 이용한 배경 이미지 만들기 ... 193
      5 이미지레디에서 반전되는 롤오버 기능의 문자 아이콘 만들기 ... 197
      6 그라디언트 오버레이 효과가 적용된 입체 문자 만들기 ... 200
   18. 이미지 분할과 테이블을 이용한 웹 사이트 디자인 ... 204
      1 레이아웃을 담당하는 테이블 제작하기 ... 205
      2 포토샵을 이용하여 디자인된 이미지 분할하기 ... 207
      3 드림위버로 첫 번째 행의 테이블 제작하기 ... 209
      4 이미지 크기에 맞게 테이블을 변형하여 이미지 삽입하기 ... 213
   19. 벡터 쉐이프와 테이블을 이용한 게시판 사이트 디자인하기 ... 216
      1 게시판 구성과 작업 순서 ... 216
      2 포토샵의 벡터 쉐이프로 게시판 레이아웃 작성하기 ... 217
      3 드림위버에서 테이블 작성과 분할된 이미지 삽입하기 ... 223
      4 테이블 셀 색상과 크기 편집하기 ... 227
      5 테이블에 문자 입력과 아이콘 삽입하기 ... 231
   20. 픽셀 형태의 재질이 있는 슬라이딩 레이아웃이 돋보이는 디자인 ... 232
      1 모자이크 처리된 사이트 상단의 재질 이미지 제작하기 ... 233
      2 일러스트레이터를 이용한 패턴 형식의 라인 제작하기 ... 234
      3 픽셀 형태의 사이트 하단의 재질 이미지 제작하기 ... 237
      4 슬라이드 장면을 제어하는 아이콘 제작하기 ... 240
      5 불규칙하게 라운드 처리된 배경 이미지 만들기 ... 243
      6 플래시를 이용한 슬라이드 무비 제작하기 ... 244
      7 슬라이딩 액션 스크립트 설정하기 ... 250
      8 드림위버에서 재질 이미지와 슬라이드 플래시 무비 삽입하기 ... 254
   21. 웹 포토 갤러리(Web Photo Galley) 사이트 디자인 ... 256
      1 웹 포토 갤러리 자동화 ... 256
      2 웹 포토 갤러리 기능을 이용한 포토 웹 사이트 제작하기 ... 258
4부 문자 디자인과 타이포그래피(Typography)
   22. 웹에서 사용하기 위한 직관적인 타이포그래피 ... 262
      1 웹 분야의 타이포그래피 ... 262
      2 웹 문서를 읽기 쉽도록 하기 위한 가독성 ... 263
      3 타이포그래피 기본 원리 ... 263
      4 폰트 선택 ... 265
      5 문장 정렬 ... 267
      6 HTML에서 폰트 사용 ... 268
      7 타이포그래피를 위한 서체 그래픽 ... 268
   23. 다양한 폰트 그래픽을 이용한 웹 사이트의 문자 제작하기 ... 272
      1 360도 회전시킨 로고 문자 제작하기 ... 273
      2 마크 쉐이프 제작과 로고 문자 완성하기 ... 275
      3 래스터라이즈 기능을 이용한 펜 타입의 외곽선이 있는 폰트 표현하기 ... 278
   24. 포토샵의 채널을 이용한 입체 문자 제작하기 ... 282
      1 왑텍스트 기능을 이용한 문자 채널 만들기 ... 282
      2 라이팅 이펙트와 색조를 이용한 입체 문자 만들기 ... 284
   25. 감각적인 플래시 문자 배너 제작하기 ... 288
      1 다양한 형태의 문자 애니메이션 ... 288
      2 플래시 문자 애니메이션에 사용할 비트맵 이미지 디자인하기 ... 289
      3 확대와 선회 문자 플래시 애니메이션 파일 제작하기 ... 292
   26. 3차원 플래시 무빙 타이포 제작하기 ... 298
      1 입체 플래시 문자 표현 ... 298
      2 3차원 입체 문자 구성하기 ... 299
      3 X, Y축을 기준으로 회전하는 플래시 문자 애니메이션 제작하기 ... 302
5부 웹 디자인과 상호 작용(Reciprocal action)
   27. 확대 이미지가 표시되는 롤오버 이미지 디자인 ... 306
      1 레이어 셋 구성과 섬네일 이미지 제작하기 ... 307
      2 섬네일 이미지에 반응하는 내비게이션 롤오버 기능 적용하기 ... 310
   28. 이미지맵과 섬네일 이미지 제작하기 ... 314
      1 이미지에 링크를 설정하기 위한 이미지맵 ... 314
      2 이미지 섬네일(Thumbnails)과 웹 포토 갤러리 ... 315
      3 이미지맵 툴을 이용한 핫스포트 영역 설정하기 ... 317
   29. 마우스에 반응하는 반투명 롤오버 메뉴 바 디자인 ... 320
      1 이미지레디의 롤오버 설정하기 ... 321
      2 롤오버 파일 저장 설정을 위한〔Output setting〕대화상자 ... 321
      3 색상이 반전되는 롤오버 기능의 메뉴 바 만들기 ... 322
      4 반투명의 펼침 메뉴판 만들기 ... 326
      5 메뉴 바와 메뉴판에 반사광이 있는 롤오버 문자 입력하기 ... 327
      6 이미지 분할과 롤오버 기능으로 색상이 변하는 메뉴 바 만들기 ... 330
      7 마우스 반응에 따라 빛을 발산하는 메뉴 ... 333
      8 롤오버 기능이 적용된 문자에 사이트 링크하고 최적화하기 ... 334
   30. 내비게이션 롤오버 기능을 이용한 이미지 분석 사이트 디자인 ... 336
      1 벡터 쉐이프를 이용한 문자 아이콘 제작하기 ... 337
      2 롤오버 기능이 적용될 반전되는 문자 입력하기 ... 340
      3 마우스 반응에 표시될 영역 색상 조정과 말풍선 제작하기 ... 341
      4 문자와 자동차 분할 영역에 롤오버 기능 적용하기 ... 343
   31. 비트맵 분할 슬라이딩 이미지와 로그인 입력창 디자인 ... 346
      1 와이어 문자가 있는 슬라이딩 이미지 디자인하기 ... 347
      2 슬라이드 이미지의 입력창과 버튼 만들기 ... 350
      3 비트맵 분할 슬라이딩 무비 제작하기 ... 354
      4 마우스에 반응하는 아이콘과 문자 필드 제작하기 ... 359
      5 입력창에 입력한 조건에 맞는 액션 설정하기 ... 362
   32. 이동 가능한 메뉴창이 있는 웹 사이트 디자인 ... 364
      1 포토샵으로 애니메이션과 액션에 사용될 이미지 레이아웃 구성하기 ... 365
      2 마우스에 드래그되는 메뉴창 디자인하기 ... 368
      3 플래시를 이용한 역동적인 문자 애니메이션 제작하기 ... 372
      4 플래시 액션을 이용한 움직이는 메뉴창 제작하기 ... 378
      5 롤오버 기능의 문자 메뉴를 클릭하여 메뉴창 표시하기 ... 382
      6 드림위버에서 테이블을 이용한 플래시 무비 삽입과 사이트 완성하기 ... 385
   33. 내비게이션 뷰어 창이 있는 웹 사이트 디자인 ... 388
      1 쉐이프를 이용한 미리보기 뷰어 창 제작하기 ... 388
      2 뷰어 창의 필요한 부분만 투명 영역으로 지정하기 ... 392
      3 마우스에 반응하는 방향 제어 아이콘 제작하기 ... 394
      4 상하, 좌우로 이동하는 지도 무비 심볼 제작하기 ... 398
      5 Tell target 액션을 이용한 방향 아이콘에 반응하는 지도 제작하기 ... 402
      6 조경 패널 이미지 제작 과정 알아보기 ... 407
6부 웹 애니메이션(Web Animation)
   34. 포토샵의 트윈 기능을 이용한 웹 애니메이션 만들기 ... 412
      1 트윈 애니메이션 ... 412
      2 모션 블러가 적용된 문자 애니메이션 만들기 ... 414
      3 프레임 장면 배경과 반사광 연출하기 ... 416
      4 이미지레디를 이용한 애니메이션 프레임 구성하기 ... 418
      5 애니메이션 최적화와 사이트 링크하기 ... 421
   35. 프레임을 이용한 GIF 애니메이션 파일 만들기 ... 422
      1 이미지레디를 이용한 프레임 애니메이션 ... 422
      2 이미지레디를 이용한 프레임 바이 프레임 GIF 애니메이션 만들기 ... 424
      3 애니메이션 팔레트에서 프레임 구성하기 ... 425
   36. 벡터 사이트 요소 제작과 플래시 애니메이션 구현하기 ... 428
      1 일러스트레이션을 이용한 벡터 요소 드로잉하기 ... 429
      2 그라디언트를 이용하여 벡터 이미지 컬러링하기 ... 434
      3 플래시 문자 무비를 위한 벡터 형식의 전용 서체 제작하기 ... 439
      4 필름과 물방울 이미지가 있는 배경 이미지 만들기 ... 443
      5 트윈 기능이 적용된 360도 회전하는 로고 문자 애니메이션 제작하기 ... 446
      6 동작 안내선을 이용한 병마개 애니메이션 제작하기 ... 454
      7 문자에 반응하는 메뉴 문자와 비트맵 이미지 표시하기 ... 456
   37. 라인 액션과 롤오버 메뉴가 있는 사이트 디자인하기 ... 460
      1 포토샵으로 쉐이프 이미지와 점선 형태의 라인 제작하기 ... 460
      2 메뉴 문자 입력과 롤오버 기능을 적용시킬 메뉴판 제작하기 ... 465
      3 십자선 형태의 마우스 라인 액션 제작하기 ... 468
      4 이미지와 플래시 무비, 여백을 위한 테이블 작성하기 ... 475
      5 레이어를 이용하여 그룹 형태로 서브 메뉴 삽입하기 ... 478
      6 이미지맵과 비헤비어 기능을 이용한 서브 메뉴 작성하기 ... 480
7부 모델링과 동영상 무비를 이용한 웹 디자인 테크닉
   38. 3ds MAX와 포토샵을 이용한 입체 웹 구성 요소 디자인 ... 488
      1 3ds MAX를 이용한 오브젝트 제작 ... 488
      2 3ds MAX 4.0의 업그레이드 ... 489
      3 3ds MAX에서의 오브젝트 제작 방법 ... 490
      4 사실적인 그래픽 표현을 위한 재질 적용 방법 ... 491
      5 재질 편집기(Material Editor) ... 492
      6 단면 쉐이프를 이용한 캔 몸체 제작하기 ... 494
      7 부울 연산 기능으로 오브젝트 편집하기 ... 496
      8 오브젝트에 반사광이 있는 금속성의 재질 적용하기 ... 500
      9 렌더링 기능으로 벡터 이미지를 비트맵 이미지로 저장하기 ... 505
      10 포토샵에서 필터 효과를 이용한 웹 구성 요소 완성하기 ... 507
   39. 동영상 애니메이션 기법을 이용한 사이트 제작하기 ... 510
      1 무비 형식의 웹 요소 제작 ... 510
      2 동영상을 한 장의 GIF 애니메이션 파일로 만들기 ... 514
      3 포토샵에서 동영상 자막으로 사용할 문자 입력하기 ... 516
      4 문자 삽입과 애니메이션 GIF 파일로 제작하기 ... 518
   40. 플래시를 이용한 비디오 모션 기법 사용하기 ... 522
      1 비디오 모션 기법 ... 522
      2 모션과 트랜지션 효과를 이용하여 비트맵 파일로 저장하기 ... 523
      3 무비 클립을 심볼로 지정하기 ... 528

더보기 닫기