图标设计与制作（全彩慕课版）PPT全套完整教学课件.ppt

掌握2.5D图标的基础知识 掌握2.5D图标的基础设计 掌握2.5D图标的创意设计 学习目标 2.5D图标是由物体的正面、光面和暗面三面组成，模拟3D效果，如图6-1所示。该图标介于3D和2D之间，具有趣味真实、层次丰富的特点。同时由于2.5D图标创作，要求设计师不仅要熟练操作软件，更要掌握素描基础和颜色搭配，因此需要有一定的设计能力才能完全掌握该图标的设计制作。 6.1 2.5D图标的基础知识 2.5D图标示意图 1.空间结构 绘制网格能够更好的把握2.5D图标的空间结构，令图标各个元素的路径和锚点都落在网格的锚点和路径上。同时运用网格，便于规范图标立体效果的一笔笔勾画，常用于制作如冰淇淋等非常规形态的立体效果。 6.2 2.5D图标的基础设计 网格绘制的步骤图 2.确定光源 加入光源感可以让图标更加立体。加入光源后，需要区分图标的明暗面，并且要保证光源的方向和强弱关系是一致的。 6.2 2.5D图标的基础设计 投影关系示意图 3.零件搭建 一个2.5D图标通常会由多个零件组合而成，如果每一个零件都让设计师一笔笔勾画，会大大降低工作效率。因此我们需要借助软件功能，快速实现零件的制作，提高效率。 6.2 2.5D图标的基础设计 3D功能实现立体效果 2.5D描边变化 2.5D色彩变化 2.5D不透明度 课堂案例-制作2.5D图标 6.3 2.5D图标的创意设计 2.5D描边变化图标简洁理性。 6.3.1 2.5D描边变化 2.5D描边变化图标示意图 2.5D色彩变化图标醒目丰富。 6.3.2 2.5D色彩变化 2.5D色彩变化图标示意图 2.5D不透明度图标层次明确。 6.3.3 2.5D不透明度 2.5D不透明度图标示意图 使用直线段工具和旋转命令绘制参考线网格，使用绘图工具、镜像工具、渐变工具、路径查找器命令、变换命令以及3D命令制作2.5D图标，使用文字工具添加文字。 6.3.4 课堂案例-制作2.5D图标 图标最终效果图 使用圆角矩形工具、椭圆工具、钢笔工具和直接选择工具绘制图形，使用路径查找器命令实现布尔运算，使用3D命令制作2.5D图标。 图标最终效果图 6.4 课堂练习-制作2.5D图标 使用圆角矩形工具、椭圆工具、钢笔工具和直接选择工具绘制图形，使用路径查找器命令实现布尔运算，使用3D命令制作2.5D图标。 图标最终效果图 6.5 课后习题-制作2.5D图标 第7章 图标项目设计 本章介绍： 学习图标设计，不是为了单纯的画一组图标，而是要让图标可以应用到真实的项目中。因此，设计师需要系统学习图标应用到项目中的知识点，这样才会发挥好图标的作用。本章对导航栏及其图标设计、标签栏及其图标设计、金刚区及其图标设计以及应用图标进行系统讲解。通过本章的学习，读者可以对图标项目设计有一个基本的认识，有助于高效便利地进行完整的图标设计工作。 掌握认识导航栏及其图标 掌握认识标签栏及其图标 掌握认识金刚区及其图标 掌握认识应用图标 学习目标 导航栏的概念 导航栏的类型 导航栏的规范 课堂案例-制作电商类导航栏图标 7.1 认识导航栏及其图标 导航栏 （Navigation Bar，Navbar），位于App顶部，状态栏下方，提供了位置指示及功能操作。Android中，由于使用的是Material Design设计语言，因此将iOS中的导航栏称之为顶部应用栏（Top App Bar）。 7.1.1 导航栏的概念 iOS导航栏 Android顶部应用栏 1.常规导航栏 ·标题导航栏：标题导航栏是常规导航栏中最基础的一种，主要由标题和操作图标组成。这类导航栏常用于二级详情界面或导航简单的一级界面。 7.1.2 导航栏的类型 造作新家App，一级界面标题导航栏 ·搜索框导航栏：搜索框导航栏是常规导航栏中专门用于搜索功能的导航栏。在标题导航栏的基础之上，增加搜索框，去除导航标题，这类导航栏常用于新闻资讯、交流社区以及娱乐影音等需要进行高频检索的App首页。 7.1.2 导航栏的类型 网易新闻App，搜索框导航栏 ·Tab/分段控件导航栏：Tab和分段控件导航栏都是常规导航栏中有多个选项的导航栏。区别在于分段控件导航栏一般有2~5个可选项，且不能左右滑动，常用于内容较严肃的新闻和理财等类型App；而Tab导航栏的可选项可以扩展很多，并且可以左右滑动切换，常用于内容较活泼的社交和娱乐等类型App。 7.1.2 导航栏的类型 产品经理App，分段控件导航栏 2.通栏导航栏 常用在电商、旅游等界面复杂或是需要烘托氛围的界面中。 7.1.2 导航栏的类型 天天基金App，通栏导航栏 小米有品App，通栏导航栏 3.大标题导航栏 大标题导航栏是导航栏中将标题进行放大的导航栏。这类导航