목차 일부
1 웹 디자인의 기초 ... 18
1. 인터넷(Internet) ... 23
인터넷의 역사 ... 23
인터넷의 종류 ... 24
인터넷의 발전 ... 26
인터넷의 현재상황 ... 27
2. 웹미디어(Webmedia) ... 31
미디어의 개념 ... 31
매스미디어와 웹 ... ...
더보기
목차 전체
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
더보기 닫기