图标设计与制作-全套PPT课件.pptx

第1章 初识图标设计;掌握图标的基本概念 掌握图标的应用场景 了解图标的风格类型 掌握图标的性格表现 掌握图标的设计原则 掌握图标的设计流程;图标（Icon）是具有明确指代含义的图形。通过将某个词语或概念设计成形象易辨的图形，进而降低用户的理解成本、提高设计的整体美观度。图标通常和文本相互搭配使用，两者相互支撑，共同起到传递其中所要表达的内容、信息以及意义的作用。;1.2 图标的应用场景;1.2 图标的应用场景;1.2 图标的应用场景;1.3 图标的风格类型;1.3 图标的风格类型;1.3 图标的风格类型;1.3 图标的风格类型;1.4 图标的性格表现;1.4 图标的性格表现;1.4 图标的性格表现;1.5 图标的设计软件;;;;;;;;;;;;;;第2章 图标绘制方法;掌握图标标准尺寸系统 掌握图标绘制像素完美 掌握图标的绘制思路 掌握布尔运算的使用 掌握图标等比例缩放 掌握图标的网格系统 掌握图标的视觉调整;尺寸系统 图标尺寸 图标放大 图标布局;图标的应用场景不同尺寸也不同，其中以4倍数和8倍数为基准是目前最灵活的设计尺寸系统。;24px是目前最常用的图标尺寸。而20px则应用于紧凑型的页面布局中，因此也经常被使用。;如果需要更大尺寸的图标，可以直接成倍数放大24px或20px尺寸的图标进行使用。;图标设计时留出一定的出血位，可以预防图标边缘被切掉以及把握图标的设计平衡。设计24px和20px图标时，通常在四边会各留出2px作为出血位。;图标像素完美的概念 软件实现图标像素完美 课堂案例-用软件实现图标像素完美;图标像素完美指图标的每一个像素位都可以精确对应到一个像素。通常我们会将图标的坐标位置设置为整数，尺寸设置为偶数，以保证图标更加清晰。;1.设计原则 在软件中，我们会将图标的坐标X和坐标Y设置为整数，宽和高设置为偶数，角度以45度为单位进行旋转，以实现图标像素完美。;2.软件设置 有时即使遵循了像素完美的设计原则，但还是会出现像素不完美的情况，这是因为软件没有进行正确的设置。通过正确的软件设置，才能绘制出像素完美的图标。;使用属性面板中的“X”、“Y”、“宽”和“高”选项实现图标的像素完美。 ;图标结构拆解 图标绘制工具 课堂案例-用纸笔进行图标结构的分解;绘制图标和搭积木有着异曲同工之处，其实每一个图标都是有不同的形状共同组合而成的。;1.矢量形状 矢量形状是绘制图标的基本工具。运用矢量形状绘制的图标有着放大不失真的特点，不同软件里的矢量形状工具原理一致，展现会略有不同。;2.贝塞尔曲线 贝塞尔曲线是绘制图标的辅助支撑。它在绘制矢量图形时，可以轻松地绘制出准确的造型，在软件中我们通常运用钢笔等工具进行贝塞尔曲线的绘制。;3.布尔运算 布尔运算是绘制图标的核心功能。它可以将绘制的基本形状，通过合并、减去、相交、排除等数学计算变成新的形状，从而制作出不同造型的图标。;分析出图标的结构，用纸笔绘制图形形状，实现布尔运算，制作出不同造型的图标。;不同软件的使用 不同颜色的使用 课堂案例-绘制基础面性图标 课堂案例-绘制基础线性图标;不同软件在使用布尔运算绘制图标的操作上会有微小区别，其中由于Photoshop是图像处理软件，因此在使用布尔运算绘制图标方面，和其他软件区别较为明显。我们通过示意图将区别形象地进行了展示。;当两个形状颜色不同时，使用布尔运算会只保留一种形状颜色。其中合并、相交和排除会保留顶部形状颜色，相减则会保留底部形状颜色。;使用椭圆工具、路径选择工具和减去顶层形状命令绘制基础图形，使用快捷键变换图形，使用填充工具为图形填充颜色。;使用圆角矩形工具绘制图形，使用属性面板的变换功能旋转图形，使用路径查找器命令，实现基础线性图标。;图标等比例缩放问题 图标等比例缩放方法 课堂案例-将图标通过缩放置入界面;在软件中，将图标等比例缩放，通常会出现圆角弧度和线条粗细两个问题。比如将一个图标等比例缩小，该图标的线条会变粗，弧度会变大，甚至变成圆形。;想要对图标进行不变形的等比例缩放，不同的软件有不同的实现方法。;使用矩形工具绘制矩形框，使用变换命令，实现图标等比例缩放。;网格系统的定制意义 网格系统的定制规范 网格系统的使用方法 课堂案例-运用网格系统调整图标;通过物理尺寸绘制的图标通常会失去视觉平衡，比如相同宽高尺寸下的方形和圆形，方形会比圆形大。因此为了达到图标与图标的视觉平衡，我们需要通过制定网格系统运用视觉尺寸进行一组图标的绘制。;不同形状的图标可以根据网格系统来进行规范，以实现一组图标的视觉平衡。网格系统中的形状可以分为四种，即方形、圆形、垂直矩形和水平矩形。在24px下的网格系统中，方形的宽高尺寸为18px，圆形的直径尺寸为20px，垂直矩形的高度尺寸为20px,宽度尺