图标设计与制作（全彩慕课版）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.大标题导航栏 大标题导航栏是导航栏中将标题进行放大的导航栏。这类导航