Photoshop UI设计完全自学手册

第1章　Photoshop与UI设计——设计基础     001
1.1　UI设计基础     001
1.1.1　什么是UI设计     001
1.1.2　UI设计的常见类别     001
1.1.3　UI设计常用的工具     001
1.2　良好的UI用户体验     003
1.2.1　用户体验     003
1.2.2　影响用户体验的因素     003
1.3　UI设计风格     004
1.3.1　拟物化设计风格     004
1.3.2　扁平化设计风格     004
1.4　UI设计的构成法则     005
1.4.1　什么是构成     005
1.4.2　形式美法则     005
1.4.3　构成的思维方式     006
1.5　图像的分类     007
1.5.1　位图     007
1.5.2　矢量图     008
1.6　UI设计中的色彩搭配技巧     009
1.6.1　色彩的三属性     009
1.6.2　基础配色技巧     009
1.6.3　色彩的搭配法则     011
1.7　UI设计的原则     012
1.7.1　视觉美观     012
1.7.2　突出主题     013
1.7.3　整体性     013
1.7.4　为用户考虑     013
1.7.5　快速加载     014
1.8　UI设计的一般流程     014
1.9　PC端和移动端的UI设计规范     015
1.9.1　界面不同     015
1.9.2　PC端的设计规范     016
1.9.3　移动端的设计规范     017
第2章　Photoshop 的基本操作——制作技巧     019
2.1　Photoshop 的安装     019
2.1.1　实战——安装Photoshop     019
2.1.2　Photoshop 的启动     020
2.2　Photoshop 的工作界面     021
2.2.1　菜单栏     021
2.2.2　工具箱     022
2.2.3　选项栏     023
2.2.4　面板     023
2.2.5　文件窗口     023
2.2.6　状态栏     024
2.3　查看图像     024
2.3.1　屏幕模式     024
2.3.2　在多窗口中查看图像     024
2.3.3　使用“缩放工具”     027
2.3.4　实战——使用“缩放工具”调整窗口比例     028
2.3.5　使用“抓手工具”     029
2.3.6　使用“旋转视图工具”     029
2.3.7　使用“导航器”面板     029
2.4　图像编辑的辅助操作     030
2.4.1　标尺     030
2.4.2　参考线     030
2.4.3　网格     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　导入文件     035
2.7　导出、保存、关闭文件     036
2.7.1　导出文件     036
2.7.2　保存文件     036
2.7.3　实战——打开和保存文件     037
2.7.4　关闭文件     037
2.8　修改图像大小     037
2.9　修改画布大小     038
2.9.1　修改画布     038
2.9.2　显示全部     039
2.9.3　旋转画布     039
2.9.4　实战——旋转图像     039
2.10　裁剪图像     039
2.10.1　了解“裁剪工具”     040
2.10.2　了解“透视裁剪工具”     041
2.10.3　实战——使用“透视裁剪工具”修正图像     042
2.10.4　使用“图像>裁剪”命令     042
2.10.5　使用“图像>裁切”命令     042
2.11　图像的复制和粘贴     042
2.11.1　复制文件     043
2.11.2　复制与粘贴     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　缩放和旋转图像     046
2.12.4　斜切和扭曲图像     047
2.12.5　透视和变形图像     048
2.12.6　实战——为杯子变换样式     048
2.12.7　操控变形     049
2.13　还原与恢复操作     050
2.13.1　还原和重做     050
2.13.2　前进一步和后退一步     050
2.13.3　恢复文件      050
2.13.4　“历史记录”面板     050
2.13.5　实战——使用“历史记录”面板还原图像     051
第3章　掌握抠图的技巧——处理界面中的图像     053
3.1　创建规则形状选区     053
3.1.1　矩形选框工具     053
3.1.2　椭圆选框工具     054
3.1.3　单行和单列选框工具     054
3.1.4　实战——添加底纹效果     054
3.2　创建不规则形状选区     056
3.2.1　套索工具     056
3.2.2　多边形套索工具     056
3.2.3　磁性套索工具     057
3.2.4　实战——制作图标倒影     057
3.2.5　魔棒工具     058
3.2.6　快速选择工具     058
3.2.7　实战——快速抠图     059
3.3　其他创建选区的方法     059
3.3.1　色彩范围      059
3.3.2　实战——提升人物脸部的肤色     061
3.3.3　快速蒙版     062
3.3.4　调整边缘     062
3.3.5　实战——利用调整边缘抠图     063
3.4　选区的基本操作     064
3.5　修改选区     065
3.5.1　移动选区      065
3.5.2　边界     065
3.5.3　平滑选区     065
3.5.4　扩展与收缩选区     066
3.5.5　羽化选区     066
3.5.6　反向选区     066
3.5.7　选取相似和扩大选取     067
3.6　选区的运算     067
3.6.1　新选区     067
3.6.2　添加到选区     067
3.6.3　从选区减去     068
3.6.4　与选区交叉     068
3.7　编辑选区     068
3.7.1　变换选区     068
3.7.2　填充选区     069
3.7.3　描边选区     069
3.7.4　隐藏和显示选区     069
3.7.5　实战——为人物打造简易妆容     069
3.8　存储和载入选区      070
3.8.1　存储选区      070
3.8.2　载入选区      071
3.8.3　使用通道保存和载入选区     071
3.8.4　使用路径保存和载入选区      072
3.8.5　使用图层载入选区     072
第4章　图像的调色技法——定义不同的色彩     073
4.1　颜色的基本概念     073
4.1.1　色彩属性     073
4.1.2　色彩模式     073
4.2　图像色彩模式的转换     074
4.2.1　实战——RGB和CMYK模式的转换     075
4.2.2　实战——位图模式和灰度模式的转换     075
4.2.3　实战——位图模式转换为双色调模式     076
4.2.4　索引颜色模式转换     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　实战——“信息”面板在调节图像时的数值信息提示     079
4.4.4　使用“颜色取样器工具”     080
4.4.5　实战——使用“颜色取样器工具”吸取颜色     080
4.4.6　使用“拾色器”对话框     081
4.4.7　使用“吸管工具”选取颜色     082
4.4.8　使用“颜色”面板     082
4.4.9　使用“色板”面板     083
4.4.10　实战——使用“油漆桶工具”为图标换色     084
4.5　填充颜色     084
4.5.1　使用“填充”命令      085
4.5.2　实战——使用“填充”命令为图标制作高光效果     085
4.5.3　实战——使用“内容识别”填充     086
4.5.4　实战——使用“图案”填充     086
4.5.5　实战——使用“历史记录”填充     087
4.5.6　使用“油漆桶工具”     087
4.5.7　使用“渐变工具”     088
4.5.8　实战——载入外部渐变绘制电台播放界面     090
4.6　色彩管理     092
4.6.1　色彩设置     092
4.6.2　指定配置文件     093
4.6.3　转为配置文件     093
第5章　图形的绘制——为界面添加质感     094
5.1　基本绘图工具     094
5.1.1　画笔工具     094
5.1.2　铅笔工具     095
5.1.3　颜色替换工具     095
5.1.4　混合器画笔工具     096
5.1.5　实战——存储、载入、替换和复位画笔     096
5.2　设置画笔的基本样式     097
5.2.1　使用预设画笔工具     097
5.2.2　实战——自定义画笔笔刷     098
5.2.3　设置绘图模式     098
5.2.4　实战——使用“画笔工具”绘制简单质感按钮     101
5.3　“画笔”面板     102
5.3.1　设置绘图模式     102
5.3.2　设置画笔笔尖     103
5.3.3　形状动态     104
5.3.4　散布     104
5.3.5　纹理     105
5.3.6　双重画笔     106
5.3.7　颜色动态     106
5.3.8　传递     107
5.3.9　画笔笔势     107
5.3.10　其他画笔选项     108
5.3.11　实战——使用“画笔工具”为按钮添加质感     108
5.4　路径和锚点     110
5.4.1　认识路径和锚点     110
5.4.2　使用“钢笔工具”     111
5.4.3　实战——使用“钢笔工具”绘制App图标     112
5.4.4　自由钢笔工具     113
5.4.5　选择和编辑路径     113
5.4.6　锚点的基本操作     114
5.4.7　实战——存储和剪贴路径     115
5.5　路径的操作     116
5.5.1　“路径”面板     116
5.5.2　路径的基本操作     116
5.5.3　填充路径     118
5.5.4　路径与选区的转换     118
5.5.5　实战——描边路径     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　实战——绘制播放器App界面     123
5.6.8　实战——定义自定形状     125
5.6.9　实战——使用形状工具绘制照相机图标     125
第6章　图层和蒙版的使用技巧——完整结构     128
6.1　图层的概述     128
6.1.1　什么是图层     128
6.1.2　“图层”面板     128
6.1.3　图层的类型     129
6.1.4　实战——使用调整图层     130
6.2　图层的创建与选择     131
6.2.1　实战——创建新图层     131
6.2.2　创建“背景”图层     131
6.2.3　图层的选择     132
6.2.4　创建与编辑图层组     133
6.2.5　实战——图层编组在UI作品中的使用     134
6.3　图层的编辑     135
6.3.1　实战——移动、复制和删除图层     135
6.3.2　调整图层的叠放顺序     135
6.3.3　锁定图层     136
6.3.4　链接图层     136
6.3.5　栅格化图层     136
6.3.6　实战——自动对齐图层     136
6.3.7　自动混合图层     137
6.4　合并图层和盖印图层     137
6.4.1　实战——合并图层     137
6.4.2　拼合图像     138
6.4.3　实战——盖印图层     138
6.4.4　盖印“背景”图层     139
6.5　“图层复合”面板     139
6.6　设置图层的混合效果     140
6.6.1　设置图层的不透明度     140
6.6.2　设置“混合选项”     140
6.6.3　添加图层样式     141
6.6.4　实战——通过添加图层样式为界面添加质感     143
6.7　编辑图层样式     145
6.7.1　显示与隐藏效果     145
6.7.2　修改效果     145
6.7.3　复制与粘贴图层效果     146
6.7.4　清除图层样式     146
6.7.5　使用“全局光”和“等高线”     147
6.7.6　实战——应用图层编辑功能使作品拥有完整结构     147
6.8　“样式”面板的使用     148
6.8.1　认识“样式”面板     148
6.8.2　创建样式和删除样式     149
6.8.3　存储样式     149
6.8.4　载入样式     150
6.9　填充和调整图层     150
6.9.1　纯色填充     150
6.9.2　渐变填充     150
6.9.3　实战——使用图案填充制作图标     151
6.9.4　调整图层     152
6.10　认识蒙版     152
6.10.1　蒙版的简介及分类     152
6.10.2　蒙版的“属性”面板     153
6.11　图层蒙版     153
6.11.1　认识图层蒙版     153
6.11.2　实战——使用图层蒙版绘制图标     154
6.12　矢量蒙版     156
6.12.1　创建矢量蒙版     156
6.12.2　编辑和变换矢量蒙版     156
6.12.3　为矢量蒙版添加样式     157
6.13　剪贴蒙版     157
6.13.1　认识剪贴蒙版     157
6.13.2　剪贴蒙版的“混合样式”     157
6.13.3　释放剪贴蒙版      158
6.13.4　实战——绘制视频播放界面     158
第7章　文字在设计中的应用——巧用文字     160
7.1　使用文字     160
7.1.1　认识文字工具     160
7.1.2　输入横排文字     160
7.1.3　实战——输入横排文字     160
7.1.4　输入直排文字     162
7.1.5　输入段落文字     162
7.1.6　实战——输入段落文字     162
7.1.7　点文本与段落文本的相互转换     163
7.2　选择文本     163
7.2.1　选择全部文本     163
7.2.2　选择部分文本     164
7.3　使用文字工具的选项栏     164
7.3.1　切换文本取向     164
7.3.2　设置字体系列     164
7.3.3　设置字体样式     165
7.3.4　设置字体大小     165
7.3.5　实战——设置字体的样式及大小     165
7.3.6　消除锯齿     167
7.3.7　文本的对齐方式     167
7.4　设置字符和段落属性     167
7.4.1　“字符”面板     167
7.4.2　“段落”面板     168
7.4.3　“字符样式”面板和“段落样式”面板     169
7.4.4　实战——设置“字符”和“段落”面板     169
7.5　创建路径文字     171
7.5.1　创建沿路径排列的文字     171
7.5.2　移动与翻转路径文字     171
7.5.3　编辑文字路径     171
7.5.4　实战——编辑文字路径     172
7.6　变形文字     173
7.6.1　创建变形文字     173
7.6.2　变形选项的选择     173
7.6.3　重置变形与取消变形     173
7.7　编辑文字     174
7.7.1　载入文字选区     174
7.7.2　将文字转换为路径     174
7.7.3　将文字转换为形状     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　字体预览大小     176
7.8.5　语言选项     176
7.8.6　更新所有文字图层     176
7.8.7　替换所有缺欠字体     176
7.8.8　粘贴Lorem Ipsum     176
第8章　滤镜的使用——界面中的特效     177
8.1　认识滤镜     177
8.2　滤镜库     177
8.3　自适应广角     178
8.3.1　“自适应广角”命令     178
8.3.2　实战——修复“广角视图”照片     179
8.4　镜头校正     180
8.4.1　“镜头校正”命令     180
8.4.2　实战——校正歪斜图像     182
8.5　液化     182
8.5.1　“液化”滤镜     183
8.5.2　实战——使用“液化”滤镜制作简单图标     183
8.6　油画     185
8.7　消失点     185
8.8　“风格化”滤镜组     187
8.8.1　查找边缘     187
8.8.2　等高线     187
8.8.3　风     187
8.8.4　浮雕效果     187
8.8.5　扩散     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　实战——使用“高斯模糊”滤镜制作界面背景     194
8.10　“扭曲”滤镜组     197
8.10.1　波浪     197
8.10.2　波纹     197
8.10.3　极坐标     197
8.10.4　挤压     198
8.10.5　切变     198
8.10.6　实战——使用“球面化”滤镜制作立体按钮     198
8.10.7　水波     199
8.10.8　旋转扭曲     199
8.10.9　置换     199
8.11　“锐化”滤镜组     199
8.11.1　USM锐化     199
8.11.2　进一步锐化     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　彩色半调     201
8.13.3　点状化     201
8.13.4　晶格化     202
8.13.5　实战——使用“马赛克”滤镜制作背景     202
8.13.6　碎片     202
8.13.7　铜版雕刻     202
8.14　“渲染”滤镜组     203
8.14.1　分层云彩     203
8.14.2　光照效果     203
8.14.3　实战——使用“镜头光晕”滤镜和“水波”滤镜制作水波效果     203
8.14.4　纤维     204
8.14.5　云彩     204
8.14.6　实战——使用“云彩”命令制作纹理效果     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　实战——使用“添加杂色”滤镜制作质感图标     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　实战——安装外挂滤镜      211
第9章　Web和切片输出——输出作品     213
9.1　创建切片     213
9.1.1　切片的类型     213
9.1.2　使用“切片工具”创建切片     213
9.1.3　基于参考线创建切片     213
9.1.4　基于图层创建切片     214
9.1.5　实战——创建切片     214
9.2　编辑切片     215
9.2.1　选择、移动与调整切片     215
9.2.2　实战——划分切片     215
9.2.3　组合与删除切片     217
9.2.4　转换为用户切片     217
9.2.5　设置切片选项     218
9.2.6　实战——为切片添加超链接     219
9.3　优化和输出Web图像     220
9.3.1　Web安全颜色     220
9.3.2　优化Web图像     220
9.3.3　实战——优化Web图像     222
9.3.4　输出Web图像     223
9.3.5　实战——输出Web图像     223
第10章　综合案例     225
10.1　逼真话筒图标设计     225
10.1.1　案例分析     225
10.1.2　色彩分析     225
10.1.3　制作步骤     225
10.2　简洁游戏按钮设计     232
10.2.1　案例分析     232
10.2.2　色彩分析     232
10.2.3　制作步骤     232
10.3　Android系统音乐App UI设计     234
10.3.1　案例分析     234
10.3.2　色彩分析     234
10.3.3　制作步骤     234
10.4　iOS系统闹钟App UI设计     238
10.4.1　案例分析     238
10.4.2　色彩分析     238
10.4.3　制作步骤     238
10.5　PC端天气软件UI设计     241
10.5.1　案例分析     241
10.5.2　色彩分析     241
10.5.3　制作步骤     241