04 拟物化风格图标设计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
pc web phone ……
18/33
演示案例：拟物化风格抽屉邮件图标设计
从实际出发。 根据这个设计的需求找到相关素材主题“抽
屉”、“邮件”
19/33
演示案例：拟物化风格抽屉邮件图标设计
从现有图形系统出发
20/33
演示案例：拟物化风格抽屉邮件图标设计
从竞品出发开始
请教员根据班级情况布置预习
24/33
启动图标的设计原则
严格遵守平台下的规范进行设计
25/33
• iOS系统启动图标尺寸的设计规范
启动图标的设计原则
严格遵守平台下的规范进行设计 注意
App启动图标在设计时要考虑后期是否要印刷，设计时的像素大小直接影响后期 印刷效果
为了防止图片过大引起的卡机、死机现象，或后期修改带来的被动因素，设计时 请尽量使用矢量软件或PS里的矢量工具来设计
9/33
拟物化设计的概念
拟物化设计的核心：提取物体的关键元素
：它们的关键元素是？
10/33
拟物化设计的概念
拟物化设计的核心：提取物体的关键元素
：它们的关键元素是？
11/33
演示案例
1来自百度文库/33
演示案例： 拟物化风格日历启动图标设计
需求描述
完成拟物化风格日历启动图标设计
实现思路 使用形状工具和钢笔工具 绘制整体的结构和布局 给图标上色，将各部分大 致的颜色分出来 为图层增加图层样式，通 过颜色渐变、内发光、外 发光等增加图形的质感和 细节
光等增加图形的质感和细节
课堂练习
30/33
课堂练习： 拟物化风格圆角直尺图标设计
需求描述
完成拟物化风格圆角直尺图标设计
实现思路
使用形状工具和钢笔工具绘制整体的结构和布局 给图标上色，将各大部分大致的颜色分出来 为图层增加图层样式，通过颜色渐变、内发光、外发
光等增加图形的质感和细节
本章总结
什么是拟物化风格设计？ 拟物化启动图标设计的流程是什么？ 启动图标的设计原则是什么？ 拟物化和扁平化设计，哪一个更好？
31/33
本章作业
32/33
本章作业
完成本节课所有的演示案例、课堂练习 临摹下列拟物化风格图标
拟物化风格金属保险箱图标设计 拟物化风格湿度计图标设计
体的光感
课堂练习
23/33
课堂练习： 拟物化风格复古磁带图标设计
需求描述
完成拟物化风格复古磁带图标设计
实现思路
使用形状工具和钢笔工具绘制整体的结构和布局 给图标上色，将各大部分大致的颜色分出来 为图层增加图层样式，通过颜色渐变、内发光、外发
光等增加图形的质感和细节
目录
拟物化设计的概念 拟物化启动图标设计的流程 启动图标的设计原则
14/33
拟物化启动图标设计的流程
拟物化启动图标
15/33
拟物化启动图标设计的流程
从实际出发
16/33
• 台球App图标
拟物化启动图标设计的流程
从现有图形系统出发
被人们熟知 被人们认同 避免引起歧义
17/33
• 设置图标
拟物化启动图标设计的流程
从竞品出发开始
相同类型 竞争对手 不同平台
层样式 绘制光晕镜头 各个圆形之间的完美对齐
课堂练习
29/33
课堂练习： 拟物化风格可爱照相机图标设计
需求描述
完成拟物化风格可爱照相机图标设计
实现思路
使用形状工具和钢笔工具绘制整体的结构和布局 给图标上色，将各部分大致的颜色分出来 为图层增加图层样式，通过颜色渐变、内发光、外发
4/33
拟物化设计的概念
拟物化设计的概念
“拟物化” 一词来源于古希腊，意思是只要看到它的外在形态，就能知道它是用 来做什么的
“拟物化”设计是一种以保留原始被模仿对象的各种装饰元素为基础、并由此衍 生出来的设计风格
5/33
拟物化设计的概念
拟物化设计的概念
哪一幅运用了拟物化风格?
6/33
课堂练习
13/33
课堂练习： 拟物化风格旋钮设计
需求描述
完成拟物化风格旋钮设计
实现思路
使用形状工具和钢笔工具绘制整体的结构和布局 给图标上色，将各部分大致的颜色分出来 为图层增加图层样式，通过颜色渐变、内发光、外发
光等增加图形的质感和细节
目录
拟物化设计的概念 拟物化启动图标设计的流程 启动图标的设计原则
21/33
演示案例
22/33
演示案例： 拟物化风格抽屉邮件图标设计
需求描述
完成拟物化风格抽屉邮件图标设计
实现思路
使用钢笔工具和图形工具绘制图标的整体结构 双击图层缩略图，更改形状图层的颜色 为图层增加图层样式，通过添加颜色渐变、内发光、外发光等
为图标增加更多的质感和细节 将图标作为一张图片进行修整，在最上面增加一个图层调整整
拟物化设计的概念
哪一幅运用了拟物化风格?
7/33
拟物化设计的概念
拟物化设计的优点
外观完全与现实事物相似，用户认知和学习成本低 交互与现实事物保持一致 动态效果高度统一，给用户以人性化的体贴
8/33
拟物化设计的概念
拟物化设计的缺点
花费大量的时间在视觉的阴影和质感效果上 要求设计师有更深厚的设计功底和更熟练的软件使用 在适配方面比较复杂和麻烦
拟物化风格图标设计
课程回顾
扁平化风格概述 扁平化风格设计原则 扁平化风格的特点 扁平化风格的分类
2/33
本章任务
了解拟物化设计的概念 熟知拟物化启动图标设计的流程 了解启动图标的设计原则 能够使用Photoshop进行拟物化图
标的设计
3/33
目录
拟物化设计的概念 拟物化启动图标设计的流程 启动图标的设计原则
26/33
启动图标的设计原则
严格遵守平台下的规范进行设计 考虑在各个平台实际应用中的情景 必须符合国家相关规定 考虑受众群体的审美需求
27/33
演示案例
28/33
演示案例：拟物化风格相机图标设计
需求描述
完成拟物化风格相机图标设计
实现思路
仔细观察现实中的相机的模样，抓取它的关键元素 对相机图标进行拆分 使用圆形工具绘制几个同心圆，然后分别为其增加图
18/33
演示案例：拟物化风格抽屉邮件图标设计
从实际出发。 根据这个设计的需求找到相关素材主题“抽
屉”、“邮件”
19/33
演示案例：拟物化风格抽屉邮件图标设计
从现有图形系统出发
20/33
演示案例：拟物化风格抽屉邮件图标设计
从竞品出发开始
请教员根据班级情况布置预习
24/33
启动图标的设计原则
严格遵守平台下的规范进行设计
25/33
• iOS系统启动图标尺寸的设计规范
启动图标的设计原则
严格遵守平台下的规范进行设计 注意
App启动图标在设计时要考虑后期是否要印刷，设计时的像素大小直接影响后期 印刷效果
为了防止图片过大引起的卡机、死机现象，或后期修改带来的被动因素，设计时 请尽量使用矢量软件或PS里的矢量工具来设计
9/33
拟物化设计的概念
拟物化设计的核心：提取物体的关键元素
：它们的关键元素是？
10/33
拟物化设计的概念
拟物化设计的核心：提取物体的关键元素
：它们的关键元素是？
11/33
演示案例
1来自百度文库/33
演示案例： 拟物化风格日历启动图标设计
需求描述
完成拟物化风格日历启动图标设计
实现思路 使用形状工具和钢笔工具 绘制整体的结构和布局 给图标上色，将各部分大 致的颜色分出来 为图层增加图层样式，通 过颜色渐变、内发光、外 发光等增加图形的质感和 细节
光等增加图形的质感和细节
课堂练习
30/33
课堂练习： 拟物化风格圆角直尺图标设计
需求描述
完成拟物化风格圆角直尺图标设计
实现思路
使用形状工具和钢笔工具绘制整体的结构和布局 给图标上色，将各大部分大致的颜色分出来 为图层增加图层样式，通过颜色渐变、内发光、外发
光等增加图形的质感和细节
本章总结
什么是拟物化风格设计？ 拟物化启动图标设计的流程是什么？ 启动图标的设计原则是什么？ 拟物化和扁平化设计，哪一个更好？
31/33
本章作业
32/33
本章作业
完成本节课所有的演示案例、课堂练习 临摹下列拟物化风格图标
拟物化风格金属保险箱图标设计 拟物化风格湿度计图标设计
体的光感
课堂练习
23/33
课堂练习： 拟物化风格复古磁带图标设计
需求描述
完成拟物化风格复古磁带图标设计
实现思路
使用形状工具和钢笔工具绘制整体的结构和布局 给图标上色，将各大部分大致的颜色分出来 为图层增加图层样式，通过颜色渐变、内发光、外发
光等增加图形的质感和细节
目录
拟物化设计的概念 拟物化启动图标设计的流程 启动图标的设计原则
14/33
拟物化启动图标设计的流程
拟物化启动图标
15/33
拟物化启动图标设计的流程
从实际出发
16/33
• 台球App图标
拟物化启动图标设计的流程
从现有图形系统出发
被人们熟知 被人们认同 避免引起歧义
17/33
• 设置图标
拟物化启动图标设计的流程
从竞品出发开始
相同类型 竞争对手 不同平台
层样式 绘制光晕镜头 各个圆形之间的完美对齐
课堂练习
29/33
课堂练习： 拟物化风格可爱照相机图标设计
需求描述
完成拟物化风格可爱照相机图标设计
实现思路
使用形状工具和钢笔工具绘制整体的结构和布局 给图标上色，将各部分大致的颜色分出来 为图层增加图层样式，通过颜色渐变、内发光、外发
4/33
拟物化设计的概念
拟物化设计的概念
“拟物化” 一词来源于古希腊，意思是只要看到它的外在形态，就能知道它是用 来做什么的
“拟物化”设计是一种以保留原始被模仿对象的各种装饰元素为基础、并由此衍 生出来的设计风格
5/33
拟物化设计的概念
拟物化设计的概念
哪一幅运用了拟物化风格?
6/33
课堂练习
13/33
课堂练习： 拟物化风格旋钮设计
需求描述
完成拟物化风格旋钮设计
实现思路
使用形状工具和钢笔工具绘制整体的结构和布局 给图标上色，将各部分大致的颜色分出来 为图层增加图层样式，通过颜色渐变、内发光、外发
光等增加图形的质感和细节
目录
拟物化设计的概念 拟物化启动图标设计的流程 启动图标的设计原则
21/33
演示案例
22/33
演示案例： 拟物化风格抽屉邮件图标设计
需求描述
完成拟物化风格抽屉邮件图标设计
实现思路
使用钢笔工具和图形工具绘制图标的整体结构 双击图层缩略图，更改形状图层的颜色 为图层增加图层样式，通过添加颜色渐变、内发光、外发光等
为图标增加更多的质感和细节 将图标作为一张图片进行修整，在最上面增加一个图层调整整
拟物化设计的概念
哪一幅运用了拟物化风格?
7/33
拟物化设计的概念
拟物化设计的优点
外观完全与现实事物相似，用户认知和学习成本低 交互与现实事物保持一致 动态效果高度统一，给用户以人性化的体贴
8/33
拟物化设计的概念
拟物化设计的缺点
花费大量的时间在视觉的阴影和质感效果上 要求设计师有更深厚的设计功底和更熟练的软件使用 在适配方面比较复杂和麻烦
拟物化风格图标设计
课程回顾
扁平化风格概述 扁平化风格设计原则 扁平化风格的特点 扁平化风格的分类
2/33
本章任务
了解拟物化设计的概念 熟知拟物化启动图标设计的流程 了解启动图标的设计原则 能够使用Photoshop进行拟物化图
标的设计
3/33
目录
拟物化设计的概念 拟物化启动图标设计的流程 启动图标的设计原则
26/33
启动图标的设计原则
严格遵守平台下的规范进行设计 考虑在各个平台实际应用中的情景 必须符合国家相关规定 考虑受众群体的审美需求
27/33
演示案例
28/33
演示案例：拟物化风格相机图标设计
需求描述
完成拟物化风格相机图标设计
实现思路
仔细观察现实中的相机的模样，抓取它的关键元素 对相机图标进行拆分 使用圆形工具绘制几个同心圆，然后分别为其增加图