_Illustrator平面设计创意与制作项目3.pptx

本章简介：本章简介：图标设计是图标设计是UI设计中重要的组成部设计中重要的组成部分，可以帮助用户更好地理解产品的功分，可以帮助用户更好地理解产品的功能，是营造产品用户体验的关键一环。能，是营造产品用户体验的关键一环。本章以多个图标设计为例，讲解图标的本章以多个图标设计为例，讲解图标的设计方法和制作技巧。设计方法和制作技巧。项目3制作界面元素图标设计学习引导知识目标知识目标能力目标能力目标素养素养目标目标学习目标学习目标1了解图标的概念2掌握图标的类型和设计风格1熟悉图标的设计思路和过程2掌握图标的绘制方法和技巧1培养对图标的设计创意能力2培养对图标的审美与鉴赏能力实训项目实训项目1绘制媒体娱乐App金刚区歌单图标2绘制旅游出行App金刚区兼职图标相关知识：图标设计基础1图标的概念图标的概念图图标标（Icon）是是具具有有明明确确指指代代含含义义的的图图形形。通通过过将将某某个个词词语语或或概概念念设设计计成成形形象象易易辨辨的的图图形形，进进而而降降低低用用户户的的理理解解成成本本、提提高高设设计计的的整整体体美美观观度度。图图标标通通常常和和文文本本相相互互搭搭配配使使用用，两两者者相相互互支支撑撑，共共同同起起到到传传递递其其中所要表达的内容、信息以及意义的作用。中所要表达的内容、信息以及意义的作用。相关知识：图标设计基础2图标的类型图标的类型 产品图标产品图标产产品品图图标标是是体体现现产产品品品品牌牌调调性性和和特特性性的的图图标标，该该类类图图标标通通常常出出现现在在电脑桌面、手机桌面以及电脑桌面、手机桌面以及APP应用市场等综合场景。应用市场等综合场景。相关知识：图标设计基础2图标的类型图标的类型 功能图标功能图标功功能能图图标标是是图图形形化化的的符符号号，具具有有明明确确功功能能，该该类类图图标标通通常常出出现现在在界界面中的导航栏以及标签栏等需要用户进行操作的界面模块。面中的导航栏以及标签栏等需要用户进行操作的界面模块。相关知识：图标设计基础2图标的类型图标的类型 装饰图标装饰图标装装饰饰图图标标用用于于提提升升渲渲染染气气氛氛，更更多多的的是是承承担担视视觉觉性性作作用用，该该类类图图标标通常出现在引导页、空状态、弹窗、通常出现在引导页、空状态、弹窗、404页等页面进行内容点缀。页等页面进行内容点缀。相关知识：图标设计基础3图标的设计风格图标的设计风格 拟物风格拟物风格拟拟物物化化风风格格的的图图标标贴贴近近现现实实，带带有有渐渐变变、高高光光、阴阴影影等等效效果果。iOS6时时代代拟拟物物风风格格到到达达了了流流行行的的巅巅峰峰，现现常常用用于于工工具具类类、游游戏戏类类应应用用图图标。标。相关知识：图标设计基础3图标的设计风格图标的设计风格 扁平风格扁平风格扁扁平平风风格格图图标标与与拟拟物物风风格格图图标标相相反反，很很少少有有渐渐变变、高高光光、阴阴影影等等效效果，自果，自2013年年iOS7推出扁平风格成为了设计的主流趋势，现被广泛运用。推出扁平风格成为了设计的主流趋势，现被广泛运用。相关知识：图标设计基础3图标的设计风格图标的设计风格 3D风格风格3D风风格格的的图图标标立立体体有有层层次次，由由若若干干个个几几何何多多边边体体构构成成，其其制制作作软软件通常为件通常为3D Max和和C4D，常用于游戏中。，常用于游戏中。相关知识：图标设计基础3图标的设计风格图标的设计风格 2.5D风格风格2.5D风风格格的的图图标标是是由由物物体体的的正正面面、光光面面和和暗暗面面三三面面组组成成，模模拟拟3D，常用于引导页、空状态、弹窗。，常用于引导页、空状态、弹窗。任务3.1 绘制媒体娱乐App金刚区歌单图标u任务引入任务引入u设计理念设计理念u任务知识任务知识u任务实施任务实施u扩展实践：绘制电商平台扩展实践：绘制电商平台App金刚区家电图标金刚区家电图标 本本案案例例是是为为媒媒体体娱娱乐乐App制制作作的的金金刚刚区区图图标标，该该App是是一一款款针针对对年年轻轻人人推推出出的的社社交交应应用用，可可以以随随时时随随地地的的和和老老朋朋友友联联系系，还还可可以以通通过过直直播播短短视视频频结结交交新新的的朋朋友友。图图标标旨旨在在帮帮助助用用户户识识别别App各各大大功功能能，能能够够快快速上手，因此设计要求符合速上手，因此设计要求符合App的定位和场景需求。的定位和场景需求。3.1.1 任务引入 在在设设计计绘绘制制过过程程中中，使使用用同同色色系系的的背背景景承承托托主主体体，微微渐渐变变的的面面型型图图标标整整体体饱饱满满、形形象象突突出出具具有有光光影影效效果果，抓抓住住用用户户的的视视线线。图图标标设设计计表表意意准准确确，能能够够快快速速传传达达准准确确的的信信息息，整整体体设设计计简简洁洁美美观观，细细节节精精巧巧在展现出图标主题的同时，增加活泼性，让人印象深刻。在展现出图标主题的同时，增加活泼性，让人印象深刻。3.1.2 设计理念效果图1 1绘制绘制矩形和圆角矩形矩形和圆角矩形u使用鼠标绘制矩形使用鼠标绘制矩形u精确绘制矩形精确绘制矩形u使用鼠标绘制圆角矩形使用鼠标绘制圆角矩形u精确绘制圆角矩形精确绘制圆角矩形u使用使用“变换变换”控制面板制作实时转角控制面板制作实时转角u使用直接拖曳制作实时转角使用直接拖曳制作实时转角3.1.3 任务知识2 2绘制绘制椭圆形和圆形椭圆形和圆形u使用鼠标绘制椭圆形使用鼠标绘制椭圆形u精确绘制椭圆形精确绘制椭圆形u使用使用“变换变换”控制面板制作饼图控制面板制作饼图u使用直接拖曳制作饼图使用直接拖曳制作饼图u使用直接选择工具调整饼图转角使用直接选择工具调整饼图转角3.1.3 任务知识3 3绘制绘制多边形多边形u使用鼠标绘制多边形使用鼠标绘制多边形u精确绘制多边形精确绘制多边形u使用直接拖曳增加或减少多边形边数使用直接拖曳增加或减少多边形边数u使用使用“变换变换”控制面板制作实时转角控制面板制作实时转角3.1.3 任务知识4 4绘制绘制星形星形u使用鼠标绘制星形使用鼠标绘制星形u精确绘制星形精确绘制星形3.1.3 任务知识3.1.3 任务知识5 5使用图案填充使用图案填充 图图案案填填充充是是绘绘制制图图形形的的重重要要手手段段，使使用用合合适适的的图图案案填填充充可可以以使使绘绘制制的的图图形形更加生动形象。更加生动形象。选选择择“窗窗口口 色色板板库库 图图案案”命命令令，可可以以选选择择自自然然、装装饰饰等等多多种种图图案案填填充图形。充图形。6.6.建立渐变网格建立渐变网格 应应用用渐渐变变网网格格功功能能可可以以制制作作出出图图形形颜颜色色细细微微之之处处的的变变化化，并并且且易易于于控控制制图图形颜色。使用渐变网格可以对图形应用多个方向、多种颜色的渐变填充。形颜色。使用渐变网格可以对图形应用多个方向、多种颜色的渐变填充。3.1.3 任务知识u使用网格工具建立渐变网格使用网格工具建立渐变网格u使用使用“创建渐变网格创建渐变网格”命令创建渐变网格命令创建渐变网格7.7.编辑渐变网格编辑渐变网格3.1.3 任务知识u添加网格点添加网格点u删除网格点删除网格点u编辑网格颜色编辑网格颜色123.1.4 任务实施3453.1.5 扩展实践：绘制电商平台App金刚区家电图标 使用圆角矩形工具、描边控制面板、椭圆工具、矩形工具和使用圆角矩形工具、描边控制面板、椭圆工具、矩形工具和变换控制面板绘制洗衣机外形和功能按钮；使用椭圆工具、直线变换控制面板绘制洗衣机外形和功能按钮；使用椭圆工具、直线段工具和描边控制面板绘制洗衣机滚筒。段工具和描边控制面板绘制洗衣机滚筒。效果图任务3.2 绘制旅游出行App金刚区兼职图标u任务引入任务引入u设计理念设计理念u任务知识任务知识 u任务实施任务实施u扩展实践：绘制食品餐饮扩展实践：绘制食品餐饮App产品图标产品图标 本本案案例例是是为为旅旅游游出出行行AppApp制制作作的的金金刚刚区区图图标标，该该AppApp是是综综合合性性旅旅行行服服务务平平台台，可可以以随随时时随随地地向向用用户户提提供供集集酒酒店店预预订订、旅旅游游度度假假及及兼兼职职资资讯讯在在内内的的全全方方位位旅旅行行服服务务。图图标标旨旨在在帮帮助助出出行行人人员员介介绍绍各各种种旅旅行行途途中中的的兼兼职职工工作作、提提供供一一切切符符合合需需求求的的岗岗位位需需求求。要要求求设设计计应应符符合合AppApp的的定定位和场景需求。位和场景需求。3.2.1 任务引入 在在设设计计绘绘制制过过程程中中，使使用用纯纯色色背背景景突突出出主主体体，微微渐渐变变的的面面型型图图标标整整体体饱饱满满、形形象象突突出出具具有有光光影影效效果果，抓抓住住读读者者的的视视线线。图图标标设设计计表表意意准准确确，能能够够快快速速传传达达准准确确的的信信息息，整整体体设设计计简简洁洁美美观观，细细节节精精巧巧在在展展现现出出图图标标主题的同时，增加活泼性，让人印象深刻。主题的同时，增加活泼性，让人印象深刻。3.2.2 设计理念效果图1.1.对象的选取对象的选取编编辑辑一一个个对对象象之之前前，首首先先要要选选中中这这个个对对象象。对对象象刚刚建建立立时时一一般般呈呈选选取取状状态态，对对象象的的周周围围出出现现矩矩形形圈圈选选框框，矩矩形形圈圈选选框框是是由由8 8个个控控制制手手柄柄组组成成的的，对对象象的的中中心心有有一个一个“”“”形的中心标记。形的中心标记。当当选选取取多多个个对对象象时时，可可以以多多个个对对象象共共有有1 1个个矩矩形形圈圈选选框框。要要取取消消对对象象的的选选取取状状态，只要在绘图页面上的其他位置单击即可。态，只要在绘图页面上的其他位置单击即可。3.2.3 任务知识u使用选择工具选取对象使用选择工具选取对象u使用直接选择工具选取对象使用直接选择工具选取对象2.2.对象的比例缩放、移动和镜像对象的比例缩放、移动和镜像 3.2.3 任务知识u对象的缩放：使用工具箱中的工具比例缩放对象、使用对象的缩放：使用工具箱中的工具比例缩放对象、使用“变换变换”控制面板成比例缩放对象、使用菜单命令缩放对象、使用鼠标右控制面板成比例缩放对象、使用菜单命令缩放对象、使用鼠标右键的弹出式命令缩放对象。键的弹出式命令缩放对象。u对象的移动：使用工具箱中的工具和键盘移动对象、使用对象的移动：使用工具箱中的工具和键盘移动对象、使用“变换变换”控制面板移动对象、使用菜单命令移动对象。控制面板移动对象、使用菜单命令移动对象。u对象的镜像：使用工具箱中的工具镜像对象、使用对象的镜像：使用工具箱中的工具镜像对象、使用“选择选择”工具工具镜像对象、使用菜单命令镜像对象。镜像对象、使用菜单命令镜像对象。3.3.对象的旋转和倾斜变形对象的旋转和倾斜变形3.2.3 任务知识u对象的旋转：使用工具箱中的工具旋转对象、使用对象的旋转：使用工具箱中的工具旋转对象、使用“变换变换”控制控制面板旋转对象、使用菜单命令旋转对象。面板旋转对象、使用菜单命令旋转对象。u对象的倾斜：使用工具箱中的工具倾斜对象、使用对象的倾斜：使用工具箱中的工具倾斜对象、使用“变换变换”控制控制面板倾斜对象、使用菜单命令倾斜对象。面板倾斜对象、使用菜单命令倾斜对象。4.4.使用使用“路径查找器路径查找器”控制面板编辑对象控制面板编辑对象3.2.3 任务知识u认识认识“路径查找器路径查找器”控制面板的按钮：控制面板的按钮：在在“路径查找器路径查找器”控制面板的控制面板的“形状模式形状模式”选项组中有选项组中有5个按钮，个按钮，从左至右分别是从左至右分别是“联集联集”按钮、按钮、“减去顶层减去顶层”按钮、按钮、“交集交集”按钮、按钮、“差集差集”按钮和按钮和“扩展扩展”按钮。按钮。在在“路径查找器路径查找器”选项组中有选项组中有6个按钮，从左至右分别是个按钮，从左至右分别是“分割分割”按钮、按钮、“修边修边”按钮、按钮、“合并合并”按钮、按钮、“裁剪裁剪”按钮、按钮、“轮廓轮廓”按按钮和钮和“减去后方对象减去后方对象”按钮。按钮。u使用使用“路径查找器路径查找器”控制面板控制面板5.5.使用使用“描边描边”控制面板控制面板 描描边边其其实实就就是是对对象象的的描描边边线线，对对描描边边进进行行填填充充时时，还还可可以以对对其其进进行行一一定定的的设置，如更改描边的形状、粗细以及设置为虚线描边等。设置，如更改描边的形状、粗细以及设置为虚线描边等。选选择择“窗窗口口 描描边边”命命令令（组组合合键键为为Ctrl+F10Ctrl+F10），弹弹出出“描描边边”控控制制面面板。板。“描边描边”控制面板主要用来设置对象描边的属性，如粗细、形状等。控制面板主要用来设置对象描边的属性，如粗细、形状等。3.2.3 任务知识123.2.4 任务实施343.2.5 扩展实践：绘制食品餐饮App产品图标 使用圆角矩形工具、渐变工具、钢笔工具、矩形工具、椭圆工具和变使用圆角矩形工具、渐变工具、钢笔工具、矩形工具、椭圆工具和变换控制面板绘制美食图标。换控制面板绘制美食图标。效果图任务3.3 项目演练绘制家居装修App金刚区商店图标u任务引入任务引入u设计理念设计理念3.3.1 任务引入座儿家具座儿家具App是专门销售现代家具的平台，包括沙发、橱柜、双是专门销售现代家具的平台，包括沙发、橱柜、双人床等日常家具。平台中的家具以现代、实用、百搭的价值主张广受人床等日常家具。平台中的家具以现代、实用、百搭的价值主张广受好评。本例是为座儿家具好评。本例是为座儿家具App绘制金刚区图标，要求根据品牌的调性、绘制金刚区图标，要求根据品牌的调性、产品的功能以及场景应用等因素设计一款微拟物图标。产品的功能以及场景应用等因素设计一款微拟物图标。3.3.2 设计理念在设计绘制过程中，使用样式多样化的基础图形叠加体现出品牌的在设计绘制过程中，使用样式多样化的基础图形叠加体现出品牌的多元化和个性化，即带给用户带来视觉上的冲击力，也体现了图标生动多元化和个性化，即带给用户带来视觉上的冲击力，也体现了图标生动的形象；图标整体色彩丰富多样，表现形式层次分明，具有吸引力。的形象；图标整体色彩丰富多样，表现形式层次分明，具有吸引力。效果图