Photoshop CC網站UI設計全程揭秘（第2版）

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