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

扉页

版权页

目录

内容提要

前言

资源与支持

第1章 初识UI动效设计

1.1 什么是UI动效设计

1.1.1 先说UI

1.1.2 再说“动效”

1.1.3 UI动效的应用领域

1.1.4 UI动效喜迎5G时代

1.2 UI设计师常用的软件

1.2.1 Photoshop

1.2.2 Illustrator

1.2.3 After Effects

1.2.4 其他

1.3 UI色彩设计

1.3.1 认识色彩

1.3.2 色彩基本知识

1.3.3 配色方式

1.4 UI常见组件

1.4.1 图标

1.4.2 按钮

1.4.3 导航

1.4.4 栏

第2章 UI入门之Photoshop

2.1 软件的基本操作

2.1.1 新建文件

2.1.2 打开文件

2.1.3 置入文件

2.1.4 辅助工具

【练习2-1】使用标尺

【练习2-2】使用参考线

2.1.5 图像变换与变形

【练习2-3】旋转与缩放

【练习2-4】倾斜与扭曲

2.2 Photoshop工具组

2.2.1 选区工具组

【练习2-5】使用矩形选框工具创建矩形选区

【练习2-6】使用单列选框工具创建选区

2.2.2 形状工具组

【练习2-7】使用多边形工具绘制星形图标

2.2.3 绘图工具组

【练习2-8】使用画笔工具绘制玩偶图标

【练习2-9】使用渐变工具绘制按钮

【练习2-10】用油漆桶工具为图标填色

2.2.4 文字工具组

2.3 色调调整与滤镜

2.3.1 色调调整

2.3.2 滤镜

2.4 蒙版

2.4.1 矢量蒙版

【练习2-11】创建矢量蒙版

2.4.2 剪贴蒙版

【练习2-12】创建剪贴蒙版

2.4.3 图层蒙版

【练习2-13】创建图层蒙版

2.5 图层混合模式与图层样式

2.5.1 图层透明效果

2.5.2 图层混合模式

2.5.3 图层样式

2.6 实战：绘制太阳天气图标

2.7 习题：制作手机App登录界面

2.8 习题：制作小程序游戏开始菜单界面

第3章 UI入门之Illustrator

3.1 文档的基本操作

3.1.1 新建文档

3.1.2 打开文档

3.1.3 置入文档

3.2 基本绘图工具

3.2.1 简单绘图工具

延伸讲解：直线段的调整

【练习3-1】绘制无线网络图标

3.2.2 几何绘图工具

【练习3-2】绘制保险箱图标

【练习3-3】绘制分类图标

【练习3-4】绘制笑脸表情

3.2.3 徒手绘图工具

【练习3-5】绘制点赞图标

3.2.4 钢笔工具绘图

【练习3-6】绘制气象图标

3.3 填色与文字

3.3.1 单色填充

3.3.2 渐变填充

3.3.3 渐变网格

【练习3-7】绘制渐变爱心图标

3.3.4 文字工具

【练习3-8】完善保护伞图标

3.4 编辑图形对象

3.4.1 路径编辑

3.4.2 变换对象

【练习3-9】绘制电量图标

3.5 不透明度和混合模式

3.5.1 “透明度”面板

3.5.2 混合模式

3.6 实战：制作登录界面

3.7 习题：绘制火龙果图标

3.8 习题：制作购物车界面

第4章 UI动效之After Effects

4.1 After Effects的基本操作

4.1.1 新建项目

4.1.2 新建合成

4.1.3 导入素材

4.2 图层的基本操作

4.2.1 新建图层

4.2.2 编辑图层

4.2.3 图层叠加模式

延伸讲解：添加图层样式

【练习4-1】制作弹窗界面

4.2.4 常用图层类型

4.3 层基础动画属性

4.3.1 层列表

4.3.2 锚点

【练习4-2】改变图标锚点位置

4.3.3 位置

【练习4-3】制作移动动画

4.3.4 缩放

4.3.5 旋转

【练习4-4】制作图标旋转动画

4.3.6 不透明度

【练习4-5】制作启动界面淡入动画

4.4 蒙版与遮罩

4.4.1 创建蒙版的工具

延伸讲解：形状与蒙版的切换

4.4.2 蒙版属性的修改

【练习4-6】制作文字扫光效果

4.5 关键帧和表达式

4.5.1 添加关键帧

4.5.2 查看关键帧

延伸讲解：调整时间导航器和工作区

4.5.3 编辑关键帧

【练习4-7】制作图标大小变化的动画

4.5.4 关键帧辅助

延伸讲解：对素材进行变速操作

4.5.5 图表编辑器

【练习4-8】制作图标缓动效果

4.5.6 基本表达式

延伸讲解：设置关联图层

【练习4-9】齿轮转动效果

4.6 实战：制作表情按钮动效

4.7 习题：制作加载动效

4.8 习题：弹出按钮动画

第5章 UI的设计规范

5.1 网页界面设计

5.1.1 了解网页界面

5.1.2 网页界面的设计原则

5.1.3 网页界面的构成元素

5.2 iOS手机界面设计

5.2.1 iOS操作系统概述

5.2.2 iOS手机界面主要设计元素

5.2.3 iOS手机界面设计规范

5.3 Android手机界面设计

5.3.1 Android操作系统概述

5.3.2 Android手机界面设计元素

5.3.3 Android设计特色

5.4 智能手表界面设计

5.4.1 iOS智能手表设计特点

5.4.2 Android智能手表设计特点

第6章 网页端的UI动效设计

6.1 网页切换动效

6.1.1 设计分析

6.1.2 实战：Illustrator绘制指针和按钮

6.1.3 实战：Photoshop设计网页切换界面

延伸讲解：栅格化图层

6.1.4 实战：After Effects制作网页切换动效

6.2 网页滑动效果

6.2.1 设计分析

6.2.2 实战：Illustrator绘制几何图形元素

延伸讲解：调整圆角矩形半径并指定大小

6.2.3 实战：Photoshop设计网页滑动界面

6.2.4 实战：After Effects制作网页滑动效果

6.3 网络错误动效

6.3.1 设计分析

6.3.2 实战：Illustrator绘制场景元素

6.3.3 实战：Photoshop设计网络错误界面

6.3.4 实战：After Effects制作网络错误动效

6.4 习题：网页404动效

第7章 手机端的UI动效设计

7.1 App登录动效

7.1.1 设计分析

7.1.2 实战：Illustrator绘制App图标

延伸讲解：调整锚点

7.1.3 实战：Photoshop设计App登录界面

7.1.4 实战：After Effects制作App登录动效

7.2 主菜单上滑动效

7.2.1 设计分析

7.2.2 实战：Illustrator绘制主菜单图标

延伸讲解：使用“添加锚点工具”制作断点

7.2.3 实战：Photoshop设计主菜单界面

延伸讲解：将内容转换为光栅图像

7.2.4 实战：After Effects制作主菜单上滑动效

延伸讲解：调整时间刻度的显示

延伸讲解：蒙版的运用

7.3 来电弹窗动效

7.3.1 设计分析

7.3.2 实战：Illustrator绘制来电图标

7.3.3 实战：Photoshop设计来电弹窗

7.3.4 实战：After Effects制作来电弹窗动效

7.4 习题：优惠券动效

第8章 智能手表的UI动效设计

8.1 iOS智能手表动效

8.1.1 设计分析

8.1.2 实战：Illustrator绘制iOS智能手表图标

8.1.3 实战：Photoshop设计iOS智能手表界面

8.1.4 实战：After Effects制作iOS智能手表动效

8.2 Android智能手表动效

8.2.1 设计分析

8.2.2 实战： Illustrator绘制Android智能手表图标

8.2.3 实战：Photoshop设计Android智能手表界面

8.2.4 实战：After Effects制作Android智能手表动效

8.3 习题：计时动效

附录A Photoshop 2020常用快捷键

附录B Illustrator 2020常用快捷键

附录C After Effects 2020常用快捷键