Photoshop CC中文版 UI 界面设计自学视频教程

随着智能手机的普及，服务于用户各种需求的APP层出不穷，因此UI设计也就慢慢被重视起来，而Photoshop则是UI设计制图必不可少的工具。Photoshop是Adobe公司旗下著名的图像处理软件之一，其应用范围覆盖数码照片处理、平面设计、视觉创意合成、数字插画创作、三维设计、网页设计、交互界面设计等几乎所有设计方向，深受广大艺术设计人员和计算机美术爱好者的喜爱。
本书内容编写特点
1．零起点、入门快
本书以初学者为主要读者对象，对基础知识进行细致入微的介绍，并辅以图示效果，结合中小实例，对常用工具、命令、参数等做了详细的介绍，同时给出了技巧提示，确保读者零起点，轻松、快速入门。
2．内容详细、全面
本书内容涵盖了UI设计中为实用的Photoshop工具、命令等常用的相关功能，可以说是初学者的百科全书、有基础者的参考手册。
3．实例精美、实用
本书的实例均经过精心挑选，确保实用、精美，一方面培养读者朋友的美感，另一方面让读者在学习中享受美的世界。
4．编写思路符合学习规律
本书的理论讲解采用了“功能介绍 选项解读 高手小贴士 案例实战”的模式，符合轻松易学的学习规律。“综合实战”类案例则采用了“项目分析 布局规划 色彩搭配 实践操作”的模式，深入剖析UI设计的整个流程。
本书显著特色
1．同步视频讲解，让学习更轻松高效
70节大型高清同步自学视频，涵盖全书几乎所有实例，让学习更轻松、更高效。
2．资深作者编著，质量更有保障
作者是经验丰富的专业设计师和资深讲师，确保图书实用和好学。
3．大量中小实例，通过多动手加深理解
大中型实例达70个，讲解极为详细，目的是能让读者深入理解、灵活应用。
4．多种商业案例，让实战成为终极目的
书后给出不同类型的实用UI商业案例，以便读者积累实战经验，为工作、就业搭桥。
5．超值学习套餐，让学习更方便、快捷
6大不同类型的笔刷、图案、样式等库文件；21类经常用到的设计素材，总计1106个；《色彩设计搭配手册》和常用颜色色谱表。
本书资源包
本书资源包内容包括：
（1）书中实例的教学视频、源文件、素材文件，读者可扫描书中二维码观看视频，调用资源包中的素材，按照书中步骤进行操作。
（2）104集Photoshop新手学视频精讲课堂，囊括Photoshop基础操作知识。
（3）《色彩设计搭配手册》和常用颜色色谱表，使平面设计色彩搭配不再烦恼。
本书服务
1．Photoshop软件获取方式
本书未提供Photoshop软件，读者可通过以下方式获取：
（1）在网上购买正版软件或登录http://www.adobe.com/cn/下载试用版。
（2）到当地电脑城咨询，一般软件专卖店有售。
2．技术问题信息发布
读者朋友遇到有关本书的技术问题，可以扫描封底“文泉云盘”二维码查看是否已发布相关勘误/解疑文档，如果没有，可在下方寻找作者联系方式，还可点击“读者反馈”留下问题，我们会及时回复。
关于作者
本书由亿瑞设计工作室组织编写，瞿颖健和曹茂鹏参与了本书的主要编写工作。另外，由于本书工作量巨大，以下人员也参与了本书的编写及资料整理工作，他们是：瞿玉珍、张吉太、唐玉明、朱于凤、瞿学严、杨力、曹元钢、张玉华等，在此一并表示感谢。
编 者

本书主要介绍了使用Photoshop 进行UI 设计的快速入门与提高的方法和技巧，其内容包括 UI 设计基础知识、UI 色彩与布局、UI 图形处理基础、选区基础、UI 图形设计、不透明度与混合模式、画笔与绘图、UI 文字设计、图层样式、图像修饰、调色、使用滤镜制作特殊效果、抠图与合成、UI 动态效果设计等。*后两章通过具体的案例，介绍 Photoshop 在 APP 图标设计、APP 界面设计等方面的应用，带领读者为以后的实际工作提前“练兵”。 本书适用于 Photoshop 初学者，同时可作为 UI 设计相关人员自学 Photoshop 的参考书，也可作为计算机培训学校的教学用书。

曹茂鹏，亿瑞设计艺术总监，设计学硕士（三维设计方向），高校艺术设计专业教师。
多年来深耕于艺术设计、教育培训、项目开发等行业，出版图书多本，如中国高等教育“十二五”规划教材、高等院校艺术类专业教材、Adobe认证考试教材、社会培训示范教材等，多本图书长期位居“全国计算机零售图书排行榜”分类排行前列。

第1章 关于UI设计你需要了解的一些知识 1

1.1 什么是APP UI .2

1.2 关于UI 设计师 2

1.2.1 用户研究/测试工程师 .2

1.2.2 图形设计师  2

1.2.3 交互设计师  3

高手小贴士：UI设计师的自我修养  3

1.3 UI 与UE .3

1.4 UI 的分类 .4

1.4.1 手机UI设计  4

1.4.2 网页UI设计  5

1.4.3 软件UI 设计 . 5

1.5 PC 客户端和移动客户端 .5

1.6 手机APP 界面组成 .6

1.6.1 状态栏  6

1.6.2 导航栏  6

1.6.3 标签栏  7

1.6.4 搜索栏  7

1.6.5 工具栏  7

1.6.6 表格视图  7

1.6.7 活动视图  7

1.6.8 动作  7

1.6.9 警告提醒  8

1.6.10 编辑菜单  8

1.6.11 浮动框  8

1.7 iOS 系统和安卓系统 .8

1.7.1 iOS系统  9

1.7.2 安卓系统  9

1.8 UI 设计师常用的工具 .10

1.9 APP UI 设计流程 . 11

第2章 UI色彩与布局. 13

2.1 UI 与色彩 .14

2.1.1 色相、明度、纯度  14

2.1.2 UI设计的色彩搭配  15

2.1.3 邻近色、对比色  17

2.2 UI 信息布局方式 .18

2.3 流行的UI 设计风格 .22

2.3.1 拟物化  22

2.3.2 扁平化  23

2.3.3 微质感  23

2.3.4 渐变色  24

2.3.5 叠加水波纹  24

2.3.6 幽灵按钮  24

2.3.7 抽屉式菜单  25

2.3.8 模糊背景图片  25

2.3.9 无边框界面  26

2.3.10 彩色图标  26

第3章 UI图形处理基础. 27

3.1 认识Photoshop .28

选项解读：Photoshop界面构成详解 .28

高手小贴士：如何让窗口变为默认状态  29

3.2 文件的基本操作.29

3.2.1 新建文件  29

选项解读：“新建文档”对话框设置选项  30

3.2.2 打开图像文件  30

高手小贴士：Photoshop常用的格式 .31

高手小贴士：找不到想要打开的文件怎么办？  31

3.2.3 置入对象  32

3.2.4 储存文件  33

高手小贴士：存储格式的选择  34

3.2.5 使用“导出为”命令  34

选项解读：“导出为”对话框详解  34

3.2.6 关闭文件  35

3.3 便捷的图像查看工具.35

3.3.1 缩放工具  35

选项解读：“缩放工具”选项栏  36

3.3.2 抓手工具  36

高手小贴士：快速切换到“抓手工具”  37

3.4 错误操作的处理.37

3.4.1 撤销与还原  37

高手小贴士：增加可返回的步骤数目  37

3.4.2 使用“历史记录”面板还原操作  37

3.5 使用图层模式进行编辑.38

选项解读：“图层”面板选项详解  38

3.5.1 选择图层  39

3.5.2 新建图层  39

高手小贴士：在选中图层下方新建图层  39

3.5.3 删除图层  39

3.5.4 复制图层  40

3.5.5 调整图层的堆叠顺序  40

3.5.6 图层的合并  40

3.5.7 栅格化图层  41

3.6 图层的移动、对齐与分布.41

3.6.1 移动图层  41

高手小贴士：移动并复制的方法  42

高手小贴士：移动选区中像素的方法  42

3.6.2 对齐图层  42

高手小贴士：对齐图层的方法  43

3.6.3 分布图层  43

高手小贴士：分布图层的方法  44

案例实战—使用对齐与分布调整网页UI版式  44

3.7 图像处理的基础操作.45

3.7.1 调整图像尺寸  45

3.7.2 修改画布大小  46

选项解读：“画布大小”对话框详解  46

3.7.3 裁剪工具  46

选项解读：“裁剪工具”选项栏  47

3.7.4 旋转画布  47

3.7.5 变换图像  48

案例实战—使用自由变换制作界面展示效果  50

3.7.6 内容识别缩放  52

选项解读：“内容识别缩放”选项栏  52

3.8 辅助工具.52

3.8.1 标尺与辅助线  53

3.8.2 网格 . 54

3.9 打印设置.54

3.9.1 设置打印选项  54

3.9.2 使用“打印一份”  54

第4章 选区基础. 55

4.1 认识选区.56

4.2 轻松制作简单选区.57

选项解读：选框工具组的工具选项栏  57

4.2.1 矩形选框工具  58

高手小贴士：取消选区的选择  58

4.2.2 椭圆选框工具  59

4.2.3 单行/单列选框工具 .59

4.2.4 套索工具  59

4.2.5 多边形套索工具  60

高手小贴士：“多边形套索工具”的使用技巧  60

案例实战—利用多边形套索工具选择图片  60

4.3 选区的基本操作.62

4.3.1 移动选区位置  62

4.3.2 移动选区中的内容  63

4.3.3 删除选区中的内容  63

高手小贴士：删除背景图层选区中的像素会出现的情况  64

4.3.4 复制/粘贴/剪切选区中的内容 64

高手小贴士：剪切背景图层选区中的像素会出现的情况  64

4.3.5 快速得到反向选区  65

4.3.6 取消选区  65

4.3.7 重新选择  65

4.3.8 全选  65

4.3.9 隐藏选区、显示选区  66

4.3.10 载入当前图层的选区  66

案例实战—使用选区工具制作简单界面  66

4.4 编辑选区的形态.69

4.4.1 变换选区形态  69

高手小贴士：缩放选区的技巧  69

4.4.2 创建边界选区  69

4.4.3 平滑选区  70

4.4.4 扩展选区  70

4.4.5 收缩选区  71

4.4.6 羽化选区  71

高手小贴士：羽化半径数值过大弹出的对话框  71

第5章 UI图形设计 72

5.1 颜色的设置.73

5.1.1 设置前景色与背景色  73

5.1.2 使用“吸管工具”选取颜色  73

高手小贴士：“吸管工具”使用技巧  74

5.1.3 使用“颜色”面板  74

5.1.4 认识“色板”面板  74

5.2 填色与描边.75

5.2.1 快速填充前景色/背景色 .75

5.2.2 油漆桶工具  75

5.2.3 填充渐变  77

5.2.4 使用填充命令  79

选项解读：“填充”对话框详解  79

5.2.5 描边选区  79

选项解读：“描边”对话框详解  80

案例实战—制作活泼的圆形标志  80

案例实战—使用填充与描边功能制作优惠券  81

案例实战—图文结合的多彩标志设计  84

思维点拨  84

5.3 绘制常见矢量几何图形.85

5.3.1 了解绘图模式  86

5.3.2 设置填充  86

5.3.3 设置描边  87

5.3.4 使用形状工具绘制基本图形  89

选项解读：“矩形工具”选项栏  89

高手小贴士：在“创建圆角矩形”对话框中设置圆角矩形

的参数  90

选项解读：“多边形工具”选项栏参数详解  91

选项解读：“直线工具”参数详解  92

案例实战—使用椭圆工具制作简约计时器  92

5.3.5 创建自定形状  95

5.3.6 设置“路径操作”制作复杂路径  95

案例实战—使用形状工具制作水晶花朵  96

案例实战—使用自定形状工具制作心形按钮  98

5.4 高级绘图工具—钢笔.100

5.4.1 使用“钢笔工具”绘制路径  101

高手小贴士：使用“钢笔工具”的小技巧  101

5.4.2 使用“钢笔工具”绘制带有填色的图形  103

5.4.3 使用“钢笔工具”绘制彩色边框  104

案例实战—使用钢笔绘制复杂的人像选区  104

案例实战—使用钢笔工具制作质感按钮 . 107

案例实战—使用钢笔工具制作应用界面  110

高手小贴士：使用“钢笔工具”绘制形状的小技巧  111

5.4.4 使用“自由钢笔工具”  115

案例实战—使用磁性钢笔工具提取人像  115

5.4.5 使用“弯度钢笔工具”  116

5.4.6 编辑路径形状  117

高手小贴士：删除路径  117

高手小贴士：“路径选择工具”和“直接选择工具”

相互切换  118

高手小贴士：在“钢笔工具”的状态下添加或删除锚点  118

高手小贴士：路径的自由变换  119

案例实战—购物APP商品信息页面 . 119

案例实战—使用矢量工具制作水晶质感梨  123

5.5 填充与描边路径.126

5.5.1 填充路径  126

5.5.2 使用不同工具对路径描边  127

高手小贴士：“模拟压力”选项的用处  128

5.6 综合实战—手机音乐播放器UI 设计 128

5.6.1 项目分析  128

5.6.2 布局规划  129

5.6.3 色彩搭配  129

5.6.4 实践操作  129

第6章 不透明度与混合模式. 133

6.1 调整图层的不透明度和填充.134

6.2 认识图层“混合模式”.134

高手小贴士：混合模式的应用范围  135

案例实战—使用混合模式制作梦幻色调 139

6.3 综合实战—冷色调音乐APP 播放页面 .140

6.3.1 项目分析  140

6.3.2 布局规划  141

6.3.3 色彩搭配  141

6.3.4 实践操作