基本介紹
- 書名：Photoshop CC網站UI設計全程揭秘（第2版）
- 作者：趙中華
- 出版社：清華大學出版社
- 出版時間：2019年09月
- 定價：79.8 元
- ISBN：9787302526865
內容簡介,圖書目錄,
內容簡介
《Photoshop CC網站UI設計全程揭秘（第2版）》是一本關於網站UI設計的經典之作，以Photoshop CC為設計工具，對主流網站UI設計流程和製作技巧進行了全面、細緻的剖析。
《Photoshop CC網站UI設計全程揭秘（第2版）》內容簡潔、通俗易懂，通過知識點與案例相結合的方式，讓讀者能夠清晰明了地理解網站UI設計的相關內容，從而達到學以致用的目的。全書共分11章，包括網站UI概述，Photoshop基本操作，選區、形狀和網站圖示，圖層與網頁中的按鈕，鋼筆、文字和網站導航，調整命令與最佳化圖像，設計網站中的廣告條，網站頁面的配色，網頁的版式和布局，移動端網站UI設計和商業網站綜合案例等內容。
《Photoshop CC網站UI設計全程揭秘（第2版）》結構清晰、實例經典、技術實用，適合網站UI設計初、中級讀者，包括廣大UI設計愛好者、UI設計工作者，也可以作為高等院校UI設計課程的教材。
圖書目錄
第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 內容與形式相統一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 網頁設計的命名規範 8
1.6 移動端UI 設計 9
1.6.1 移動端UI 設計概述9
1.6.2 移動端和PC 端UI設計的區別 9
第2 章 Photoshop 基本操作
2.1 Photoshop 簡介 12
2.2 Photoshop 的安裝 12
實例1——安裝Photoshop12
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 章 選區、形狀和網站圖示
3.1 網站圖示的設計準則 30
3.2 網站圖示的設計流程 30
3.3 規則選區創建標誌 31
3.3.1 矩形選框工具 31
3.3.2 橢圓選框工具 31
實例8——製作簡單的Logo32
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 使用形狀工具創建圖示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——製作數據統計按鈕 76
4.5.5 使用“內陰影”增加層次 79
實例22——製作圓形立體按鈕 80
4.5.6 使用“內發光”和“外發光”製作發光效果 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 創建精確的參考線99
實例26——製作簡潔導航選單 100
5.4 修改選區 104
5.4.1 羽化選區 104
5.4.2 擴展/ 收縮選區104
5.5 加深和減淡修飾 105
5.5.1 加深工具 105
5.5.2 減淡工具 105
實例27——製作創意音樂網站選單 106
5.6 使用鋼筆工具繪製精確的形狀 110
5.6.1 使用鋼筆工具 110
實例28——製作復古導航條 111
5.6.2 路徑與選區的轉換 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 章 調整命令與最佳化圖像
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 “選擇並遮罩”選項精確選區 172
實例45——製作精美女裝廣告 172
7.4.7 焦點區域 174
7.5 使用修邊 174
7.5.1 移除白邊和黑邊174
7.5.2 去邊實現更好的合成效果 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 穩定、安靜風格的配色 200
8.5.4 發揮白色效果的配色 200
8.5.5 高彩度的配色 201
8.6 影響網站配色的因素201
8.6.1 根據行業特徵選擇網頁配色 201
8.6.2 根據生命周期選擇網頁配色 202
8.6.3 根據色彩聯想選擇網頁配色 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 文字排版規則 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 運用固定區域 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 常見的手機系統 224
10.2.1 蘋果系統(iOS)224
10.2.2 安卓系統(Android) 226
10.3 iOS 系統界面設計 227
10.3.1 iOS App 設計概述 227
10.3.2 iOS 系統界面設計規範 228
實例50——繪製iOS App 界面的頂部和底部228
10.3.3 iOS 圖示設計231
實例51——繪製iOS App 界面的主體 232
10.4 Android 系統界面設計 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 的區別 242
10.5.1 界面不同 242
10.5.2 位置不同 243
10.5.3 操作習慣不同243
10.5.4 按鈕狀態不同243
10.5.5 信息布局不同243
第11 章 商業網站綜合案例
11.1 製作兒童類網站 244
11.1.1 行業分類 244
11.1.2 色彩分析 244
11.1.3 版式分析 244
實例55——兒童類網站的背景和導航 245
實例56——兒童類網站的主體和Logo 245
實例57——兒童類網站的切圖 245
11.2 製作手機購物網站 245
11.2.1 行業分類 245
11.2.2 色彩分析 246
實例58——手機購物網站的商品展示頁 246
實例59——手機購物網站的切圖 246
