UI界面设计与制作 教案 第2章教案.docx

《UI界面设计与制作 教案 第2章教案.docx》由会员分享，可在线阅读，更多相关《UI界面设计与制作 教案 第2章教案.docx（50页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、教案编号：2 课 题：第2章UI中的图标设计 课 时：8课时 授课类型：讲授+实训工程目标： 掌握线性图标的制作 掌握面性图标的制作 掌握线面图标的制作工程重点： 线性图标的制作 面性图标的制作 线面图标的制作 工程难点： 线性图标的制作 面性图标的制作 线面图标的制作工程技能点：线性图标的制作、面性图标的制作、线面图标的制作工程教学技巧：1 .知识讲解.案例实训页面，按Ctrl+V组合键,将其粘贴到制作旅游类App线性图标页面中，并拖曳复制的网格系统到 适当的位置，效果如下图。(7 )选择圆角矩形工具O,在页面中单击鼠标左键，弹出圆角矩形对话框，选项的 设置如下图。单击确定按钮，出现一个圆角

2、矩形。设置描边色为灰色(153、153、153 ),填充描边，并 设置填充色为无，效果如下图。(8 )选择窗口 描边命令，弹出描边控制面板，将粗细选项设为l.5px , 对齐 描边选项设为使描边内侧对齐，其他选项的设置如下图。“XC猫边三粗细：L5 px v端点： G V边角：I? C。限制：10 x对齐描边：也占效果如下图。(9 )选择窗口 变换命令，弹出变换控制面板，将X选项设为12px ,将丫 选项设为12px ,其他选项的设置如下图。0变换三缩放脚角缩放描边和效果按Enter键确定操作,效果如下图。(1。)选择直线段工具乙，在页面中单击鼠标左键，弹出直线段工具选项对话框，选项的设置如下

3、图。单击确定按钮，出现一条竖线，在属性栏中将描边粗细选项设为1.5px ,按Enter键确定操作，效果如下图。(11 )在变换控制面板中，将X选项设为8px ,将Y选项设为5px ,其他选项的设置如下图。X: 8 px 宽：0 pxY： 5 Px 岛：4 pxA 90 /: 0直线属性：I 4 pxC 90。缩放国角缩放描边和效果按Enter键确定操作,效果如下图。(12 )保持直线选取状态，选择效果 扭曲和变换变换命令，弹出变换效果对话框，在移动选项组中，将水平选项设为4px副本选项设为2 ,其他选项的设置如图所单击确定按钮，效果如下图。选择对象 扩展外观命令，扩展图形的外观，效果如下图。(

4、13 )选择直线段工具/,在页面中单击鼠标左键，弹出直线段工具选项对话框，选项的设置如下图。单击确定按钮，出现一条横线，在属性栏中将描边粗细选项设为1.5px ,按Enter键确定操作，效果如下图。(14 )在变换控制面板中，将X选项设为7.5px，将Y选项设为10px ,其他选项的 设置如下图。C三宽：3px M Y: 10 px 高：0 px/: 0 /: 0直线属性： 1 3 px Co。 y缩放圈角缩放描边和效果按Enter键确定操作,效果如下图。(15 )保持直线选取状态，选择效果 扭曲和变换变换命令，弹出变换效果对话框，在移动选项组中，将水平选项设为4.5px，副本选项设为2 ,其

5、他选项的设置如图单击确定按钮，效果如下图。(16 )保持直线选取状态，选择效果 扭曲和变换 变换命令，弹出如下图对话框。单击应用新效果按钮，弹出变换效果对话框，在移动选项组中，将垂直选项设为3px，副本选项设为2 ,其他选项的设置如下图。单击确定按钮，效果如下图。(17 )选择对象 扩展外观命令，扩展图形的外观，效果如下图。选择选择工具4 ,用框选的方法将图标同时选取，如下图。按住Shift键的同时，单击网格系统将其取消选取，效果如下图。(18 )选择对象路径 轮廓化描边命令，创立对象的描边轮廓，效果如下图。选择窗口 路径查找器命令，弹出路径查找器控制面板，单击联集按钮,如 图所示。生成新的对

6、象，效果如下图。旅游类App线性图标（未选中状态）制作完成。（19）选择画板工具玉，按住Alt+Shift组合键的同时，将画板1垂直向下拖曳到适 当的位置，如下图。loi -1在文件中生成新的画板画板2。选择选择工具卜，选取画板2中的图标，设置填 充色为橘黄色（ 255、151、1）,效果如下图。(20 )选择圆角矩形工具Q ,在页面中单击鼠标左键,弹出圆角矩形对话框，选项的 设置如下图。单击确定按钮，出现一个圆角矩形。设置填充色为橘黄色(255、151、1 )，填充圆角矩 形，并设置描边色为无，效果如下图。(21 )在变换控制面板中，将X”选项设为12px ,将丫选项设为38px ,其他选项

7、的 设置如下图。: 00 /: 0宽：20 px岛：16Px矩形属性：r. c 4 px C 4px 、 gJ 1 4 PX 0 1 4 px )缩放典角缩放描边和效果按Enter键确定操作，效果如下图。(22 )选择窗口 透明度命令，弹出透明度控制面板,将不透明度选项设为30% ,其他选项的设置如下图。0逶明度在图形上单击鼠标右键，在弹出的快捷菜单中选择排列 后移一层命令，如下图。将圆角矩形后移一层，效果如下图。旅游类App线性图标的已选中状态(线面图标)制作 完成。工程过程:（一）课前准备.授课前准备准备好教学用具和教学设备.板书课题：第2章UI中的图标设计工程目标： 掌握线性图标的制作掌

8、握面性图标的制作 掌握线面图标的制作3.课程引入通过课堂案例效果展示引入UI图标设计的概念制作旅游类App线性图标昆制作旅游类App面性图标制作旅游类App线面图标G0。窗首页攻略消息行程我的db S B酒店 机票 火车票 汽车票 门票环境效果图2. 2面性图标线性图标作为ui设计中的常用图标之一，有着整体饱满、形象突出的特点。下面分别从基本 概念、使用场景以及设计要点这三个方面进行线性图标的讲解。2. 2.1基本概念面性图标即填充图标，如下图。面性图标222使用场景面性图标常用于金刚区、面性图标常用于金刚区、内容装饰、标签栏、列表流，如下图。2032 * ns QE口民医保用精丹娟0】l.0

9、.”尊，.tMARAM内容装饰匕免费假喜10万保O Applo为你推荐ET标签栏金刚区标签栏tiani：M列表流满裔蹄面性图标使用场景2. 2. 3设计要点1.挖空比例面性图标挖空比例占20% 30% ,如图所不。面性图标挖空比例示意图2.有无底板单独型图标视觉感知更直观，组合型图标具有层次，相对精致，如下图。越小的图标形体 应该越简单，因此建议单独型图标。图标的尺寸足够大时可采用组合型的图标，并补充图标的细 节。 。 图标有无底板比照图3.细节处理(1)微渐变面性图标的微渐变运用easing插件可以变得更为细腻，如下图,1 1新建渐变形状2)选用插件Easing Gradient预设效果,露

10、 一BH-渐变点预.曲线O3增加渐变色点及曲线 使渐变效果更加自然Easing Gradient插件（针对Sketch）使用效果(2 )透明度面性图标透明度一般设置为60% ,如下图。1使用渐变2复用渐变3透明度60%图标做透明度变化时的设置图标做透明度变化时的设置(3 )弥散投影运用弥散投影可以增加质感，如下图。2将位置适当株1将底板霞制一层，用小至原来的80%3选取适当的羽化/高斯模糊值3选取适当的羽化/高斯模糊值4调节不透雷度，防止投影过制作图标的弥散投影制作图标的弥散投影课堂案例课堂案例制作旅游类App面性图标【案例设计要求】【案例设计要求】1 ,运用软件Photoshop绘制金刚区中

11、酒店图标，设计效果、环境效果如下图。2.图标尺寸：96px ,图标布局:80pxo【案例学习目标】学习使用软件Photoshop绘制旅游类App金刚区中的酒店图标。设计效果图酒店 机票 火车票 汽车票 门票环境效果图【案例知识要点】通过圆角矩形工具、属性面板和布尔运算绘制基础图形，运用渐变工具为图 标添加颜色，通过不透明度选项的设置调整图标不透明度。(1 )按Ctrl+N组合键，弹出新建文档对话框，将宽度设为96像素，高度设为96像素， 分辨率设为72像素/英寸，背景内容设为白色，如下图。单击创立按钮，完成文档新建。(2)选择文件 置入嵌入对象命令，弹出置入嵌入的对象对话框。选择云盘中的ChO

12、2 制作旅游类App面性图标 素材01文件,单击置入按钮，按Enter键确定操作,效果如 图所示，在图层控制面板中生成新的图层并将其命名为网格。(3 )选择圆角矩形工具。，在属性栏的选择工具模式选项中选择形状，将填 充颜色设为橘红色(255、74、67 )，描边颜色设为无，半径选项设置为6像素。在图像窗 口中适当的位置绘制圆角矩形，如下图。在图层控制面板中生成新的形状图层圆角矩形1选择窗口 属性命令，弹出 属性面板,设置如下图。“X属性三口 那才形状属性。像素 。像素 口按Enter键确定操作，效果如下图。(4)在属性栏中将半径选项设置为3像素。按住Shift键的同时，在图像窗口中适当的位置再

13、次绘制一个圆角矩形，在属性面板中进行其他设置，如下图。“X属性三口 那才形状属性00 3像素 3像素 口效果如图所ZF。(5 )单击图层控制面板下方的添加图层样式按钮仪,在弹出的菜单中选择渐变叠 加命令，弹出对话框，单击渐变”选项右侧的点按可编辑渐变按钮弹出渐 变编辑器对话框，在位置选项中分别输入。、50、100三个位置点，分别设置三个位置点颜 色的 RGB 值为 0 ( 249、40、37 50 ( 248、84、53 1 100 ( 245、127、54),如下图。单击确定按钮。返回到渐变叠加对话框，其他选项的设置如下图。单击确定按钮，效果如下图。(6 )选择圆角矩形工具。，在图像窗口中适

14、当的位置绘制圆角矩形，如下图。在图层控制面板中生成新的形状图层圆角矩形2。在属性面板中进行设置，如图标效果如下图。(7 )单击图层控制面板下方的添加图层样式按钮况，在弹出的菜单中选择渐变叠 加命令，弹出对话框,单击渐变选项右侧的点按可编辑渐变按钮 、,弹出渐 变编辑器对话框，在位置选项中分别输入50. 100两个位置点，分别设置两个位置点颜色 的 RGB 值为 50 ( 249、68、48 1 100 ( 248、83、53 ),如下图。单击确定按钮。返回到渐变叠加”对话框，其他选项的设置如下图。单击确定按钮，效果如下图。(8 )在图层控制面板中选中圆角矩形1图层，将其拖曳到圆角矩形2图层的上

15、方,如图所小。度层三Q 翘 V S O T (5) 正常。不透明度：100% V用口 Q 口 鱼效果如下图。(9)选择圆角矩形工具0,在属性栏中将半径选项设置为2像素。在图像窗口中适当的位置绘制圆角矩形，在属性栏中将填充颜色设为白色，描边颜色设为无，在图层 控制面板中生成新的形状图层圆角矩形3。在属性面板中进行其他设置，如下图。效果如下图。在“图层”控制面板中将其不透明度选项设为40% ,如下图。效果如下图。（1。）选择路径选择工具屁，按住Alt+Shift组合键的同时，选中圆角矩形，在图像窗口中将其垂直向下拖曳，复制形状。在属性面板中进行设置，如下图。“X属性三口 那才形状属性00 2像素

16、2像素 口效果如下图。使用相同的方法再次复制一个圆角矩形，在属性面板中进行设置，如下图。“X属性三口 那才形状属性00 2像素 2像素 口效果如下图。(二)课程内容线性图标线性图标作为ui设计中的常用图标之一，有着形象简洁、设计轻盈的特点。下面分别从基本 概念、使用场景以及设计要点这三个方面进行线性图标的讲解。2.1.1 基本概念线性图标即通过统一的线条进行绘制，表达图标的功能，如下图。(2)四钞购苞合93线性图标2.1.2 使用场景线性图标常用于导航栏、金刚区、列表流、分类区、局部操作、标签栏，如下图。值27G 叁录/注册 骞 vWS10R8S 3 口，O余* TOO京勤中。O议9列表流京东

17、金融App15：37r M推浮。广体使用ipad主霍用来？主用东学习社交KE (ilWB)C 9;眄收量0修么 wnawoe0U局部操作情遇/养量核子早期一应该受到视的UH实的案例给我们的是仁量力的捷IL 4个 警察生命无dr杀人犯提国要感寓他的困 *.情愿法界是旗子早期应该受到视的 校育.人生当中要的早期故白，-.全文网易新闻App线性图标使用场景2.1.3 设计要点1.描边粗细(I )描边的数值大小一致，尽量采用整数，如果要用小数的话建议使用05递进。2px :纤细品质，如下图。(11 )选择圆角矩形工具。，按住Shift键的同时，在图像窗口中适当的位置绘制一个圆角矩形，在属性面板中进行其

18、他设置，如下图。“X属性三口 那才形状属性00 2像素 2像素 口效果如下图。(12 )选择潞径选择工具屁，按住Alt+Shift组合键的同时,选中圆角矩形，在图像窗口中将其向下拖曳,进行复制。在属性面板中进行设置,如下图。“X属性三口 那才形状属性00 2像素 2像素 口效果如图所ZF。使用相同的方法再次复制一个圆角矩形，在属性面板中进行设置，如下图。“X属性三口 那才形状属性00 2像素 2像素 口效果如下图。(7 )单击网格图层左侧的眼睛图标0 ,隐藏图层，如下图。 X医层三区口 9 口 Q电效果如下图。旅游类App面性图标制作完成。2. 3线面图标线性图标作为ui设计中的常用图标之一，

19、有着充满活力、形象有趣的特点。下面分别从基本 概念、使用场景以及设计要点这三个方面进行线性图标的讲解。2. 3.1基本概念线面结合图标是线性图标和面性图标的结合，如下图。0PlayerSpicture台lock classify6food图calendar目bank cardcomputernews臼固。messagecamerasettingbicycleGhomefood国personal线面图标2. 3.2使用场景线面图标常用于趣味类产品、弹窗、线面图标常用于趣味类产品、弹窗、空页面、弓I导页，如下图。0146 V北京.iJPAdfU ,tOQExiBGnnj(2 T&Q8*GQ00fi

20、ltlW野 1389人o o-b rnrsm 殳金刚区标签栏线面图标的使用场景2. 3. 3设计要点.内部填充线面图标内部填充可以分别按照30%、80%、100%的填充量进行填充，如下图。S H H二手手机30%二手手机80%二手手机100%不同比例的图标填充.错位填充线面图标错位填充可以按照固定形状和图标形状进行填充，如下图。台台图标形状固定形状1 .3.4课堂案例一制作旅游类App线面图标【案例设计要求】L运用软件Illustrator绘制标签栏中攻略图标，设计效果、环境效果如下图。2 .图标尺寸：24px ,图标布局：20pxo3 .运用网格系统，符合图标绘制规范。【案例学习目标】学习使

21、用软件Illustrator绘制标签栏中行程图标。设计效果图O0O(HD首页攻略消息行程我的环境效果图【案例知识要点】使用x、丫、宽和高工具进行调整使图标符合设计规范，扩展外 观变成真实图像。(1 )按Ctrl+N组合键，弹出新建文档对话框,设置宽度为24px ,高度为24px ,取向为横 向，颜色模式为RGB ,分辨率为72像素/英寸，单击创立按钮，新建一个文件。(2 )选择编辑 首选项 常规命令，弹出首选项对话框，将键盘增量”选项设 为Ipx ,如下图。选择单位选项，切换到相应面板中进行设置，如下图。(3 )选择参考线和网格选项，切换到相应的面板，将网格线间隔选项设为Ipx ,如图 所示，

22、单击确定按钮。(4 )选择视图 显示网格命令，显示网格。选择视图 对齐网格命令，对齐网格。 选择视图 对齐像素命令，对齐像素。(5 )选择文件 翻开命令，弹出翻开对话框，选择云盘中的ChO2 制作旅游类App 线面图标 素材文件，单击翻开按钮，如下图。(6 )选择选择工具4 ,选取网格系统，按Ctrl+C组合键,复制图形。返回到正在编辑的页面，按Ctrl+V组合键,将其粘贴到制作旅游类App线面图标页面中,并拖曳复制的网格系统到 适当的位置，效果如下图。(7 )选择椭圆工具0一在页面中单击鼠标左键，弹出椭圆对话框，选项的设置如图标单击确定按钮，出现一个圆形。设置填充色为橘黄色(255、151、

23、1 ),填充圆形，并设置 描边色为无，效果如下图。(8 )选择窗口 变换命令，弹出变换控制面板，将X选项设为12px ,将丫选项设为12px ,其他选项的设置如下图。“XC。三 : 000。椭WI属性：K-H 20 px g 20 px 工0。u o。R 0。缩放典角缩放描边和效果按Enter键确定操作，效果如下图。(9 )选择窗口 透明度命令，弹出透明度控制面板，将不透明度选项设为30% ,其他选项的设置如下图。效果如下图。(10 )保持圆形的选取状态,按Ctrl+C组合键,复制圆形,按CW+F组合键，原位粘贴圆形,效果如下图。设置描边色为橘黄色( 255、151、1 )，填充描边，并设置填

24、充色为无。在透明度控制面板中，将不透明度选项设为100% ,其他选项的设置如下图。 X0逶明度=正常 不透明度：100%制作蒙版效果如下图。(11 )选择窗口 描边命令，弹出描边控制面板，将粗细选项设为1.5px，对齐 描边”选项设为使描边内侧对齐，其他选项的设置如下图。“XC猫边三粗细：L5 px v端点：(2 U U边角：I? C。限制：10 x对齐描边：也占效果如下图。(12 )选择椭圆工具Q ,在页面中单击鼠标左键，弹出椭圆对话框，选项的设置如下图。单击确定按钮，出现一个椭圆形。在描边控制面板中，将粗细选项设为L5px ,对齐描边选项设为使描边内侧对齐，其他选项的设置如下图。粗细：0

25、L5 pty端点：皆u u边角：r? c c限制：1 x对齐描边：白隹屿效果如下图。(13 )在变换控制面板中，将X”选项设为12px ,将丫选项设为12px ,其他选项的 设置如下图。楠典属性:口缩放W1角缩放描边和效果按Enter键确定操作，效果如下图。(14 )选择对象 变换 旋转命令，弹出旋转对话框，选项的设置如下图。旋转角度(A): 45。预览(?)(复制(C)( 确定)(取消 )猜你喜欢目分类I I ID品味 购物车我的小米有品App底部标签栏目阅读目问答学院招聘我的产品经理App底部标签栏A首页消息课程因简历区我的前程无忧App底部标签栏3px :通用群众，如下图。产后微信通讯录

26、发现微信App底部标签栏目0分类发现消息票牛App底部标签栏QO网校孩子家长大学一起学App底部标签栏&我的Q我的4Px以上：稳重趣味,如下图。好好住App底部标签栏g我的单击确定按钮，效果如下图。(15 )选择剪刀工具兄,，在路径上单击鼠标左键，添加一个锚点，在属性控制面板中，设置X选项为16px中丫选项为3.775px ,如下图。看性储点变换X: 16 Px 宽： Y: 3. 775 Px 高:效果如下图。使用相同的方法再次添加一个锚点，在属性控制面板中，设置X”选项为3.775PX , 丫 选项为16Px ,如下图。效果如下图。(16 )选择选择工具k ,单击被剪切的路径将其选取，如下图

27、。按Delete键将其删除，效果如下图。(17 )按住Shift键的同时，分别单击需要的形状，将两个图形同时选取，如下图。选择对象 路径 轮廓化描边命令，创立对象的描边轮廓，效果如下图。(18 )选择窗口 路径查找器命令，弹出路径查找器控制面板，单击联集按钮,如下图。“X路径查找器三形状模式：生成新的对象，效果如下图。(19 )选择椭圆工具Q ,在页面中单击鼠标左键，弹出椭圆对话框，选项的设置如下图。单击确定按钮，出现一个圆形。设置填充色为橘黄色(255、151、1 )，填充圆形，并设置描边色为无。在变换控制面板中，将“X”选项设为8px，将丫选项设为13px ,其他选项的设置如下图。0变操=

28、X: 8 PX 宽：4 PX獭v 口八4&Y: 13 Px 高：4 px A: 000椭属性：按Enter键确定操作，效果如下图。(20 )使用相同的方法,在页面中单击鼠标左键，弹出椭圆对话框，选项的设置如下图。单击确定按钮，出现一个圆形。在变换控制面板中,将X选项设为15px ,将丫选项设为8px ,其他选项的设置如下图。“XC。三15 px 宽：2 px8 Px 高; 2 pxAA属性二12Px 2 px |Co。 u 0。 y R。0 v #: 0 v按Enter键确定操作,效果如下图。(21 )保持圆形选取状态，选择选择工具k，按住Alt键的同时将圆形向下拖曳到适当的 位置，复制圆形。

29、在变换控制面板中，将X选项设为17px ,将丫选项设为16px ,其他 选项的设置如下图。“XC三A17 px 宽：2 px 16 Px 高; 2 px 0 v #: 0 v属性二12Px 2 px |CO。 属性二12Px 2 px |CO。 u o。 R。按Enter键确定操作，效果如下图。旅游类App线面图标(已选中状态)制作完成。(22 )选择画板工具七，按住Alt+Shift组合键的同时，将画板1垂直向下拖曳到适 当的位置，如下图。在文件中生成新的画板画板2。选择选择工具卜，选中画板2中不需要的圆形, 如下图。按Delete键将其删除，效果如下图。(23 )用框选的方法将图标同时选取

30、，如下图。按住Shift键的同时，单击网格系统将其取消选取，效果如下图。设置填充色为灰色（153、153、153）,填充图形。旅游类App线面图标（未选中状态）制作 完成。2.4课堂练习一制作电商类App线性图标【案例设计要求】L运用软件Illustrator绘制标签栏中购物车图标，设计效果、环境效果如下图。2.图标尺寸：48px ,图标布局：48pxo3运用网格系统，符合图标绘制规范。【案例学习目标】学习使用软件Illustrator绘制标签栏中购物车图标。设计效果图Q给Q即8首页分类发现购物车我的环境效果图【案例知识要点】使用X、丫、宽和高”工具进行调整使图标符合设计规范，扩展外 观变成真

31、实图像。2. 5课后习题一制作餐饮类App面性图标【案例设计要求】1 ,运用软件Illustrator绘制标签栏中订单图标，设计效果、环境效果如下图。2 .图标尺寸：48px ,图标布局：40pxo3 运用网格系统，符合图标绘制规范。【案例学习目标】学习使用软件Illustrator绘制标签栏中订单图标。设计效果图金CPa首页发现订单我的环境效果图【案例知识要点】使用x、Y、宽和高工具进行调整，使图标符合设计规范。D08发现服务视频我宜信财富App底部标签栏0日02首页头条发现我的众安保险App底部标签栏(2 )描边数值如果是奇数应该使用内或者外描边,因为居中的描边会模糊掉，如下图。描边为偶数

32、时粗细：C 8pt对齐描边：0 屿使描边内便对齐粗细：18 Pt对齐描边：也也 4使描边外的对齐粗细：C 8Pt ，对齐描边：0奥6使描边居中对齐和细C 7 Pt对齐描边：0,6粗细：C 7 pt对齐描边：也隹*粗细：C 7 pt对齐描边：隹84使描边内侧对齐使描边外儡对齐使描边居中对齐描边为偶数和奇数时不同对齐描边的示意图(3 )在做闭合路径的线性图标时，通常采用内描边的对齐方式，因为外描边的矢量图形视觉上其实是比实际数值要大，不利于控制图标大小，如下图。粗细：2 8 Pt对齐描边：士 -占粗细：18 Pt对齐描边：也上6使描边内侧对齐使描边外例对齐对齐描边为内描边和外描边的示意图2 .圆角

33、设置圆角的数值大小一致，建议为偶数，不能出现小数。描边2px通常设置2px圆角，如下图。VSDPQ猜你喜欢分类品味购物车我的小米有品App底部标签栏描边3px通常设置4px圆角，如下图。微信通讯录0发现微信App底部标签栏描边4Px以上通常设置无圆角，如下图。Aqa皿g首页装修干货我的好好住App底部标签栏3 .效果处理(1 )渐变在渐变描边中，要保证渐变的方向和强弱关系是一致的，如下图。臼 aQ 己叵1Q已回回渐变一致的图标(2 )叠加叠加效果先将图标拆分成两个局部，然后再调整透明度或调整图层混合模式来呈现出叠 加效果，如下图。人 U 臼Q 07Q 07a叵更改混合模式_/*醺色加深图标的叠

34、加效果课堂案例制作旅游类App线性图标【案例设计要求】环境效果如下图。1 .运用软件Illustrator绘制标签栏中行程，设计效果、2.图标尺寸：24px ,图标布局:20pxo3运用网格系统，符合图标绘制规范。【案例学习目标】学习使用软件Illustrator绘制标签栏中行程图标。设计效果图G0。隆)首页攻略消息行程我的环境效果图【案例知识要点】使用x、Y、宽和高工具进行调整使图标符合设计规范，运用AI 变化工具进行快速复制，扩展外观变成真实图像。(1 )按Ctrl+N组合键，弹出新建文档对话框,设置宽度为24px ,高度为24px ,取向为横 向，颜色模式为RGB ,分辨率为72像素/英

35、寸，单击创立按钮，新建一个文件。(2 )选择编辑 首选项常规命令，弹出首选项对话框，将键盘增量选项设 为Ipx ,如下图。选择单位”选项，切换到相应面板中进行设置，如下图。(3 )选择参考线和网格选项，切换到相应的面板，将网格线间隔选项设为Ipx ,如图 所示，单击确定按钮。(4 )选择视图 显示网格”命令，显示网格。选择视图 对齐网格命令,对齐网格。 选择视图 对齐像素命令，对齐像素。(5 )选择文件 翻开命令，弹出翻开对话框，选择云盘中的ChO2制作旅游类App 线性图标 素材01文件，单击翻开按钮，如下图。(6 )选择选择工具4 ,选取网格系统，按Ctrl+C组合键,复制图形。返回到正在编辑的