Photoshop+Illustrator+After Effects UI动效设计3合1

PS、AI、AE软件进行UI动效制作的教程； 案例涉及网页端、手机端、Watch端等热门经典案例； 学习UI动效设计，这一本就够了，先用Illustrator制作UI中的矢量图形元素，再使用Photoshop规划界面布局和界面的制作，最后使用After Effects制作UI动效，详细介绍了动效UI制作的完整流程与技巧。

本书是一本运用Photoshop、Illustrator和AfterEffects进行UI动效制作的教程。全书共8章，分为基础部分和案例部分。基础部分讲解了UI动效设计的常用工具、色彩知识及常见组件，Photoshop的功能、基本操作及利用该软件制作UI界面和元素的方法，Illustrator的功能、基本操作及利用该软件绘制矢量图标的方法，AfterEffects的功能、基本操作及利用该软件将静态的UI界面制作为动态效果的方法，网页界面、手机界面和智能手表界面的UI设计规范；案例部分以网页端、手机端及智能手表UI为例，介绍了网页界面UI动效、手机界面UI动效及智能手表界面UI动效的设计与制作流程。
本书提供配套资源文件，包含本书实战、练习和习题的素材文件、效果文件和操作演示视频，供读者在学习的过程中随时调用。同时提供教师专享资源，包含配套PPT教学课件及教学大纲，供教师使用。
本书适合想要从事和已经从事UI设计行业相关工作的读者阅读，也适合UI设计、动效设计初学者学习，同时也适合UI培训机构、相关专业学生使用。

孙丽娜，毕业于北京印刷学院设计艺术学专业，艺术学硕士，目前主要从事数字媒体艺术领域的研究和教学。现任北京邮电大学世纪学院艺术与传媒学院数字媒体艺术专业专职教师。其主要教授课程《网页设计技术》《网页交互动画》《网络项目设计实践》等。曾编著图书《网页设计技术》，且参写、参编著作、教材多部。曾获选北京高校“优质本科课程”和“优质本科教材课件”优质本科课件。

第1章初识UI动效设计
1．1什么是UI动效设计011
1．1．1先说UI011
1．1．2再说“动效”011
1．1．3UI动效的应用领域012
1．1．4UI动效喜迎5G时代013
1．2UI设计师常用的软件013
1．2．1Photoshop013
1．2．2Illustrator014
1．2．3After Effects014
1．2．4其他014
1．3UI色彩设计015
1．3．1认识色彩015
1．3．2色彩基本知识015
1．3．3配色方式016
1．4UI常见组件017
1．4．1图标017
1．4．2按钮017
1．4．3导航018
1．4．4栏018
第2章UI入门之Photoshop
2．1软件的基本操作020
2．1．1新建文件020
2．1．2打开文件020
2．1．3置入文件020
2．1．4辅助工具021
【练习2-1】使用标尺021
【练习2-2】使用参考线022
2．1．5图像变换与变形022
【练习2-3】旋转与缩放023
【练习2-4】倾斜与扭曲024
2．2Photoshop工具组024
2．2．1选区工具组024
【练习2-5】使用矩形选框工具创建矩形选区025
【练习2-6】使用单列选框工具创建选区026
2．2．2形状工具组026
【练习2-7】使用多边形工具绘制星形图标027
2．2．3绘图工具组029
【练习2-8】使用画笔工具绘制玩偶图标029
【练习2-9】使用渐变工具绘制按钮030
【练习2-10】用油漆桶工具为图标填色031
2．2．4文字工具组032
2．3色调调整与滤镜032
2．3．1色调调整032
2．3．2滤镜033
2．4蒙版034
2．4．1矢量蒙版034
【练习2-11】创建矢量蒙版034
2．4．2剪贴蒙版035
【练习2-12】创建剪贴蒙版035
2．4．3图层蒙版036
【练习2-13】创建图层蒙版036
2．5图层混合模式与图层样式037
2．5．1图层透明效果037
2．5．2图层混合模式037
2．5．3图层样式038
2．6实战：绘制太阳天气图标040
2．7习题：制作手机App登录界面043
2．8习题：制作小程序游戏开始菜单界面044
第3章UI入门之Illustrator
3．1文档的基本操作046
3．1．1新建文档046
3．1．2打开文档046
3．1．3置入文档046
3．2基本绘图工具047
3．2．1简单绘图工具047
延伸讲解：直线段的调整047
【练习3-1】绘制无线网络图标048
3．2．2几何绘图工具048
【练习3-2】绘制保险箱图标048
【练习3-3】绘制分类图标049
【练习3-4】绘制笑脸表情050
3．2．3徒手绘图工具052
【练习3-5】绘制点赞图标052
3．2．4钢笔工具绘图053
【练习3-6】绘制气象图标054
3．3填色与文字055
3．3．1单色填充055
3．3．2渐变填充056
3．3．3渐变网格056
【练习3-7】绘制渐变爱心图标056
3．3．4文字工具057
【练习3-8】完善保护伞图标057
3．4编辑图形对象058
3．4．1路径编辑058
3．4．2变换对象059
【练习3-9】绘制电量图标061
3．5不透明度和混合模式062
3．5．1“透明度”面板062
3．5．2混合模式063
3．6实战：制作登录界面063
3．7习题：绘制火龙果图标066
3．8习题：制作购物车界面067
第4章UI动效之AfterEffects
4．1AfterEffects的基本操作069
4．1．1新建项目069
4．1．2新建合成069
4．1．3导入素材069
4．2图层的基本操作070
4．2．1新建图层070
4．2．2编辑图层070
4．2．3图层叠加模式071
延伸讲解：添加图层样式071
【练习4-1】制作弹窗界面071
4．2．4常用图层类型072
4．3层基础动画属性073
4．3．1层列表073
4．3．2锚点074
【练习4-2】改变图标锚点位置075
4．3．3位置075
【练习4-3】制作移动动画075
4．3．4缩放076
4．3．5旋转077
【练习4-4】制作图标旋转动画077
4．3．6不透明度078
【练习4-5】制作启动界面淡入动画078
4．4蒙版与遮罩079
4．4．1创建蒙版的工具079
延伸讲解：形状与蒙版的切换080
4．4．2蒙版属性的修改080
【练习4-6】制作文字扫光效果081
4．5关键帧和表达式082
4．5．1添加关键帧082
4．5．2查看关键帧083
延伸讲解：调整时间导航器和工作区083
4．5．3编辑关键帧083
【练习4-7】制作图标大小变化的动画084
4．5．4关键帧辅助085
延伸讲解：对素材进行变速操作086
4．5．5图表编辑器086
【练习4-8】制作图标缓动效果086
4．5．6基本表达式087
延伸讲解：设置关联图层088
【练习4-9】齿轮转动效果088
4．6实战：制作表情按钮动效089
4．7习题：制作加载动效093
4．8习题：弹出按钮动画094
第5章UI的设计规范
5．1网页界面设计096
5．1．1了解网页界面096
5．1．2网页界面的设计原则096
5．1．3网页界面的构成元素098
5．2iOS手机界面设计099
5．2．1iOS操作系统概述099
5．2．2iOS手机界面主要设计元素099
5．2．3iOS手机界面设计规范101
5．3Android手机界面设计103
5．3．1Android操作系统概述103
5．3．2Android手机界面设计元素103
5．3．3Android设计特色104
5．4智能手表界面设计106
5．4．1iOS智能手表设计特点106
5．4．2Android智能手表设计特点108
第6章网页端的UI动效设计
6．1网页切换动效110
6．1．1设计分析110
6．1．2实战：Illustrator绘制指针和按钮111
6．1．3实战：Photoshop设计网页切换界面112
延伸讲解：栅格化图层113
6．1．4实战：AfterEffects制作网页切换动效114
6．2网页滑动效果126
6．2．1设计分析126
6．2．2实战：Illustrator绘制几何图形元素126
延伸讲解：调整圆角矩形半径并指定大小128
6．2．3实战：Photoshop设计网页滑动界面129
6．2．4实战：AfterEffects制作网页滑动效果132
6．3网络错误动效139
6．3．1设计分析139
6．3．2实战：Illustrator绘制场景元素140
6．3．3实战：Photoshop设计网络错误界面142
6．3．4实战：AfterEffects制作网络错误动效145
6．4习题：网页404动效151
第7章手机端的UI动效设计
7．1App登录动效153
7．1．1设计分析153
7．1．2实战：Illustrator绘制App图标154
延伸讲解：调整锚点154
7．1．3实战：Photoshop设计App登录界面155
7．1．4实战：AfterEffects制作App登录动效159
7．2主菜单上滑动效167
7．2．1设计分析167
7．2．2实战：Illustrator绘制主菜单图标168
延伸讲解：使用“添加锚点工具”制作断点169
7．2．3实战：Photoshop设计主菜单界面172
延伸讲解：将内容转换为光栅图像173
7．2．4实战：AfterEffects制作主菜单上滑动效175
延伸讲解：调整时间刻度的显示176
延伸讲解：蒙版的运用177
7．3来电弹窗动效181
7．3．1设计分析181
7．3．2实战：Illustrator绘制来电图标182
7．3．3实战：Photoshop设计来电弹窗184
7．3．4实战：AfterEffects制作来电弹窗动效186
7．4习题：优惠券动效194
第8章智能手表的UI动效设计
8．1iOS智能手表动效196
8．1．1设计分析196
8．1．2实战：Illustrator绘制iOS智能手表图标197
8．1．3实战：Photoshop设计iOS智能手表界面198
8．1．4实战：AfterEffects制作iOS智能手表动效201
8．2Android智能手表动效208
8．2．1设计分析208
8．2．2实战：Illustrator绘制Android智能手表图标209
8．2．3实战：Photoshop设计Android智能手表界面211
8．2．4实战：AfterEffects制作Android智能手表动效213
8．3习题：计时动效216
附录APhotoshop2020常用快捷键217
附录Bllustrator2020常用快捷键220
附录CAfter Effects2020常用快捷键222