Photoshop CC網(wǎng)頁(yè)配色設(shè)計(jì)全程揭秘（第2版 網(wǎng)頁(yè)設(shè)計(jì)與開發(fā)殿堂之路）

第1 章 色彩基礎(chǔ)知識(shí)
1.1　色彩知識(shí)入門   1
1.1.1　色彩的產(chǎn)生   1
1.1.2　光源色與物體色   2
1.2　色彩的傳達(dá)意義      3
1.2.1　色彩的生理反應(yīng)   3
1.2.2　色彩的象征意義   4
1.3　顏色模式和網(wǎng)頁(yè)安全色   4
1.3.1　色光三原色   4
1.3.2　印刷三原色   4
1.3.3　美術(shù)三原色   5
1.3.4　加法混合和減法混合   5
1.3.5　HSB 模式   5
1.3.6　Hex 和網(wǎng)頁(yè)安全色      6
1.3.7　Lab 模式      6
1.4　常用色彩的名稱和分類   8
1.4.1　三間色   8
1.4.2　復(fù)色   8
1.4.3　對(duì)比色   8
1.4.4　同類色( 色系)      9
1.4.5　鄰近色   9
1.4.6　互補(bǔ)色   10
★配色案例01：中西混合餐廳網(wǎng)頁(yè)配色   10
1.5　色彩的屬性   12
1.5.1　色相      13
1.5.2　明度      14
1.5.3　純度( 飽和度)   15
1.5.4　色調(diào)      15
1.5.5　色調(diào)上的高、中、低調(diào)   18
1.5.6　無(wú)彩色和有彩色      19
1.6　單色印象空間      19
1.6.1　表現(xiàn)色彩感覺差異      20
1.6.2　不同單色的印象差異      20
1.7　配色印象空間      21
1.7.1　不同的配色印象空間      21
1.7.2　配色印象差異   21
★配色案例02：咖啡廳網(wǎng)頁(yè)配色   22
第2 章 網(wǎng)頁(yè)配色要求和規(guī)范
2.1　網(wǎng)頁(yè)配色的要求      25
2.1.1　色彩的對(duì)比      25
2.1.2　色彩的大小和形狀      25
2.1.3　色彩的位置      26
2.1.4　色彩搭配原則   26
2.1.5　配色盡量選擇雙色和多色組合   29
2.1.6　盡可能使用兩至三種色彩進(jìn)行搭配      29
2.2　網(wǎng)頁(yè)中的色彩比例      30
2.2.1　主色、輔色和重點(diǎn)色      30
2.2.2　鮮艷顏色和無(wú)彩色的運(yùn)用比例   30
2.2.3　色彩的層次      31
★配色案例03：視頻網(wǎng)站的網(wǎng)頁(yè)配色   31
2.3　網(wǎng)頁(yè)中的留白藝術(shù)      34
2.3.1　節(jié)奏感和韻律感      34
2.3.2　體現(xiàn)網(wǎng)頁(yè)特征   34
2.3.3　留白的不同體現(xiàn)      35
2.4　基于色相的配色      35
2.4.1　基于色相的配色關(guān)系      35
2.4.2　基于色相的配色方法      36
2.5　基于色調(diào)的配色    37
2.5.1　基于色調(diào)的配色關(guān)系      37
2.5.2　基于色調(diào)的配色方法      38
★配色案例04：網(wǎng)絡(luò)技術(shù)網(wǎng)頁(yè)配色   39
2.6　配色要力求打動(dòng)人心    41
2.6.1　配色要讓瀏覽者產(chǎn)生好感   41
2.6.2　使人產(chǎn)生共鳴的配色方法   42
第3 章 網(wǎng)頁(yè)配色的基本方法
3.1　網(wǎng)頁(yè)配色的整體結(jié)構(gòu)      43
3.1.1　使用顏色作為背景      43
3.1.2　使用圖片作為背景      44
3.2　網(wǎng)頁(yè)文字顏色      44
3.2.1　文字的排版規(guī)則      45
3.2.2　文字配色要考慮可讀性   45
3.2.3　文字大小與配色關(guān)系      45
3.2.4　確定應(yīng)用網(wǎng)頁(yè)配色的要領(lǐng)   46
3.2.5　良好的網(wǎng)頁(yè)文字配色      46
★配色案例05：演藝團(tuán)體售票網(wǎng)頁(yè)配色      47
3.3　網(wǎng)頁(yè)中圖片的使用      49
3.3.1　網(wǎng)頁(yè)的焦點(diǎn)圖   49
3.3.2　如何使用網(wǎng)頁(yè)配圖      50
3.4　網(wǎng)頁(yè)中的線條與圖形      50
3.4.1　在網(wǎng)頁(yè)中使用線條      50
3.4.2　在網(wǎng)頁(yè)中使用形狀      51
3.5　網(wǎng)頁(yè)元素的色彩搭配      52
3.5.1　Logo 與網(wǎng)頁(yè)廣告的搭配   52
3.5.2　導(dǎo)航菜單與整體頁(yè)面的搭配   52
3.5.3　背景與文字的搭配      53
★配色案例06：快餐訂餐網(wǎng)頁(yè)配色   54
第4 章 網(wǎng)頁(yè)配色的選擇標(biāo)準(zhǔn)
4.1　根據(jù)行業(yè)選擇配色      57
4.2　根據(jù)瀏覽者偏好選擇顏色   58
4.2.1　根據(jù)性別選擇顏色      58
4.2.2　根據(jù)年齡階段選擇顏色   59
★配色案例07：花店網(wǎng)頁(yè)配色   59
4.3　根據(jù)季節(jié)選擇顏色      62
★配色案例08：飲料網(wǎng)頁(yè)配色   62
4.4　根據(jù)商品銷售階段選擇配色   64
4.4.1　商品的導(dǎo)入期   65
4.4.2　商品的拓展期   65
4.4.3　商品的成熟期   66
4.4.4　商品的衰退期   66
4.5　根據(jù)用戶心理效應(yīng)選擇顏色   67
★配色案例09：汽車公司網(wǎng)頁(yè)配色   67
第5 章 網(wǎng)頁(yè)配色的色彩情感
5.1　網(wǎng)頁(yè)配色的冷暖      71
5.2　輕與重的色彩感覺      72
5.3　明度與純度的質(zhì)感      72
★配色案例10：商務(wù)網(wǎng)頁(yè)配色   73
5.4　波長(zhǎng)和成像的進(jìn)退感      75
5.5　膨脹與收縮的視覺感應(yīng)      75
5.6　色彩的華麗感與樸實(shí)感      76
★配色案例11：搜索引擎網(wǎng)頁(yè)配色   76
5.7　色彩的寧?kù)o感與興奮感      78
5.8　色彩的活力感與莊重感      79
★配色案例12：化妝品網(wǎng)頁(yè)配色   79
第6 章 網(wǎng)頁(yè)配色中的色彩對(duì)比
6.1　冷暖對(duì)比的配色      82
6.1.1　色彩冷暖的強(qiáng)弱對(duì)比程度   82
6.1.2　冷暖對(duì)比的心理感受      83
6.2　色彩在頁(yè)面中的面積對(duì)比   83
6.2.1　色彩面積的大小      84
6.2.2　色彩面積的位置關(guān)系      85
★配色案例13：食品網(wǎng)頁(yè)配色   85
6.3　色相和色調(diào)對(duì)比      87
6.3.1　原色對(duì)比   87
6.3.2　間色對(duì)比   88
6.3.3　補(bǔ)色對(duì)比   88
6.3.4　鄰近色對(duì)比      89
6.3.5　類似色對(duì)比      89
6.3.6　色相對(duì)比   89
6.3.7　明度對(duì)比   90
6.3.8　純度對(duì)比   91
6.4　同時(shí)對(duì)比   91
6.4.1　同時(shí)對(duì)比的基本規(guī)律      91
6.4.2　同時(shí)對(duì)比產(chǎn)生的生理因素   92
6.5　連續(xù)對(duì)比   92
★配色案例14：藝術(shù)網(wǎng)頁(yè)配色   93
第7 章 紅色系的應(yīng)用
7.1　熱情的正紅色      97
★配色案例15：家居網(wǎng)頁(yè)配色   97
7.2　成熟的深紅色      100
7.3　熱烈的朱紅色      101
★配色案例16：書籍網(wǎng)頁(yè)配色    101
7.4　甜蜜的玫瑰紅      103
★配色案例17：時(shí)尚生活網(wǎng)頁(yè)配色    104
7.5　華麗的紫紅色      107
7.6　富貴的寶石紅      107
★配色案例18：美食網(wǎng)頁(yè)配色    107
第8 章 橙色系的應(yīng)用
8.1　生機(jī)勃勃的正橙色       110
★配色案例19：活躍的美食網(wǎng)頁(yè)配色    110
8.2　豐收的太陽(yáng)橙       113
★配色案例20：產(chǎn)品宣傳網(wǎng)頁(yè)配色    113
8.3　無(wú)邪的杏黃色       116
8.4　樸素的淺土色       116
★配色案例21：動(dòng)畫片主題網(wǎng)頁(yè)配色    116
8.5　堅(jiān)實(shí)的咖啡色       119
8.6　安定的棕色    119
★配色案例22：高檔西餐廳網(wǎng)頁(yè)配色    120
第9 章 黃色系的應(yīng)用
9.1　開放的鮮黃色      123
★配色案例23：明艷的商務(wù)網(wǎng)頁(yè)配色    123
9.2　幸福的含羞草色   126
★配色案例24：旅游網(wǎng)頁(yè)配色    126
9.3　生動(dòng)的鉻黃色      129
9.4　閃耀的香檳黃      129
★配色案例25：精致的美食網(wǎng)頁(yè)配色    129
9.5　童話般的淡黃色   131
★配色案例26：休閑食品網(wǎng)頁(yè)配色    132
第10 章 綠色系的應(yīng)用
10.1　新鮮的蘋果綠   135
10.2　旺盛的翡翠綠   135
★配色案例27：游戲類網(wǎng)頁(yè)配色    136
10.3　清新的黃綠色   138
★配色案例28：廣告類網(wǎng)頁(yè)配色    138
10.4　昂揚(yáng)的濃綠色   140
★配色案例29：保險(xiǎn)行業(yè)網(wǎng)頁(yè)配色    141
10.5　稚嫩的淺綠色   143
★配色案例30：生活家居網(wǎng)頁(yè)配色    143
10.6　高貴的孔雀綠   146
第11 章 藍(lán)色系的應(yīng)用
11.1　冷靜的天藍(lán)色      147
11.2　清澈的水藍(lán)色      147
★配色案例31：體育類網(wǎng)頁(yè)配色    148
11.3　正派的深藍(lán)色      150
11.4　溫馨的淺藍(lán)色      150
★配色案例32：飲食網(wǎng)頁(yè)配色    151
11.5　爽快的蔚藍(lán)色      153
★配色案例33：冰雪運(yùn)動(dòng)項(xiàng)目網(wǎng)頁(yè)配色    154
11.6　鎮(zhèn)靜的深青色      156
★配色案例34：簡(jiǎn)潔的游戲類網(wǎng)頁(yè)配色       157
第12 章 紫色系的應(yīng)用
12.1　清純的丁香紫   160
★配色案例35：甜點(diǎn)網(wǎng)頁(yè)配色    160
12.2　神圣的正紫色   162
12.3　低調(diào)華麗的深紫色      163
★配色案例36：手機(jī)網(wǎng)頁(yè)配色    163
12.4　雅致的菖蒲色   165
★配色案例37：電子產(chǎn)品網(wǎng)頁(yè)配色    166
12.5　夢(mèng)幻的淺蓮灰   168
★配色案例38：遠(yuǎn)程教學(xué)網(wǎng)頁(yè)配色    169
第13 章 無(wú)彩色系的應(yīng)用
13.1　純潔的白色      172
★配色案例39：時(shí)裝網(wǎng)頁(yè)配色    172
13.2　精致的藍(lán)灰色   175
★配色案例40：酒水產(chǎn)品網(wǎng)頁(yè)配色    176
13.3　溫暖的中灰色   178
★配色案例41：汽車網(wǎng)頁(yè)配色    178
13.4　朦朧的淺灰色   180
13.5　高品質(zhì)的黑色   181
★配色案例42：電子設(shè)備網(wǎng)頁(yè)配色    181
第14 章 不同色調(diào)的網(wǎng)頁(yè)配色
14.1　網(wǎng)頁(yè)配色的色調(diào)特點(diǎn)      184
14.2　個(gè)性鮮明的色調(diào)      185
14.2.1　高純度色彩對(duì)比鮮明    185
14.2.2　高純度冷色體現(xiàn)科技感    185
14.2.3　高純度暖色體現(xiàn)華麗感    185
14.3　清靜高雅的色調(diào)      186
14.3.1　中等明度體現(xiàn)清新活力    186
14.3.2　高明度體現(xiàn)輕柔明凈    187
14.3.3　融入灰色體現(xiàn)高雅    188
★配色案例43：品牌快餐網(wǎng)頁(yè)配色    188
14.4　樸實(shí)深厚的中庸色調(diào)      190
14.4.1　融入中等灰色體現(xiàn)樸實(shí)    190
14.4.2　灰暗體現(xiàn)深厚感       191
14.4.3　加入濁色體現(xiàn)中庸    192
14.5　穩(wěn)重深沉的色調(diào)      193
14.5.1　低明度加入灰和白體現(xiàn)懷舊    193
14.5.2　大面積灰暗色調(diào)營(yíng)造緊張氛圍       193
14.5.3　低明度冷色暗調(diào)體現(xiàn)古雅    193
★配色案例44：飲品類網(wǎng)頁(yè)配色    194
第15 章 構(gòu)造網(wǎng)頁(yè)配色的視覺印象
15.1　女性化的網(wǎng)頁(yè)配色印象   197
★配色案例45：化妝品網(wǎng)頁(yè)配色    198
15.2　男性化的網(wǎng)頁(yè)配色印象   200
15.3　穩(wěn)定安靜的網(wǎng)頁(yè)配色印象   201
15.4　興奮激昂的網(wǎng)頁(yè)配色印象   201
15.5　輕快律動(dòng)的網(wǎng)頁(yè)配色印象   202
15.6　清爽自然的網(wǎng)頁(yè)配色印象   202
15.7　浪漫甜美的網(wǎng)頁(yè)配色印象   203
★配色案例46：休閑食品網(wǎng)頁(yè)配色    204
15.8　傳統(tǒng)穩(wěn)重的網(wǎng)頁(yè)配色印象   206
15.9　雍容華貴的網(wǎng)頁(yè)配色印象   207
15.10　艷麗的網(wǎng)頁(yè)配色印象   208
第16 章 網(wǎng)頁(yè)配色的調(diào)整方法
16.1　突出主題的配色技巧      209
16.1.1　明確主題，形成焦點(diǎn)    209
16.1.2　提高純度，確定主題    210
16.1.3　增大明度差       210
16.1.4　增強(qiáng)點(diǎn)綴色       211
16.1.5　抑制輔助色或背景    211
★配色案例47：工作室網(wǎng)頁(yè)配色    212
16.2　整體融合的配色技巧      214
16.2.1　使用接近的色相       214
16.2.2　使用接近的色調(diào)       215
16.2.3　添加類似色或同類色    215
★配色案例48：便利店網(wǎng)頁(yè)配色    215
16.2.4　網(wǎng)頁(yè)產(chǎn)生穩(wěn)定感       218
16.2.5　使用統(tǒng)一的明度       218
★配色案例49：傳媒網(wǎng)頁(yè)配色    218
第17 章 使用配色軟件
17.1　使用配色軟件ColorKey Xp   221
17.1.1　軟件簡(jiǎn)介       221
17.1.2　安裝與啟動(dòng)軟件       222
17.1.3　界面及功能區(qū)域       222
17.1.4　“RGB 色彩調(diào)節(jié)器”面板    223
17.1.5　“調(diào)整配色限制閥值”面板    223
17.1.6　“整體色彩偏移”面板    224
17.1.7　“Web 顏色調(diào)節(jié)”面板    224
17.1.8　使用ColorKey.Xp 外部拾色器       225
17.1.9　ColorKey.Xp 的輸出功能    226
★配色案例50：品牌女鞋網(wǎng)頁(yè)配色    226
17.2　使用配色軟件Adobe Color Themes   229
17.2.1　面板和選項(xiàng)卡       229
17.2.2　將配色顏色設(shè)置為前景色    230
17.2.3　修改配色方案中的主色    230
17.2.4　將顏色添加到配色方案    231
17.2.5　將配色方案添加到色板    231
17.2.6　根據(jù)與主色的關(guān)系創(chuàng)建方案    232
17.3　使用配色軟件ColorSchemer Studio   235
17.3.1　ColorSchemer.Studio 的安裝與啟動(dòng)       235
17.3.2　界面及功能區(qū)域的劃分    236
17.3.3　創(chuàng)建匹配顏色方案    237
17.3.4　使用圖庫(kù)瀏覽器獲取配色方案       243
17.3.5　從圖像獲取配色方案    243
17.3.6　使用顏色收藏夾進(jìn)行快速預(yù)覽       244
17.3.7　導(dǎo)出與分享       245