《Photoshop網頁風格與配色設計全程揭秘》是2014年清華大學出版社出版的圖書，作者是張曉景。
基本介紹
內容簡介,目錄,
內容簡介
本書以目前最受歡迎的平面設計軟體Photoshop為設計工具，對網頁設計的配色技巧和原理進行了全面、細緻的剖析。
本書首先從理論方面介紹了網頁配色的一些基礎知識，包括色彩基礎知識、色彩的搭配和網頁色彩的選擇標準等內容。然後著重選擇了7種常用的色系，並分別對它們的色彩意象進行詳細的分析，結合配色具體實例的強化，使讀者在掌握軟體功能的同時能夠迅速提高網頁配色效率，極大地提高了從業素質。
本書附贈1張DVD光碟，其中提供了豐富的練習素材、源檔案，並為書中所有實例都錄製了多媒體教學視頻，方便讀者學習和參考。
本書結構清晰、由簡到難，實例精美實用、分解詳細，文字闡述通俗易懂，與實踐結合非常密切，具有很強的實用性，是一本網頁設計配色知識的學習寶典。
目錄
1.1 色彩基礎知識 1
1.1.1 色彩學 1
1.1.2 色彩傳達的意義 1
1.1.3 色彩的屬性 2
1.1.4 色彩的聯想 4
1.1.5 RGB和HSB 5
1.1.6 網頁安全色 6
1.2 色彩的搭配 6
1.2.1 色彩搭配的基礎 6
1.2.2 色彩搭配的原則 8
1.3 網頁色彩的選擇標準 10
1.3.1 根據行業選擇配色方案 10
1.3.2 根據瀏覽者的差異選擇配色方案 11
1.3.3 根據色彩個性選擇配色方案 13
1.3.4 根據星座選擇配色方案 14
1.3.5 根據季節選擇配色方案 16
1.4 網頁中色彩的套用 20
1.4.1 網頁中的色彩比例 20
1.4.2 網頁中的留白藝術 22
1.4.3 色彩的層次 23
1.5 本章小結 23
2.1 網頁背景顏色 24
2.1.1 使用顏色作為背景 24
實例01+視頻：使用純色作為背景 25
實例02+視頻：使用漸變色作為背景 27
2.1.2 使用圖片作為背景 29
實例03+視頻：使用圖片作為背景 29
2.2 網頁文本顏色 32
2.2.1 文字的排版規則 32
2.2.2 文本配色之“黃金分割法” 32
實例04+視頻：製作時尚網站首頁 33
2.3 網站圖片的色系 35
2.3.1 網站焦點圖 35
實例05+視頻：製作時尚圖片網頁 36
2.3.2 網頁配圖 39
實例06+視頻：製作清爽服裝網頁 40
2.4 網頁中的線條與圖形 43
2.4.1 在網頁中使用線條 43
實例07+視頻：製作典雅的個人主頁 43
2.4.2 在網頁中使用形狀 46
實例08+視頻：製作有趣的設計網站 47
2.5 常見網站風格分析 50
2.5.1 中式風格網站分析 50
2.5.2 日韓風格網站分析 51
2.5.3 歐美風格網站分析 52
2.6 本章小結 54
3.1 正紅 55
3.1.1 配色分析 55
3.1.2 配色實例 56
實例09+視頻：設計家居類網站 56
3.1.3 配色原理分析 59
3.1.4 擴展方案 59
3.2 深紅色 60
3.2.1 配色分析 60
3.2.2 配色實例 61
實例10+視頻：設計快餐類網站 61
3.2.3 配色原理分析 64
3.2.4 擴展方案 64
3.3 朱紅色 64
3.3.1 配色分析 64
3.3.2 配色實例 65
實例11+視頻：設計書籍類網站 66
3.3.3 配色原理分析 69
3.3.4 擴展方案 69
3.4 玫瑰紅 70
3.4.1 配色分析 70
3.4.2 配色實例 71
實例12+視頻：設計女性時尚生活類網站 71
3.4.3 配色原理分析 74
3.4.4 擴展方案 74
3.5 紫紅色 75
3.5.1 配色分析 75
3.5.2 配色實例 76
實例13+視頻：設計美容護膚類網站 76
3.5.3 配色原理分析 79
3.5.4 擴展方案 79
3.6 寶石紅 79
3.6.1 配色分析 79
3.6.2 配色實例 80
實例14+視頻：設計餐飲類網站 81
3.6.3 配色原理分析 83
3.6.4 擴展方案 83
3.7 本章小結 84
4.1 正橙色 85
4.1.1 配色分析 85
4.1.2 配色實例 86
實例15+視頻：製作活躍的美食網頁 86
4.1.3 配色原理分析 89
4.1.4 擴展方案 89
4.2 太陽橙 90
4.2.1 配色分析 90
4.2.2 配色實例 91
實例16+視頻：製作親切的產品宣傳網頁 91
4.2.3 配色原理分析 94
4.2.4 擴展方案 94
4.3 杏黃色 94
4.3.1 配色分析 94
4.3.2 配色實例 95
實例17+視頻：製作質樸的網路花店網頁 96
4.3.3 配色原理分析 98
4.3.4 擴展方案 99
4.4 淺土色 99
4.4.1 配色分析 99
4.4.2 配色實例 100
實例18+視頻：製作溫馨的電影動畫網頁 101
4.4.3 配色原理分析 103
4.4.4 擴展方案 104
4.5 咖啡色 104
4.5.1 配色分析 104
4.5.2 配色實例 105
實例19+視頻：製作高貴的西餐網頁 105
4.5.3 配色原理分析 108
4.5.4 擴展方案 109
4.6 棕色 109
4.6.1 配色分析 109
4.6.2 配色實例 110
實例20+視頻：製作漂亮的卡通甜點網頁 110
4.6.3 配色原理分析 113
4.6.4 擴展方案 114
4.7 本章小結 114
5.1 鮮黃色 115
5.1.1 配色分析 115
5.1.2 配色實例 116
實例21+視頻：製作明艷的商務網站 116
5.1.3 配色原理分析 119
5.1.4 擴展方案 119
5.2 含羞草 119
5.2.1 配色分析 119
5.2.2 配色實例 120
實例22+視頻：製作活躍的旅遊度假網站 121
5.2.3 配色原理分析 124
5.2.4 擴展方案 124
5.3 鉻黃 125
5.3.1 配色分析 125
5.3.2 配色實例 126
實例23+視頻：製作個性的藝術網站 126
5.3.3 配色原理分析 130
5.3.4 擴展方案 130
5.4 香檳黃 130
5.4.1 配色分析 130
5.4.2 配色實例 131
實例24+視頻：製作精緻的美食網站 132
5.4.3 配色原理分析 135
5.4.4 擴展方案 135
5.5 淡黃色 135
5.5.1 配色分析 135
5.5.2 配色實例 137
實例25+視頻：製作悠閒的韓食網站 137
5.5.3 配色原理分析 139
5.5.4 擴展方案 140
5.6 本章小結 140
6.1 蘋果綠 141
6.1.1 配色分析 141
6.1.2 配色實例 142
實例26+視頻：製作工作室網站 142
6.1.3 配色原理分析 145
6.1.4 擴展方案 145
6.2 翡翠綠 145
6.2.1 配色分析 145
6.2.2 配色實例 146
實例27+視頻：製作遊戲類網站 147
6.2.3 配色原理分析 149
6.2.4 擴展方案 150
6.3 黃綠色 150
6.3.1 配色分析 150
6.3.2 配色實例 151
實例28+視頻：製作廣告類網站 151
6.3.3 配色原理分析 154
6.3.4 擴展方案 154
6.4 濃綠色 155
6.4.1 配色分析 155
6.4.2 配色實例 156
實例29+視頻：製作保險類網站 156
6.4.3 配色原理分析 158
6.4.4 擴展方案 159
6.5 淺綠色 159
6.5.1 配色分析 159
6.5.2 配色實例 160
實例30+視頻：製作家居類網站 160
6.5.3 配色原理分析 163
6.5.4 擴展方案 163
6.6 孔雀綠 164
6.6.1 配色分析 164
6.6.2 配色實例 165
實例31+視頻：製作飲品類網站 165
6.6.3 配色原理分析 167
6.6.4 擴展方案 168
6.7 本章小結 168
7.1 天藍色 169
7.1.1 配色分析 169
7.1.2 配色實例 170
實例32+視頻：製作工作室網站 170
7.1.3 配色原理分析 173
7.1.4 擴展方案 174
7.2 水藍色 174
7.2.1 配色分析 174
7.2.2 配色實例 175
實例33+視頻：製作體育類網站 175
7.2.3 配色原理分析 178
7.2.4 擴展方案 178
7.3 深藍色 178
7.3.1 配色分析 178
7.3.2 配色實例 179
實例34+視頻：製作廣告類網站 179
7.3.3 配色原理分析 182
7.3.4 擴展方案 182
7.4 淺藍色 183
7.4.1 配色分析 183
7.4.2 配色實例 184
實例35+視頻：設計飲食類網站 184
7.4.3 配色原理分析 187
7.4.4 擴展方案 187
7.5 蔚藍色 187
7.5.1 配色分析 187
7.5.2 配色實例 188
實例36+視頻：設計滑雪網站 188
7.5.3 配色原理分析 192
7.5.4 擴展方案 192
7.6 深青色 192
7.6.1 配色分析 192
7.6.2 配色實例 193
實例37+視頻：設計遊戲類網站 193
7.6.3 配色原理分析 196
7.6.4 擴展方案 196
7.7 本章小結 196
8.1 丁香紫 197
8.1.1 顏色分析 197
8.1.2 配色實例 198
實例38+視頻：製作清爽的甜點頁面 198
8.1.3 配色原理分析 201
8.1.4 擴展方案 202
8.2 紫色 202
8.2.1 顏色分析 202
8.2.2 配色實例 203
實例39+視頻：製作搜尋引擎頁面 203
8.2.3 配色原理分析 207
8.2.4 擴展方案 207
8.3 深紫色 207
8.3.1 顏色分析 207
8.3.2 配色實例 208
實例40+視頻：製作優雅的手機頁面 209
8.3.3 配色原理分析 213
8.3.4 擴展方案 213
8.4 菖蒲色 213
8.4.1 顏色分析 213
8.4.2 配色實例 214
實例41+視頻：製作電子產品頁面 215
8.4.3 配色原理分析 218
8.4.4 擴展方案 218
8.5 淺蓮灰 218
8.5.1 顏色分析 218
8.5.2 配色實例 219
實例42+視頻：製作清爽漂亮的頁面 220
8.5.3 配色原理分析 224
8.5.4 擴展方案 224
8.6 本章小結 224
9.1 白色 225
9.1.1 配色分析 225
9.1.2 配色實例 226
實例43+視頻：製作時尚的時裝網頁 226
9.1.3 配色原理分析 228
9.1.4 擴展方案 228
9.2 藍灰色 229
9.2.1 配色分析 229
9.2.2 配色實例 230
實例44+視頻：製作精緻的飲料網頁 230
9.2.3 配色原理分析 233
9.2.4 擴展方案 233
9.3 中灰色 234
9.3.1 配色分析 234
9.3.2 配色實例 235
實例45+視頻：製作豪華的汽車網頁 235
9.3.3 配色原理分析 238
9.3.4 擴展方案 238
9.4 淺灰色 239
9.4.1 配色分析 239
9.4.2 配色實例 240
實例46+視頻：製作清涼的綠色食品網頁 240
9.4.3 配色原理分析 243
9.4.4 擴展方案 243
9.5 黑色 244
9.5.1 配色分析 244
9.5.2 配色實例 245
實例47+視頻：製作華麗的電子產品網頁 245
9.5.3 配色原理分析 248
9.5.4 擴展方案 248
9.6 本章小結 249
10.1 使用配色軟體ColorKey Xp 250
10.1.1 軟體簡介 250
10.1.2 軟體基本功能 251
10.1.3 配色實例 254
實例48+視頻：製作化妝品網站 254
10.2 使用配色軟體 Adobe Kuler 257
10.2.1 軟體簡介 257
10.2.2 軟體基本功能 257
10.2.3 配色實例 259
實例49+視頻：製作娛樂休閒網站 259
10.2.4 配色實例 263
實例50+視頻：製作食品類網站 263
10.3 本章小結 267
1.1.1 色彩學 1
1.1.2 色彩傳達的意義 1
1.1.3 色彩的屬性 2
1.1.4 色彩的聯想 4
1.1.5 RGB和HSB 5
1.1.6 網頁安全色 6
1.2 色彩的搭配 6
1.2.1 色彩搭配的基礎 6
1.2.2 色彩搭配的原則 8
1.3 網頁色彩的選擇標準 10
1.3.1 根據行業選擇配色方案 10
1.3.2 根據瀏覽者的差異選擇配色方案 11
1.3.3 根據色彩個性選擇配色方案 13
1.3.4 根據星座選擇配色方案 14
1.3.5 根據季節選擇配色方案 16
1.4 網頁中色彩的套用 20
1.4.1 網頁中的色彩比例 20
1.4.2 網頁中的留白藝術 22
1.4.3 色彩的層次 23
1.5 本章小結 23
2.1 網頁背景顏色 24
2.1.1 使用顏色作為背景 24
實例01+視頻：使用純色作為背景 25
實例02+視頻：使用漸變色作為背景 27
2.1.2 使用圖片作為背景 29
實例03+視頻：使用圖片作為背景 29
2.2 網頁文本顏色 32
2.2.1 文字的排版規則 32
2.2.2 文本配色之“黃金分割法” 32
實例04+視頻：製作時尚網站首頁 33
2.3 網站圖片的色系 35
2.3.1 網站焦點圖 35
實例05+視頻：製作時尚圖片網頁 36
2.3.2 網頁配圖 39
實例06+視頻：製作清爽服裝網頁 40
2.4 網頁中的線條與圖形 43
2.4.1 在網頁中使用線條 43
實例07+視頻：製作典雅的個人主頁 43
2.4.2 在網頁中使用形狀 46
實例08+視頻：製作有趣的設計網站 47
2.5 常見網站風格分析 50
2.5.1 中式風格網站分析 50
2.5.2 日韓風格網站分析 51
2.5.3 歐美風格網站分析 52
2.6 本章小結 54
3.1 正紅 55
3.1.1 配色分析 55
3.1.2 配色實例 56
實例09+視頻：設計家居類網站 56
3.1.3 配色原理分析 59
3.1.4 擴展方案 59
3.2 深紅色 60
3.2.1 配色分析 60
3.2.2 配色實例 61
實例10+視頻：設計快餐類網站 61
3.2.3 配色原理分析 64
3.2.4 擴展方案 64
3.3 朱紅色 64
3.3.1 配色分析 64
3.3.2 配色實例 65
實例11+視頻：設計書籍類網站 66
3.3.3 配色原理分析 69
3.3.4 擴展方案 69
3.4 玫瑰紅 70
3.4.1 配色分析 70
3.4.2 配色實例 71
實例12+視頻：設計女性時尚生活類網站 71
3.4.3 配色原理分析 74
3.4.4 擴展方案 74
3.5 紫紅色 75
3.5.1 配色分析 75
3.5.2 配色實例 76
實例13+視頻：設計美容護膚類網站 76
3.5.3 配色原理分析 79
3.5.4 擴展方案 79
3.6 寶石紅 79
3.6.1 配色分析 79
3.6.2 配色實例 80
實例14+視頻：設計餐飲類網站 81
3.6.3 配色原理分析 83
3.6.4 擴展方案 83
3.7 本章小結 84
4.1 正橙色 85
4.1.1 配色分析 85
4.1.2 配色實例 86
實例15+視頻：製作活躍的美食網頁 86
4.1.3 配色原理分析 89
4.1.4 擴展方案 89
4.2 太陽橙 90
4.2.1 配色分析 90
4.2.2 配色實例 91
實例16+視頻：製作親切的產品宣傳網頁 91
4.2.3 配色原理分析 94
4.2.4 擴展方案 94
4.3 杏黃色 94
4.3.1 配色分析 94
4.3.2 配色實例 95
實例17+視頻：製作質樸的網路花店網頁 96
4.3.3 配色原理分析 98
4.3.4 擴展方案 99
4.4 淺土色 99
4.4.1 配色分析 99
4.4.2 配色實例 100
實例18+視頻：製作溫馨的電影動畫網頁 101
4.4.3 配色原理分析 103
4.4.4 擴展方案 104
4.5 咖啡色 104
4.5.1 配色分析 104
4.5.2 配色實例 105
實例19+視頻：製作高貴的西餐網頁 105
4.5.3 配色原理分析 108
4.5.4 擴展方案 109
4.6 棕色 109
4.6.1 配色分析 109
4.6.2 配色實例 110
實例20+視頻：製作漂亮的卡通甜點網頁 110
4.6.3 配色原理分析 113
4.6.4 擴展方案 114
4.7 本章小結 114
5.1 鮮黃色 115
5.1.1 配色分析 115
5.1.2 配色實例 116
實例21+視頻：製作明艷的商務網站 116
5.1.3 配色原理分析 119
5.1.4 擴展方案 119
5.2 含羞草 119
5.2.1 配色分析 119
5.2.2 配色實例 120
實例22+視頻：製作活躍的旅遊度假網站 121
5.2.3 配色原理分析 124
5.2.4 擴展方案 124
5.3 鉻黃 125
5.3.1 配色分析 125
5.3.2 配色實例 126
實例23+視頻：製作個性的藝術網站 126
5.3.3 配色原理分析 130
5.3.4 擴展方案 130
5.4 香檳黃 130
5.4.1 配色分析 130
5.4.2 配色實例 131
實例24+視頻：製作精緻的美食網站 132
5.4.3 配色原理分析 135
5.4.4 擴展方案 135
5.5 淡黃色 135
5.5.1 配色分析 135
5.5.2 配色實例 137
實例25+視頻：製作悠閒的韓食網站 137
5.5.3 配色原理分析 139
5.5.4 擴展方案 140
5.6 本章小結 140
6.1 蘋果綠 141
6.1.1 配色分析 141
6.1.2 配色實例 142
實例26+視頻：製作工作室網站 142
6.1.3 配色原理分析 145
6.1.4 擴展方案 145
6.2 翡翠綠 145
6.2.1 配色分析 145
6.2.2 配色實例 146
實例27+視頻：製作遊戲類網站 147
6.2.3 配色原理分析 149
6.2.4 擴展方案 150
6.3 黃綠色 150
6.3.1 配色分析 150
6.3.2 配色實例 151
實例28+視頻：製作廣告類網站 151
6.3.3 配色原理分析 154
6.3.4 擴展方案 154
6.4 濃綠色 155
6.4.1 配色分析 155
6.4.2 配色實例 156
實例29+視頻：製作保險類網站 156
6.4.3 配色原理分析 158
6.4.4 擴展方案 159
6.5 淺綠色 159
6.5.1 配色分析 159
6.5.2 配色實例 160
實例30+視頻：製作家居類網站 160
6.5.3 配色原理分析 163
6.5.4 擴展方案 163
6.6 孔雀綠 164
6.6.1 配色分析 164
6.6.2 配色實例 165
實例31+視頻：製作飲品類網站 165
6.6.3 配色原理分析 167
6.6.4 擴展方案 168
6.7 本章小結 168
7.1 天藍色 169
7.1.1 配色分析 169
7.1.2 配色實例 170
實例32+視頻：製作工作室網站 170
7.1.3 配色原理分析 173
7.1.4 擴展方案 174
7.2 水藍色 174
7.2.1 配色分析 174
7.2.2 配色實例 175
實例33+視頻：製作體育類網站 175
7.2.3 配色原理分析 178
7.2.4 擴展方案 178
7.3 深藍色 178
7.3.1 配色分析 178
7.3.2 配色實例 179
實例34+視頻：製作廣告類網站 179
7.3.3 配色原理分析 182
7.3.4 擴展方案 182
7.4 淺藍色 183
7.4.1 配色分析 183
7.4.2 配色實例 184
實例35+視頻：設計飲食類網站 184
7.4.3 配色原理分析 187
7.4.4 擴展方案 187
7.5 蔚藍色 187
7.5.1 配色分析 187
7.5.2 配色實例 188
實例36+視頻：設計滑雪網站 188
7.5.3 配色原理分析 192
7.5.4 擴展方案 192
7.6 深青色 192
7.6.1 配色分析 192
7.6.2 配色實例 193
實例37+視頻：設計遊戲類網站 193
7.6.3 配色原理分析 196
7.6.4 擴展方案 196
7.7 本章小結 196
8.1 丁香紫 197
8.1.1 顏色分析 197
8.1.2 配色實例 198
實例38+視頻：製作清爽的甜點頁面 198
8.1.3 配色原理分析 201
8.1.4 擴展方案 202
8.2 紫色 202
8.2.1 顏色分析 202
8.2.2 配色實例 203
實例39+視頻：製作搜尋引擎頁面 203
8.2.3 配色原理分析 207
8.2.4 擴展方案 207
8.3 深紫色 207
8.3.1 顏色分析 207
8.3.2 配色實例 208
實例40+視頻：製作優雅的手機頁面 209
8.3.3 配色原理分析 213
8.3.4 擴展方案 213
8.4 菖蒲色 213
8.4.1 顏色分析 213
8.4.2 配色實例 214
實例41+視頻：製作電子產品頁面 215
8.4.3 配色原理分析 218
8.4.4 擴展方案 218
8.5 淺蓮灰 218
8.5.1 顏色分析 218
8.5.2 配色實例 219
實例42+視頻：製作清爽漂亮的頁面 220
8.5.3 配色原理分析 224
8.5.4 擴展方案 224
8.6 本章小結 224
9.1 白色 225
9.1.1 配色分析 225
9.1.2 配色實例 226
實例43+視頻：製作時尚的時裝網頁 226
9.1.3 配色原理分析 228
9.1.4 擴展方案 228
9.2 藍灰色 229
9.2.1 配色分析 229
9.2.2 配色實例 230
實例44+視頻：製作精緻的飲料網頁 230
9.2.3 配色原理分析 233
9.2.4 擴展方案 233
9.3 中灰色 234
9.3.1 配色分析 234
9.3.2 配色實例 235
實例45+視頻：製作豪華的汽車網頁 235
9.3.3 配色原理分析 238
9.3.4 擴展方案 238
9.4 淺灰色 239
9.4.1 配色分析 239
9.4.2 配色實例 240
實例46+視頻：製作清涼的綠色食品網頁 240
9.4.3 配色原理分析 243
9.4.4 擴展方案 243
9.5 黑色 244
9.5.1 配色分析 244
9.5.2 配色實例 245
實例47+視頻：製作華麗的電子產品網頁 245
9.5.3 配色原理分析 248
9.5.4 擴展方案 248
9.6 本章小結 249
10.1 使用配色軟體ColorKey Xp 250
10.1.1 軟體簡介 250
10.1.2 軟體基本功能 251
10.1.3 配色實例 254
實例48+視頻：製作化妝品網站 254
10.2 使用配色軟體 Adobe Kuler 257
10.2.1 軟體簡介 257
10.2.2 軟體基本功能 257
10.2.3 配色實例 259
實例49+視頻：製作娛樂休閒網站 259
10.2.4 配色實例 263
實例50+視頻：製作食品類網站 263
10.3 本章小結 267
