图标设计与制作（全彩慕课版）（第2版）

本书全面、系统地介绍图标设计的相关知识和技巧，包括初识图标设计、图标绘制方法、线性图标设计、面性图标设计、线面图标设计、2.5D图标设计、图标项目设计、图标验证输出等内容。第1章介绍图标设计的基础知识，第2～8章均设有知识点讲解和课堂案例，知识点讲解部分能够帮助读者系统地了解图标设计的相关知识，课堂案例部分能够帮助读者快速掌握图标设计的相关技能。此外，第2～8章还安排了课堂练习和课后习题，帮助读者巩固和提升图标设计能力。 本书可作为职业院校数字媒体艺术类专业课程的教材，也可供初学者参考。

刘传琳、教授，山东传媒职业学院新闻传播学院。工作28年来一直从事电视新闻工作，采制了大量新闻作品，在中央电视台、山东电视台、潍坊电视台播出。个人牵头创作的作品共获得省级以上新闻奖30多件次，国家级10多件次，代表作品电视新闻《李洪儒：互联网上开花店》获得中国新闻奖二等奖、中国电视奖一等奖。是潍坊市第六批、第八批专业技术拔尖人才；2007年获得山东省富民兴鲁劳动奖章；所带领的部门先后获得全省新闻工作先进集体、全国工人先锋号等荣誉称号。 多年来注重新闻理论研究，围绕电视新闻、新闻理论等方面的研究，有10多篇论文在《中国广播电视学刊》、《青年记者》等刊物发表。 王晓翠、讲师，新闻采编与制作专业负责人。

第 1章　初识图标设计 1.1　图标的基本概念　2 1.2　图标的类型　3 1.2.1　产品图标　3 1.2.2　功能图标　3 1.2.3　装饰图标　4 1.3　图标的风格　5 1.3.1　拟物风格　5 1.3.2　扁平风格　5 1.3.3　3D风格　6 1.3.4　2.5D风格　6 1.4　图标的性格表现　7 1.4.1　圆角的有无及大小　7 1.4.2　描边的粗细　7 1.4.3　颜色的搭配　8 1.5　图标的设计软件　9 1.6　图标的设计原则　9 1.6.1　可识别性　9 1.6.2　视觉统一　10 1.6.3　简洁美观　11 1.6.4　愉悦友好　12 1.7　图标的设计流程　13 第　2章 图标绘制方法 2.1　图标标准尺寸系统　16 2.1.1　尺寸系统　16 2.1.2　图标尺寸　16 2.1.3　图标放大　16 2.1.4　图标布局　16 2.2　图标像素完美　17 2.2.1　图标像素完美的概念　17 2.2.2　实现图标像素完美　17 2.2.3　课堂案例—用软件实现图标像素完美　21 2.3　图标的绘制思路　23 2.3.1　图标结构分解　23 2.3.2　图标绘制工具　24 2.3.3　课堂案例—用纸、笔进行图标结构的分解　25 2.4　布尔运算　26 2.4.1　不同软件的使用　26 2.4.2　不同颜色的使用　26 2.4.3　课堂案例—绘制基础面性图标　27 2.4.4　课堂案例—绘制基础线性图标　30 2.5　图标等比例缩放　34 2.5.1　图标等比例缩放问题　34 2.5.2　图标等比例缩放方法　34 2.5.3　课堂案例—将图标缩放后置入界面　34 2.6　图标的网格系统　35 2.6.1　网格系统的定制意义　35 2.6.2　网格系统的定制规范　36 2.6.3　网格系统的使用方法　36 2.6.4　课堂案例—运用网格系统调整图标　36 2.7　图标的视觉调整　40 2.7.1　重心调整　40 2.7.2　线条调整　40 2.7.3　颜色调整　41 2.7.4　课堂案例—进行图标的重心调整　41 2.7.5　课堂案例—进行图标的线条调整　43 2.7.6　课堂案例—进行图标的颜色调整　44 2.8　课堂练习—制作家居类面性图标　45 2.9　课后习题—制作服饰类线性图标　45 第3章　线性图标设计 3.1　线性图标的基础知识　48 3.2　线性图标的基础设计　48 3.2.1　描边设置　48 3.2.2　圆角设置　50 3.2.3　比例设置　51 3.3　线性图标的创意设计　51 3.3.1　基础线性　51 3.3.2　课堂案例—制作线性圆角 图标　51 3.3.3　基础线性延伸　56 3.3.4　线性断点　57 3.3.5　课堂案例—制作线性断点 图标　58 3.3.6　课堂案例—制作线性叠加 图标　63 3.4　课堂练习—制作线性双色图标　67 3.5　课后习题—制作线性渐变图标　68 第4章　面性图标设计 4.1　面性图标的基础知识　70 4.2　面性图标的基础设计　70 4.2.1　轮廓外形　70 4.2.2　底板　71 4.3　面性图标的创意设计　72 4.3.1　单色面性图标　72 4.3.2　课堂案例—制作单色面性图标　72 4.3.3　基础面性延伸　76 4.3.4　面性多色　77 4.3.5　面性渐变　78 4.3.6　面性叠加　79 4.3.7　课堂案例—制作面性叠加图标　80 4.3.8　面性微质感　86 4.3.9　课堂案例—制作面性微质感图标　86 4.4　课堂练习—制作面性透明度变化图标　105 4.5　课后习题—制作面性渐变图标　105 第5章　线面图标设计 5.1　线面图标的基础知识　108 5.2　线面图标的基础设计　108 5.2.1　填充位置　108 5.2.2　填充比例　109 5.2.3　填充形状　109 5.3　线面图标的创意设计　109 5.3.1　内部填充　109 5.3.2　课堂案例—制作扁平插画图标　111 5.3.3　错位填充　117 5.3.4　课堂案例—制作线面错位填充图标　117 5.3.5　线面拼接　123 5.3.6　课堂案例—制作阴阳填充图标　124 5.4　课堂练习—制作线面双色图标　128 5.5　课后习题—制作MBE线面图标　129 第6章　2.5D图标设计 6.1　2.5D图标的基础知识　131 6.2　2.5D图标的基础设计　131 6.2.1　空间结构　131 6.2.2　确定光源　131 6.2.3　零件搭建　131 6.3　2.5D图标的创意设计　132 6.3.1　2.5D描边变化　132 6.3.2　2.5D色彩变化　133 6.3.3　2.5D不透明度　133 6.3.4　课堂案例—制作2.5D图标　133 6.4　课堂练习—制作2.5D雪糕图标　145 6.5　课后习题—制作2.5D收音机图标　145 第7章　图标项目设计 7.1　认识导航栏及其图标　147 7.1.1　导航栏的概念　147 7.1.2　导航栏的类型　147 7.1.3　导航栏的规范　149 7.1.4　课堂案例—制作电商类导航栏图标　152 7.2　认识标签栏及其图标　160 7.2.1　标签栏的概念　160 7.2.2　标签栏的类型　160 7.2.3　标签栏的规范　162 7.2.4　课堂案例—制作旅游类标签栏图标　167 7.3　认识金刚区及其图标　176 7.3.1　金刚区的概念　176 7.3.2　金刚区的类型　176 7.3.3　金刚区的规范　177 7.3.4　课堂案例—制作旅游类金刚区图标　180 7.4　认识应用图标　190 7.4.1　应用图标的概念　190 7.4.2　应用图标的类型　190 7.4.3　应用图标的规范　191 7.4.4　课堂案例—制作娱乐类应用图标　191 7.5　课堂练习—制作美食类导航栏图标　216 7.6　课后习题—制作美食类标签栏图标　216 第8章　图标验证输出 8.1　图标验证方法　218 8.1.1　含义识别　218 8.1.2　颜色识别　218 8.1.3　风格识别　218 8.1.4　色彩验证　219 8.2　图标切图格式　219 8.3　PNG图标切图　219 8.3.1　切图规范　219 8.3.2　切图尺寸　220 8.3.3　输出尺寸　220 8.3.4　切图方法　221 8.3.5　大小优化　224 8.4　SVG图标切图　224 8.4.1　上传规范　224 8.4.2　上传流程　225 8.5　图标命名规范　225 8.5.1　制定规范的原因　225 8.5.2　命名规则　225 8.5.3　常用命名　226 8.5.4　课堂案例—为服饰类App图标命名　226 8.6　课堂练习—为社交类App图标命名　228 8.7　课后习题—为家居类App图标命名　229