本書是專門為用戶界面設(shè)計(UI設(shè)計)初學(xué)者量身打造的一本UI設(shè)計學(xué)習(xí)用書。本書立足于實(shí)踐,從實(shí)際工作任務(wù)出發(fā),講解Photoshop常用工具及命令的使用方法,旨在幫助讀者掌握Photoshop的基本操作,同時掌握UI設(shè)計中常用的理論知識與設(shè)計技巧。
本書共9章,主要內(nèi)容包括Photoshop UI設(shè)計快速入門、選區(qū)在UI設(shè)計中的應(yīng)用、圖層在UI設(shè)計中的應(yīng)用、調(diào)整圖層及混合模式在UI設(shè)計中的應(yīng)用、繪圖工具及文字工具在UI設(shè)計中的應(yīng)用、蒙版與通道在UI設(shè)計中的應(yīng)用、矢量工具在UI設(shè)計中的應(yīng)用、濾鏡在UI設(shè)計中的應(yīng)用以及一個綜合項目—私廚手機(jī)App項目。
本書適合作為院校UI設(shè)計相關(guān)課程的教材,也適合UI設(shè)計愛好者和App界面設(shè)計從業(yè)者閱讀參考。
(1)零基礎(chǔ)入門級講解
本書從零開始,深入淺出地講解 Photoshop 軟件中常用工具及命令的基本操作,并結(jié)合實(shí)際案例展示工具及命令的應(yīng)用場景,達(dá)到“學(xué)以致用,用以促學(xué)”的學(xué)習(xí)目的。
(2)實(shí)用精美的 UI 設(shè)計案例
本書以圖標(biāo)設(shè)計、網(wǎng)頁界面設(shè)計、手機(jī) App 界面設(shè)計、字體設(shè)計作為范例,幫助讀者快速熟悉軟件的操作,鞏固 UI 設(shè)計的理論基礎(chǔ)。
(3)海量資源輕松擁有
本書提供了演示案例中使用的素材文件及效果圖、配套的教學(xué) PPT 和對應(yīng)的教學(xué)視頻。
(4)在線視頻高效學(xué)習(xí)
本書提供了便捷的學(xué)習(xí)體驗(yàn),讀者可以直接訪問課工場官網(wǎng)教材專區(qū)下載書中所需的案例素材,也可掃描二維碼觀看書中配套的視頻
肖睿,課工場創(chuàng)始人,北京大學(xué)教育學(xué)博士,北京大學(xué)軟件學(xué)院特約講師,北京大學(xué)學(xué)習(xí)科學(xué)實(shí)驗(yàn)室特約顧問。作為北大青鳥 Aptech 的聯(lián)合創(chuàng)始人,歷任學(xué)術(shù)總監(jiān)、研究院院長、公司副總裁等核心崗位,擁有20多年的IT職業(yè)教育產(chǎn)品管理和企業(yè)管理經(jīng)驗(yàn)。于2015年創(chuàng)辦課工場,兼任總經(jīng)理,旨在為大學(xué)生提供更可靠的 IT 就業(yè)教育及服務(wù)。
第 1章 Photoshop UI設(shè)計快速入門 1
1.1 初識UI設(shè)計 2
1.1.1 UI設(shè)計行業(yè)概述 2
1.1.2 Photoshop在UI設(shè)計中的應(yīng)用 4
1.2 Photoshop的基本操作 5
1.2.1 Photoshop的工作界面 5
1.2.2 Photoshop的文件操作 9
1.2.3 Photoshop的圖像編輯 13
1.2.4 演示案例:手機(jī)App頁面適配 16
1.3 UI設(shè)計的相關(guān)概念 18
1.3.1 UI設(shè)計的常用單位 18
1.3.2 UI設(shè)計的常用分辨率 19
1.3.3 UI設(shè)計的顏色模式 21
1.3.4 UI設(shè)計的常見配色技巧 22
1.3.5 演示案例:水果圖標(biāo)背景配色 25
課堂練習(xí):制作水果App引導(dǎo)頁 28
本章小結(jié) 29
課后練習(xí):制作抽獎App頁面 29
第 2章 選區(qū)在UI設(shè)計中的應(yīng)用 31
2.1 選區(qū) 32
2.1.1 選區(qū)概述 32
2.1.2 選區(qū)的基本操作 33
2.1.3 選區(qū)的布爾運(yùn)算 37
2.1.4 演示案例:繪制天氣App圖標(biāo) 39
2.2 摳圖工具 42
2.2.1 魔棒工具的應(yīng)用 42
2.2.2 快速選擇工具的應(yīng)用 44
2.2.3 套索工具的應(yīng)用 46
2.2.4 演示案例:制作電商網(wǎng)頁女裝新品Banner 48
課堂練習(xí):制作汽車網(wǎng)頁Banner 51
本章小結(jié) 52
課后練習(xí):制作化妝品直通車廣告圖 52
第3章 圖層在UI設(shè)計中的應(yīng)用 53
3.1 圖層的基本操作 54
3.1.1 圖層的選擇與復(fù)制 54
3.1.2 圖層的不透明度與填充 57
3.1.3 圖層的分類管理 58
3.1.4 圖層的變換操作 62
3.1.5 圖層的合并與蓋印 65
3.1.6 圖層的對齊與分布 66
3.1.7 演示案例:制作企業(yè)官網(wǎng)首頁界面 69
3.2 圖層的類型 72
3.2.1 像素圖層與智能對象 72
3.2.2 形狀圖層與文字圖層 74
3.2.3 演示案例:制作UI設(shè)計作品效果展示圖 75
3.3 圖層樣式的應(yīng)用 78
3.3.1 光影類圖層樣式的應(yīng)用 79
3.3.2 色彩類圖層樣式的應(yīng)用 82
3.3.3 演示案例:制作擬物風(fēng)格手機(jī)App啟動圖標(biāo) 86
課堂練習(xí):制作紅黃藍(lán)擬物圖標(biāo) 89
本章小結(jié) 90
課后練習(xí):制作擬物啟動圖標(biāo) 90
第4章 調(diào)整圖層及混合模式在UI設(shè)計中的應(yīng)用 91
4.1 Photoshop明度類調(diào)整圖層 92
4.1.1 “亮度/對比度”調(diào)整圖層的應(yīng)用 93
4.1.2 “色階”調(diào)整圖層的應(yīng)用 95
4.1.3 “曲線”調(diào)整圖層的應(yīng)用 97
4.1.4 “曝光度”調(diào)整圖層的應(yīng)用 99
4.1.5 演示案例:制作攝影App啟動頁 99
4.2 Photoshop色相及飽和度類調(diào)整圖層 102
4.2.1 “自然飽和度”調(diào)整圖層的應(yīng)用 102
4.2.2 “色相/飽和度”調(diào)整圖層的應(yīng)用 103
4.2.3 “色彩平衡”調(diào)整圖層的應(yīng)用 105
4.2.4 “黑白”調(diào)整圖層的應(yīng)用 106
4.2.5 “照片濾鏡”調(diào)整圖層的應(yīng)用 107
4.2.6 演示案例:制作服裝網(wǎng)頁類目入口 108
4.3 Photoshop圖層混合模式 113
4.3.1 組合模式組與色彩模式組的應(yīng)用 113
4.3.2 加深模式組與減淡模式組的應(yīng)用 115
4.3.3 對比模式組與比較模式組的應(yīng)用 118
4.3.4 演示案例:制作美妝App波普風(fēng)格廣告頁 120
課堂練習(xí): 制作餐飲網(wǎng)頁加盟模塊 122
本章小結(jié) 123
課后練習(xí):制作時尚女郎雜志封面 123
第5章 繪圖工具及文字工具在UI設(shè)計中的應(yīng)用 125
5.1 常用繪圖工具的應(yīng)用 126
5.1.1 漸變工具的應(yīng)用 126
5.1.2 填充的設(shè)置 127
5.1.3 畫筆工具的應(yīng)用 130
5.1.4 鉛筆工具的應(yīng)用 132
5.1.5 擦除工具的應(yīng)用 134
5.1.6 演示案例:制作水晶質(zhì)感圖標(biāo) 136
5.2 文字工具的應(yīng)用 138
5.2.1 “字符”面板的應(yīng)用 138
5.2.2 “段落”面板的應(yīng)用 143
5.2.3 文字圖層的類型 145
5.2.4 演示案例:制作懷舊風(fēng)格海報 146
課堂練習(xí):制作美容服飾雜志封面 149
本章小結(jié) 150
課后練習(xí):制作波普風(fēng)格女裝Banner 150
第6章 蒙版與通道在UI設(shè)計中的應(yīng)用 151
6.1 圖層蒙版的應(yīng)用 152
6.1.1 圖層蒙版的基本原理 152
6.1.2 圖層蒙版的基本操作 153
6.1.3 演示案例:制作雙重曝光電影海報 155
6.2 矢量蒙版的應(yīng)用 158
6.2.1 矢量蒙版的基本原理 158
6.2.2 矢量蒙版的基本操作 159
6.2.3 演示案例:制作剪紙風(fēng)格圣誕廣告頁 161
6.3 剪貼蒙版的應(yīng)用 166
6.3.1 剪貼蒙版的基本原理 166
6.3.2 剪貼蒙版的基本操作 167
6.3.3 演示案例:制作圣誕晚宴電子邀請函 169
6.4 通道的應(yīng)用 171
6.4.1 通道的基本原理 171
6.4.2 通道的基本操作 173
6.4.3 演示案例:制作故障藝術(shù)風(fēng)格彈窗廣告 175
課堂練習(xí):制作粉筆字Banner 177
本章小結(jié) 177
課后練習(xí):制作陰影透疊文字Banner 178
第7章 矢量工具在UI設(shè)計中的應(yīng)用 179
7.1 形狀工具組的應(yīng)用 180
7.1.1 形狀工具的繪圖模式 180
7.1.2 形狀工具的基本操作 181
7.1.3 演示案例:制作微立體風(fēng)格指南針圖標(biāo) 184
7.2 路徑的編輯 187
7.2.1 路徑的基本操作 187
7.2.2 路徑的運(yùn)算方法 189
7.2.3 演示案例:制作輕質(zhì)感風(fēng)格貓爪鈴鐺啟動圖標(biāo) 191
7.3 鋼筆工具的應(yīng)用 193
7.3.1 鋼筆工具的基本操作 193
7.3.2 錨點(diǎn)的處理原則 196
7.3.3 演示案例:制作游戲App商城界面 197
課堂練習(xí): 制作扁平風(fēng)格信封圖標(biāo) 199
本章小結(jié) 200
課后練習(xí):制作藝術(shù)殿堂引導(dǎo)頁 200
第8章 濾鏡在UI設(shè)計中的應(yīng)用 201
8.1 濾鏡概述 202
8.1.1 濾鏡的基本原理 202
8.1.2 濾鏡的基本操作 205
8.1.3 演示案例:制作運(yùn)動類廣告頁 206
8.2 濾鏡庫的應(yīng)用 209
8.2.1 畫筆描邊與素描 210
8.2.2 紋理與藝術(shù)效果 216
8.2.3 演示案例:制作牛奶類Banner 221
8.3 濾鏡組的應(yīng)用 223
8.3.1 風(fēng)格化與扭曲濾鏡組 223
8.3.2 模糊與銳化濾鏡組 227
8.3.3 其他常用濾鏡組 229
8.3.4 演示案例:制作亞洲杯足球賽海報 231
課堂練習(xí):制作游戲技能圖標(biāo) 235
本章小結(jié) 235
課后練習(xí):制作舞蹈培訓(xùn)班招生海報 235
第9章 綜合項目:私廚手機(jī)App項目 237
9.1 制作私廚手機(jī)App圖標(biāo) 238
9.1.1 演示案例:制作啟動圖標(biāo) 238
9.1.2 演示案例:制作功能圖標(biāo) 242
9.2 制作私廚手機(jī)App內(nèi)容頁 248
9.2.1 演示案例:制作私廚首頁 248
9.2.2 演示案例:制作提交訂單頁面 253
9.2.3 演示案例:制作服務(wù)保障頁面 257
本章小結(jié) 259