목차 일부
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
더보기 닫기