《游戏界面设计专题实践》课件——知识点4：矢量几何造型图标设计制作.pptxVIP

矢量几何造型图标设计制作

0103本知识点内容CONTENTS02矢量几何图标设计步骤矢量几何图标设计属性矢量几何图标设计方法04矢量几何图标设计要点

0503本课内容CONTENTS06矢量几何图标设计练习矢量几何图标案例欣赏

01PART矢量几何图标设计属性

矢量几何图标设计属性1.整体形态2.审美统一3.可识别性

矢量几何图标设计属性1.整体形态如果你忽略一个图标的细节，眯眼观察它，看它整体形态是否变成了一个正方形、三角形、圆形、水平或者垂直的矩形（菱形）？主要的几何图形——圆、三角和正方形——是创造一个icon视觉设计的基础。

矢量几何图标设计属性

矢量几何图标设计属性2.审美统一这里的审美统一是指在一个或者多个icon中共享同样的设计要素。比如说都是圆形或者方形的角，相同尺寸的圆角（2像素、4像素、等等），粗细一致的线（2像素、4像素、等等）、相同风格（面、线、填充的线、字形）和用色等。

矢量几何图标设计属性

矢量几何图标设计属性3.可识别性你设计的icon必须具有可识别的形态，而不能模棱两可。

矢量几何图标设计属性

02PART矢量几何图标设计步骤

矢量几何图标设计步骤1.从一个网格开始2.提炼为简单形状3.数据化：边、线、角、曲线和角度4.使用一致的设计元素和风格5.节制的使用细节和装饰6.美化并使它有个性

矢量几何图标设计步骤1.从一个网格开始

矢量几何图标设计步骤

矢量几何图标设计步骤2.提炼为简单形状

矢量几何图标设计步骤2.提炼为简单形状

矢量几何图标设计步骤3.数据化：边、线、角、曲线和角度

矢量几何图标设计步骤

矢量几何图标设计步骤

矢量几何图标设计步骤

矢量几何图标设计步骤4.使用一致的设计元素和风格

矢量几何图标设计步骤5.节制的使用细节和装饰

矢量几何图标设计步骤6.美化并使它有个性

03PART矢量几何图标设计方法

矢量几何图标设计方法矢量图标的设计应尽量遵循去繁择简的原则，并在设计过程中不断进行思考改造。可以采用以下方法：1.实物提炼轮廓法2.调整造型法3.优化细节突出风格法

矢量几何图标设计方法1.实物提炼轮廓法：设计或绘制一个矢量图标前，通常可以选取你喜欢的或者需要的参照物造型进行观察分析，捕捉参照物的关键节点，绘制一个相似的用几何形表现的基本图形。

2.调整造型法：雏形绘制出来后就开始按照自己的想法和习惯调整造型，如使圆形更规范、曲线更柔和等，最终这些线条的走向将决定图标的造型。矢量几何图标设计方法

3.优化细节突出风格法：最后加强对细节的把控和优化！图标造型的特点完全显现，让你的矢量图标极具个人色彩，与众不同。矢量几何图标设计方法

矢量几何图标设计案例

04PART矢量几何图标设计要点

矢量几何图标设计要点设计矢量图标应注意以下要点：1.精致的基础要素2.成型的系列图标

矢量几何图标设计要点精致的基础要素包含：（1）边缘锐利清晰

矢量几何图标设计要点精致的基础要素包含：（2）比例协调

矢量几何图标设计要点精致的基础要素包含：（3）视差平衡

矢量几何图标设计要点成型的系列图标：一个图标设计定稿后，系列图标必须延展其风格去设定：包括造型规则、样式、细节特征等要素都要进行统一设计——即繁衍具相同视觉属性与内在含义的图标。

矢量几何图标设计要点成型的系列图标

成型的系列图标

05PART矢量几何图标案例欣赏

矢量图标案例

矢量图标案例

矢量图标案例

矢量图标案例

矢量图标案例

矢量图标案例

矢量图标案例

这里是实战的分割线

06PART矢量几何图标设计练习

实例一：跟视频教程学习矢量小鹿的制作矢量几何图标设计练习

实例二：跟视频教程学习矢量熊猫的制作矢量几何图标设计练习

进阶矢量几何图标设计练习

矢量几何图标设计练习参照实例一的视频教程，选择图中另一个动物图标进行制作，提交尺寸，画布--800*800px，200dpi；

矢量几何图标设计练习参照实例二的视频教程，选择图中另一个动物图标进行制作，提交尺寸，画布--800*800px，200dpi；

期待共同进步