목차 일부
소개하기 ... xxii
1. 시작하기 ... 1
작업에 대한 린다의 조언 ... 2
학습과정 ... 3
스스로 공부하기 ... 4
자신의 디자인 감각을 향상시키기 ... 4
어떤 기술이 중요한가? ... 4
웹 디자인 기술 ... 4
웹 디자이너 되기의 첫 단계 ......
더보기
목차 전체
소개하기 ... xxii
1. 시작하기 ... 1
작업에 대한 린다의 조언 ... 2
학습과정 ... 3
스스로 공부하기 ... 4
자신의 디자인 감각을 향상시키기 ... 4
어떤 기술이 중요한가? ... 4
웹 디자인 기술 ... 4
웹 디자이너 되기의 첫 단계 ... 5
포트폴리오의 중요성 ... 5
제작단가에 대해서 알기 ... 6
웹 디자인 일자리를 구하는 방법 ... 7
제작단가에 대한 자료 ... 7
검색 엔진 활용하기 ... 8
전부 믿으면 안된다 ... 9
하드웨어의 선택 ... 10
매킨토시 또는 윈도우즈 중에 어떤 것을 선호하는가? ... 10
맥과 PC ... 10
맥의 장점 ... 11
PC의 장점 ... 11
어떤 플랫폼이 좋을까? ... 11
시스템 요구사항 ... 12
할인 상점 ... 14
소프트웨어 ... 14
이미지 편집 프로그램들 ... 15
요점 정리 ... 16
2. HTML 편집기 ... 17
그래픽 책에서 왜 HTML을 다루는가? ... 18
HTML이란 무엇인가? ... 18
HTML은 왜 디자인하기에 힘든 것인가? ... 19
HTML을 꼭 배워야만 하는가? ... 20
HTML을 배우는 법 ... 21
HTML 온라인 자료 ... 22
중요한 HTML 용어 ... 22
HTML에 대한 소개 ... 23
HTML 편집기 ... 24
구입하기 전에 데모버전으로 테스트해보기 ... 25
HTML 편집 환경 ... 25
각 브라우저 환경에 대한 비교표 ... 27
요점 정리 ... 28
3. 전략 ... 29
첫 번째 단계 ... 30
스토리보드 작성하기 ... 32
실제 사례 분석 : 스토리보드에서 제작까지 ... 33
흐름 도표 만들기 ... 34
내비게이션에 대한 접근 ... 35
내비게이션에 대한 접근 ... 36
사이트 구조 ... 37
추천 도서 ... 38
Ducks In A Row를 위한 브레인스토밍 목록 ... 38
메타포 ... 38
도움이 되는 메타포와 방해가 되는 메타포 ... 39
요점 정리 ... 40
4. 웹 제작 환경 ... 41
각 브라우저간의 차이점 ... 42
브라우저와 HTML의 차이점에 대한 자료들 ... 43
호환성에 대한 지침 ... 44
AOL브라우저 ... 45
모든 플랫폼에서 호환되는 색상 교정에 대한 문제 ... 46
감마값의 차이 ... 47
공장에서 세팅된 평균 감마값 ... 47
명암과 대비에 대한 이해 ... 48
높은 해상도와 낮은 해상도 ... 49
포토숍 환경설정 ... 50
비트 심도(Bit Depth) ... 51
모니터 비트 심도 ... 52
모니터의 비트 심도를 바꾸는 방법 ... 53
문자의 차이 ... 54
모니터 크기에 대한 고려 ... 55
웹TV ... 56
웹TV지원 ... 57
지원되지 않는 HTML태그들 ... 57
웹TV 디자인 팁 ... 58
브라우저와 웹TV의 비교 ... 59
요점정리 ... 60
5. 웹 파일 포맷 ... 61
비트맵과 벡터 ... 62
손실과 무손실 ... 64
GIF발음 ... 64
GIF압축 ... 65
인터페이스 GIF ... 66
투명한 GIF ... 67
애니메이션 GIF ... 68
JPEG ... 69
점진적인 JPEG과 표준 JPEG ... 71
PNG ... 72
감마 보정 ... 73
알파 채널 투명도 ... 73
PNG에 대한 자료들 ... 73
디지털 워터마크 ... 74
MNG ... 75
요점 정리 ... 76
6. 작은 용량의 그래픽 ... 77
파일 크기와 다운로드 속도 ... 78
이미지 크기에 상관없이 다운로드 속도에 영향을 주는 것들 ... 78
파일 크기는 실제로 얼마나 될까 ... 79
포토숍 아이콘도 용량을 차지한다 ... 79
파이어웍스(Fireworks)와 이미지레디(ImageReady)에서의 파일 크기 ... 80
자신의 이미지 스타일 판단하기 ... 81
디더링을 하지 않고 GIF로 저정한 사진 ... 82
JPEG으로 저장한 사진들 ... 82
디더링을 해서 GIF로 저장한 사진 ... 83
디더링을 하지않고 GIF로 저장한 그래픽 ... 84
JPEG으로 저장한 그래픽 ... 84
디더링을 해서 GIF로 저장한 그래픽 ... 85
작은 용량의 JPEG만들기 ... 86
옛 버전의 웹 브라우저에 대하여 ... 86
JPEG 예제 ... 87
작은 JPEG을 만들기 위한 포토숍 플러그인 ... 88
한번 JPEG으로 저장한후 다시 JPEG으로 저장하지 말라 ... 88
작은 GIF만들기 ... 89
비트 심도는 파일 크기에 영향을 미친다 ... 90
안티-알리아스(Anti-Alias)와 알리아스(Alias) ... 91
알리아스된 아트워크 ... 92
라인 아트 기반의 이미지를 위한 GIF ... 93
GIF 컬러 팔레트 ... 93
디더링과 밴딩 ... 94
디더링(Dithering) ... 96
GIF압축의 네 가지 법칙 ... 97
포토숍을 이용하여 GIF 파일의 색상 수 줄이기 ... 98
이미지레디(ImageReady)에서 색상 수 줄이기 ... 99
이미지레디에서의 자동 설정 ... 99
파이어웍스(Fireworks)에서 색상 수 줄이기 ... 100
페인트숍 프로(Paintshop pro)에서 색상 수 줄이기 ... 101
윈도우 16팔레트 ... 101
복합적인 이미지 ... 102
GIF 최적화를 위한 포토숍 플러그인 ... 103
온라인에서 파일 크기 줄이기 : GIFWizard ... 104
애니메이션 GIF ... 105
작은 PNG 파일 만들기 ... 106
일괄 처리 ... 107
포토숍 액션(Action) ... 107
포토숍과 이미지레디의 일괄 처리 ... 108
이미지레디의 드롭렛(Droplet) ... 109
파이어웍스의 일괄 처리 ... 110
디바벨라이저(Debabelizer)의 일괄 처리 ... 111
이미지 최적화에 대한 자료 ... 111
요점 정리 ... 112
7.색상 교정 문제 ... 113
RGB와 CMYK ... 114
RGB와 ICC 프로파일 ... 115
sRGB란 무엇인가? ... 115
ICC 컬러 프로파일이란 무엇인가? ... 117
ICC와 sRGB에 대한 필자의 견해 ... 118
도움이 될 만한 URL ... 118
감마에 대한 문제 ... 119
포토숍5.0에서의 sRGB ... 120
5.0에서 sRGB를 끄는 방법 ... 120
정확한 색상을 요하는 웹 사이트 ... 121
요점 정리 ... 122
8. 브라우저에서 안전한 색상 ... 123
브라우저에서 안전한 팔레트란 무엇인가 ... 124
브라우저에서 안전한 색상 도표(수학적인 값에 따라 구성) ... 126
브라우저에서 안전한 색상 도표(색조에 따라 구성) ... 128
브라우저에서 안전한 팔레트가 존재하는 이유 ... 130
브라우저에서 안전한 색상이 정말 중요한 것인가? ... 130
브라우저에서 안전한 색상 팔레트를 사용하는 시기 ... 131
16진수 기반의 색상 ... 132
안전하지 않은 색상들은 변화된다! ... 133
일러스트레이션 기반의 아트워크 ... 134
사진 기반의 아트워크 ... 135
브라우저에서 안전한 색상을 사용하는 방법 ... 136
브라우저에서 안전한 16진수 색상 선택하기 ... 136
다른 변환 방법 ... 137
16진수 색상 선택에 도움을 주는 것들 ... 138
팬톤사의 안전한 해결책 ... 139
CMYK는 브라우저에서 안전하게 보여지지 않는다 ... 139
브라우저에서 안전한 색상 선택하기 ... 140
CLUT란 무엇인가 ... 140
브라우저에서 안전한 스위치 팔레트를 포토숍에서 불러오는 방법 ... 141
이미지레디에서 팔레트 불러오기 ... 142
브라우저에서 안전한 팔레트를 파이어웍스로 불러오기 ... 143
GIF 아트워크가 브라우저에서 제대로 보여지는지 확인하는 방법 ... 144
포토숍에서의 GIF파일 ... 144
이미지레디에서 안전하게 디스플레이되는 GIF파일 ... 145
파이어웍스에서 안전하게 디스플레이되는 GIF파일 ... 145
벡터 기반의 소프트웨어 : 일러스트레이터와 프리핸드 ... 146
일러스트레이터 8.0의 안전한 색상들 ... 146
일러스트레이터 8.0의 스와치로 작업하는 방법 ... 146
일러스트레이터 7.0과 8.0의 CMYK 문제 ... 147
프리핸드 8.0으로 작업하기 ... 148
브라우저에서 안전한 색상을 유지할 수 없는 JPEG 아트워크 ... 149
복합적인 이미지 ... 150
포토숍에서 GIF로 저장된 복합적인 이미지 ... 150
파이어웍스에서 GIF로 저장된 복합적인 이미지 ... 151
이미지레디에서 GIF로 저장된 복합작인 이미지 ... 152
브라우저에서 불안전한 색상의 이미지 ... 153
요점정리 ... 154
9. 색상의 미학 ... 155
색상에 대한 전문용어 ... 156
색상 주제 정하기 ... 158
색상의 관계에 대한 용어 ... 158
웹 디자인에 색상 대비 적용하기 ... 160
색상 대비를 위한 도구 ... 162
Coloring Web Graphics.2 ... 162
색상을 조화시키는 포토숍 플러그인 ... 166
가독성 ... 167
색상 갤러리 ... 168
요점 정리 ... 172
10. 색상과 관련된 HTML 태그 ... 173
기본 색상 ... 174
색상 속성 ... 174
BODY 태그 ... 175
링크 색상 ... 176
16진수 대신에 사용할 수 있는 색상 이름 ... 177
색상 이름은 브라우저에서 안전한 경우가 적다 ... 177
넷스케이프에서의 색상 속성 ... 178
FONT태그 ... 178
TABLE태그 ... 179
요점정리 ... 180
11. 기본 링크 ... 181
링크 설절하기 ... 182
링크된 이미지 ... 183
이미지의 테두리 없애기 ... 183
넓이와 높이의 중요성 ... 184
비트맵의 축소와 확대 ... 185
WIDTH와 HEIGHT를 이용한 시각 효과 ... 185
ALT 속성의 중요성 ... 186
미국의 장애인 법률 ... 187
섬네일과 큰 이미지 ... 188
다른 매체로 링크시키기 ... 190
사운드와 무비 파일 ... 190
파일 타입과 HTML ... 190
링크된 그래픽에 대한 미적 조언 ... 191
요점 정리 ... 192
12. 배경 타일 ... 193
배경 타일 만들기 ... 194
타일 패턴의 크기 결정 ... 195
화면을 채우는 배경 ... 196
패턴화된 타일을 위한 파일 포맷 ... 198
이음새를 있게 할 것인가, 말 것인가, 그것이 문제로다 ... 199
이음새 ... 199
이미지레디와 포토숍을 이용하여 이음새 없애기 ... 200
이미지레디에서 이음새 없는 타일 만들기 ... 200
포토숍에서 이음새 없는 타일 만들기 ... 201
한 방향으로 길게 이어진 타일 ... 202
배경의 미학 ... 203
요점 정리 ... 204
13. 투명한 아트워크 ... 205
투명도란 무엇인가? ... 206
투명도 가장하기 ... 207
마스킹을 쓰는 방법 ... 207
트릭을 쓰는 방법 ... 207
브라우저의 환경설정 ... 208
투명하게 보이도록 꾸밀 수 없는 패턴 타일 ... 208
GIF 투명도 ... 209
전문가와 안티알리아싱 ... 210
GIF 투명도로 부드러운 외곽, 글로, 그림자 효과 내기 ... 211
GIF 투명도를 위한 툴과 테크닉 ... 212
이미지레디의 GIF 투명도 ... 212
파이어웍스의 GIF 투명도 ... 214
포토숍 5.0의 GIF 투명도 ... 215
GIF89a에 대해서 ... 215
PNG투명도 ... 217
요점 정리 ... 218
14. 선, 버튼, 강조점 ... 219
수평선 ... 220
HTML 방식의 수평선 ... 221
장식적인 수평선 태그 ... 222
수평선과 배경 타일 ... 224
자신만의 방법으로 수평선 만들기 ... 224
포토숍5.0으로 선 만들기 ... 225
수직선 ... 228
클립 아트가 제공하는 선 ... 228
강조점 ... 229
HTML로 강조점을 넣은 목록 ... 229
순위 목록과 정의 목록 만들기 ... 230
조직화된 순위 목록 ... 231
사용자 정의 강조점 만들기 ... 232
자신만의 강조점 아트워크 만들기 ... 233
포토숍에서 레이어 이펙트 설정을 이용해 버튼 만들기 ... 234
클립아트버튼 ... 235
요점 정리 ... 236
15. 이미지맵 ... 237
클라이언트 사이드와 서버 사이드 이미지 맵 ... 238
클라이언트 사이드 이미지맵의 코드 ... 240
서버 사이드 이미지맵 ... 241
서버 사이드 클라이언트 사이드 이미지맵을 혼합해서 사용하기 ... 242
ALT 태그의 중요성 ... 243
Width와 Height 속성의 중요성 ... 243
이미지맵은 진정 필요한 것인가? ... 244
주석이란 무엇인가? ... 244
파이어웍스로 이미지맵 만들기 ... 245
이미지레디로 이미지맵 만들기 ... 246
이미지맵에 대한 기타 자료 ... 247
요점정리 ... 248
16. 웹 타이포그래피 ... 249
필수적인 타이포그래피 용어 ... 250
HTML에서 불가능한 요소들 ... 251
타아포그래픽에 대한 학습 ... 252
마이크로소프트사의 타이포그래피 ... 252
미학적인 고려 ... 253
웹 페이지 인쇄하기 ... 253
HTML 기반의 타이포그래피 ... 254
HTML 폰트의 선택 ... 255
FONT FACE 태그 ... 256
Verdana와 Georgia ... 256
맥과 PC의 폰트 크기 차이 ... 257
그래픽 기반의 타이포그래피 ... 258
알리아스와 안티알리아스 ... 258
활자 디자인을 위해 파이어웍스 사용하기 ... 259
온라인 폰트에 대한 자료들 ... 260
텍스트 그래픽을 위해 HTML 작성하기 ... 261
폰트 임베딩이란 무엇인가? ... 262
트루독(TrueDoc) ... 262
트루타입 임베딩과 오픈타입 ... 263
보안 범위 ... 264
임베딩에 반대하는 서체 디자이너들 ... 265
PDF란 무엇인가? ... 266
플래시에 대해서 ... 267
요점 정리 ... 268
17. 정렬과 테이블 ... 269
웹 페이지는 얼마나 큰가? ... 270
HTML 태그를 이용한 정렬 ... 271
텍스트 정렬 태그와 속성 ... 272
HTML을 이용한 행간 ... 273
이미지 정렬 태그 ... 274
가로 세로 여백을 위한 태그 ... 274
WIDTH와 HEIGHT 속성 ... 276
HTML 대신에 아트워크 이용하기 ... 277
WIDTH와 HEIGHT 속성으로 여백 만들기 ... 277
테이블을 이용한 정렬 ... 278
데이터 테이블 ... 278
HTML 테이블 태그 ... 279
페이지 레이아웃을 위한 그래픽 테이블 ... 282
퍼센트와 픽셀 ... 282
퍼센트 기반의 테이블 ... 282
픽셀 기반의 테이블 ... 283
테이블을 끝내라! ... 284
테이블을 이용해 들여쓰기 ... 285
WYSIWYG 테이블 ... 286
이미지 편집 소프트웨어의 테이블 기능 ... 287
요점 정리 ... 288
18. 프레임 ... 289
프레임이란 무엇인가? ... 290
프레임의 긍정적인 면과 부정적인 면 ... 291
프레임에 대한 기본 지식 ... 292
프레임 배우기 ... 293
프레임세트를 위한 코드 ... 293
테두리 두께를 증가시키기 위한 코드 ... 293
테두리를 없애기 위한 코드 ... 294
컨텐츠를 자르기 위한 코드 ... 294
상대적인 위치를 정하기 위한 코드 ... 294
프레임을 포함시키기 위한 코드 ... 295
타깃 지정하기 ... 296
container.html 안의 코드 ... 296
타깃으로서 프레임을 이용하기 위한 코드 ... 297
프레임세트를 대치하기 위한 코드 ... 297
프레임을 위한 타깃 태그 ... 297
재미있는 프레임 ... 298
여섯 개의 프레임으로 분리된 프레임세트를 위한 코드 ... 302
블리딩된 테두리를 간단하게 제작하기 ... 302
프레임을 대체하기 위한 페이지 ... 303
요점정리 ... 304
19. 계층적인 스타일 시트 ... 305
스타일 시트란 무엇인가? ... 306
스타일 시트 분석 ... 307
'계층적인'의 의미는? ... 307
옛 버전의 브라우저에서 스타일을 안 보이게 하기 ... 308
외부, 내부, 인라인 스타일 시트 ... 309
활자와 측정 단위 ... 310
타이포그래피 작업하기 ... 311
선택자(Selectors) ... 312
ID와 CLASS ... 312
절대적인 위치 정하기 ... 313
DIV와 절대적인 위치 정하기 ... 314
텍스트와 이미지를 레이어로 쌓기 ... 315
텍스트와 이미지를 레이어로 쌓기 위한 코드 ... 316
코드 분석 ... 318
WSIWYG편집기 ... 319
요점 정리 ... 320
20. 웹을 위한 스캐닝 기법 ... 321
해상도를 어떻게 정할까? ... 322
스캐닝 용어 사전 ... 323
스캐닝 장비 ... 323
디지털 카메라와 DV ... 324
스캔 대신에 이용할 수 있는 포토 CD ... 325
포토숍5.0에서 이미지 크기 조절하기 ... 326
Indexed Color 모드에서 크기를 조절하자 말라 ... 327
망점 스크린의 패턴과 무아레 ... 328
이미지 프로세싱 테크닉 ... 330
Leveis ... 330
색조 / 채도 ... 331
요점 정리 ... 332
21. GIF 애니메이션 ... 333
애니메이션의 미학 ... 334
애니메이션 GIF포맷 ... 335
애니메이션 GIF가 지원하는 기능 ... 335
애니메이션 GIF에 대한 자료 ... 335
GIF 애니메이션 용어 해설 ... 336
애니메이션을 만드는 방법 ... 338
일반적인 애니메이션 전문용어 ... 339
프레임-바이-프레임 GIF 애니메이션을 위한 툴과 테크닉 ... 340
파이어웍스에서의 프레임 애니메이션 ... 341
이미지레디에서의 모션 그래픽 ... 342
파이어웍스에서 애니메이션을 위한 트위닝 ... 343
그밖의 GIF 애니메이션 툴 ... 344
요점 정리 ... 346
22. 자바스크립트 ... 347
자바스크립트의 간략한 역사 ... 348
자바스크립트 배우기 ... 349
롤오버 ... 350
롤오버 아트워크 만들기 ... 350
대치하기의 예 ... 351
가리키기의 예 ... 351
복합적인 방법의 예 ... 351
롤오버를 위한 포토숍 레이어 ... 352
롤오버 잘라내기 ... 352
이미지레디에서 잘라내고 최적화하기 ... 353
파이어웍스에서 간단히 롤오버 제작하기 ... 354
파이어웍스에서의 롤오버 ... 356
파이어웍스로 제작한 테이블 안의 롤오버 ... 357
드림위버에서의 롤오버 ... 358
드림위버에서 대치하기 방법의 롤오버 제작 ... 358
드림위버에서 대칳기 방법의 롤오버 코드 ... 359
드림위버에서 가리키기 방법의 롤오버 제작 ... 360
드림위버에서 가라키기 방법의 롤오버 코드 ... 361
드림위버에서 복합적인 방법의 롤오버 제작 ... 362
드림위버에서 복합적인 방법의 롤오버 코드 ... 364
호환성 점검 ... 365
브라우저에 대한 호환성 점검 ... 368
호환성 점검을 위한 코드 ... 368
별개의 윈도우 띄우기 ... 369
별개의 윈도우를 띄우기 위한 코드 ... 369
요점 정리 ... 370
23. 마이나믹 HTML ... 371
DHTML 개관 ... 372
계층적인 스타일 시트 ... 372
자바스크립트 ... 372
플러그인 ... 372
DOM ... 372
DHTML의 멋진 기능 ... 373
DHTML 제대로 사용하기 ... 373
레이어 ... 374
애니메이션 ... 376
드래그 앤 드롭 ... 380
DHTMLzone ... 385
요점 정리 ... 386
24 퀵타임 3.0 ... 387
퀵타임에 대한 이해 ... 388
웹을 위해 향상된 기능 ... 388
퀵타임 3.0의 웹 환경 ... 389
'포스터'무비 ... 389
HREF,스프라이트와 텍스트 트랙 ... 389
다양한 데이터 전송률의 예 ... 390
스트리밍 ... 391
이미지 포맷 지원 ... 391
DV 캠코더 지원 ... 391
QTVR 지원 ... 391
일반적인 퀵타임 명령어 ... 392
퀵타임의 부정적인 면 ... 392
디지털 비디오 용어 해설 ... 393
요점 정리 ... 394
25. 플래시와 쇽웨이브 ... 395
플러그인의 신뢰성 ... 396
플러그인 페이지로 방문객 보내기 ... 396
플래시 파일 포맷 ... 397
플래시 배우기 ... 398
플래시에서 드로잉하기 ... 398
플래시 자료들 ... 398
장면과 심벌 ... 399
심벌 만들기 ... 399
심벌과 장면의 관리 ... 399
타임라인과 키프레임 ... 400
롤오버 버튼 ... 400
버튼에 사운드 더하기 ... 401
플래시의 상호대화성 ... 402
플래시와 웹의 통합성 ... 403
SWF를 포함하는 HTML 프레임 ... 404
쇽웨이브 컨텐츠 ... 405
쇽웨이브 파일 저장하기 ... 405
디렉터 7에 대한 소개 ... 406
디렉터의 인터페이스 ... 406
새로운 웹 관련 기능 ... 408
디렉터와 플래시를 위한 애프터쇽 ... 409
요점 정리 ... 410
26. 시각 디자이너를 위한 HTML ... 411
HTML 파일명을 위한 프로토콜 ... 412
일반적인 파일명 ... 412
파일 확장자 ... 412
상대적인 또는 절대적인 파일 경로명 ... 413
문제 해결 ... 414
여러분의 페이지 체크하기 ... 414
페이지 업로드하기 ... 415
일반적인 HTML 태그 ... 416
표제어 태그 ... 416
본문 태그 ... 416
텍스트를 위한 정렬 태그와 속성 ... 416
텍스트 태그 ... 417
수평선 태그 ... 417
링크 태그와 속성 ... 417
이미지를 위한 정렬 태그와 속성 ... 418
이미지 태그 ... 418
목록 태그와 속성 ... 418
주석 태그 ... 418
테이블 태그 ... 419
프레임 태그와 속성 ... 419
주석 태그 ... 419
요점 정리 ... 420
27 웹 그래픽 자료 ... 421
디자인 회의 ... 422
디지털 아트 교육 프로그램 ... 422
도움이 될 만한 URL ... 424
웹 사이트 디자인 갤러리 ... 424
잡지 ... 424
용어 설명 ... 425
찾아 보기 ... 431
더보기 닫기