內 容 簡 介
全書共分為20章，分別介紹了初識Photoshop CS6、圖像的簡單編輯、選區的創建與基本操作、調整
圖像的色彩、繪制與修飾圖像、快速制作圖像特效、圖層蒙版與通道的應用、制作網頁文字特效、制作
網頁按鈕與導航條、制作網頁特效邊線與背景、制作網站Logo、制作網頁Banner、網頁配色基礎概述、
網頁配色的要領、網頁配色的色彩表現、配色工具的使用、根據網頁色調進行配色、不同網站網頁配色
設計分析。最后以2個綜合網站的設計為例進行講解，通過每章的綜合實例，使讀者進一步鞏固所學知
識，提高綜合實戰能力。
本書涉及面廣泛，幾乎涉及了Photoshop CS6網頁設計與配色的所有重要知識，適合所有網頁設計初
學者快速入門，同時也適合想全面了解Photoshop CS6網頁設計與配色的設計人員閱讀。
本書內容豐富全面，圖文并茂，通俗易懂，便于讀者理解并掌握Photoshop CS6網頁設計與配色的技
術，從而能解決實際生活和工作中的問題，真正做到知其然更知其所以然。本書條理清晰、系統地為讀
者介紹了其希望了解的網頁設計技巧。
本書注重實用，可操作性強，詳細講解書中每一個知識點和技巧，真正體現本書“完全”的含義，
是一本物超所值的好書。前 言
Photoshop CS6在網頁設計和配色方面的應用越來越普遍，包括版面設計，按鈕的制作及應用，制作Banner和導航條、制作網頁廣告、文字特效，網頁其他組成部分的設計和制作等內容。對初學者來說，實用性強和易于操作是目前最大的需求。本書針對想學習網頁設計和配色的初學者的需要編寫而成，能讓初學者快速入門后提高實戰水平。
本書特色
知識豐富全面：知識點由淺入深，涵蓋了所有Photoshop CS6的網頁設計和配色知識點，使讀者由淺入深地掌握Photoshop CS6在網頁設計和配色方面的技能。
圖文并茂：注重操作，圖文并茂，在介紹案例的過程中，每一個操作均有對應的插圖。這種圖文結合的方式能讓讀者在學習過程中直觀、清晰地看到操作的過程以及效果，便于更快地理解和掌握。
易學易用：本書的編寫顛覆了傳統“看”書的觀念，使本書成為一本能“操作”的圖書。
案例豐富：把知識點融匯于系統的案例實訓當中，并且結合經典案例進行講解和拓展，從而達到使讀者“知其然，并知其所以然”的效果。
提示技巧、貼心周到：本書對讀者在學習過程中可能會遇到的疑難問題以“提示”和“技巧”的形式進行了說明，以免讀者在學習的過程中走彎路。
超值贈送：除了素材和結果外，本書還將贈送封面所述的大量的資源，通過它們，讀者可以全面掌握網頁設計和配色方方面面的知識。
讀者對象
本書不僅適合網頁設計和配色初級讀者入門學習，還可作為中、高級用戶的參考手冊。書中大量的實例模擬真實的網頁設計案例，對讀者的工作有現實的借鑒作用。
鳴謝
除劉玉紅外，還有胡同夫、梁云亮、王攀登、王婷婷、陳偉光、包慧利、孫若淞、肖品、王維維和劉海松等人參與了本書的編寫工作。編者雖然傾注了努力，但由于水平有限、時間倉促，書中難免有疏漏之處，請讀者諒解。如果遇到問題或有任何意見和建議，敬請與我們聯系，我們將全力提供幫助。目 錄
第1章 初識Photoshop CS6 1
1.1 啟動與退出Photoshop CS6 2
1.1.1 啟動Photoshop CS6 2
1.1.2 退出Photoshop CS6 2
1.2 認識Photoshop CS6的工作界面 3
1.2.1 認識菜單欄 4
1.2.2 認識工具箱 5
1.2.3 認識選項欄 5
1.2.4 認識調板 5
1.2.5 認識屬性欄 6
1.2.6 認識狀態欄 6
1.3 了解Photoshop CS6的新增功能 7
1.3.1 全新的界面設計 7
1.3.2 內容感知移動工具 7
1.3.3 模糊濾鏡 8
1.3.4 新增自動保存和圖層搜索功能 11
1.3.5 一鍵美圖功能 12
1.3.6 全新的裁剪工具 13
1.3.7 透視裁切工具 13
1.3.8 鏡頭矯正 14
1.3.9 視頻處理功能 15
1.3.10 迷你管理器 15
1.3.11 全新的Adobe Mercury圖形引擎 15
1.3.12 靈活的畫筆調整 16
1.3.13 矢量圖形樣式 16
1.3.14 Camera Raw增效工具 16
1.3.15 膚色選擇功能 16
1.3.16 新增3D文字特效工具 17
1.4 綜合實例1——在Photoshop CS6當中構建網頁結構 17
1.5 綜合實例2——使用Photoshop CS6進行切圖 19
1.6 專家答疑 20
第2章 圖像的簡單編輯 21
2.1 文件的基本操作 22
2.1.1 新建文件 22
2.1.3 保存文件 23
2.1.4 置入文件 24
2.1.5 關閉文件 26
2.2 圖像的基本操作 26
2.2.1 使用導航器查看圖像 26
2.2.2 使用縮放工具查看圖像 27
2.2.3 使用抓手工具查看圖像 27
2.2.4 調整圖像的大小 28
2.2.5 調整畫布的大小 28
2.2.6 調整圖像的方向 30
2.2.7 裁剪圖像 31
2.2.8 圖像的變換與變形 33
2.3 綜合實例1——圖像的藝術化修飾 34
2.4 綜合實例2——為圖像添加背景 35
2.5 專家答疑 36
第3章 選區的創建與基本操作 37
3.1 認識選區 38
3.2 創建選區的工具、命令 38
3.2.1 選框工具 38
3.2.2 鋼筆工具 39
3.2.3 磁性套索、魔棒選擇工具 40
3.2.4 蒙版工具 41
3.2.5 快速選擇+調整邊緣工具 42
3.2.6 【色彩范圍】命令 42
3.2.7 通道工具 43
3.3 選區的基本操作 44
3.3.1 快速選擇選區與反選選區 44
3.3.2 取消選擇和重新選擇 45
3.3.3 添加選區與減去選區 45
3.3.4 羽化選區 47
3.3.5 精確選擇選區與移動選區 48
3.3.6 隱藏或顯示選區 48
3.4 選區的編輯 49
3.4.1 選區圖像的變換 49
3.4.2 存儲和載入選區 51
3.4.3 描邊選區 52
3.4.4 羽化選區邊緣 52
3.4.5 擴大選取與選取相似 53
3.4.6 修改選區邊界 54
3.4.7 平滑選區邊緣 55
3.4.8 擴展選區 56
3.4.9 收縮選區 57
3.5 綜合實例1——用橢圓選框工具設計光盤封面 58
3.6 綜合實例2——使用【調整邊緣】命令摳毛發 60
3.7 專家答疑 63
第4章 調整圖像的色彩 65
4.1 了解圖像的顏色模式 66
4.1.1 RGB顏色模式 66
4.1.2 CMYK顏色模式 67
4.1.3 灰度模式 68
4.1.4 位圖模式 69
4.1.5 雙色調模式 69
4.1.6 索引顏色模式 70
4.1.7 Lab顏色模式 70
4.2 快速調整圖像的色彩 71
4.2.1 調整圖像的色階 71
4.2.2 調整圖像的亮度/對比度 71
4.2.3 調整圖像的色彩平衡 72
4.2.4 調整圖像的曲線 72
4.2.5 調整圖像的色相/飽和度 73
4.2.6 將彩色照片變成黑白照片 74
4.2.7 匹配圖像顏色 75
4.2.8 為圖像替換顏色 76
4.2.9 使用【可選顏色】命令調整圖像 76
4.2.10 調整圖像的陰影/高光 77
4.2.11 調整圖像的曝光度 78
4.2.12 使用【通道混和器】命令調整圖像的顏色 78
4.2.13 為圖像添加漸變映射效果 79
4.2.14 調整圖像的偏色 80
4.2.15 實現圖片的底片效果 80
4.2.16 使用【色調均化】命令調整圖像 81
4.2.17 制作黑白分明的圖像效果 81
4.2.18 實現圖片的特殊效果 82
4.2.19 實現圖像不同色調區的調整 82
4.2.20 使用【自然飽和度】命令調整圖像的色彩 83
4.2.21 使用【黑白】命令調整圖像的色彩 83
4.3 綜合實例1——校正偏紅圖片 84
4.4 綜合實例2——模糊風景照片的處理 86
4.5 專家答疑 88
第5章 繪制與修飾圖像 89
5.1 使用繪畫工具繪制圖像 90
5.1.1 畫筆工具 90
5.1.2 鉛筆工具 95
5.1.3 歷史記錄藝術畫筆工具 97
5.1.4 形狀工具 98
5.2 使用修飾工具修飾圖像 101
5.2.1 污點修復畫筆工具 101
5.2.2 修復畫筆工具 103
5.2.3 修補工具 104
5.2.4 紅眼工具 106
5.2.5 仿制圖章工具 107
5.2.6 模糊工具 107
5.2.7 銳化工具 108
5.2.8 涂抹工具 108
5.3 綜合實戰1——將兩張圖像糅合為一張圖像 111
5.4 綜合實戰2——制作潑墨山水畫 112
5.5 專家答疑 116
第6章 快速制作圖像特效 117
6.1 濾鏡概述 118
6.1.1 濾鏡庫 118
6.1.2 濾鏡的使用方法 118
6.2 使用濾鏡制作扭曲效果 119
6.2.1 放大鏡效果——液化濾鏡 119
6.2.2 波浪效果 120
6.2.3 玻璃效果 120
6.2.4 波紋效果 121
6.2.5 球面化效果 121
6.2.6 擠壓效果 121
6.2.7 旋轉扭曲效果 122
6.3 使用濾鏡制作風格化效果 122
6.3.1 浮雕效果 123
6.3.2 風效果 124
6.3.3 馬賽克拼貼效果 124
6.3.4 查找邊緣效果 125
6.3.5 拼貼效果 125
6.3.6 凸出效果 126
6.4 使用濾鏡使圖像清晰或模糊 126
6.4.1 銳化與銳化邊緣效果 127
6.4.2 智能銳化效果 127
6.4.3 表面模糊效果 128
6.4.4 動感模糊效果 129
6.4.5 高斯模糊效果 129
6.4.6 徑向模糊效果 130
6.4.7 鏡頭模糊效果 130
6.5 使用濾鏡制作藝術效果 131
6.5.1 壁畫效果 131
6.5.2 彩色鉛筆效果 132
6.5.3 粗糙蠟筆效果 132
6.5.4 底紋效果 133
6.5.5 調色刀效果 133
6.5.6 干畫筆效果 134
6.5.7 海報邊緣效果 134
6.5.8 海綿效果 135
6.5.9 繪畫涂抹效果 135
6.5.10 膠片顆粒效果 136
6.5.11 木刻效果 136
6.5.12 霓虹燈光效果 137
6.5.13 水彩效果 137
6.5.14 塑料包裝效果 138
6.5.15 涂抹棒效果 138
6.6 其他常用濾鏡組 139
6.6.1 【素描】濾鏡組 139
6.6.2 【紋理】濾鏡組 140
6.6.3 【像素化】濾鏡組 141
6.6.4 【渲染】濾鏡組 141
6.7 綜合實戰1——去除照片多余人物 142
6.8 綜合實戰2——制作藍色特效魔圈 144
6.9 專家答疑 146
第7章 圖層蒙版與通道的應用 147
7.1 圖層的基本操作 148
7.1.1 創建圖層 148
7.1.2 隱藏與顯示圖層 148
7.1.3 對齊圖層 149
7.1.4 合并圖層 151
7.1.5 設置不透明度和填充 152
7.2 圖層的樣式操作 154
7.2.1 斜面和浮雕 154
7.2.2 外發光 155
7.2.3 描邊 155
7.2.4 圖案疊加 156
7.3 蒙版的應用 157
7.3.1 剪貼蒙版 157
7.3.2 快速蒙版 159
7.3.3 圖層蒙版 161
7.3.4 矢量蒙版 163
7.4 通道的應用 164
7.4.1 復合通道 164
7.4.2 顏色通道 168
7.4.3 專色通道 170
7.4.4 Alpha通道 172
7.5 綜合實例1——使用計算功能制作灰色圖像 176
7.6 綜合實例2——綜合運用選擇工具設計時鐘 179
7.7 專家答疑 186
第8章 制作網頁文字特效 187
8.1 創建文字效果 188
8.1.1 輸入文字 188
8.1.2 設置文字屬性 189
8.1.3 設置段落屬性 190
8.1.4 轉換文字形式 191
8.1.5 通過調板設置文字格式 192
8.1.6 柵格化文字 194
8.1.7 創建變形文字 194
8.1.8 創建路徑文字 195
8.2 綜合案例1——制作水晶文字 196
8.3 綜合案例2——制作燃燒的文字 197
8.4 專家答疑 202
第9章 制作網頁按鈕與導航條 203
9.1 按鈕與導航條的設計原則 204
9.1.1 網頁按鈕的設計注意事項 204
9.1.2 網頁導航條的設計注意事項 204
9.2 制作按鈕 205
9.2.1 實例1——制作普通按鈕 205
9.2.2 實例2——制作迷你按鈕 207
9.2.3 實例3——制作水晶按鈕 210
9.2.4 實例4——制作木紋按鈕 216
9.3 制作導航條 218
9.3.1 實例5——制作橫向導航條 218
9.3.2 實例6——制作縱向導航條 222
9.4 專家答疑 224
第10章 制作網頁特效邊線與背景 225
10.1 制作裝飾邊線 226
10.1.1 實例1——裝飾虛線的制作 226
10.1.2 實例2——內嵌線條的制作 228
10.1.3 實例3——斜紋線條的制作 230
10.2 背景圖片的制作 231
10.2.1 實例4——制作漸變背景圖片 231
10.2.2 實例5——制作透明背景圖像 235
10.2.3 實例6——魔幻背景圖像的制作 237
10.3 專家答疑 240
第11章 制作網站Logo 241
11.1 網站Logo概述 242
11.1.1 網站Logo設計標準 242
11.1.2 網站Logo的標準尺寸 243
11.1.3 網站Logo的一般形式 244
11.2 制作時尚空間感的文字Logo 244
11.2.1 制作背景 244
11.2.2 制作文字內容 245
11.2.3 繪制自定義形狀 247
11.2.4 美化文字Logo 247
11.3 制作圖案Logo 249
11.3.1 制作背景 249
11.3.2 制作圖案效果 251
11.4 圖文結合Logo 253
11.4.1 制作網站Logo中的圖案 253
11.4.2 制作網站Logo中的文字 255
11.5 專家答疑 258
第12章 制作網頁Banner 259
12.1 網站Banner概述 260
12.1.1 網站Banner的標準尺寸 260
12.1.2 Banner設計注意要點 260
12.2 制作英文Banner 261
12.2.1 實例1——制作Banner背景 261
12.2.2 實例2——制作Banner底紋 262
12.2.3 實例3——制作文字特效 263
12.3 制作中文Banner 264
12.3.1 實例4——輸入特效文字 264
12.3.2 實例5——將輸入的文字設置為3D效果 265
12.3.3 實例6——制作Banner背景 267
12.4 專家答疑 268
第13章 網頁配色基礎概述 269
13.1 網頁色彩概述 270
13.1.1 了解網頁的色彩 270
13.1.2 色彩的基礎知識 271
13.1.3 Web216安全色 274
13.2 色彩標準概述 275
13.2.1 網頁色彩的搭配技巧 275
13.2.2 色彩三屬性 276
13.2.3 色彩的對比與調和 277
13.2.4 色彩的心理聯想 278
13.2.5 不同配色方案的心理感覺 279
13.3 色調和色相環 281
13.3.1 色調 281
13.3.2 色彩三原色 281
13.3.3 冷暖色系之分 282
13.3.4 同一色系 282
13.3.5 色相環的色相關系 283
13.4 色彩的感覺 284
13.4.1 色彩的冷暖感覺 284
13.4.2 色彩的輕重感覺 284
13.4.3 色彩的爽朗郁悶感 285
13.4.4 色彩的興奮沉穩感 285
13.4.5 色彩的華麗與樸實 286
13.4.6 色彩的酸甜苦辣感 286
13.5 專家答疑 288
第14章 網頁配色的要領 289
14.1 網頁的版式結構 290
14.1.1 “國”字形網頁結構 290
14.1.2 “呂”字形網頁結構 291
14.1.3 “川”字形網頁結構 292
14.1.4 “回”字形網頁結構 293
14.2 網頁配色常識 294
14.2.1 網站Logo的配色常識 294
14.2.2 網頁Banner的配色常識 298
14.2.3 網頁導航的配色常識 301
14.2.4 網頁主頁面的配色常識 303
14.2.5 網頁子頁面的配色常識 305
14.3 網頁配色方法 306
14.3.1 對比色配色法 306
14.3.2 鄰近色配色法 307
14.3.3 冷暖互補配色法 309
14.3.4 色彩的疊加配色法 310
14.3.5 色彩的柔光配色法 312
14.3.6 色彩的透明度配色法 313
14.4 專家答疑 314
第15章 網頁配色的色彩表現 315
15.1 網頁標志的色彩表現 316
15.1.1 紅色標志 316
15.1.2 黃色標志 316
15.1.3 藍色標志 316
15.1.4 綠色標志 316
15.1.5 紫色標志 316
15.2 網頁的色彩表現 317
15.2.1 性別的色彩表現 317
15.2.2 年齡的色彩表現 318
15.2.3 商業的色彩表現 320
15.2.4 虛擬網站的色彩表現 321
15.2.5 自然界的色彩表現 322
15.3 網頁的色彩信息量 323
15.3.1 紅色的信息量與網頁表現 323
15.3.2 黃色的信息量與網頁表現 326
15.3.3 綠色的信息量與網頁表現 328
15.3.4 藍色的信息量與網頁表現 329
15.3.5 黑白色的信息量與網頁表現 331
15.3.6 灰色的信息量與網頁表現 333
15.4 專家答疑 333
第16章 配色工具的使用 335
16.1 使用經典配色工具——ColorImpact 336
16.1.1 建立漂亮的顏色方案 336
16.1.2 通過內置工具獲取配色方案 337
16.1.3 通過高級色環獲取配色方案 340
16.1.4 查看獲取的配色方案 343
16.2 其他網頁配色工具的使用 345
16.2.1 使用Kuler網頁配色工具 345
16.2.2 使用Web Safe Colours網頁配色工具 348
16.2.3 使用Color Schemer網頁配色工具 351
16.2.4 使用Color Toy網頁配色工具 352
16.2.5 使用Color Jack網頁配色工具 352
16.2.6 使用Color Scheme Designer網頁配色工具 354
16.3 專家答疑 360
第17章 根據網頁色調進行配色 361
17.1 紅色主題色調網頁的配色 362
17.1.1 網站類型分析 362
17.1.2 網頁配色詳解 363
17.2 橙色和黃色主題色調網頁的配色 365
17.2.1 網站類型分析 365
17.2.2 網頁配色詳解 366
17.3 黃綠色主題色調網頁的配色 369
17.3.1 網站類型分析 369
17.3.2 網頁配色詳解 369
17.4 綠色和青綠色主題色調網頁的配色 371
17.4.1 網站類型分析 372
17.4.2 網頁配色詳解 373
17.5 藍色和藍紫色主題色調網頁的配色 375
17.5.1 網站類型分析 376
17.5.2 網頁配色詳解 376
17.6 紫色主題色調網頁的配色 380
17.6.1 網站類型分析 380
17.6.2 網頁配色詳解 380
17.7 紫紅色主題色調網頁的配色 381
17.7.1 網站類型分析 381
17.7.2 網頁配色詳解 382
17.8 黑色主題色調網頁的配色 383
17.8.1 網站類型分析 383
17.8.2 網頁配色詳解 383
17.9 白色主題色調網頁的配色 384
17.9.1 網站類型分析 384
17.9.2 網頁配色詳解 384
17.10 灰色主題色調網頁的配色 385
17.10.1 網站類型分析 385
17.10.2 網頁配色詳解 386
17.11 專家答疑 386
第18章 不同網站網頁配色設計分析 387
18.1 門戶類網站配色設計分析 388
18.1.1 色彩設計與網站風格 388
18.1.2 框架與色彩 388
18.1.3 風格設計的創新與延續 389
18.2 資訊類網站配色設計分析 390
18.2.1 網頁導航與布局 390
18.2.2 框架與色彩 390
18.2.3 各類信息與風格設計 391
18.3 時尚類網站配色設計分析 391
18.3.1 流行文化與時尚 391
18.3.2 各類信息與風格設計 392
18.3.3 文體時尚 393
18.3.4 品牌時尚 394
18.4 企業類網站配色設計分析 395
18.4.1 企業文化與VIS的統一 396
18.4.2 風格設計與各類信息 396
18.4.3 以形象為主的企業網站 397
18.4.4 以產品為主的企業網站 398
18.5 電子商務類網站配色設計分析 399
18.5.1 框架與色彩 399
18.5.2 信息的可信度 399
18.5.3 商品信息與網站層級結構 400
18.5.4 小店鋪型風格設計 401
18.5.5 風格取決于消費者的偏好 402
18.6 文化與生活類網站配色設計分析 402
18.6.1 網站文化與網站氣息 403
18.6.2 框架與色彩 404
18.6.3 風格設計 404
18.7 娛樂類網站配色設計分析 405
18.7.1 網站的受眾定位 406
18.7.2 多樣的色彩風格 406
18.7.3 氣氛營造與網站風格 407
18.8 個人類網站配色設計分析 409
18.8.1 風格多樣化 409
18.8.2 自由的色彩 410
18.8.3 多樣的色彩風格 411
18.9 專家答疑 412
第19章 電子商務網站配色全過程 413
19.1 經典電子商務網頁配色分析 414
19.2 電子商務網站的主要配色法則 416
19.2.1 網站主色調的選擇 416
19.2.2 網站主體內容的配色 418
19.3 電子商務網站配色的步驟 418
19.3.1 主題色的確定 419
19.3.2 確定主題色的搭配 419
19.3.3 主題色布局 421
19.3.4 頁面色彩相互呼應 422
第20章 在線購物網頁設計實戰 423
20.1 設計網頁Logo 424
20.2 設計網頁導航欄 427
20.3 設計網頁的Banner 428
20.4 設計網頁正文部分 436
20.4.1 設計正文導航 436
20.4.2 設計正文內容 439
20.5 設計網頁頁腳部分 442
20.6 組合在線購物網頁 443
20.7 保存網頁 446
20.8 對網頁進行切片處理 447
