Photoshop UI設計案例教程

第 1章　Photoshop UI設計快速入門　1
1．1　初識UI設計　2
1．1．1　UI設計行業(yè)概述　2
1．1．2　Photoshop在UI設計中的應用　4
1．2　Photoshop的基本操作　5
1．2．1　Photoshop的工作界面　5
1．2．2　Photoshop的文件操作　9
1．2．3　Photoshop的圖像編輯　13
1．2．4　演示案例：手機App頁面適配　16
1．3　UI設計的相關概念　18
1．3．1　UI設計的常用單位　18
1．3．2　UI設計的常用分辨率　19
1．3．3　UI設計的顏色模式　21
1．3．4　UI設計的常見配色技巧　22
1．3．5　演示案例：水果圖標背景配色　25
課堂練習：制作水果App引導頁　28
本章小結　29
課后練習：制作抽獎App頁面　29
第 2章　選區(qū)在UI設計中的應用　31
2．1　選區(qū)　32
2．1．1　選區(qū)概述　32
2．1．2　選區(qū)的基本操作　33
2．1．3　選區(qū)的布爾運算　37
2．1．4　演示案例：繪制天氣App圖標　39
2．2　摳圖工具　42
2．2．1　魔棒工具的應用　42
2．2．2　快速選擇工具的應用　44
2．2．3　套索工具的應用　46
2．2．4　演示案例：制作電商網(wǎng)頁女裝新品Banner　48
課堂練習：制作汽車網(wǎng)頁Banner　51
本章小結　52
課后練習：制作化妝品直通車廣告圖　52
第3章　圖層在UI設計中的應用　53
3．1　圖層的基本操作　54
3．1．1　圖層的選擇與復制　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設計作品效果展示圖　75
3．3　圖層樣式的應用　78
3．3．1　光影類圖層樣式的應用　79
3．3．2　色彩類圖層樣式的應用　82
3．3．3　演示案例：制作擬物風格手機App啟動圖標　86
課堂練習：制作紅黃藍擬物圖標　89
本章小結　90
課后練習：制作擬物啟動圖標　90
第4章　調(diào)整圖層及混合模式在UI設計中的應用　91
4．1　Photoshop明度類調(diào)整圖層　92
4．1．1　“亮度/對比度”調(diào)整圖層的應用　93
4．1．2　“色階”調(diào)整圖層的應用　95
4．1．3　“曲線”調(diào)整圖層的應用　97
4．1．4　“曝光度”調(diào)整圖層的應用　99
4．1．5　演示案例：制作攝影App啟動頁　99
4．2　Photoshop色相及飽和度類調(diào)整圖層　102
4．2．1　“自然飽和度”調(diào)整圖層的應用　102
4．2．2　“色相/飽和度”調(diào)整圖層的應用　103
4．2．3　“色彩平衡”調(diào)整圖層的應用　105
4．2．4　“黑白”調(diào)整圖層的應用　106
4．2．5　“照片濾鏡”調(diào)整圖層的應用　107
4．2．6　演示案例：制作服裝網(wǎng)頁類目入口　108
4．3　Photoshop圖層混合模式　113
4．3．1　組合模式組與色彩模式組的應用　113
4．3．2　加深模式組與減淡模式組的應用　115
4．3．3　對比模式組與比較模式組的應用　118
4．3．4　演示案例：制作美妝App波普風格廣告頁　120
課堂練習： 制作餐飲網(wǎng)頁加盟模塊　122
本章小結　123
課后練習：制作時尚女郎雜志封面　123
第5章　繪圖工具及文字工具在UI設計中的應用　125
5．1　常用繪圖工具的應用　126
5．1．1　漸變工具的應用　126
5．1．2　填充的設置　127
5．1．3　畫筆工具的應用　130
5．1．4　鉛筆工具的應用　132
5．1．5　擦除工具的應用　134
5．1．6　演示案例：制作水晶質(zhì)感圖標　136
5．2　文字工具的應用　138
5．2．1　“字符”面板的應用　138
5．2．2　“段落”面板的應用　143
5．2．3　文字圖層的類型　145
5．2．4　演示案例：制作懷舊風格海報　146
課堂練習：制作美容服飾雜志封面　149
本章小結　150
課后練習：制作波普風格女裝Banner　150
第6章　蒙版與通道在UI設計中的應用　151
6．1　圖層蒙版的應用　152
6．1．1　圖層蒙版的基本原理　152
6．1．2　圖層蒙版的基本操作　153
6．1．3　演示案例：制作雙重曝光電影海報　155
6．2　矢量蒙版的應用　158
6．2．1　矢量蒙版的基本原理　158
6．2．2　矢量蒙版的基本操作　159
6．2．3　演示案例：制作剪紙風格圣誕廣告頁　161
6．3　剪貼蒙版的應用　166
6．3．1　剪貼蒙版的基本原理　166
6．3．2　剪貼蒙版的基本操作　167
6．3．3　演示案例：制作圣誕晚宴電子邀請函　169
6．4　通道的應用　171
6．4．1　通道的基本原理　171
6．4．2　通道的基本操作　173
6．4．3　演示案例：制作故障藝術風格彈窗廣告　175
課堂練習：制作粉筆字Banner　177
本章小結　177
課后練習：制作陰影透疊文字Banner　178
第7章　矢量工具在UI設計中的應用　179
7．1 形狀工具組的應用　180
7．1．1　形狀工具的繪圖模式　180
7．1．2　形狀工具的基本操作　181
7．1．3　演示案例：制作微立體風格指南針圖標　184
7．2　路徑的編輯　187
7．2．1　路徑的基本操作　187
7．2．2　路徑的運算方法　189
7．2．3　演示案例：制作輕質(zhì)感風格貓爪鈴鐺啟動圖標　191
7．3　鋼筆工具的應用　193
7．3．1　鋼筆工具的基本操作　193
7．3．2　錨點的處理原則　196
7．3．3　演示案例：制作游戲App商城界面　197
課堂練習： 制作扁平風格信封圖標　199
本章小結　200
課后練習：制作藝術殿堂引導頁　200
第8章　濾鏡在UI設計中的應用　201
8．1　濾鏡概述　202
8．1．1　濾鏡的基本原理　202
8．1．2　濾鏡的基本操作　205
8．1．3　演示案例：制作運動類廣告頁　206
8．2　濾鏡庫的應用　209
8．2．1　畫筆描邊與素描　210
8．2．2　紋理與藝術效果　216
8．2．3　演示案例：制作牛奶類Banner　221
8．3　濾鏡組的應用　223
8．3．1　風格化與扭曲濾鏡組　223
8．3．2　模糊與銳化濾鏡組　227
8．3．3　其他常用濾鏡組　229
8．3．4　演示案例：制作亞洲杯足球賽海報　231
課堂練習：制作游戲技能圖標　235
本章小結　235
課后練習：制作舞蹈培訓班招生海報　235
第9章　綜合項目：私廚手機App項目　237
9．1　制作私廚手機App圖標　238
9．1．1　演示案例：制作啟動圖標　238
9．1．2　演示案例：制作功能圖標　242
9．2　制作私廚手機App內(nèi)容頁　248
9．2．1　演示案例：制作私廚首頁　248
9．2．2　演示案例：制作提交訂單頁面　253
9．2．3　演示案例：制作服務保障頁面　257
本章小結　259