Photoshop CC網(wǎng)站UI設(shè)計(jì)全程揭秘（第2版）

第1 章 網(wǎng)站UI 概述
1.1　了解網(wǎng)站UI                  1
1.1.1　什么是網(wǎng)頁(yè)界面            1
1.1.2　網(wǎng)頁(yè)界面的分類            1
1.2　網(wǎng)站建設(shè)流程                 1
1.2.1　域名注冊(cè)                 2
1.2.2　購(gòu)買虛擬主機(jī)              2
1.2.3　確定網(wǎng)頁(yè)設(shè)計(jì)              3
1.2.4　網(wǎng)站建設(shè)                3
1.2.5　網(wǎng)站測(cè)試                3
1.2.6　網(wǎng)站維護(hù)                4
1.3　網(wǎng)頁(yè)設(shè)計(jì)的原則                4
1.3.1　視覺美觀                4
1.3.2　主題明確                5
1.3.3　內(nèi)容與形式相統(tǒng)一          5
1.3.4　快速加載                5
1.3.5　為用戶考慮               6
1.4　網(wǎng)頁(yè)的構(gòu)成元素                6
1.4.1　文字                  7
1.4.2　圖像                  7
1.4.3　色彩                  7
1.4.4　多媒體                  8
1.5　網(wǎng)頁(yè)設(shè)計(jì)的命名規(guī)范             8
1.6　移動(dòng)端UI 設(shè)計(jì)                9
1.6.1　移動(dòng)端UI 設(shè)計(jì)概述          9
1.6.2　移動(dòng)端和PC 端UI設(shè)計(jì)的區(qū)別              9
第2 章 Photoshop 基本操作
2.1　Photoshop 簡(jiǎn)介                12
2.2　Photoshop 的安裝              12
實(shí)例1——安裝Photoshop          12
2.3　Photoshop 的文件操作           13
2.3.1　新建文件                13
2.3.2　打開文件                14
2.3.3　保存文件                17
實(shí)例2——制作簡(jiǎn)單的網(wǎng)頁(yè)圖標(biāo)        17
2.3.4　修改圖像大小              19
2.3.5　修改畫布大小              20
實(shí)例3——制作藝術(shù)小網(wǎng)頁(yè)          20
2.4　裁剪圖像                    21
2.4.1　裁剪固定尺寸              21
2.4.2　透視裁剪                22
2.4.3　裁剪獲得好的構(gòu)圖           22
2.5　圖像的復(fù)制和粘貼              23
2.5.1　復(fù)制文檔                23
實(shí)例4——制作網(wǎng)頁(yè)背景            23
2.5.2　拷貝和粘貼               24
實(shí)例5——制作網(wǎng)頁(yè)廣告插圖         24
2.5.3　選擇性粘貼               25
實(shí)例6——制作茶葉廣告            25
2.6　變換圖像                    26
2.6.1　移動(dòng)圖像                27
2.6.2　縮放圖像                27
2.6.3　旋轉(zhuǎn)圖像                27
2.6.4　自由變換                28
實(shí)例7——制作網(wǎng)頁(yè)廣告            28
2.7　還原與恢復(fù)操作                29
第3 章 選區(qū)、形狀和網(wǎng)站圖標(biāo)
3.1　網(wǎng)站圖標(biāo)的設(shè)計(jì)準(zhǔn)則             30
3.2　網(wǎng)站圖標(biāo)的設(shè)計(jì)流程             30
3.3　規(guī)則選區(qū)創(chuàng)建標(biāo)志              31
3.3.1　矩形選框工具              31
3.3.2　橢圓選框工具              31
實(shí)例8——制作簡(jiǎn)單的Logo          32
3.3.3　單行選框工具和單列選框工具    33
實(shí)例9——制作簡(jiǎn)單的音樂圖標(biāo)        33
3.4　填充與描邊改變圖標(biāo)風(fēng)格          34
3.4.1　油漆桶工具               35
實(shí)例10——制作絢麗彩塊圖標(biāo)        35
3.4.2　填充                  37
實(shí)例11——制作簡(jiǎn)單的立體圖標(biāo)       38
3.4.3　描邊                  40
實(shí)例12——制作美妙的音樂圖標(biāo)       40
3.5　使用漸變工具增加圖標(biāo)質(zhì)感        42
3.5.1　漸變的類型               42
3.5.2　編輯類型                42
實(shí)例13——制作可愛的小鳥圖標(biāo)       43
3.6　使用形狀工具創(chuàng)建圖標(biāo)           46
3.6.1　關(guān)于形狀工具              47
3.6.2　多邊形工具               47
實(shí)例14——制作質(zhì)感圖標(biāo)          47
3.6.3　形狀的加減               50
實(shí)例15——制作時(shí)尚按鈕圖標(biāo)        51
3.6.4　自定義形狀               54
3.7　使用Color 設(shè)置圖標(biāo)顏色          54
實(shí)例16——制作簡(jiǎn)單鐘表圖標(biāo)        55
第4 章 圖層與網(wǎng)頁(yè)中的按鈕
4.1　按鈕的設(shè)計(jì)要點(diǎn)                58
4.2　按鈕的應(yīng)用格式                58
4.3　使用圖案增加按鈕的質(zhì)感          59
實(shí)例17——制作水晶開關(guān)按鈕        59
4.4　圖層的基本操作                63
4.4.1　新建圖層                63
4.4.2　復(fù)制圖層                63
4.4.3　調(diào)整圖層順序              64
實(shí)例18——制作Twitter 按鈕         65
4.4.4　使用不透明度和填充          68
實(shí)例19——制作簡(jiǎn)潔購(gòu)買按鈕        69
4.5　使用圖層樣式                 72
4.5.1　調(diào)整圖層樣式              72
4.5.2　使用“投影”制作陰影效果      72
4.5.3　使用“描邊”為按鈕添加輪廓    73
實(shí)例20——制作簡(jiǎn)單可愛的按鈕       73
4.5.4　使用“斜面和浮雕”制作立體效果               75
實(shí)例21——制作數(shù)據(jù)統(tǒng)計(jì)按鈕        76
4.5.5　使用“內(nèi)陰影”增加層次      79
實(shí)例22——制作圓形立體按鈕        80
4.5.6　使用“內(nèi)發(fā)光”和“外發(fā)光”制作發(fā)光效果             84
實(shí)例23——制作逼真的皮革按鈕      84
4.6　使用畫筆工具細(xì)化按鈕           88
4.6.1　使用畫筆工具              88
實(shí)例24——制作蘋果應(yīng)用商店按鈕      88
4.6.2　設(shè)置畫筆預(yù)設(shè)              92
4.7　圖像的變換操作                93
4.7.1　圖像的翻轉(zhuǎn)               93
實(shí)例25——制作音量開關(guān)按鈕        93
4.7.2　透視和扭曲               97
4.7.3　變形                  97
第5 章 鋼筆、文字和網(wǎng)站導(dǎo)航
5.1　導(dǎo)航和菜單的作用              98
5.2　導(dǎo)航的設(shè)計(jì)標(biāo)準(zhǔn)                98
5.3　網(wǎng)頁(yè)設(shè)計(jì)的輔助操作             98
5.3.1　使用標(biāo)尺                99
5.3.2　創(chuàng)建精確的參考線           99
實(shí)例26——制作簡(jiǎn)潔導(dǎo)航菜單       100
5.4　修改選區(qū)                   104
5.4.1　羽化選區(qū)               104
5.4.2　擴(kuò)展/ 收縮選區(qū)           104
5.5　加深和減淡修飾              105
5.5.1　加深工具               105
5.5.2　減淡工具               105
實(shí)例27——制作創(chuàng)意音樂網(wǎng)站菜單    106
5.6　使用鋼筆工具繪制精確的形狀     110
5.6.1　使用鋼筆工具            110
實(shí)例28——制作復(fù)古導(dǎo)航條        111
5.6.2　路徑與選區(qū)的轉(zhuǎn)換         114
5.6.3　使用畫筆描邊路徑         115
實(shí)例29——制作帥氣游戲網(wǎng)站導(dǎo)航     116
5.7　使用文字工具                 119
5.7.1　輸入文字               120
5.7.2　設(shè)置文字               120
實(shí)例30——制作時(shí)尚導(dǎo)航菜單       121
5.8　快速對(duì)齊對(duì)象                126
5.8.1　對(duì)齊對(duì)象               127
5.8.2　分布對(duì)象               127
實(shí)例31——制作漂亮的圖片式導(dǎo)航    128
第6 章 調(diào)整命令與優(yōu)化圖像
6.1　網(wǎng)站中的圖像簡(jiǎn)介             132
6.2　網(wǎng)站使用的圖片格式           132
6.3　網(wǎng)站中的圖像模式             132
6.4　使用圖章工具為圖標(biāo)添加效果     132
6.4.1　使用仿制圖章工具去除圖像中的水印                 133
實(shí)例32——去除圖像中的瑕疵       133
6.4.2　使用圖案圖章工具制作網(wǎng)站背景                 134
6.5　修復(fù)網(wǎng)頁(yè)中的圖像             135
6.5.1　使用污點(diǎn)修復(fù)畫筆工具       135
實(shí)例33——去除臉部的裝飾        135
6.5.2　使用修復(fù)畫筆工具         137
6.5.3　使用內(nèi)容感知移動(dòng)工具       138
6.6　自動(dòng)調(diào)整圖像顏色             138
6.6.1　自動(dòng)色調(diào)增強(qiáng)圖像清晰度     139
6.6.2　自動(dòng)對(duì)比度增強(qiáng)圖像對(duì)比度    139
6.6.3　自動(dòng)顏色校正圖像顏色       139
6.7　自定義調(diào)整圖像色彩           140
6.7.1　使用“曲線”調(diào)整命令       140
實(shí)例34——使網(wǎng)頁(yè)更加鮮艷        140
6.7.2　使用色階提高圖像清晰度     143
6.7.3　使用“亮度/ 對(duì)比度”調(diào)整圖像  143
實(shí)例35——使圖像更清晰         144
6.7.4　使用“色相/ 飽和度”調(diào)整圖像  146
6.7.5　使用“自然飽和度”調(diào)整圖像   147
實(shí)例36——制作酷炫圖片         147
6.7.6　使用“陰影/ 高光”命令修正圖像的逆光             149
實(shí)例37——修正逆光的圖片        150
6.8　使用填充和調(diào)整圖層           152
6.8.1　純色填充圖層            152
6.8.2　漸變填充圖層            153
6.8.3　圖案填充圖層            153
實(shí)例38——制作炫彩網(wǎng)頁(yè)         153
6.8.4　調(diào)整面板               155
實(shí)例39——制作黑白色圖像        156
6.9　銳化提高圖像清晰度           158
6.10　處理掃描圖像               158
6.11　批處理圖像                158
6.11.1　使用動(dòng)作面板           159
6.11.2　自定義動(dòng)作             159
實(shí)例40——批處理圖像           159
第7 章 設(shè)計(jì)網(wǎng)站中的廣告條
7.1　網(wǎng)站廣告條的類型             162
7.2　廣告條的常見尺寸             162
7.3　如何設(shè)計(jì)好的廣告條           162
7.4　完美摳圖合成廣告條           163
7.4.1　磁性套索工具摳圖         163
實(shí)例41——制作果盤廣告條       163
7.4.2　快速選擇工具            164
實(shí)例42——制作美食廣告條        165
7.4.3　使用魔棒工具            166
7.4.4　使用鋼筆工具            167
實(shí)例43——制作薯?xiàng)l廣告         167
7.4.5　快速蒙版選擇圖像         170
實(shí)例44——制作服裝廣告條        170
7.4.6　“選擇并遮罩”選項(xiàng)精確選區(qū)   172
實(shí)例45——制作精美女裝廣告       172
7.4.7　焦點(diǎn)區(qū)域               174
7.5　使用修邊                   174
7.5.1　移除白邊和黑邊           174
7.5.2　去邊實(shí)現(xiàn)更好的合成效果     175
實(shí)例46——制作時(shí)尚服裝廣告條     175
7.6　使用畫筆工具繪圖             178
實(shí)例47——制作禮物宣傳廣告條     178
7.7　使用蒙版合成圖像             180
7.7.1　圖層蒙版替換圖層局部       181
7.7.2　圖層蒙版融合圖像         181
實(shí)例48——制作快餐店廣告條       181
7.7.3　使用剪貼蒙版            182
實(shí)例49——制作畫廊展覽小廣告     183
第8 章 網(wǎng)站頁(yè)面的配色
8.1　色彩基礎(chǔ)知識(shí)                187
8.1.1　光和色的三原色           187
8.1.2　色彩的類型             188
8.1.3　色彩的構(gòu)成要素           189
8.1.4　色彩的混合             189
8.1.5　色彩的分類             190
8.1.6　不同的色系             191
8.2　色彩的視覺心理感受           193
8.2.1　色彩的輕重             193
8.2.2　色彩的冷暖             193
8.2.3　色彩的軟硬             194
8.2.4　色彩的大小             194
8.2.5　色彩的活潑和莊重感        194
8.2.6　色彩的興奮和沉重感        195
8.2.7　色彩的華麗和樸實(shí)感        195
8.3　網(wǎng)頁(yè)配色標(biāo)準(zhǔn)                196
8.3.1　Web 安全顏色            196
8.3.2　使用Web 安全色調(diào)色板      196
8.4　網(wǎng)頁(yè)配色技巧                197
8.4.1　色彩搭配的原則           197
8.4.2　確定網(wǎng)頁(yè)主題色           198
8.4.3　正確選擇文字的顏色       198
8.5　網(wǎng)頁(yè)風(fēng)格與配色              199
8.5.1　暖色調(diào)配色             199
8.5.2　冷色調(diào)配色             200
8.5.3　穩(wěn)定、安靜風(fēng)格的配色       200
8.5.4　發(fā)揮白色效果的配色        200
8.5.5　高彩度的配色            201
8.6　影響網(wǎng)站配色的因素           201
8.6.1　根據(jù)行業(yè)特征選擇網(wǎng)頁(yè)配色    201
8.6.2　根據(jù)生命周期選擇網(wǎng)頁(yè)配色    202
8.6.3　根據(jù)色彩聯(lián)想選擇網(wǎng)頁(yè)配色    203
8.6.4　根據(jù)受眾色彩偏好選擇網(wǎng)頁(yè)配色                 204
第9 章 網(wǎng)頁(yè)的版式和布局
9.1　常見的網(wǎng)頁(yè)布局方式           207
9.1.1　“國(guó)”字型             207
9.1.2　拐角型                207
9.1.3　標(biāo)題正文型             208
9.1.4　左右框架型             208
9.1.5　上下框架型             209
9.1.6　封面型                209
9.1.7　動(dòng)畫型                209
9.1.8　變化型                209
9.2　文字在網(wǎng)頁(yè)中的作用           210
9.2.1　明確性                210
9.2.2　易讀性                210
9.2.3　美觀性                210
9.3　網(wǎng)頁(yè)文字的設(shè)計(jì)原則            211
9.3.1　可讀性                211
9.3.2　藝術(shù)化                211
9.4　網(wǎng)頁(yè)文字的排版設(shè)計(jì)           213
9.4.1　文字排版規(guī)則            213
9.4.2　文字排版的常用手法        214
9.5　根據(jù)內(nèi)容決定布局方式          216
9.5.1　左側(cè)的頁(yè)面布局           216
9.5.2　水平居中的頁(yè)面布局        216
9.5.3　水平和垂直居中的頁(yè)面布局               217
9.5.4　滿屏的頁(yè)面布局           217
9.6　頁(yè)面分割方式                217
9.6.1　橫向分割               217
9.6.2　縱向分割               218
9.6.3　縱向橫向復(fù)合分割         218
9.6.4　運(yùn)用固定區(qū)域            219
9.7　頁(yè)面布局的連貫性和多樣性       219
9.7.1　連貫性                219
9.7.2　多樣性                220
第10 章 移動(dòng)端網(wǎng)站UI 設(shè)計(jì)
10.1　移動(dòng)端UI 設(shè)計(jì)基本概念        221
10.1.1　關(guān)于手機(jī)             221
10.1.2　移動(dòng)端界面設(shè)計(jì)原則      222
10.1.3　移動(dòng)端UI 設(shè)計(jì)流程       223
10.2　常見的手機(jī)系統(tǒng)             224
10.2.1　蘋果系統(tǒng)(iOS)          224
10.2.2　安卓系統(tǒng)(Android)       226
10.3　iOS 系統(tǒng)界面設(shè)計(jì)            227
10.3.1　iOS App 設(shè)計(jì)概述        227
10.3.2　iOS 系統(tǒng)界面設(shè)計(jì)規(guī)范     228
實(shí)例50——繪制iOS App 界面的頂部和底部          228
10.3.3　iOS 圖標(biāo)設(shè)計(jì)           231
實(shí)例51——繪制iOS App 界面的主體  232
10.4　Android 系統(tǒng)界面設(shè)計(jì)         235
10.4.1　Android App UI 概述      235
實(shí)例52——繪制Android 個(gè)性主界面  235
10.4.2　Android App 界面設(shè)計(jì)原則   239
10.4.3　Android App 界面設(shè)計(jì)風(fēng)格   239
10.4.4　控件設(shè)計(jì)             240
實(shí)例53——繪制Android 選項(xiàng)卡的頂部             241
10.4.5　Android 圖標(biāo)設(shè)計(jì)        241
實(shí)例54——繪制Android 選項(xiàng)卡的主體             242
10.5　移動(dòng)端與PC 端網(wǎng)頁(yè)UI 的區(qū)別    242
10.5.1　界面不同             242
10.5.2　位置不同             243
10.5.3　操作習(xí)慣不同          243
10.5.4　按鈕狀態(tài)不同          243
10.5.5　信息布局不同          243
第11 章 商業(yè)網(wǎng)站綜合案例
11.1　制作兒童類網(wǎng)站             244
11.1.1　行業(yè)分類             244
11.1.2　色彩分析             244
11.1.3　版式分析             244
實(shí)例55——兒童類網(wǎng)站的背景和導(dǎo)航    245
實(shí)例56——兒童類網(wǎng)站的主體和Logo   245
實(shí)例57——兒童類網(wǎng)站的切圖      245
11.2　制作手機(jī)購(gòu)物網(wǎng)站            245
11.2.1　行業(yè)分類             245
11.2.2　色彩分析             246
實(shí)例58——手機(jī)購(gòu)物網(wǎng)站的商品展示頁(yè)             246
實(shí)例59——手機(jī)購(gòu)物網(wǎng)站的切圖    246