矢量绘图设计与制作案例教程全套电子课件完整版ppt整本书电子教案最全教学教程

1、数字矢量软件基础课程“精彩一课”Xxxx学院 汇报人：xxx部门：xx基础图形绘制打造12生肖动物图标Contents目录01教学设计02教学过程0101教学设计主题名称：基础图形绘制打造12生肖动物图标课时数： 1课时学情分析教学目标课程资源教学内容教学评价任务布置学情分析 1.课前分组了解生肖文化，寻找生肖图像素材，提炼每个动物典型特征。 2. 经过前一次课基本工具的了解与尝试后开始真实着手去完成一个系统而庞大的项目绘制一套扁平化生肖图标。利用学生充满的期待与畏惧心理直接吸引其学习主动性与积极性。教学目标课程目的在于使学生能够运用矢量软件进行艺术设计 。 迎合时代文化诉求，培养科技进步的艺

2、术与技术融合和技术落地的艺术创新型人才。课次教学目标 让学生熟悉各种图形绘制与形状组合，能灵活用技术语言表达创意述求。 让学生了解扁平化风格，丰富设计方法论。 让学生以生肖为切入点关注传统文化。04行业交流平台（QQ群、论坛、直播）红人、达人03优秀公众号02参考网站01资讯管理-（课代表、小组长） 课程资源05屏幕广播系统分发，网盘地址分享12基于时代分析基于任务分析，落实能力培养 3基于工作分析，落实行业能力 组织原则具体呈现12艺术与科技融合-ICON、表情包、长图、H5、从小到大，由易到难，组织知识序列如：基本图形绘制-复合图形处理-特殊综合特效3图标设计 - 纸媒印刷 - UI界面4

3、基于承载传统文化3生肖图标 - Q版川剧角色-传统节日（气）插画 教学内容-整体形状与轮廓绘制对象填充形状生成器一、技能技术介绍扁平化风格，读解其设计要点二、艺术审美 融入生肖文化 三、传统文化 教学内容-本课次 任务布置作业：使用基本图形、形状生成器、路径查找器，吸管滴管绘制一套扁平化生肖图标任务的开发过程为主线，将知识的讲解贯穿于任务的开发过程中，随着任务的进展来推动知识的扩展。项目1 生肖图标项目2平时（60%）考试（40%） 任务1 资料收集整理任务2 生肖图标设计与绘制任务考核表知识内容反思、拓展客户评价专家评价赛事评价任务考核自主学习模拟职场鉴定教学评价+0202教学过程课程引入：

4、分组学生代表分享前课布置的收集整理资讯结果 新课讲解： 扁平化风格，图标设计方法，矢量绘图原理操作示范：演示工具技巧的使用资源分享：任务布置巡回指导课堂小结0707特色和亮点1说教学特色和教学亮点2精炼教学设计，孵化更适应专业教学的、资源建设、教材建设与纵向科研项目 本课程本着以专业能力培养为主线、兼顾社会能力、方法能力培养的设计理念，着重发展学生的实践技能 延时符敬请指导 感谢聆听THANK YOU数字矢量绘图设计说课重庆工程学院 汇报人：张小玲部门：设计系Contents目录01课程定位与目标02教材及教学内容03说教学对象 04说教法学法05说教学过程06说考核评价07特色和亮点0101

5、课程定位与目标行业背景专业背景课程定位与目标12人工智能、虚拟现实为标志的新型信息化时代迅速发展，各种产业形势的大变化，对艺术类专业人才的知识结构、思维方式、实践手段、创新能力等提出了新的要求。未来的才最需要的技能包括：关注设计和创新，拥抱数字化的岗位，保持灵活性和个性的工作，等。行业背景艺术设数字媒体艺术等专业下平面设计方向是通过视觉语言元素传播， 而电脑软件技术是关键制作方式专业背景课程定位与目标迎合时代文化诉求、科技进步的艺术与技术融合和技术落地的艺术创新型人才。课程目的在于使学生能够运用矢量软件进行艺术设计 数字矢量绘图设计课程是数字媒体艺术专业数字图形图像设计方向开设的一门专业基础课

6、。专业基础课课程定位与目标 使用矢量软件完成典型案例：图标设计、插画设计、表情包设计 、Q版设计技能技术解析各种不同类型的设计方法艺术审美数字矢量绘图设计0202教材及教学内容说教材说教学内容说教辅教材及教学内容-说教材 本课程本着以专业能力培养为主线、兼顾社会能力、方法能力培养的设计理念，着重发展学生的实践技能 全书本着以专业能力培养为主线、兼顾社会能力、方法能力培养的设计理念，着重发展学生的实践技能 配有40余段视频讲解 便于技术巩固、学生自学 基础中小实例 综合提高案例源文件、素材全套教学资料 便于教师教学参考 任务的开发过程为主线，将知识的讲解贯穿于任务的开发过程中，随着任务的进展来推

7、动知识的扩展。 教纲、考纲、学时安排、试题库、课件集、教案等 矢量绘图设计与制作案例教程（Illustrator CC 2021）21教材及教学内容-说教材 使用优势 “技艺融合” 理念贯穿始终 涵盖面广，实用性强 潜移默化课程思政，融入传统文化 背景、壁纸、插画、文字、表情包、图标、Q版娃娃、数字化再现22教材及教学内容-说教材 2304行业交流平台（QQ群、论坛、直播）03优秀公众号02参考网站01教材及教学内容-说教材辅助 资讯管理-教学助手（课代表） 12基于时代分析基于任务分析，落实能力培养 3基于工作分析，落实行业能力 教材及教学内容-说教学内容 组织原则具体呈现12艺术与科技融合

8、-表情包、长图、H5、ICON 从小到大，由易到难，组织知识序列如：基本图形绘制-复合图形处理-特殊综合特效3图标设计 - 纸媒印刷 - UI界面0303说教学对象 心理：对学习有感兴趣思维：有一定的设计基础，但不能灵活运用习惯：缺乏职业意识、作品意识愿望：学点东西，好找工作 对象：数字媒体艺术20级说教学对象 0404说教法学法0505说教学过程说教法学法、说教学过程坚持“133”模式：一体教学模式、三种学习教学方式、三个课堂联动“教、学、练、演、赛”五位一体的教学模式“模拟性”-教师示范讲解，学生随堂练习为主 “实战性” -教师思维引领，统筹方法技能思维等，学生创意完成“探究性”-软性教学

9、13课堂教学为主要活动场所的第一课堂以课外活动为主要手段的第二课堂：完成拓展练习以社会实践为主要途径第三课堂：承接商业业务，积累职业经验3媒体演示法角色扮演法小组讨论法项目教学法启发提问法学导法导入新课时任务总结演示时讲解、拓展新内容时项目进行时看听想说观察表演咨询交流 教法 学法说教法学法、说教学过程这是本课程配套的网络教学平台0606说考核评价 说考核评价项目1项目2平时（60%）考试（40%） 任务1任务2任务考核表知识内容反思、拓展客户评价、专家评价、赛事评价任务考核自主学习模拟职场鉴定060707特色和亮点1提炼“133”模式： 一体教学模式、三种学习教学方式、三个课堂联动说教学特色

10、和教学亮点2精炼教学，孵化更适应专业教学的教材建设 07延时符讲解完毕 感谢聆听THANK YOU主讲：XXXX矢量绘图设计基础1.1设计学基础 1.2视觉技巧 目录CONTENTS单击此处编辑母版文本样式第二级第三级第四级第五级1.1.1设计作品的基本形态要素1.1.2设计作品的构成秩序与形式美平衡均衡条理反复调和对比节奏韵律变化统一1.1.3设计作品的构成表现形式一、 重复构成二、 近似构成三、 渐变构成四、 发射构成五、 特异构成六、对比构成七、 肌理构成八、空间与矛盾的构成单击此处编辑母版标题样式 色彩是光产生的现象，没有光，就没有色彩1.1.4设计作品的颜色搭配 单击此处编辑母版标题

11、样式色相 明度 纯度1.1.4设计作品的颜色搭配 单击此处编辑母版标题样式RGB（光源色）红色绿色蓝色又称为三原色光，用英文表示就是R(red)、G(green)、B(blue)。CMYK（物体色）CMY是3种印刷油墨名称的首字母：青色Cyan、洋红色Magenta、黄色Yellow。而K取的是black最后一个字母，之所以不取首字母，是为了避免与蓝色(Blue)混淆。只要在屏幕上显示的图像，就是RGB模式表现的。只要是在印刷品上看到的图像，就是CMYK模式表现的。1.1.4设计作品的颜色搭配 单击此处编辑母版标题样式1.1.4设计作品的颜色搭配 无彩色有彩色单击此处编辑母版标题样式1.1.4

12、设计作品的颜色搭配 单击此处编辑母版标题样式1.1.4设计作品的颜色搭配 单击此处编辑母版标题样式1.1.4设计作品的颜色搭配 单击此处编辑母版标题样式1.1.4设计作品的颜色搭配 49红、黄、蓝的构成，皮特蒙德里安作于1930年，布上油画，45x45厘米。1.1.4设计作品的颜色搭配 1.2视觉技巧美学意识视觉层级激发灵感排版技巧谢谢关于lllustrator数字矢量绘图基础主讲：XXXX数字矢量绘图基础关于lllustrator01关于lllustrator Adobe lllustrator（下文简称Al ）一款矢量图形处理工具。 据不完全统计全球有37%的设计师使用AI，完全占领专业的

13、印刷出版领域，现在AI主要使用在字体设计和商业插画是一款矢量绘图软件，作为设计道路上的入门关,Al是一个非常简单的关卡。当你打败了AI这一关,他会化作你的刀剑，为你披荆斩棘。 AI cc2021是(AdobeIllustratorCC 2021)的简称,是Adobe公司发布的2020Illustrator系列矢量图形制作工具的最新版本，大概保持在一年一更。怎么学习 怎么入门1、自学、看书看教程 我要自学网（）2、实例练习 课堂练习 飞特网（） 优设网（） 3、多看大师作品教学内容讲解及示范1、初识illustrator与缩放工具练习2、抓手工具练习3、选择工具以及直接选择工具4、线性工具和形状

14、工具对象的基础操作 学习要点：掌握选择工具的使用方法掌握复制、 剪切、 粘贴命令的使用技巧掌握对象移动、 旋转、 缩放等操作方法 使用移动工具，然后按住ALT键拖动复制，同PS选择工具选择工具可用来选择整个对象， 只有被选中的图形或图形组才可以执行移动、 复制、 缩放、 旋转、 镜像、 倾斜等操作。 选择一个对象 单击工具箱中的“选择工具”按钮 或按快捷键V， 然后在要选择的对象上单击， 即可将相应的对象选中。 选择多个对象选中一个对象后， 按住Shift键的同时单击其他的对象进行加选。选择多个相邻对象如果要同时选中多个相邻对象， 可以使用鼠标进行拖拽， 将要选取的对象进行框选， 释放鼠标，

15、相应的对象即可同时被选中。使用选择工具控制栏更改对象位置及大小在选项栏中通过调整“X”和“Y”选项去调整选中对象的位置。直接选择工具 选择、 移动与删除锚点单击工具箱中的“直接选择工具”按钮 或按快捷键A， 然后将光标移动到包含锚点的路径上， 单击左键即可选中锚点， 拖拽鼠标可以移动锚点， 按Delete键可以删除锚点。 选择与移动路径线段单击工具箱中的“直接选择工具”按钮，然后将光标移动到路径线段上，在路径上单击鼠标左键并移动光标， 即可调整这部分线段。编组选择工具可以在不解除编组的情况下， 选择组内的对象或子组。单击工具箱中的“编组选择工具”按钮 ， 然后单击要选择的组内对象， 选择的是组

16、内的一个对象。再次单击， 选择的是对象所在的组。第三次单击则添加第二个组。编组选择工具所有形状除光晕工具外有都具有外观属性（填色、描边、不透明度）1空格键 绘制的过程中按着空格键 移动 2【shift】键与【Alt】键绘制正形按【shift】键即可。从一个点出发画形状，则按住【Alt】键。同PS3键盘的上下左右键调整参数的大小4键盘的 键:绘制旋转 70作业：使用正圆、正多边形为基本图形各绘制一张名片名片标准尺寸：90mmX54mm 90mmX50mm 90mmX45mm拓展练习绘制旋转？ 有规律的等大? 思考练习课堂演练实例旋转复制CTRL+D 再制谢谢主讲：XXXX数字矢量绘图基础illu

17、strator基本形状 基本形绘制正形同心 同比例效果：扭曲与变换路径查找器与 形状生成器吸色 与 填色旋转 复制 变换试着使用形状生成工具（Shift-M）代替。 选择全部并按住Alt键点击不想要的片段。单击此处编辑母版标题样式单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级单击此处编辑母版标题样式顶层绿色圆中间各种花纹单击此处编辑母版标题样式 随堂作业：自由创作一组彩蛋变换2.5 有序纹样 玑镂图案 谢谢主讲：XXXX第3章背景、壁纸综合篇illustrator矢量绘图设计与制作案例教程（Illustrator CC 2021）3.1有序背景 3.1.1马赛克背景

18、3.1.2重复背景 3.1.3发射背景 3.1.4近似背景菊花 3.2无序背景 3.2.1低多边形风格 3.2.2扁平化风格 3.3同步练习 关键提示：【对象】|【栅格化】，将图形栅格为72ppi的位图。 【对象】|【创建对象马赛克】 3.1.1马赛克背景97【效果】|【风格化】|【圆角】3.1.1马赛克背景3.1.1马赛克背景拓展练习3.1.1马赛克背景3.1.1马赛克背景3.1.1马赛克背景3.1.1马赛克背景3.1.1马赛克背景3.1.2重复背景 关键提示：1.少量重复对象还可以利用再次转换（快捷键：Ctrl+D）的方法完成 2.量较大的时候还是在文件菜单【效果】|【扭曲和变换】|【变换

19、】中设置操作更便捷。谢谢主讲：XXXX第章典型文字处理综合篇illustrator矢量绘图设计与制作案例教程（Illustrator CC 2021）4.1剪切蒙版文字 4.2遮挡文字 4.3穿插文字 4.4双色文字 4.53D立体文字 4.6立方体拼贴文字设计 4.7立方体多面文字设计 4.8混合路径文字设计 4.9封套扭曲文字 4.10条纹字体设计 技巧回顾R 旋转 ALT- -旋转中心指法 ：A-小白 I -吸管/ 在线生成字体效果复习回顾混 合做好效果之后，我们画一个新路径，选中这两个图形，我们点击【对象】-混合-替换混合轴，这时我们会的到另外一种渐变的效果谢谢主讲：XXXX第5章图标

20、提高篇illustrator矢量绘图设计与制作案例教程（Illustrator CC 2021） 图标的分类图标的规格LDPI (Low Density Screen，120 DPI)，其图标大小为 36 x 36 px。MDPI (Medium Density Screen, 160 DPI)，其图标大小为 48 x 48 px。HDPI (High Density Screen, 240 DPI)，其图标大小为 72 x 72 px。xhdpi (Extra-high density screen, 320 DPI)，其图标大小为 96 x 96 px。 建议在设计过程中，在四周空出几个像

21、素点使得设计的图标与其他图标在视觉上一致，例如：96 x 96 px 图标可以画图区域大小可以设为 88 x 88 px， 四周留出4个像素用于填充（无底色）。72 x 72 px 图标可以画图区域大小可以设为 68 x 68 px， 四周留出2个像素用于填充（无底色）。线性图标的设计 线条有粗细、曲直、虚实之分，辅以颜色将产生更丰富的变化，不同的线条可以表达不同的情感。总体来说线性图标的设计就是在线条上做文章。线性图标的打造在Illustrator里我们主要通过路径绘制，设置填色为无，设置描边的粗细与颜色等。*Tips：描边设置为内侧对齐，便于尺寸的计算。本章节所有描边默认居内。线性图标的设

22、计面性图标 简单的说面性图标就是看上去“面”感十足，相比之下块面比较大，不同于点与线。在Illustrator绘制方面，可以简单理解为填色与描边的交换。面性图标通常是只有填色没有描边，所以面性风格图标与线性图标二者可以快速转化。在面性图标中，没有可以统一设置的描边粗细，所以一套图标中可以通过使用相同的元素去达到统一与规范。 在Illustrator里面制作2.5D图标，通常我们会使用3D效果。先绘制好基本图形，再利用3D的突出与斜角，进行调整，扩展对象后再根据需要进行调整制作。图5- 78从中的2.5D图标就是直接利用基础面线图标，通过3D 效果而得来。2.5D图标关键技术： 菜单【3D】|【

23、突出与斜角】 MBE图标设计在Illustrator里的制作方法也很简单。绘制时只需要将断线描边与填色图标的方法进行结合即可。简单地说MBE图标设计要掌握好以下特点：1.有断点的圆头粗线描边2.错位的色块3.固定的点缀图案（圆圈、加号、烟花），后期有增加，但是这3种最常见4.颜色以鲜艳的补色、对比色、邻近色、同类色为主 图标设计意义作为界面设计的关键部分，图标在人机交互设计中无所不在。深入的图标设计，不仅仅是一个简单表达含义的设计过程，其也显示出了越来越多的应用价值。主要体现为：图标设计是在屏幕上展现产品的最佳方式，对于传统企业，图标可以直观展现产品和公司形象。图标是视觉设计的重要组成部分，用

24、于提示与强调产品的重点特征，以醒目的信息传达让用户知道操作重点。图标设计可以形成产品的统一特征，给用户以信赖感，便于功能的记忆，在视觉上的统一很容易暗示用户产品的整体性和整合程度。图标设计的表现方式灵活自由，可以传达不同的产品理念，让产品呈现出科技感、未来感较强的面貌。 图标设计原则 精美的图标设计在软件界面中起到画龙点睛的作用，提升软件的视觉效果。图标设计的核心思想是代替文字，比文字更直观，更漂亮，提高软件可用性，提升界面的视觉效果。 图标也需要有统一的设计原则，才能更充分的发挥产品的优势，主要有可识别性原则，差异性原则，与环境协调性原则，觉效果原则，原创性原则，风格统一性原则，尺寸大小与格

25、式一致性原则以及需要有合适的精细度和元素个数等原则。 图标设计原则 下面就是对这些原则的介绍： 可识别性原则是指图标的图形要能准确表达相应的操做。当用户看到一个图标，就要明白他它代表的含义，这是图标设计的灵魂。也称之为图标设计的第一原则。 图标设计原则 图标不能单独存在，图标最终是要放置在界面上才会起作用。因此，图标设计要考虑图标所处的环境，所设计的图标，是否适合相应的界面，也就是我们所说的与环境协调性原则。 图标设计原则 风格统一性原则可以让整个界面非常协调，使图标看上去也更美丽，更专业，增强用户的满意度。如果界面是平面的，简约的，可以考虑用一些简单的平面的符号或者图形来设计图标，这样整个界

26、面会很协调，不要认为这样的图标是简陋的，其实这样的图标的可识别性非常强，在简洁的界面里，会透露出一种简约之美。 图标设计原则 差异性原则是图标设计中很重要的一条原则，图标和文字相比，它的优越性在于它更直观一些，但是如果图标设计失去了这一点，图标设计就失去了意义。如下图所示的图标一眼望上去，几乎都一样，这些图标的设计，已经失去了存在的价值，如果不看文字用户很难区分它们，这实际上是降低了工做效率。 图标设计原则 追求视觉效果，一定是要在保证差异性，可识别性，统一性，协调性原则的基础上，要先满足基本的功能需求，才可以考虑更高层次的要求即情感需求。图标设计的视觉效果，很大程度上取决于设计师的天赋、美感

27、和艺术修养。 原创性原则对图标设计师提出了更高的要求，目前常用的图标风格种类很多，但过度追求图标的原创性和艺术效果，则会导致图标设计另辟蹊径，这样做往往会降低图标的易用性降低，也就是说所谓的好看不实用。 这里也要看产品的侧重点，如果考虑更多的是情感化的设计，完美的艺术效果，这样做也无可厚非。 对于要确定合适的精细度和元素个数这一原则，首先要明确一个点，图标的主要作用是用的，代替文字，第二才是美观。但现在的图标设计者往往陷入了一个误区，片面的追求精细，高光和质感。其实，图标的可用性随着精细度的变化，是一个类似于波峰的曲线。在初始阶段，图标可用性会随着精细度的变化而上升，但是达到一定精细度以后，图

28、标的可用性往往会随着图标的精细度而下降。 图标设计原则 图标设计案例分析主讲：XXXXillustrator矢量绘图设计与制作案例教程（Illustrator CC 2021） 5.3.2 扁平填色风格1.飞机场扁平化图标无非是一马平川，要多平有多平，颜色不要过于重口味效果才会小清新。82.折叠疯折叠风，优点比纯平面丰富，利用透明的蒙版，营造出轻微视觉空间感26利用渐变和阴影，营造出具有一定的层次，有稍微立体效果3.轻质感3.折纸风大部分利用阴影的效果，几何感明显，层次感强。4。长投影利用长投影，让立体感更加十足，主要通过编辑顶点进行设计。5.厚度感更真实展现物体，复杂，厚重感强。试着使用形状

29、生成工具（Shift-M）代替。 选择全部并按住Alt键点击不想要的片段。曲线 折线的绘制illustrator “对象”-“扩展”的意思是把 使用的效果变成实体的路径 直线扭曲变形-波浪对象扩展-形状应用效果一个变多个对象扩展-（不扩展改不了） 谢谢主讲：XXXX第6章数字化再现传统文化illustrator矢量绘图设计与制作案例教程（Illustrator CC 2021）6.1 数字化再现川剧脸谱手稿6.2数字化再现传统纹样将系列川剧脸谱手稿转化为数字化图形，并最大可能保留原有的配色与图案。因方法的相似性和篇幅局限性，本案例只选择了两张有代表性的手稿进行转化。6.1.1 项目需求读解“紫

30、金饶钵”因图像简单，元素较少，可以使用在图形描摹的基础上进行适当调整。“赵公明”则更复杂，但几何元素较多，可以采用直接绘制为主的办法。脸谱通常有很多对称元素，所以绘制时，可以只完成一半，再通过镜像工具复制出另一半。6.1.2 关键知识点与设计制作技巧6.1.3 项目设计制作实录6.1.3 项目设计制作实录6.2 数字化再现传统纹样6.2 数字化再现传统纹样通过文物观察将上面的图案进行提取并绘制为数字化图形。 并能自由用到其他地方去。6.2.1 项目需求读解Illustrator中只需将元素拖到色板中，这样只要画出你想要的形状路径，然后单击色板中的图案，它就自动拼接好了，铺满你画的形状。6.2.

31、2 关键知识点与设计制作技巧谢谢主讲：XXXX数字矢量绘图基础 成套图标创作 功能图标什么是功能图标？在界面中传达并具有功能意义存在的图形什么是功能图标？什么是功能图标？功能图标的特点是什么？高度浓缩并快捷传达信息、便于加深记忆v功能图标的特点是什么？化繁为简并保留核心元素功能图标的特点是什么？把抽象和虚拟进行图形表达云彩？备份？功能图标的重要性减少文字阅读的复杂性增加板式布局的清晰性辅助信息识别的功能性帮助用户使用的简易性Aiki006Aiki001Aiki007Aiki002Aiki005Aiki004Aiki009Aiki003Aiki008Aiki00EAiki00GAiki00BAi

32、ki00FAiki00CAiki00AAiki00HAiki00IAiki00D功能图标常用的尺寸16 x 16 | 24 x 24 | 32 x 32 | 48 x 48 | 64 x 64 128 x 128 | 256 x 256 | 512 x 51212 x 12 | 18 x 18 | 72 x 72 | 96 x 96 偶数 + 4的倍数！偶数 + 4的倍数！偶数 + 4的倍数！为什么尽量不要出现奇数？32 x 2 = 6433 x 2 = 6632 x 3 = 9633 x 3 = 99无法居中对齐32 x 1.5 = 4833 x 1.5 = 49.5无法保证不虚功能图标的构

33、成要素识别 颜色 状态是否能让用户看懂是否阅读产生歧义是否增加用户喜爱是否需要颜色辅助是否符合用户习惯是否符合产品风格是否正确表达用途是否提供用户反馈是否干扰用户思考功能图标的构成要素 识别加或减都会严重影响到信息传达的准确度功能图标的构成要素 识别飞行模式不要轻易的天马行空创意你的设计个人中心不要轻易的天马行空创意你的设计功能图标的构成要素 识别设置保持固有形态进行优化设计功能图标的构成要素 识别功能图标的构成要素 颜色使用用户日常生活中已经习惯的颜色功能图标的构成要素 颜色尽可能保持实体物质的相近色功能图标的构成要素 状态用颜色状态来反馈用户的操作功能图标设计思路及技巧收集参考素材定义外形

34、功能图标设计思路及技巧提取元素功能图标设计思路及技巧强化视觉（创意）$功能图标设计思路及技巧功能图标的构成要素 状态用在准确的地方而不是随便用功能图标的构成要素 状态统一规范的状态让用户知道能做什么选中选中不可用未选中未选中不可用功能图标设计中最重要的是易懂、易用功能图标设计时候的注意事项（实操讲解）1）图标清晰满格像素2）倾斜角度尽可能保持453）比例协调4）视觉平衡关于内圆角的算术公式外角半径 边缘高度 = 内角半径8 4 = 4px外角半径 边高/2 = 内角半径8 4/2 = 6px关于命名格式模块_类别_功能_状态Nav_button_message_selAndroid平台不支持“

35、-”，所以用“_”。Ios不需要highlight状态切图，但是Android需要。Disable状态在移动端出现情况较少，其他三种属于必备输出（nor.hig.sel.）功能图标设计时候的注意事项 - 视觉平衡作业设计一套功能图标合集本章作业设计一套图标合集谢谢主讲：XXXX数字矢量绘图基础 成套图标创作 关于色彩图标中颜色使用的重要意义色彩的心理暗示新闻类权威类美食类儿童类女性类自拍类社交类科技类效率类健康类神秘类奢侈类相机类奇葩类辅助类色彩的心理暗示误导性MANWOMANMANWOMANOMG走错了！色彩的心理暗示误导性是否删除牛MO王不可告人的秘密.avi是否删除牛MO王不可告人的秘密

36、.avi确认删除牛MO王不可告人的秘密.avi确认删除牛MO王不可告人的秘密.avi共通性色彩的心理暗示辨别性色彩的心理暗示辨别性色彩的心理暗示辨别性色彩的心理暗示图标配色原则选择准确、合适的颜色色彩的比例要均衡，慎用图片不知如何选择，宁可不要颜色，善用黑白灰从产品中分析设计的优劣势，从而强化自己的设计尽量使用相同色值尽量使用相同色系要么就都灰，要么就都有颜色作业任选一个界面图标进行重新设计，要求必须有颜色谢谢主讲：XXXX数字矢量绘图基础第七章 主题系列图标 生肖图标项目需求解读 主题系列图标可以更能引人注目，强化品牌，扩大影响力，平常生活中最常见的是应该是手机主题图标了。主题商店里提供了数

37、不胜数的主题，风格各异，选择多样。另外还有利用事件、IP 打造的主题、节日等打造的各种主题。 十二生肖文献记载始于东汉，它的起源与动物崇拜有关。十二生肖，又叫属相，是中国与十二地支相配以人出生年份的十二种动物，包括鼠、牛、虎、兔、龙、蛇、马、羊、猴、鸡、狗、猪。每个人都以其出生年的象征动物作为生肖，生肖也称属相，是中国民间计算年龄的方法，也是一种十分古老的纪年法，十二生肖循环一次为一轮。在中国，生肖文化深入人心，融入了人们的生活，甚至从动物上升到神格，受到人们的尊崇和膜拜。只有将自然生灵与文化神格相结合，才构成完整的生肖动物印象。下面就是各种风格的一些十二生肖作品。基本形配色调风格 风格统一意

38、大利设计师Vacaliebres设计的12生肖图单击此处编辑母版标题样式单击此处编辑母版标题样式单击此处编辑母版标题样式学生作品学生作品学生作品小学生作品小学生作品 绘制关键知识点与设计制作技巧要求绘制一套以中国传统文化的十二生肖动物头像为主题的图标，既要体现各个动物的特点，又要保持风格的一致性。 开始设计制作前最重要的是应该了解的是产品背后的背景、产品的功能，更多的类似案例，而不是直接设计。关于生肖的设计作品非常多，而且风格多样。主题系列图标绘制还有一个最大的优点：相同或相似元素多，可以直接复制修改利用，可以大大提升工作效果。设计属于你的生肖图标 大作业：创作一组12生肖图标。 单个规格96

39、*96PX. 终稿保存格式. Ai与.jpg。随时将你做的效果图发至学习群 一起探讨 谢谢主讲：XXXX第8章表情包设计与绘制illustrator矢量绘图设计与制作案例教程（Illustrator CC 2021）8.1项目需求读解 8.2表情包的绘制方法 8.3表情包的绘制实例 8.4 相关知识 在Illustrator里面绘制表情包，和绘制图标、插画等一样，都是通过简单形状的绘制与组合即可得到。 一般微信表情尺寸大小是240 x240px,小一点也可以200 x200 px或者100 x100 px,建议不要超过300X300 px了，太大的话就要单击微信图片才能看到完整的表情图了。微信

40、添加图片大小通常不要超过500KB。所以在Illustrator中绘制我们可以依据这些不成文的规定进行大小设定。用Illustrator把表情包画出来后，最好把图片导出为 GIF或PNG格式的图片，这两种格式支持透明有更好的用户体验。8.1 项目需求读解绘制方法大致分为以下几步：1.确定文案 2.绘制表情3.形象的设计，绘制装表情的容器 4.将表情与容器合成 8.2 表情包的绘制方法 5.对照文案开始创作- 直接经验绘制 素材绘制 ，素材利用6. 生成动态（若只有静态的就不需要这一步）238发呆 发烧 流鼻涕 头疼 咳咳咳 满血复活喜悦 癫狂 愤怒 生气 悲伤 惊讶 自豪 无所谓 绝望 崩溃

41、怒吼 可爱确定文案 8.2 表情包的绘制方法 239绘制表情 _ _ #_# (_) -_-| 8.2 表情包的绘制方法 单击此处编辑母版标题样式单击此处编辑母版文本样式第二级第三级第四级第五级制作表情包 表情包制作过程8.3 表情包的绘制实例 课堂实操表情包是在社交软件活跃之后，形成的一种流行文化，表情包流行于互联网上。表情可以表达多种情绪、状态如：喜悦、高兴、癫狂、愤怒、生气、悲伤、惊讶、自豪、无所谓、绝望、崩溃、怒吼、可爱、发呆、发烧、流鼻涕、头疼、咳咳咳、满血复活等。网上的表情包大致分为四种。一、纯文字的表情包 包括亮闪闪的文字动态文字。二、真人表情包如一些网红表情包和一些影视的GIF动态图。三、一些原创的动画表情包。像网红表情包兔斯基、长草颜团子、乖巧宝宝等（见图8- 19），例如“乖巧宝宝”设计，一套表情包发送量近30亿次。等等。四、人脸和动画相结合的表情包比如蘑菇头（如图8- 20）。利用Illustrator我们更多的是绘制一些偏扁平风格的静态表情包，也可以配合Photoshop等软件继续做成动态表情包。 8.4.1 表情包介绍进入微信聊天界面，单击“+”符号左手边的“表情图”按钮,依次单击“红心”和“设置”按钮。单击“+”法符号