Photoshop UI設(shè)計(jì)案例教程

第 1章　Photoshop UI設(shè)計(jì)快速入門　1
1．1　初識(shí)UI設(shè)計(jì)　2
1．1．1　UI設(shè)計(jì)行業(yè)概述　2
1．1．2　Photoshop在UI設(shè)計(jì)中的應(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è)計(jì)的相關(guān)概念　18
1．3．1　UI設(shè)計(jì)的常用單位　18
1．3．2　UI設(shè)計(jì)的常用分辨率　19
1．3．3　UI設(shè)計(jì)的顏色模式　21
1．3．4　UI設(shè)計(jì)的常見配色技巧　22
1．3．5　演示案例：水果圖標(biāo)背景配色　25
課堂練習(xí)：制作水果App引導(dǎo)頁　28
本章小結(jié)　29
課后練習(xí)：制作抽獎(jiǎng)App頁面　29
第 2章　選區(qū)在UI設(shè)計(jì)中的應(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è)計(jì)中的應(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　圖層的對(duì)齊與分布　66
3．1．7　演示案例：制作企業(yè)官網(wǎng)首頁界面　69
3．2　圖層的類型　72
3．2．1　像素圖層與智能對(duì)象　72
3．2．2　形狀圖層與文字圖層　74
3．2．3　演示案例：制作UI設(shè)計(jì)作品效果展示圖　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啟動(dòng)圖標(biāo)　86
課堂練習(xí)：制作紅黃藍(lán)擬物圖標(biāo)　89
本章小結(jié)　90
課后練習(xí)：制作擬物啟動(dòng)圖標(biāo)　90
第4章　調(diào)整圖層及混合模式在UI設(shè)計(jì)中的應(yīng)用　91
4．1　Photoshop明度類調(diào)整圖層　92
4．1．1　“亮度/對(duì)比度”調(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啟動(dòng)頁　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　對(duì)比模式組與比較模式組的應(yīng)用　118
4．3．4　演示案例：制作美妝App波普風(fēng)格廣告頁　120
課堂練習(xí)： 制作餐飲網(wǎng)頁加盟模塊　122
本章小結(jié)　123
課后練習(xí)：制作時(shí)尚女郎雜志封面　123
第5章　繪圖工具及文字工具在UI設(shè)計(jì)中的應(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)格海報(bào)　146
課堂練習(xí)：制作美容服飾雜志封面　149
本章小結(jié)　150
課后練習(xí)：制作波普風(fēng)格女裝Banner　150
第6章　蒙版與通道在UI設(shè)計(jì)中的應(yīng)用　151
6．1　圖層蒙版的應(yīng)用　152
6．1．1　圖層蒙版的基本原理　152
6．1．2　圖層蒙版的基本操作　153
6．1．3　演示案例：制作雙重曝光電影海報(bào)　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　演示案例：制作圣誕晚宴電子邀請(qǐng)函　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è)計(jì)中的應(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)格貓爪鈴鐺啟動(dò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è)計(jì)中的應(yīng)用　201
8．1　濾鏡概述　202
8．1．1　濾鏡的基本原理　202
8．1．2　濾鏡的基本操作　205
8．1．3　演示案例：制作運(yùn)動(dòng)類廣告頁　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　演示案例：制作亞洲杯足球賽海報(bào)　231
課堂練習(xí)：制作游戲技能圖標(biāo)　235
本章小結(jié)　235
課后練習(xí)：制作舞蹈培訓(xùn)班招生海報(bào)　235
第9章　綜合項(xiàng)目：私廚手機(jī)App項(xiàng)目　237
9．1　制作私廚手機(jī)App圖標(biāo)　238
9．1．1　演示案例：制作啟動(dòng)圖標(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