Photoshop UI設(shè)計(jì)完全自學(xué)手冊

第1章　Photoshop與UI設(shè)計(jì)——設(shè)計(jì)基礎(chǔ)     001
1.1　UI設(shè)計(jì)基礎(chǔ)     001
1.1.1　什么是UI設(shè)計(jì)     001
1.1.2　UI設(shè)計(jì)的常見類別     001
1.1.3　UI設(shè)計(jì)常用的工具     001
1.2　良好的UI用戶體驗(yàn)     003
1.2.1　用戶體驗(yàn)     003
1.2.2　影響用戶體驗(yàn)的因素     003
1.3　UI設(shè)計(jì)風(fēng)格     004
1.3.1　擬物化設(shè)計(jì)風(fēng)格     004
1.3.2　扁平化設(shè)計(jì)風(fēng)格     004
1.4　UI設(shè)計(jì)的構(gòu)成法則     005
1.4.1　什么是構(gòu)成     005
1.4.2　形式美法則     005
1.4.3　構(gòu)成的思維方式     006
1.5　圖像的分類     007
1.5.1　位圖     007
1.5.2　矢量圖     008
1.6　UI設(shè)計(jì)中的色彩搭配技巧     009
1.6.1　色彩的三屬性     009
1.6.2　基礎(chǔ)配色技巧     009
1.6.3　色彩的搭配法則     011
1.7　UI設(shè)計(jì)的原則     012
1.7.1　視覺美觀     012
1.7.2　突出主題     013
1.7.3　整體性     013
1.7.4　為用戶考慮     013
1.7.5　快速加載     014
1.8　UI設(shè)計(jì)的一般流程     014
1.9　PC端和移動端的UI設(shè)計(jì)規(guī)范     015
1.9.1　界面不同     015
1.9.2　PC端的設(shè)計(jì)規(guī)范     016
1.9.3　移動端的設(shè)計(jì)規(guī)范     017
第2章　Photoshop 的基本操作——制作技巧     019
2.1　Photoshop 的安裝     019
2.1.1　實(shí)戰(zhàn)——安裝Photoshop     019
2.1.2　Photoshop 的啟動     020
2.2　Photoshop 的工作界面     021
2.2.1　菜單欄     021
2.2.2　工具箱     022
2.2.3　選項(xiàng)欄     023
2.2.4　面板     023
2.2.5　文件窗口     023
2.2.6　狀態(tài)欄     024
2.3　查看圖像     024
2.3.1　屏幕模式     024
2.3.2　在多窗口中查看圖像     024
2.3.3　使用“縮放工具”     027
2.3.4　實(shí)戰(zhàn)——使用“縮放工具”調(diào)整窗口比例     028
2.3.5　使用“抓手工具”     029
2.3.6　使用“旋轉(zhuǎn)視圖工具”     029
2.3.7　使用“導(dǎo)航器”面板     029
2.4　圖像編輯的輔助操作     030
2.4.1　標(biāo)尺     030
2.4.2　參考線     030
2.4.3　網(wǎng)格     031
2.5　新建文件     031
2.6　打開文件     033
2.6.1　使用“打開”命令     033
2.6.2　使用“打開為”命令     033
2.6.3　使用“在Bridge中瀏覽”命令     034
2.6.4　使用“近打開文件”命令     034
2.6.5　使用“打開為智能對象”命令     035
2.6.6　置入文件     035
2.6.7　導(dǎo)入文件     035
2.7　導(dǎo)出、保存、關(guān)閉文件     036
2.7.1　導(dǎo)出文件     036
2.7.2　保存文件     036
2.7.3　實(shí)戰(zhàn)——打開和保存文件     037
2.7.4　關(guān)閉文件     037
2.8　修改圖像大小     037
2.9　修改畫布大小     038
2.9.1　修改畫布     038
2.9.2　顯示全部     039
2.9.3　旋轉(zhuǎn)畫布     039
2.9.4　實(shí)戰(zhàn)——旋轉(zhuǎn)圖像     039
2.10　裁剪圖像     039
2.10.1　了解“裁剪工具”     040
2.10.2　了解“透視裁剪工具”     041
2.10.3　實(shí)戰(zhàn)——使用“透視裁剪工具”修正圖像     042
2.10.4　使用“圖像>裁剪”命令     042
2.10.5　使用“圖像>裁切”命令     042
2.11　圖像的復(fù)制和粘貼     042
2.11.1　復(fù)制文件     043
2.11.2　復(fù)制與粘貼     043
2.11.3　使用“合并拷貝”命令     043
2.11.4　選擇性粘貼     043
2.11.5　剪切圖像     044
2.11.6　清除圖像     045
2.12　圖像的基本操作     045
2.12.1　移動圖像     045
2.12.2　變換圖像     046
2.12.3　縮放和旋轉(zhuǎn)圖像     046
2.12.4　斜切和扭曲圖像     047
2.12.5　透視和變形圖像     048
2.12.6　實(shí)戰(zhàn)——為杯子變換樣式     048
2.12.7　操控變形     049
2.13　還原與恢復(fù)操作     050
2.13.1　還原和重做     050
2.13.2　前進(jìn)一步和后退一步     050
2.13.3　恢復(fù)文件      050
2.13.4　“歷史記錄”面板     050
2.13.5　實(shí)戰(zhàn)——使用“歷史記錄”面板還原圖像     051
第3章　掌握摳圖的技巧——處理界面中的圖像     053
3.1　創(chuàng)建規(guī)則形狀選區(qū)     053
3.1.1　矩形選框工具     053
3.1.2　橢圓選框工具     054
3.1.3　單行和單列選框工具     054
3.1.4　實(shí)戰(zhàn)——添加底紋效果     054
3.2　創(chuàng)建不規(guī)則形狀選區(qū)     056
3.2.1　套索工具     056
3.2.2　多邊形套索工具     056
3.2.3　磁性套索工具     057
3.2.4　實(shí)戰(zhàn)——制作圖標(biāo)倒影     057
3.2.5　魔棒工具     058
3.2.6　快速選擇工具     058
3.2.7　實(shí)戰(zhàn)——快速摳圖     059
3.3　其他創(chuàng)建選區(qū)的方法     059
3.3.1　色彩范圍      059
3.3.2　實(shí)戰(zhàn)——提升人物臉部的膚色     061
3.3.3　快速蒙版     062
3.3.4　調(diào)整邊緣     062
3.3.5　實(shí)戰(zhàn)——利用調(diào)整邊緣摳圖     063
3.4　選區(qū)的基本操作     064
3.5　修改選區(qū)     065
3.5.1　移動選區(qū)      065
3.5.2　邊界     065
3.5.3　平滑選區(qū)     065
3.5.4　擴(kuò)展與收縮選區(qū)     066
3.5.5　羽化選區(qū)     066
3.5.6　反向選區(qū)     066
3.5.7　選取相似和擴(kuò)大選取     067
3.6　選區(qū)的運(yùn)算     067
3.6.1　新選區(qū)     067
3.6.2　添加到選區(qū)     067
3.6.3　從選區(qū)減去     068
3.6.4　與選區(qū)交叉     068
3.7　編輯選區(qū)     068
3.7.1　變換選區(qū)     068
3.7.2　填充選區(qū)     069
3.7.3　描邊選區(qū)     069
3.7.4　隱藏和顯示選區(qū)     069
3.7.5　實(shí)戰(zhàn)——為人物打造簡易妝容     069
3.8　存儲和載入選區(qū)      070
3.8.1　存儲選區(qū)      070
3.8.2　載入選區(qū)      071
3.8.3　使用通道保存和載入選區(qū)     071
3.8.4　使用路徑保存和載入選區(qū)      072
3.8.5　使用圖層載入選區(qū)     072
第4章　圖像的調(diào)色技法——定義不同的色彩     073
4.1　顏色的基本概念     073
4.1.1　色彩屬性     073
4.1.2　色彩模式     073
4.2　圖像色彩模式的轉(zhuǎn)換     074
4.2.1　實(shí)戰(zhàn)——RGB和CMYK模式的轉(zhuǎn)換     075
4.2.2　實(shí)戰(zhàn)——位圖模式和灰度模式的轉(zhuǎn)換     075
4.2.3　實(shí)戰(zhàn)——位圖模式轉(zhuǎn)換為雙色調(diào)模式     076
4.2.4　索引顏色模式轉(zhuǎn)換     077
4.3　色域和溢色     078
4.3.1　色域      078
4.3.2　溢色     078
4.3.3　使用色域警告     078
4.4　選擇顏色     078
4.4.1　前景色和背景色     078
4.4.2　“信息”面板     079
4.4.3　實(shí)戰(zhàn)——“信息”面板在調(diào)節(jié)圖像時(shí)的數(shù)值信息提示     079
4.4.4　使用“顏色取樣器工具”     080
4.4.5　實(shí)戰(zhàn)——使用“顏色取樣器工具”吸取顏色     080
4.4.6　使用“拾色器”對話框     081
4.4.7　使用“吸管工具”選取顏色     082
4.4.8　使用“顏色”面板     082
4.4.9　使用“色板”面板     083
4.4.10　實(shí)戰(zhàn)——使用“油漆桶工具”為圖標(biāo)換色     084
4.5　填充顏色     084
4.5.1　使用“填充”命令      085
4.5.2　實(shí)戰(zhàn)——使用“填充”命令為圖標(biāo)制作高光效果     085
4.5.3　實(shí)戰(zhàn)——使用“內(nèi)容識別”填充     086
4.5.4　實(shí)戰(zhàn)——使用“圖案”填充     086
4.5.5　實(shí)戰(zhàn)——使用“歷史記錄”填充     087
4.5.6　使用“油漆桶工具”     087
4.5.7　使用“漸變工具”     088
4.5.8　實(shí)戰(zhàn)——載入外部漸變繪制電臺播放界面     090
4.6　色彩管理     092
4.6.1　色彩設(shè)置     092
4.6.2　指定配置文件     093
4.6.3　轉(zhuǎn)為配置文件     093
第5章　圖形的繪制——為界面添加質(zhì)感     094
5.1　基本繪圖工具     094
5.1.1　畫筆工具     094
5.1.2　鉛筆工具     095
5.1.3　顏色替換工具     095
5.1.4　混合器畫筆工具     096
5.1.5　實(shí)戰(zhàn)——存儲、載入、替換和復(fù)位畫筆     096
5.2　設(shè)置畫筆的基本樣式     097
5.2.1　使用預(yù)設(shè)畫筆工具     097
5.2.2　實(shí)戰(zhàn)——自定義畫筆筆刷     098
5.2.3　設(shè)置繪圖模式     098
5.2.4　實(shí)戰(zhàn)——使用“畫筆工具”繪制簡單質(zhì)感按鈕     101
5.3　“畫筆”面板     102
5.3.1　設(shè)置繪圖模式     102
5.3.2　設(shè)置畫筆筆尖     103
5.3.3　形狀動態(tài)     104
5.3.4　散布     104
5.3.5　紋理     105
5.3.6　雙重畫筆     106
5.3.7　顏色動態(tài)     106
5.3.8　傳遞     107
5.3.9　畫筆筆勢     107
5.3.10　其他畫筆選項(xiàng)     108
5.3.11　實(shí)戰(zhàn)——使用“畫筆工具”為按鈕添加質(zhì)感     108
5.4　路徑和錨點(diǎn)     110
5.4.1　認(rèn)識路徑和錨點(diǎn)     110
5.4.2　使用“鋼筆工具”     111
5.4.3　實(shí)戰(zhàn)——使用“鋼筆工具”繪制App圖標(biāo)     112
5.4.4　自由鋼筆工具     113
5.4.5　選擇和編輯路徑     113
5.4.6　錨點(diǎn)的基本操作     114
5.4.7　實(shí)戰(zhàn)——存儲和剪貼路徑     115
5.5　路徑的操作     116
5.5.1　“路徑”面板     116
5.5.2　路徑的基本操作     116
5.5.3　填充路徑     118
5.5.4　路徑與選區(qū)的轉(zhuǎn)換     118
5.5.5　實(shí)戰(zhàn)——描邊路徑     119
5.6　形狀工具     120
5.6.1　矩形工具     120
5.6.2　圓角矩形工具     121
5.6.3　橢圓工具     121
5.6.4　多邊形工具     122
5.6.5　直線工具     122
5.6.6　自定形狀工具     123
5.6.7　實(shí)戰(zhàn)——繪制播放器App界面     123
5.6.8　實(shí)戰(zhàn)——定義自定形狀     125
5.6.9　實(shí)戰(zhàn)——使用形狀工具繪制照相機(jī)圖標(biāo)     125
第6章　圖層和蒙版的使用技巧——完整結(jié)構(gòu)     128
6.1　圖層的概述     128
6.1.1　什么是圖層     128
6.1.2　“圖層”面板     128
6.1.3　圖層的類型     129
6.1.4　實(shí)戰(zhàn)——使用調(diào)整圖層     130
6.2　圖層的創(chuàng)建與選擇     131
6.2.1　實(shí)戰(zhàn)——創(chuàng)建新圖層     131
6.2.2　創(chuàng)建“背景”圖層     131
6.2.3　圖層的選擇     132
6.2.4　創(chuàng)建與編輯圖層組     133
6.2.5　實(shí)戰(zhàn)——圖層編組在UI作品中的使用     134
6.3　圖層的編輯     135
6.3.1　實(shí)戰(zhàn)——移動、復(fù)制和刪除圖層     135
6.3.2　調(diào)整圖層的疊放順序     135
6.3.3　鎖定圖層     136
6.3.4　鏈接圖層     136
6.3.5　柵格化圖層     136
6.3.6　實(shí)戰(zhàn)——自動對齊圖層     136
6.3.7　自動混合圖層     137
6.4　合并圖層和蓋印圖層     137
6.4.1　實(shí)戰(zhàn)——合并圖層     137
6.4.2　拼合圖像     138
6.4.3　實(shí)戰(zhàn)——蓋印圖層     138
6.4.4　蓋印“背景”圖層     139
6.5　“圖層復(fù)合”面板     139
6.6　設(shè)置圖層的混合效果     140
6.6.1　設(shè)置圖層的不透明度     140
6.6.2　設(shè)置“混合選項(xiàng)”     140
6.6.3　添加圖層樣式     141
6.6.4　實(shí)戰(zhàn)——通過添加圖層樣式為界面添加質(zhì)感     143
6.7　編輯圖層樣式     145
6.7.1　顯示與隱藏效果     145
6.7.2　修改效果     145
6.7.3　復(fù)制與粘貼圖層效果     146
6.7.4　清除圖層樣式     146
6.7.5　使用“全局光”和“等高線”     147
6.7.6　實(shí)戰(zhàn)——應(yīng)用圖層編輯功能使作品擁有完整結(jié)構(gòu)     147
6.8　“樣式”面板的使用     148
6.8.1　認(rèn)識“樣式”面板     148
6.8.2　創(chuàng)建樣式和刪除樣式     149
6.8.3　存儲樣式     149
6.8.4　載入樣式     150
6.9　填充和調(diào)整圖層     150
6.9.1　純色填充     150
6.9.2　漸變填充     150
6.9.3　實(shí)戰(zhàn)——使用圖案填充制作圖標(biāo)     151
6.9.4　調(diào)整圖層     152
6.10　認(rèn)識蒙版     152
6.10.1　蒙版的簡介及分類     152
6.10.2　蒙版的“屬性”面板     153
6.11　圖層蒙版     153
6.11.1　認(rèn)識圖層蒙版     153
6.11.2　實(shí)戰(zhàn)——使用圖層蒙版繪制圖標(biāo)     154
6.12　矢量蒙版     156
6.12.1　創(chuàng)建矢量蒙版     156
6.12.2　編輯和變換矢量蒙版     156
6.12.3　為矢量蒙版添加樣式     157
6.13　剪貼蒙版     157
6.13.1　認(rèn)識剪貼蒙版     157
6.13.2　剪貼蒙版的“混合樣式”     157
6.13.3　釋放剪貼蒙版      158
6.13.4　實(shí)戰(zhàn)——繪制視頻播放界面     158
第7章　文字在設(shè)計(jì)中的應(yīng)用——巧用文字     160
7.1　使用文字     160
7.1.1　認(rèn)識文字工具     160
7.1.2　輸入橫排文字     160
7.1.3　實(shí)戰(zhàn)——輸入橫排文字     160
7.1.4　輸入直排文字     162
7.1.5　輸入段落文字     162
7.1.6　實(shí)戰(zhàn)——輸入段落文字     162
7.1.7　點(diǎn)文本與段落文本的相互轉(zhuǎn)換     163
7.2　選擇文本     163
7.2.1　選擇全部文本     163
7.2.2　選擇部分文本     164
7.3　使用文字工具的選項(xiàng)欄     164
7.3.1　切換文本取向     164
7.3.2　設(shè)置字體系列     164
7.3.3　設(shè)置字體樣式     165
7.3.4　設(shè)置字體大小     165
7.3.5　實(shí)戰(zhàn)——設(shè)置字體的樣式及大小     165
7.3.6　消除鋸齒     167
7.3.7　文本的對齊方式     167
7.4　設(shè)置字符和段落屬性     167
7.4.1　“字符”面板     167
7.4.2　“段落”面板     168
7.4.3　“字符樣式”面板和“段落樣式”面板     169
7.4.4　實(shí)戰(zhàn)——設(shè)置“字符”和“段落”面板     169
7.5　創(chuàng)建路徑文字     171
7.5.1　創(chuàng)建沿路徑排列的文字     171
7.5.2　移動與翻轉(zhuǎn)路徑文字     171
7.5.3　編輯文字路徑     171
7.5.4　實(shí)戰(zhàn)——編輯文字路徑     172
7.6　變形文字     173
7.6.1　創(chuàng)建變形文字     173
7.6.2　變形選項(xiàng)的選擇     173
7.6.3　重置變形與取消變形     173
7.7　編輯文字     174
7.7.1　載入文字選區(qū)     174
7.7.2　將文字轉(zhuǎn)換為路徑     174
7.7.3　將文字轉(zhuǎn)換為形狀     174
7.7.4　拼寫檢查     174
7.7.5　查找和替換文本     175
7.8　“文字”菜單     175
7.8.1　OpenType     176
7.8.2　凸出為3D     176
7.8.3　柵格化文字圖層     176
7.8.4　字體預(yù)覽大小     176
7.8.5　語言選項(xiàng)     176
7.8.6　更新所有文字圖層     176
7.8.7　替換所有缺欠字體     176
7.8.8　粘貼Lorem Ipsum     176
第8章　濾鏡的使用——界面中的特效     177
8.1　認(rèn)識濾鏡     177
8.2　濾鏡庫     177
8.3　自適應(yīng)廣角     178
8.3.1　“自適應(yīng)廣角”命令     178
8.3.2　實(shí)戰(zhàn)——修復(fù)“廣角視圖”照片     179
8.4　鏡頭校正     180
8.4.1　“鏡頭校正”命令     180
8.4.2　實(shí)戰(zhàn)——校正歪斜圖像     182
8.5　液化     182
8.5.1　“液化”濾鏡     183
8.5.2　實(shí)戰(zhàn)——使用“液化”濾鏡制作簡單圖標(biāo)     183
8.6　油畫     185
8.7　消失點(diǎn)     185
8.8　“風(fēng)格化”濾鏡組     187
8.8.1　查找邊緣     187
8.8.2　等高線     187
8.8.3　風(fēng)     187
8.8.4　浮雕效果     187
8.8.5　擴(kuò)散     188
8.8.6　拼貼     188
8.8.7　曝光過度     188
8.8.8　凸出     189
8.9　“模糊”濾鏡組     189
8.9.1　場景模糊     189
8.9.2　光圈模糊     190
8.9.3　傾斜偏移     190
8.9.4　其他模糊     191
8.9.5　實(shí)戰(zhàn)——使用“高斯模糊”濾鏡制作界面背景     194
8.10　“扭曲”濾鏡組     197
8.10.1　波浪     197
8.10.2　波紋     197
8.10.3　極坐標(biāo)     197
8.10.4　擠壓     198
8.10.5　切變     198
8.10.6　實(shí)戰(zhàn)——使用“球面化”濾鏡制作立體按鈕     198
8.10.7　水波     199
8.10.8　旋轉(zhuǎn)扭曲     199
8.10.9　置換     199
8.11　“銳化”濾鏡組     199
8.11.1　USM銳化     199
8.11.2　進(jìn)一步銳化     199
8.11.3　銳化     200
8.11.4　銳化邊緣     200
8.11.5　智能銳化     200
8.12　“視頻”濾鏡組     201
8.12.1　NTSC顏色     201
8.12.2　逐行     201
8.13　“像素化”濾鏡組     201
8.13.1　彩塊化     201
8.13.2　彩色半調(diào)     201
8.13.3　點(diǎn)狀化     201
8.13.4　晶格化     202
8.13.5　實(shí)戰(zhàn)——使用“馬賽克”濾鏡制作背景     202
8.13.6　碎片     202
8.13.7　銅版雕刻     202
8.14　“渲染”濾鏡組     203
8.14.1　分層云彩     203
8.14.2　光照效果     203
8.14.3　實(shí)戰(zhàn)——使用“鏡頭光暈”濾鏡和“水波”濾鏡制作水波效果     203
8.14.4　纖維     204
8.14.5　云彩     204
8.14.6　實(shí)戰(zhàn)——使用“云彩”命令制作紋理效果     205
8.15　“雜色”濾鏡組     206
8.15.1　減少雜色     206
8.15.2　蒙塵與劃痕     206
8.15.3　去斑     207
8.15.4　添加雜色     207
8.15.5　中間值     207
8.15.6　實(shí)戰(zhàn)——使用“添加雜色”濾鏡制作質(zhì)感圖標(biāo)     207
8.16　“其他”濾鏡組     209
8.16.1　高反差保留     209
8.16.2　位移     209
8.16.3　自定     210
8.16.4　值     210
8.16.5　小值     210
8.17　Digimarc濾鏡     210
8.18　外掛濾鏡     211
8.18.1　安裝外掛濾鏡     211
8.18.2　實(shí)戰(zhàn)——安裝外掛濾鏡      211
第9章　Web和切片輸出——輸出作品     213
9.1　創(chuàng)建切片     213
9.1.1　切片的類型     213
9.1.2　使用“切片工具”創(chuàng)建切片     213
9.1.3　基于參考線創(chuàng)建切片     213
9.1.4　基于圖層創(chuàng)建切片     214
9.1.5　實(shí)戰(zhàn)——創(chuàng)建切片     214
9.2　編輯切片     215
9.2.1　選擇、移動與調(diào)整切片     215
9.2.2　實(shí)戰(zhàn)——劃分切片     215
9.2.3　組合與刪除切片     217
9.2.4　轉(zhuǎn)換為用戶切片     217
9.2.5　設(shè)置切片選項(xiàng)     218
9.2.6　實(shí)戰(zhàn)——為切片添加超鏈接     219
9.3　優(yōu)化和輸出Web圖像     220
9.3.1　Web安全顏色     220
9.3.2　優(yōu)化Web圖像     220
9.3.3　實(shí)戰(zhàn)——優(yōu)化Web圖像     222
9.3.4　輸出Web圖像     223
9.3.5　實(shí)戰(zhàn)——輸出Web圖像     223
第10章　綜合案例     225
10.1　逼真話筒圖標(biāo)設(shè)計(jì)     225
10.1.1　案例分析     225
10.1.2　色彩分析     225
10.1.3　制作步驟     225
10.2　簡潔游戲按鈕設(shè)計(jì)     232
10.2.1　案例分析     232
10.2.2　色彩分析     232
10.2.3　制作步驟     232
10.3　Android系統(tǒng)音樂App UI設(shè)計(jì)     234
10.3.1　案例分析     234
10.3.2　色彩分析     234
10.3.3　制作步驟     234
10.4　iOS系統(tǒng)鬧鐘App UI設(shè)計(jì)     238
10.4.1　案例分析     238
10.4.2　色彩分析     238
10.4.3　制作步驟     238
10.5　PC端天氣軟件UI設(shè)計(jì)     241
10.5.1　案例分析     241
10.5.2　色彩分析     241
10.5.3　制作步驟     241