04-拟物化风格图标设计.pptx

拟物化风格图标设计

课程回顾扁平化风格概述扁平化风格设计原则扁平化风格的特点扁平化风格的分类2/33

本章任务了解拟物化设计的概念熟知拟物化启动图标设计的流程了解启动图标的设计原则能够使用Photoshop进行拟物化图标的设计3/33

目录拟物化设计的概念拟物化启动图标设计的流程启动图标的设计原则4/33

拟物化设计的概念拟物化设计的概念“拟物化”一词来源于古希腊，意思是只要看到它的外在形态，就能知道它是用来做什么的“拟物化”设计是一种以保留原始被模仿对象的各种装饰元素为基础、并由此衍生出来的设计风格5/33

拟物化设计的概念拟物化设计的概念哪一幅运用了拟物化风格?6/33

拟物化设计的概念哪一幅运用了拟物化风格?7/33

拟物化设计的概念拟物化设计的优点外观完全与现实事物相似，用户认知和学习成本低交互与现实事物保持一致动态效果高度统一，给用户以人性化的体贴8/33

拟物化设计的概念拟物化设计的缺点花费大量的时间在视觉的阴影和质感效果上要求设计师有更深厚的设计功底和更熟练的软件使用在适配方面比较复杂和麻烦9/33

拟物化设计的概念拟物化设计的核心：提取物体的关键元素：它们的关键元素是？10/33

拟物化设计的概念拟物化设计的核心：提取物体的关键元素：它们的关键元素是？11/33

需求描述完成拟物化风格日历启动图标设计演示案例：

拟物化风格日历启动图标设计实现思路使用形状工具和钢笔工具绘制整体的结构和布局给图标上色，将各部分大致的颜色分出来为图层增加图层样式，通过颜色渐变、内发光、外发光等增加图形的质感和细节12/33

需求描述完成拟物化风格旋钮设计实现思路使用形状工具和钢笔工具绘制整体的结构和布局给图标上色，将各部分大致的颜色分出来为图层增加图层样式，通过颜色渐变、内发光、外发光等增加图形的质感和细节课堂练习：

拟物化风格旋钮设计13/33

目录拟物化设计的概念拟物化启动图标设计的流程启动图标的设计原则14/33

拟物化启动图标设计的流程拟物化启动图标15/33

拟物化启动图标设计的流程从实际出发台球App图标16/33

拟物化启动图标设计的流程从现有图形系统出发被人们熟知被人们认同避免引起歧义设置图标17/33

拟物化启动图标设计的流程从竞品出发开始相同类型竞争对手不同平台pcwebphone……18/33

演示案例：拟物化风格抽屉邮件图标设计从实际出发。根据这个设计的需求找到相关素材主题“抽屉”、“邮件”19/33

演示案例：拟物化风格抽屉邮件图标设计从现有图形系统出发20/33

演示案例：拟物化风格抽屉邮件图标设计从竞品出发开始21/33

演示案例：

拟物化风格抽屉邮件图标设计需求描述完成拟物化风格抽屉邮件图标设计实现思路使用钢笔工具和图形工具绘制图标的整体结构双击图层缩略图，更改形状图层的颜色为图层增加图层样式，通过添加颜色渐变、内发光、外发光等为图标增加更多的质感和细节将图标作为一张图片进行修整，在最上面增加一个图层调整整体的光感22/33

需求描述完成拟物化风格复古磁带图标设计实现思路使用形状工具和钢笔工具绘制整体的结构和布局给图标上色，将各大部分大致的颜色分出来为图层增加图层样式，通过颜色渐变、内发光、外发光等增加图形的质感和细节课堂练习：

拟物化风格复古磁带图标设计23/33

目录拟物化设计的概念拟物化启动图标设计的流程启动图标的设计原则24/33

启动图标的设计原则严格遵守平台下的规范进行设计iOS系统启动图标尺寸的设计规范25/33

启动图标的设计原则严格遵守平台下的规范进行设计注意App启动图标在设计时要考虑后期是否要印刷，设计时的像素大小直接影响后期印刷效果为了防止图片过大引起的卡机、死机现象，或后期修改带来的被动因素，设计时请尽量使用矢量软件或PS里的矢量工具来设计26/33

启动图标的设计原则严格遵守平台下的规范进行设计考虑在各个平台实际应用中的情景必须符合国家相关规定考虑受众群体的审美需求27/33

演示案例：拟物化风格相机图标设计需求描述完成拟物化风格相机图标设计实现思路仔细观察现实中的相机的模样，抓取它的关键元素对相机图标进行拆分使用圆形工具绘制几个同心圆，然后分别为其增加图层样式绘制光晕镜头各个圆形之间的完美对齐28/33

需求描述完成拟物化风格可爱照相机图标设计实现思路使用形状工具和钢笔工具绘制整体的结构和布局给图标上色，将各部分大致的颜色分出来为图层增加图层样式，通过颜色渐变、内发光、外发光等增加图形的质感和细节课堂练习：

拟物化风格可爱照相机图标设计29/33

需求描述完成拟物化风格圆角直尺图标设计实现思路使用形状工具和钢笔工具绘制整体的结构和布局给图标上色，将各大部分大致的颜色分出来为图层增加图层样式，通过颜色渐变、内发光、外发光等增加图形的质感和细节课堂练习：

拟物化风格圆角