计算机辅助平面设计第五章用户界面设计课件.ppt

1、第五章用户界面设计第五章用户界面设计2本章导读 UI 即user interface（用户界面）的简称。UI 设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI 设计不仅使软件变得有个性、有品位，还可使软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。从字面上看，UI 由用户与界面两个部分组成，但实际上还包括用户与界面之间的交互关系。学习目标 通过对UI 设计图标的基本原则和实例的学习，对UI 设计有一个初步的认识，应能鉴UI 设计图标的优劣，基本掌握UI 图标设计的实用功能与设计美感兼顾的原则。第一节用户界面设计的方向和原则一、用户界面设计的方向一、用户界面设计的方向

2、近几年，UI 这个新兴词在设计领域诞生，在短短的几年时间里UI 设计师越来越多，拥有UI 设计部门的企业也越来越多，各大院校也设立了与UI 设计相关的专业和课程。UI 设计主要有三个方向，即用户研究、交互设计、界面设计。1.用户研究用户研究 用户研究包含两个方面：一是可用性工程学（usability engineering），研究如何提高产品的可用性，使系统的设计更容易被人使用、学习和记忆；二是通过可用性工程学的研究，发掘用户的潜在需求，为技术创新提供另一种思路和方法。3 用户研究是一个跨学科的专业，涉及可用性工程学、人类功效学、心理学、市场研究学、教育学、设计学等学科。用户研究技术是站在人文

3、学科的角度来研究产品，站在用户的角度介入到产品的开发和设计中。用户研究通过对用户的工作环境、产品的使用习惯等进行研究，使得在产品开发的前期能够将用户对于产品功能的期望、对设计和外观方面的要求融入产品的开发过程中去，从而帮助企业完善产品设计或者探索一个新产品概念。用户研究是得到用户需求和反馈的途径，也是检验界面与交互设计是否合理的重要标准2.交互设计交互设计 交互设计是指人与机之间的交互工程，在过去交互设计也由程序员来做，但程序员擅长编码，而不善于与最终用户交互。因此，很多软件虽然功能比较齐全，但是在交互方面的设计很粗糙，烦琐难用，学习困难。如使用这样的软件，不是使人聪明与进步，而是让人感到愚弄

4、与羞辱。许多人因为不能操作计算机软件而下岗失业，这样的交互使计算机成为让人恐惧的科技怪兽。于是人们把交互设计从程序员的工作中分离出来而单独设为一个学科，也就是人机交互设计。其目的在于加强软件的易用、易学、易理解，使计算机真正成为为人类服务的工具。3.界面设计界面设计 在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人被称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点。4一个友好、美观的界面会给人带来舒适的视觉享受，拉近人与计算机的距离，为商家创造卖点。界面设计不是单纯的美术绘画，需要定位使用者、使用环境、使用方式并为最终用户而设计，是纯粹的科学性

5、的艺术设计。检验一个界面的标准，既不是某个项目开发组领导的意见，也不是项目成员投票的结果，而是最终用户的感受。所以界面设计应与用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。界面设计应坚持以用户体验为中心的设计原则，界面直观、简洁，操作方便快捷，用户接触软件后对界面上对应的功能一目了然，不需要太多培训就可以方便地使用本应用系统。字体保持字体及颜色应一致，避免一个主题出现多种字体；对不可修改的字段，统一用灰色文字显示。保持页面内元素对齐方式的一致，如无特殊情况应避免同一页面中出现多种数据对齐方式。在包含必填项与选填项的页面中，必须在必填项旁边给出醒目标识（*）。各类型数据输入需限制

6、文本类型，并做格式校验，如电话号码输入时只允许输入数字，邮箱地址需要包含 等，在用户输入有误时给出明确的提示。对可单击的按钮、链接需要切换鼠标手势至手型；保持功能及内容描述的一致，避免同一功能的描述使用多个词汇，如编辑和修改、新增和增加、删除和清除混用等。在项目开发阶段宜建立一个产品词典，其包括产品中常用的术语及描述，设计或开发人员应严格按照产品词典中的术语词汇来展示文字信息。二、用户界面设计的原则二、用户界面设计的原则UI 设计的原则如下：1.准确性原则准确性原则使用一致的标记、标准缩写和颜色，显示信息的含义应非常明确，用户无须再参考其他信息源。5显示有意义的出错信息，而不是单纯的程序错误代

7、码。避免使用文本输入框来放置不可编辑的文字内容，不要将文本输入框当成标签使用。使用缩进和文本来辅助理解。使用用户语言词汇，而不是单纯的专业计算机术语。高效地使用显示器的显示空间，但应避免空间过于拥挤。保持语言的一致性，如“确定”对应“取消”，“是”对应“否”。2.布局合理化原则布局合理化原则 在进行UI 设计时需要充分考虑布局的合理化问题，遵循用户从上而下，自左向右浏览、操作的习惯，避免常用业务功能按键排列过于分散，而造成用户鼠标移动距离过长的弊端。多做“减法”运算，将不常用的功能区块隐藏，以保持界面的简洁，使用户专注于主要业务操作流程，有利于提高软件的易用性及可用性。第二节记事本APP 图标

8、设计 本节将制作手机中拟物化APP 图标（一枚记事本APP 图标）。在制作过程中可以掌握编辑、定义图案的技巧，可以应用到网页、手机界面的背景中。通过“添加杂色”与“动感模糊”制作纹理效果；通过学习“滤镜”与“图层样式”的应用方法，做出逼真的拟物效果。1.新建文件新建文件 在Photoshop CS6 中新建文件，其名称为“记事本”，大小为520 像素520 像素，颜色模式为RGB，分辨率为72 dpi。62.对背景应用渐变对背景应用渐变 在背景图层上方新建图层，单击“创建新的填充或调整图层”按钮，在弹出的下拉列表框中选择“渐变”选项，弹出“渐变编辑器”窗口（图5-2），按照图示进行设置，完成后

9、单击“确定”按钮，得到“渐变填充1”图层，渐变填充的具体设置如图5-1 所示。渐变颜色的设置如图5-2 所示。图5-1“渐变填充”对话框图5-2“渐变编辑器”窗口注：（R：70，G：38，B：19）（R：139，G：112，B：92）图5-3 对2 像素2 像素的矩形选区填充白色73.为背景添加图案为背景添加图案 为背景添加方格形状的图案，使背景更丰富。首先新建大小为3 像素3 像素的文件，放大到3 200 倍并填充黑色，然后在画面中创建宽为2 像素、高为2 像素的矩形选区，并填充白色，如图5-3 所示。取消选区并执行“编辑”“定义图案”命令，设置图案的名称为“方格”后单击“确定”按钮。返回到

10、记事本文件，双击“渐变填充1”图层，打开“图层样式“对话框，选择“图案叠加”选项，添加定义好的方格图案，具体设置如图5-4 所示。添加图层样式后的背景效果及100状态下的细节如图5-5 所示图5-4“图层叠加”选项卡图5-5 添加图层样式后的背景效果及100%状态下的细节84.为背景增加光感为背景增加光感 下面为背景增加光感，使背景更形象生动。在图层上方新建图层并命名为light，使用椭圆选框工具在画面中绘制一个正圆选框，如图5-6 所示。使用渐变工具，使颜色由白色到透明渐变，渐变类型为径向渐变，在圆形选框中心向下拖动渐变工具，取消选区，将light 图层的“图层模式”设置为“叠加”，图层不透

11、明度调整为50，如图5-7 所示。图5-6 圆形选取图5-7 添加渐变后的效果95.绘制图标底座顶部绘制图标底座顶部在画面中心位置绘制圆角为35 像素的圆角正方形，双击“圆角矩形1”图层，添加图层样式，选择“渐变叠加”选项，具体的设置如图5-8 所示，渐变颜色设置如图5-9 所示。图5-8 圆角正方形“渐变叠加”参数设置图5-9“渐变编辑器”参数设置注：（R：105，G：53，B：25）（R：175，G：99，B：43）10 选择“内阴影”选项，将混合模式设为“线性减淡”，不透明度设为20%，距离、阻塞均为0，大小为10，如图5-10 所示。图5-10“内阴影”参数设置11 选择“内发光”选项

12、，将混合模式为“线性减淡”，不透明度设为30%，大小为2 像素，具体设置如图5-11 所示。图5-11“内发光”参数设置126.制作木材质制作木材质 在“圆角矩形1”图层上方新建图层并将其命名为“木材质1”，使用矩形选框工具绘制一个正方形选框，并为其填充黑色，取消选区，如图5-12 所示。执行“滤镜”“杂色”“添加杂色”命令，打开“添加杂色”对话框，具体的设置如图5-13所示。执行“滤镜”“模糊”“动感模糊”命令，打开“动感模糊”对话框，具体设置如图5-14所示。图5-12填充黑色选框图5-13“添加杂色“参数设置图5-14“动感模糊”参数设置13 为调出木纹颜色，执行“图像”“调整”“色彩平

13、衡”命令，打开“色彩平衡”对话框，具体的设置如图5-15 所示。为加强对比度，执行“图像”“调整”“色阶”命令，打开“色阶”对话框。其设置如图5-16所示。图5-15“色彩平衡”参数设置图5-16“色阶”参数设置14 最后，去除圆角矩形以外的多余纹理，按Ctrl 键并单击“圆角矩形1”图层缩略图，将圆角矩形载入选区，选择“木材质1”图层，按快捷键Ctrl+Shift+I 反选，再按Delete 键删除多余纹理，取消选区。其效果如图5-17 所示。图5-17圆角矩形最终的效果7.制作凹槽描边制作凹槽描边 选择圆角矩形工具，绘制一个圆角为33 像素的正圆角矩形，得到“圆角矩形2”图层，双击“圆角矩

14、形2”图层，弹出“图层样式”对话框，选择“混合选项：默认”选项，将填充不透明度调整为0；选择“描边”选项，其具体设置如图5-18 所示。图5-18“描边”参数设置图5-18“描边”参数设置158.制作凹槽制作凹槽复制“圆角矩形2”图层，在得到的图层上右击，再在弹出的快捷菜单中选择“清除图层样式”选项，然后在图层上双击，打开“图层样式”对话框，将“混合选项：默认”选项中的“填充不透明度”设置为0。选择“内阴影”选项，具体设置如图5-19 所示。图5-19正圆角矩形“内阴影”参数设置16为了体现凹槽的边缘，选择 外发光 选项，具体设置图5-20 所示。图5-20正圆角矩形“外发光”参数设置17为了

15、加深凹槽的阴影部分，选择“内发光”选项，具体设置如图5-21 所示。图5-21正圆角矩形“内发光”参数设置18为了加深凹槽内阴影的层次感，选择“描边”选项，具体设置如图5-22 所示图5-22正圆角矩形“描边”参数设置19为添加凹槽的高光，选择 投影 选项，其具体设置和效果如图5-23、图5-24 所示图5-23“投影”参数设置图5-24处理边框后的效果209.制作图标的底部制作图标的底部 复制“圆角矩形1”图层，并将其命名为bottom，将bottom 图层放至“圆角矩形1”图层的下方，并清除图层样式。然后双击bottom 图层，弹出“图层样式”对话框，选择“颜色叠加”选项，设置颜色值为R：

16、128，G：56，B：14，具体设置如图5-25所示。图5-25“颜色叠加”设置21 选择“渐变叠加”选项，设置渐变颜色为1（R：109，G：47，B：11），2（R：250，G：131，B：28），3（R：142，G：62，B：16），4（R：109，G：47，B：11），5（R：142，G：62，B：16），6（R：250，G：131，B：28），7（R：109，G：47，B：11），具体设置如图5-26 所示。图5-26“渐变叠加”设置22 选择“内阴影”选项，将混合模式设为“线性减淡”，不透明度设为20%，角度为90，距离、阻塞均为0，大小为10 像素，杂色为0。再选择“投影”选项，具

17、体设置如图5-27 所示。图5-27“投影”参数设置23 最后，复制“木材质1”图层并将其命名为“木材质2”，然后将其放到bottom 图层上方，其效果如图5-28 所示。10.制作笔记本内页制作笔记本内页 返回图层最上方，使用圆角矩形工具在凹槽内绘制圆角半径为33 像素的正圆角矩形，并将其命名为“内页1”，设置其颜色数值为R：233，G：233，B：233。其效果如图5-29 所示。.复制“内页1”图层，得到“内页1”副本图层，按快捷键Ctrl+T 调出“变换”命令，向上缩小图形的高度，并打开“图层样式”对话框，选择“投影”选项，将不透明度设为55%，角度为90，距离为2 像素，扩展为0，大

18、小为2 像素，得到图5-30 所示的效果。依照以上思路，复制两遍“内页1”副本图层，并调整这两个图层的高度。图5-29添加内页图层后的效果图5-30最终的效果图5-28复制图层后的效果2411.制作翻页效果制作翻页效果 使用钢笔工具绘制内页右下角页角的翻页图形，并将图层命名为“翻页”，双击该图层，打开“图层样式”对话框，设置“外发光”选项，具体设置如图5-31 所示。图5-31设置“外发光”选项25 在“翻页”图层下方新建名为 翻页投影 的图层，使用钢笔工具抠出“翻页投影”选区，选择渐变工具，并设置为黑白渐变，渐变类型为 线性渐变，在选区从左上角向右下角拖动渐变工具，最后将“翻页阴影“图层模式

19、设为“正片叠底”，不透明度设为67%。为增加效果，可用加深、减淡工具增加厚度感，得到图5-32 所示的效果。12.制作封面磨砂效果制作封面磨砂效果 下面来制作笔记本封面的磨砂效果。复制“内页1”图层并将其命名为“质感”，将其放至图层最上方，首先清除图层样式，然后执行“滤镜”“杂色”“添加杂色”命令，打开“添加杂色”对话框，设置数量为100%，选择“高斯分布”，并将图层的不透明度设为5%，得到图5-33 所示的效果。图5-32添加投影后的效果图5-33添加杂色后的效果2613.制作封面磨损效果制作封面磨损效果 新建图层，并将其命名为“磨损”，使用画笔工具，调整画笔的大小，颜色为白色，硬度为0。在

20、封面范围内涂抹，然后执行“滤镜”“模糊”“高斯模糊”命令，设置模糊半径为2 像素，图层不透明度为60%。其效果如图5-34 所示。14.制作封面装饰图形制作封面装饰图形1）制作封面的左边条 使用圆角矩形工具绘制圆角半径为33 像素的正圆角矩形，颜色数值为R：191，G：70，B：41，结合使用钢笔工具对节点进行调整，效果如图5-35 所示。2）制作封面装饰条 新建图层并将其命名为“横条”，使用铅笔工具，调整铅笔的颜色为白色。在封面左边红色区域绘制白色图5-34添加磨损后的效果图5-35添加封面左边条后的效果图5-36添加封面装饰条后的效果27第三节蓝色苹果QuickTime 图标设计 在本案例

21、的实施过程中，使用椭圆工具和钢笔工具绘制外轮廓，再用渐变颜色填充表现图标的质感，最后为图标添加投影。（1）在Illustrator 中新建一文档，具体设置如图5-37 所示。（2）执行“视图”“显示网格”命令，显示风格。然后执行“视图”“对齐网格”命令，如图5-38所示。（3）执行“编辑”“首选项”“参考线和网格”命令，在弹出的“首选项”对话框中设置网格线的间隔为5 像素，次分隔线改为1，如图5-39 所示。这些设置为后面的制作过程提供了便利。图5-38“视图”菜单栏28图5-39“参考线和网格”设置图5-37新建文档设置29（4）使用椭圆工具，并按Shift 键，绘制一个半径为420 像素的

22、圆形，将填充颜色关掉，设置描边粗细为85 pt，将对齐描边方式改为“使描边内侧对齐”，再执行“对象”“扩展外观”命令，如图5-40、图5-41 所示。图5-40修改描边的对齐方式图5-41“扩展外观”命令30（5）执行“编辑”“首选项”“参考线和网格”命令，重新设定“网格线的间隔”为2.5像素，并且在“网格线间隔”框内输入2.5。使用矩形工具绘制一个95 像素175.5 像素的矩形。填充任一颜色，然后执行“对象”“路径”“添加锚点”命令，如图5-42 所示。使用直接选择工具选中底边上的左锚点和右锚点，然后向上移动47.5 像素（按住Shift 键可选中多个锚点）。其效果图5-43 所示。然后执

23、行“对象”“变换”“旋转”命令，在弹出的“旋转”对话框的相应文本框中输入45，然后单击“确定”按钮。执行果”“风化”“圆角”命令，在弹出的“圆角”对话框中输入圆角半径3 像素，然后单击“确定”按钮，如图5-44 所示。最后执行“对象”“扩展外观”命令。（6）将上述两个图形放置在一起，全选两个图形，打开“路径查找器”面板，选择“联集”选项，如图5-45 所示。图5-45进行联集后的效果图5-43图标制作样式31图5-42对象菜单下的“添加锚点”命令图5-44效果菜单下的“圆角”命令32（7）现在给图形上色，首先确认“外观”面板是开启状态。选择形状，填充颜色值为R：8，G：145，B：228，如图

24、5-46 所示。选择这个填充（在“外观”面板中选择），然后执行“效果”“风格化”“内发光”命令，打开“内发光”对话框，具体设置如图5-47 所示。图5-46设置填充颜色图5-47“内发光”参数设置一33 （8）在“外观”面板中添加一个新的填色，如图5-48 所示。在新的填色上填充渐变色，RGB 为（10，206，255）和（8，145，228）。再次增加一个新的填色，RGB 为（0，83，216）和（8，145，228），角度为-90。再增加一个新的填色，填充径向渐变RGB 为（0，30，157）和（8，145，228），不透明度为70%。再增加最后一个新的填色，填充径向渐变RGB 为（0，3

25、0，157）和（8，145，228），如图5-49 所示。执行“效果”“风格化”“内发光”命令，打开“内发光”对话框，设置如图5-50 所示。图5-48添加新填色图5-49在“外观”面板中添加颜色图5-50“内发光”参数设置二34（9）执行“编辑”“首选项”“参考线和网格”命令，在“网格线间隔”文本框内输入5。使用矩形工具绘制一个60 像素260 像素的矩形，应用 30 像素圆角效果（执行“效果”“风格化”“圆角”命令），然后执行“对象”“扩展外观”命令，得到图5-51 所示的图形。使用矩形工具绘制一个小矩形，然后选择它和圆角矩形，单击“路径查找器”面板里的“减去顶层”按钮，如图5-52 所示

26、。然后执行“对象”“路径”“添加锚点”命令。使用直接选择工具选中上边的中间锚点，向上移动5 像素。然后选择转换锚点工具（按快捷键为Shift+C），单击锚点向右拖拉，拖拉后这个锚点就有了圆弧的效果。选择形状，然后复制它（按快捷键Ctrl+C 或Ctrl+F），选择副本，向下移动45 像素。选择这2 个形状，然后单击“路径查找器”面板中的“分割”按钮，其效果如图5-53 所示。图5-51圆角化的图形图5-52“减去顶层“按钮图5-53删除多余部分后的效果35（10）在分割后的图形上将最上面的部分填充为白色，并增加两个渐变填充，两个渐变RGB 分别为（179，179，179）和（255，255，2

27、55），得到图5-54 所示的效果。（11）给下半部分添加渐变填充，RGB 为（20，206，255）和（8，145，228），得到图5-55 所示的效果。（12）复制蓝色的形状，然后使用矩形工具绘制蓝色填充的矩形，然后选择它和蓝色形状副本，单击“路径查找器”面板中的“交集”按钮，对得到的形状填充线性渐变，RGB 为（155，255，255）和（255，255，255），然后新增一个填充，应用同样的线性渐变；选择这2 个填充，设置降低不透明度为30%。最终可得到图5-56 所示的效果。（13）在“视图”菜单下选择隐藏网格和关闭对齐网格，执行“编辑”“首选项”“常规”命令，打开“常规”选项卡，在

28、键盘增量文本框内输入1。制作两个蓝色形状的副本，然后选择顶层的副本，单击6 次（向左移动6 像素）。然后选择这两个副本，单击“路径查找器”面板里的“减去顶层”按钮。对得到的形状填充：RGB（0，30，157），降低不透明度为10%。执行“编辑”“首选项”“常规”命令，打开“常规”选项卡，在“键盘增量”文本框内输入0.5。再制作两个蓝色形状的副本，然后选择最上层的副本，单击3 次（向左移动1.5 像素）。选择这两个副本，单击“路径查找器”面板里的“减去顶层”按钮。对得到的形状填充RGB（2，97，254），降低不透明度设为50%。然后再制作两个蓝色形状的副本，选择最上层的副本，右击9 次（向右移

29、动4.5 像素）。选择这两个副本，单击“路径查找器”面板里的“减去顶层”按钮，得到的形状如图5-57 所示。36图5-54给上部添加渐变填充后的效果 图5-55给下部添加渐变填充后的效果图5-56添加渐变后的效果图5-57形状做完后的效果（14）选择绘制的形状，群组（按快捷键Ctrl+G），选择这个群组，执行“对象”“变换”“旋转”命令，打开“旋转”对话框，输入角度“-45”，单击“确定”按钮，然后将其放到如图5-58 所示的位置。（15）用钢笔工具绘制高光路径，并添加径向渐变，RGB 为（253，253，254）和（253，254，253），将不透明度依次改为25%和0，得到图5-59 所示

30、的效果。如果要想效果更好，可以在上层再次增加高光，使标志的质感更为强烈。37图5-58图形的摆放图5-59添加高光后的效果38第四节音乐播放器按钮设计 本节将制作一款音乐播放器按钮的U I 设计，通过按钮的制作来掌握“图层样式”对话框中“混合选项”的应用方法，尤其是“内阴影”“内发光”“投影”等选项的巧妙配合。对图层样式进行设置，可以制作网页按钮、手机界面中的按钮等。1.新建文件新建文件 在Photoshop 中新建文件名称为“按钮”的文件，设置其大小为1 000 像素50 像素，颜色模式为RGB，分辨率为72 dpi。2.创建背景创建背景 首先在背景图层上方添加名bg，颜色数值为R：50，G

31、：54，B：60，效果如图5-60 所示。3.绘制白色正圆绘制白色正圆 使用椭圆工具在画面中心绘制一白色正圆，将得到的图层命名为“圆环”，然后在椭圆工具选项栏中选择“减去顶层形状”命令，从中心绘制小一点的正圆，从而得到白色圆环形状，如图5-61 所示。图5-61填充圆环后的效果图5-60填充颜色后的背景层394.表现柔和的边界线表现柔和的边界线 在圆环图层上右击，在弹出的快捷菜单中选择“栅格化图层”选项，然后执行“滤镜”“模糊”“高斯模糊”命令，打开“高斯模糊”对话框，将半径设置为8 像素，使边界线更加柔和，如图5-62 所示。5.表现突出感觉的边界线表现突出感觉的边界线 双击圆环图层，弹出

32、图层样式 对话框，将混合选项的填充不透明度设置为0；继续单击“斜面和浮雕”选项，设置样式为“内斜面”，深度为1 000%，大小为35 像素，软化为10 像素，角度为90，高度为30 mm，不透明度为30%和26%。其效果如图5-63 所示。图5-62进行高斯模糊后的圆环图5-63添加图层样式后的圆环406.制作基本按钮制作基本按钮 使用椭圆工具在圆环中心绘制正圆，将该图层命名为 基本色，双击“基本色”图层，在弹出的“图层样式”对话框中将“混合选项”中的填充不透明度设置为65%；选择“渐变叠加”选项，其设置和效果如图5-64、图5-65 所示。图5-64正圆“渐变叠加”参数设置图5-65渐变叠加

33、后的效果417.为按钮添加发亮效果为按钮添加发亮效果 复制“基本色”图层，将其命名为“发亮”，在“发亮”图层上右击，再在弹出的快捷菜单中选择“清除图层样式”选项；双击“发亮”图层，弹出“图层样式”对话框，将“混合选项”中的不透明度设置为18%，填充不透明度设置为0。其效果如图5-66 所示。8.绘制按钮手触面效果绘制按钮手触面效果 复制“基本色”图层，将得到的图层命名为“顶面”，在该图层上右击，在弹出的快捷菜单中选择“清除图层样式”选项。双击“顶面”图层的缩览图，弹出“拾色器”对话框，将颜色设置为R：31，G：33，B：37。按快捷键Ctrl+T 调出“变换”命令，缩小“顶面”图层的圆形；双击

34、“顶面”图层，弹出“图层样式”对话框，选择“渐变叠加”选项，设置不透明度为35%，角度为90，缩放为150%；选择“内发光”选项，设置不透明度1%，杂色为100%，阻塞为0，大小为250 像素，得到的效果如图5-67 所示。图5-66添加图层样式后的效果图5-67添加“渐变叠加”和“内发光”后的效果429.制作暂停图标制作暂停图标 使用矩形工具在图层最上方绘制暂停图标，将得到的形状图层命名为 暂停，为“暂停”图标添加发光效果。双击“暂停”图层，弹出“图层样式”对话框，选择“外发光”选项，设置颜色数值为R：255，G：180，B：0；选择“投影”选项，设置颜色数值为R：255，G：108，B：0

35、，其他设置如图5-68、图5-69 所示。最终得到图5-70 所示的播放按钮效果。图5-68暂停图标“外发光”参数设置43图5-69暂停图标“投影”参数设置图5-70播放按钮的最终效果图5-71播放器的最终效果10.制作快进、快退等按钮制作快进、快退等按钮 全选播放按钮图层，并新建分组，在复制分组后更改按钮图层的按键，调整按钮的大小和位置，得到播放器的最终效果，如图5-71 所示。44课堂基础训练课堂基础训练（1）尝试用图形叠加图形的方式制作Quicktime图标APP。（2）动手制作一个有特色的APP图标。课后进阶课后进阶（1）制作一个美食主题APP界面。（2）制作一个手机主题APP界面。优秀案例赏析优秀案例赏析请欣赏图5-72、图5-73所示的APP界面。图5-72简约的APP 界面图5-73医用APP 界面