《PhotoshopCCUI设计案例教程电子教案第5章教案.docx》由会员分享，可在线阅读，更多相关《PhotoshopCCUI设计案例教程电子教案第5章教案.docx（64页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、YOUR LOGO原创力独家文档教材配套参考答案 课 题: 第5章 软件界面设计课 时: 16课时授课类型: 讲授+实训教学目标: 了解软件界面设计的基础知识 掌握软件界面设计的规范 认识软件界面常用界面类型教学重点:软件界面设计的规范、软件界面常用界面的设计方法教学难点:软件界面常用界面的设计方法本章技能点：音乐播放器软件-首页、歌单页、歌曲列表页的绘制方法本章教学技巧：1.知识讲解2.案例实训教学过程：（一）课前准备1.授课前准备准备好教学用具和教学设备2.板书课题：第5章 软件界面设计项目目标： 了解软件界面设计的基础知识 掌握软件界面设计的规范 认识软件界面常用界面类型3.课程引入通过
2、“制作音乐播放器软件”案例效果展示引入软件界面设计的概念首页歌单页歌曲列表页（二）课程内容5.1 软件界面设计基础知识软件界面设计的基础知识包括软件界面设计的概念、软件界面设计的流程以及软件界面设计的原则。5.1.1软件界面设计的概念软件界面（software interface）设计是界面设计的一个分支，主要针对软件的使用界面进行交互操作逻辑、用户情感化体验、界面元素美观的整体设计。具体工作内容包括软件启动界面设计、软件框架设计、图标设计等，如图所示。由波兰设计师Luke Pachytel创作的软件界面5.1.2 软件界面设计的流程软件界面的设计流程可以按照分析调研、交互设计、交互自查、视觉
3、设计、设计测试、验证总结的步骤来进行，如图所示。软件界面设计流程图1.分析调研与App和网页界面设计类似，软件界面的设计也要先分析需求，明确设计方向。下图所示是3款聊天消息界面，但因产品需求不同，设计风格有所区别。不同风格的软件界面2.交互设计交互设计是对整个软件设计进行初步构思和制定的环节。一般需要进行纸面原型、架构设计、流程图设计、线框图设计等具体工作，如图所示。印度设计师Gautham Mukesh创作的交互设计图3.交互自查交互设计完成之后，进行交互自查是整个软件界面设计流程非常重要的一个阶段。可以在执行界面设计之前检查出是否有遗漏缺失的细节问题，具体可以参考App中的交互自查。4.视
4、觉设计原型图审查通过，就可以进入视觉设计阶段了，这个阶段的设计图即产品最终呈现给用户的界面，设计要求与网页设计类似。最后运用Axure、墨刀等软件制作成可交互的高保真原型以便后续的设计测试，如图所示。印度设计师Paresh Khatri制作可交互的高保真原型5.界面测试界面测试阶段是让具有代表性的用户进行典型操作，设计人员和开发人员在此阶段共同观察、记录。在测试中可以对设计的细节进行相关的调整，如图所示。葡萄牙UX/UI设计师Pedro Ribeiro进行软件界面细节调整 6.验证总结验证总结是最后一个阶段，是为整套软件进行优化的重要支撑。在产品正式上线后，通过用户的数据反馈进行记录，验证前期
5、的设计，并继续优化，如图所示。印度产品设计师Divan Raj设计师创作的软件界面5.1.3软件界面设计的原则在进行软件界面设计时，我们主要针对计算机应用界面、移动应用界面、网页界面以及游戏界面进行设计。针对移动应用界面、网页界面设计原则，我们在前两章中都已阐述，本节主要围绕Windows系统下的Fluent Design语言（微软于2017年开发的设计语言）中的设计原则进行讲解，如图所示。Windows系统下的Fluent Design语言Fluent Design有自适应、共鸣、美观三大原则。1.自适应：在每台设备上都显得自然Fluent Design可根据环境进行调整，可以很好地在平板电
6、脑、台式机、XBOX甚至混合现实头戴显示设备上运行。此外，当用户添加更多硬件时，如增加额外的显示器，也会正常显示，如图所示。自适应2.共鸣：直观且强大Fluent Design能了解和预测用户需求，并根据用户的行为和意图进行调整，当某个体验的行为方式符合用户的期望时，该界面就显得很直观，如图所示。使用正确的控件可帮助用户更好的进行交互以符合用户期望3.美观：吸引力十足且令人沉醉Fluent Design重视华丽的效果，通过融入物理世界的元素，如光线、阴影、动效、深度以及纹理，增强用户体验的物理效果，让应用变得更具吸引力，如图所示。界面使用了阴影5.2软件界面设计的规范软件界面设计规范也包括设计
7、尺寸及单位、界面结构、布局、字体及图标5个方面，我们围绕Fluent Design语言中的规范进行讲解。Fluent Design语言可以为不同平台的Windows 10设备软件界面提供指导，如图所示。通过Fluent Design，不仅能呼应前面移动应用界面、网页界面设计规范，更能系统掌握Windows计算机应用的设计规范。Fluent Design语言应用于不同平台的Windows 10设备的软件界面5.2.1 软件设计的尺寸及单位1.相关单位有效像素（Effective Pixels，eps）简称“e像素”，是一个虚拟度量单位，用于表示布局尺寸和间距（独立于屏幕密度）。基于Windows
8、通过系统缩放保证元素识别的工作原理，在设计通用Windows平台应用时，要以有效像素而不是实际物理像素为单位进行设计，在这里eps可等同于像素，如图所示。软件设计的单位2.设计尺寸软件应用在手机、平板电脑、台式机、电视等设备上运行，可建立一套完整的设计系统，而不是为每台设备都进行独立的UI设计。其中，通用Windows平台应用建议针对Windows 10设备的关键断点进行设计，并实现通用，如图所示。Windows10不同设备的设计尺寸在针对特定断点进行设计时，应针对应用的屏幕可用空间大小进行设计，而不是屏幕大小。当应用全屏运行时，应用窗口的大小与屏幕的大小相同，但当应用不全屏运行时，窗口的大小
9、则小于屏幕的大小，如图所示。罗马尼亚产品设计师Vlad Grama创作的未全屏运行的软件界面5.2.2 软件设计的界面结构通用Windows平台的软件界面通常都由导航，命令栏和内容元素组成，其结构如图所示。软件设计的界面结构5.2.3 软件设计的布局1.页面布局（1）导航常见的导航模式有左侧导航和顶部导航两种，如图所示。左侧导航（左） 顶部导航（右）左侧导航：当有超过5个导航项目或应用程序中超过5个页面时，建议使用左侧导航。导航内通常包含：导航项目、应用设置栏目以及账户设置栏目，如图所示。左侧导航 菜单按钮允许用户展开和折叠导航窗格。当屏幕尺寸大于640像素时，单击菜单按钮会将导航面板展开为条
10、形，如图所示。折叠（左）展开（右）当屏幕尺寸小于640像素时，导航面板将完全折叠，如图所示。图5-20 完全折叠（左） 展开（右）顶部导航：顶部导航也可以作为一级导航。相较于可折叠的左侧导航，顶部导航始终可见，如图所示。图5-21 顶部导航（2）命令栏命令栏为用户提供应用程序中最常见任务的快速访问方式。命令栏可以提供对应用程序级或页面级命令的访问，并且可以与任何导航模式一起使用，如图所示。顶部命令栏命令栏可以放在页面的顶部或底部，以最适合应用程序的设计为准，如图所示。底部命令栏（3）内容内容因应用程序而异，因此可以通过多种不同方式呈现内容。这里，主要通过剖析常见的页面模式从而认识内容的布局方式
11、。着陆页：着陆页，又称为“登录页”，通常为用户使用软件时最先出现的页面。在软件应用中，大面积的设计区域是为了突出显示用户可能想要浏览和使用的内容的，如图所示。登录页 集合页：集合页方便用户浏览内容组或数据组。其中，网格视图适用于照片或以媒体为中心的内容，列表视图则适用于文本或数据密集型的内容，如图所示。集合页主/细节页：在主/细节页中，由列表视图（主）和内容视图（细节）共同组成。两个视图都是固定且可以垂直滚动的。当选择列表视图中的项目时，内容视图也会对应更新，如图所示。主/细节页详细信息页：当用户要查看详细内容时，在主/细节页基础之上可创建内容的查看页面，以便用户能够不受干扰地查看页面，如图所
12、示。 详细信息页表单页：表单是一组控件，用于收集和提交来自用户的数据。大多数应用将表单用于页面设置、账户创建、反馈中心等，如图所示。 表单页2.响应式布局通过响应式布局保证软件在所有设备上清晰可辨、易于使用。其中所有设备尺寸及内外边距的增量都应为4epx。对于较小的窗口宽度（小于640像素），建议使用12 epx外边距，而对于较大的窗口宽度，建议使用24 epx外边距，如图所示。响应式布局5.2.4软件设计的文字文字在前面的App和网页界面设计中都已详细介绍过，因此本节主要针对Windows平台应用介绍文字的使用。1.系统字体通用Windows平台应用中，建议英文使用默认字体Segoe UI，
13、如图所示。Segoe UI字体当应用显示非英语语言时可选择另一种字体，其中中文建议使用默认字体微软雅黑，如图所示。微软雅黑字体在进行UI设计时，Sans-serif 字体是适合用于标题和UI元素的，如下所示。Serif字体适合用于显示大量正文，如下所示。标题字体正文字体2.字体大小通用Windows平台上的字体通过字号及字重的变化，在页面上建立了信息的层次关系，帮助用户轻松阅读内容，如图所示。不同字重和字号5.2.5 软件设计的图标软件中的图标主要分为应用图标和界面图标，如图所示。 应用图标示例（左）界面图标示例（右）1.应用图标应用图标在前面针对iOS和Android系统进行过详细的讲解，本
14、节主要讲解Windows平台中的应用图标。应用图标会应用于Windows中的不同场景，由于场景不同，图标的具体名称也会有所变化，如下所示。应用图标的名称（1）磁贴图标4个磁贴大小分别为小（71px71px）、中（150px150px）、宽（310px150px）、大（310px310px）。小磁贴：将图标宽度和高度限制为磁贴大小（71px71px）的66%，如图所示。小磁贴中磁贴：将图标宽度限制为磁贴大小（150px150px）的66%，将高度限制为50%。这样可以防止品牌栏中的元素重叠，如图所示。中磁贴宽磁贴：将图标宽度限制为磁贴大小（310px150px）的66%，将高度限制为50%。这样
15、可以防止品牌栏中的元素重叠，如图所示。宽磁贴大磁贴：将图标宽度限制为磁贴大小（310px310px）的66%，将高度限制为50%，如图所示。大磁贴（2）应用图标桌面开始菜单的应用列表、桌面任务栏、桌面快捷方式、桌面控制面板中，应用图标的设计尺寸如图所示。应用图标的设计尺寸 “*”表示建议最少提供的尺寸（3）初始屏幕图标初始屏幕的尺寸如图所示，图标对应放置于屏幕内，一般建议在620300像素的初始屏幕内进行图标设计。初始屏幕（4）锁屏提醒图标锁屏提醒图标和其他应用图标不同，设计师不能提供自己的锁屏提醒图像，仅可以使用系统提供的锁屏提醒图像。（5）应用商店图标在应用商店中，可以上传图标代替图像，其
16、尺寸分别为300300、150150和7171像素。虽然需要提供3个大小，但设计只进行300300像素即可，如图所示。应用商店图标2.界面图标界面图标在前面针对App和网页界面设计中进行过详尽的讲解，因此这里主要总结Windows软件界面图标的一些正确使用方法。使用系统自带图标Microsoft向用户提供了1000 多个Segoe MDL2 Assets字体格式的图标，如图所示。这些字体图标能够在不同的显示器、分辨率、甚至尺寸下都能保证清晰简洁。系统自带图标使用图标字体推荐使用图标字体，这里除了系统自带的 Segoe MDL2 Assets 字体，还可以使用如Wingdings 或Webdin
17、gs的图标字体，如图所示。图标字体使用可缩放的矢量图形SVG文件SVG文件可以再任何尺寸或分辨率下都拥有清晰的外观，并且大多数绘图软件都可以导出为 SVG，因此它非常适合作为图标资源，如图所示。 SVG文件使用几何图形对象几何图形与SVG文件一样，也是一种基于矢量的资源，所以可以保证清晰的外观。 由于必须单独指定每个点和曲线，因此创建几何图形比较复杂，如图所示。不过当需要在应用运行时修改图标（以便对其进行动画处理等），它确实非常适用。几何图形对象可以使用位图图像（如PNG、GIF或JPEG），不过不建议这样做位图要以特定尺寸创建，当图像缩小时，它通常会变模糊；当放大时，它通常会带有像素颗粒，如
18、图所示，因此不建议这样设计。如果必须使用位图，建议使用 PNG 或 GIF 而不是 JPEG。位图图像5.3 软件常用界面类型软件界面设计是影响整个软件用户体验的关键所在。在软件界面中，常用界面类型为启动页、着陆页、集合页、主/细节页、详细信息页以及表单页。1.启动页启动页，英文名称 “Splash Screen”，通常是用户等待应用程序启动时的界面。出色的启动页令用户在等待软件启动时眼前一亮，并对产品有更为深刻的印象，如图所示。启动页 2.登录页登录页，通常为用户使用软件时最先出现的页面。在软件应用中，大面积的设计区域用来突出显示用户可能想要浏览和使用的内容，如图5-50所示。登录页3.集合
19、页集合页方便用户浏览内容组或数据组。其中，网格视图适用于照片或以媒体为中心的内容，列表视图则适用于文本或数据密集型的内容，如图所示。 集合页 4.主/细节页在主/细节页中，由列表视图（主）和内容视图（细节）共同组成。两个视图都是固定且可以垂直滚动。当选择列表视图中的项目时，内容视图也会对应更新，如图所示。主/细节页 5. 详细信息页当用户要查看详细内容时，在主/细节页基础之上可创建内容的查看页面，以便用户能够不受干扰地查看页面，如图所示。详细信息页 6.表单页表单是一组控件，用于收集和提交来自用户的数据。 大多数应用将表单用于页面设置、账户创建、反馈中心等，如图所示。表单页 5.4. 课堂案例
20、制作音乐播放器软件5.4.1 课堂案例制作Song音乐播放器软件首页【案例学习目标】学习使用绘图工具、文字工具和创建剪贴蒙版命令制作音乐播放器软件首页。【案例知识要点】使用矩形工具添加底图颜色，使用置入命令置入图片，使用剪贴蒙版调整图片显示区域，使用横排文字工具添加文字，使用矩形工具、圆角矩形工具、圆形工具和直线工具绘制基本形状，效果如图所示。【效果所在位置】Ch05/效果/制作Song音乐播放器软件/制作Song音乐播放器软件首页.psd。1. 制作侧导航栏（1）按Ctrl+N组合键，新建一个文件，宽度为900像素，高度为580像素，分辨率为72像素/英寸，将背景内容设为灰色（241、241
21、、241），如图所示，单击“创建”按钮，完成文档新建。（2）选择“视图 新建参考线版面”命令，弹出“新建参考线版面”对话框，设置如图所示。单击“确定”按钮，完成参考线的创建。（3）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在74像素的位置新建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建。用相同的方法，在520像素处创建另一条水平参考线，在194像素处创建一条垂直参考线，效果如图所示。 （4）选择“矩形”工具，在属性栏中的“选择工具模式”选项中选择“形状”，将“填充”颜色设为浅灰色（246、246、246），“描边”颜色设为无。在图像窗口中适当的位置绘制矩形，如
22、图所示，在“图层”控制面板中生成新的形状图层“矩形1”。（5）选择“椭圆”工具，按住Shift键的同时，在图像窗口中适当的位置绘制圆形。在属性栏中将“填充”颜色设为黑色，“描边”颜色设为无，如图所示，在“图层”控制面板中生成新的形状图层“椭圆1”。 （6）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch05素材 制作Song音乐播放器软件 制作Song音乐播放器软件首页 01”文件，单击“置入”按钮，将图片置入到图像窗口中。将其拖曳到适当的位置并调整其大小，按Enter键确定操作，在“图层”控制面板中生成新的图层并将其命名为“头像”。按Alt+Ctrl+G组合键
23、，为“头像”图层创建剪贴蒙版，效果如图所示。（7）选择“横排文字”工具，在适当的位置分别输入需要的文字并分别选取文字。选择“窗口 字符”命令，弹出“字符”面板，将“颜色”设为灰色（103、103、103），其他选项的设置分别如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中分别生成新的文字图层。 （8）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为灰色（103、103、103），其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。 图5-66 图5-67 图5-68（9）选择“圆角矩
24、形”工具，在属性栏中将“填充”颜色设为蓝色（63、170、254），“描边”颜色设为无，“半径”选项设为2像素。在距离上方文字12像素的位置绘制圆角矩形，如图所示，在“图层”控制面板中生成新的形状图层“圆角矩形1”。（10）按CtrlO组合键，打开云盘中的“Ch05 素材 制作Song音乐播放器软件 制作Song音乐播放器软件首页 02”文件。选择“移动”工具，将耳机图形拖曳到图像窗口中适当的位置并调整其大小，效果如图所示，在“图层”控制面板中生成新的形状图层“耳机”。（11）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为白色，其他选项的设置如图所
25、示，按Enter键确定操作，在“图层”控制面板中生成新的文字图层，效果如图所示。 （12）选择“横排文字”工具，在适当的位置拖曳文本框，输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为黑色，其他选项的设置如图所示，按Enter键确定操作，在“图层”控制面板中生成新的文字图层，效果如图所示。用相同的方法输入其他文字，效果如图所示。 （13）在“02”图像窗口中，选择“移动”工具，选中“视频”图层，将其拖曳到图像窗口中适当的位置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层“视频”。用相同的方法分别将需要的图层拖曳到图像窗口中并调整其大小，如图所示。 （14）按住Shif
26、t键的同时，单击“视频”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“小图标”。按住Shift键的同时，单击“矩形1”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“侧导航”。2. 制作导航栏（1）选择“矩形”工具，在属性栏中将“填充”颜色设为白色，“描边”颜色设为无。在图像窗口中适当的位置绘制矩形，如图所示，在“图层”控制面板中生成新的形状图层“矩形2”。（2）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在36像素的位置新建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建，效果如图所示。 （3）选择“圆角矩形”工具
27、，在属性栏中将“粗细”选项设为1像素，“半径”选项设为2像素，在图像窗口中适当的位置绘制圆角矩形。在属性栏中将“填充”颜色设为无，“描边”颜色设为灰色（148、148、148），效果如图所示，在“图层”控制面板中生成新的形状图层“圆角矩形2”。（4）选择“直线”工具，在属性栏中将“粗细”选项设为1像素，按住Shift键的同时，在图像窗口中适当的位置绘制直线。在属性栏中将“填充”颜色设为无，“描边”颜色设为灰色（148、148、148），效果如图所示，在“图层”控制面板中生成新的形状图层“形状1”。（5）在“02”图像窗口中，选择“移动”工具，选中“上一页”图层，将其拖曳到图像窗口中适当的位置并
28、调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层“上一页”。用相同的方法，拖曳“下一页”图层到图像窗口中适当的位置，效果如图所示。 （6）选择“圆角矩形”工具，在属性栏中将“半径”选项设为10像素，在图像窗口中适当的位置绘制圆角矩形。在属性栏中将“填充”颜色设为浅灰色（234、234、234），“描边”颜色设为无，如图所示，在“图层”控制面板中生成新的形状图层“圆角矩形3”。（7）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为灰色（234、234、234），其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板
29、中生成新的文字图层。 （8）在“02”图像窗口中，选择“移动”工具，选中“搜索”图层，将其拖曳到图像窗口中适当的位置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层“搜索”。（9）用相同的方法，分别将其他需要的图层拖曳到图像窗口中适当的位置，如图所示。（10）选择“横排文字”工具，在距离上方图形14像素的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为深灰色（39、39、39），其他选项的设置如图所示，按Enter键确定操作，在“图层”控制面板中生成新的文字图层。再次选取需要的文字，在“字符”面板中，将“颜色”设为蓝色（63、170、254），效果如图所示。 （11
30、）选择“直线”工具，在属性栏中将“填充”颜色设为无，“描边”颜色设为蓝色（63、170、254），“粗细”选项设为2像素。按住Shift键的同时，在图像窗口中适当的位置绘制直线，如图所示，在“图层”控制面板中生成新的形状图层“形状2”。（12）按住Shift键的同时，单击“矩形2”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“导航栏”，如图所示。 3. 制作内容区1（1）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在228像素的位置新建一条垂直参考线，设置如图所示，单击“确定”按钮，完成参考线的创建。（2）选择“矩形”工具，在属性栏中将“填充”颜色设为黑色
31、，“描边”颜色设为无。在距离上方图形42像素的位置绘制矩形，如图所示，在“图层”控制面板中生成新的形状图层“矩形3”。（3）按Ctrl+J组合键，复制“矩形3”图层，在“图层”控制面板中生成新的形状图层“矩形3 拷贝”，将其“不透明度”选项设置为70%，如图所示，按Enter键确定操作。单击“矩形3 拷贝”图层左侧的眼睛图标，隐藏该图层，并选中“矩形3”图层，如图所示。 （4）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch05 素材 制作Song音乐播放器软件 制作Song音乐播放器软件首页 03”文件，单击“置入”按钮，将图片置入到图像窗口中。将其拖曳到适当
32、的位置并调整其大小，按Enter键确定操作，在“图层”控制面板中生成新的图层“03”。按Alt+Ctrl+G组合键，为“03”图层创建剪贴蒙版，图像效果如图所示。（5）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为橘黄色（255、103、1），其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。 （6）选择“矩形”工具，在属性栏中将“填充”颜色设为无，“描边”颜色设为橘黄色（255、103、1），“粗细”选项设为1像素。在图像窗口中适当的位置绘制矩形，如图所示，在“图层”控制面板中生成新的形状图层“矩
33、形4”。（7）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为橘黄色（255、103、1），其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。 （8）在适当的位置再次输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为白色，其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。 （9）选择“直线”工具，在属性栏中将“填充”颜色设为无，“描边”颜色设为白色，“粗细”选项设为1像素。按住Shift键的同时，在图像窗口中适当的位置绘制直线，在“图层”控制面
34、板中生成新的形状图层“形状3”。（10）选择“直接选择”工具，选取需要的锚点，如图所示，将其拖曳到适当的位置，效果如图所示。 （11）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为橘黄色（255、103、1），其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。 （12）单击“矩形3 拷贝”图层左侧的空白图标，显示该图层，效果如图所示。按住Shift键的同时，单击“矩形3”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“左侧Banner”，如图所示。 （13）用相同的方法制作“
35、右侧Banner”和“中间Banner”，效果如图所示。（14）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在296像素的位置新建一条水平参考线，如图所示，单击“确定”按钮，完成参考线的创建。用相同的方法，在868像素处创建一条垂直参考线，效果如图所示。 （15）选择“圆角矩形”工具，在属性栏中将“半径”选项设为10像素，在图像窗口中适当的位置绘制圆角矩形。在属性栏中将“填充”颜色设为浅灰色（215、215、215），“描边”颜色设为无，如图所示，在“图层”控制面板中生成新的形状图层并将其命名为“滚动条”。（16）选择“直线”工具，在属性栏中将“粗细”选项设为2像素，按住Shift
36、键的同时，在距离上方图形22像素的位置绘制直线。在属性栏中将“填充”颜色设为灰色（167、167、167），“描边”颜色设为无，在“图层”控制面板中生成新的形状图层“形状5”，如图所示。（17）选择“移动”工具，按Alt+Ctrl+T组合键，选中图形，按住Shift键的同时，将图形拖曳到适当的位置，按Enter键确定操作，在“图层”控制面板中生成新的形状图层“形状5 拷贝”。连续按Alt+Shift+Ctrl+T组合键，复制多个形状，如图所示。 （18）选择“形状5 拷贝4”图层，在属性栏中将“填充”颜色设为蓝色（63、170、254），图像效果如图所示。按住Shift键的同时，单击“左侧Ba
37、nner”图层组，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“内容区1”。4. 制作内容区2（1）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在212像素的位置新建一条垂直参考线，设置如图所示。用相同的方法，创建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建。 （2）选择“横排文字”工具，在适当的位置分别输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为深灰色（39、39、39），其他选项的设置分别如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中分别生成新的文字图层。 （3）选择“直线”工具，在属性栏中将“填充”颜
38、色设为无，“描边”颜色设为灰色（191、191、191），“粗细”选项设为1像素。按住Shift键的同时，在距离文字10像素的位置绘制直线，如图所示，在“图层”控制面板中生成新的形状图层“形状6”。（4）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，设置如图所示，单击“确定”按钮，完成参考线的创建。用相同的方法，创建另外两条参考线，设置分别如图所示，单击“确定”按钮，完成参考线的创建。 （5）选择“矩形”工具，在属性栏中将“粗细”选项设为1像素，在图像窗口中适当的位置绘制矩形。在属性栏中将“填充”颜色设为无，“描边”颜色设为浅灰色（220、220、220），如图所示，在“图层”控制面
39、板中生成新的形状图层“矩形7”。（6）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为深灰色（39、39、39），其他选项的设置如图所示，按Enter键确定操作。用相同的方法输入蓝色（63、170、254）文字，其他选项的设置如图所示，效果如图所示。 （7）在适当的位置再次输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为深灰色（39、39、39），其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中分别生成新的文字图层。 （8）按住Shift键的同时，单击“矩形7”图层，将需要的图层同时选取，按Ctrl+G组合
40、键，群组图层并将其命名为“歌单1”，如图所示。（9）选择“视图 新建参考线版面”命令，弹出“新建参考线版面”对话框，设置如图所示。单击“确定”按钮，完成参考线的创建，效果如图所示。 （10）选择“矩形”工具，在属性栏中将“填充”颜色设为浅灰色（241、241、241），“描边”颜色设为无。在图像窗口中适当的位置绘制矩形，如图所示，在“图层”控制面板中生成新的形状图层“矩形8”。（11）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch05 素材 制作Song音乐播放器软件 制作Song音乐播放器软件首页 06”文件，单击“置入”按钮，将图片置入到图像窗口中。将其拖
41、曳到适当的位置并调整其大小，按Enter键确定操作，在“图层”控制面板中生成新的图层。按Alt+Ctrl+G组合键，为“06”图层创建剪贴蒙版，图像效果如图所示。（12）在“02”图像窗口中，选择“移动”工具，选中“耳机”图层，将其拖曳到图像窗口中适当的位置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层“耳机”。 （13）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为白色，其他选项的设置如图所示，按Enter键确定操作。再次输入文字，在“字符”面板中，将“颜色”设为灰色（39、39、39），其他选项的设置如图所示，按Enter键确定
42、操作，效果如图所示，在“图层”控制面板中分别生成新的文字图层。按住Shift键的同时，单击“矩形8”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“歌单2”。 （14）用相同的方法分别制作“歌单3”、“歌单4”和“歌单5”图层组，效果如图所示。按住Shift键的同时，单击“推荐歌单”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“内容区2”。5. 制作控制栏（1）选择“矩形”工具，在属性栏中将“填充”颜色设为浅灰色（246、246、246），“描边”颜色设为无。在图像窗口中适当的位置绘制矩形，如图所示，在“图层”控制面板中生成新的形状图层“矩形9
43、”。（2）单击“图层”控制面板下方的“添加图层样式”按钮，在弹出的菜单中选择“投影”命令，弹出对话框，设置阴影颜色为灰色（151、151、151），其他选项的设置如图所示，单击“确定”按钮，效果如图所示。（3）在“02”图像窗口中，选择“移动”工具，选中“开始键”图层，将其拖曳到图像窗口中适当的位置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层“开始键”。（4）选择“横排文字”工具，在适当的位置分别输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为深灰色（80、80、80），其他选项的设置如图所示，按Enter键确定操作，在“图层”控制面板中分别生成新的文字图层，效果如
44、图所示。 （5）选择“椭圆”工具，在属性栏中将“填充”颜色设为蓝色（63、170、254），“描边”颜色设为无。按住Shift键的同时，在图像窗口中适当的位置绘制圆形，如图所示，在“图层”控制面板中生成新的形状图层“椭圆2”。在属性栏中将“粗细”选项设为1像素，在图像窗口中再次绘制一个圆形。在属性栏中将“填充”颜色设为无，“描边”颜色设为灰色（167、167、167），效果如图所示，在“图层”控制面板中生成新的形状图层“椭圆3”。 （6）选择“直线”工具，在属性栏中将“粗细”选项设为3像素，按住Shift键的同时，在图像窗口中适当的位置绘制直线。在属性栏中将“填充”颜色设为灰色（220、220
45、、220），“描边”颜色设为无，如图所示，在“图层”控制面板中生成新的形状图层 “形状7”。（7）在“02”图像窗口中，选择“移动”工具，选中“音量”图层，将其拖曳到图像窗口中适当的位置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层“音量”。 （8）选择“直线”工具，在属性栏中将“填充”颜色设为无，“描边”颜色设为灰色（220、220、220），“粗细”选项设为3像素。按住Shift键的同时，在图像窗口中适当的位置绘制直线，如图所示，在“图层”控制面板中生成新的形状图层“形状8”。按Ctrl+J组合键，复制图层，在“图层”控制面板中生成新的形状图层“形状8 拷贝”。在属性栏中将
46、“填充”颜色设为蓝色（63、170、254）。选择“直接选择”工具，选取需要的锚点，如图所示，拖曳到适当的位置，效果如图所示。 （9）在“02”图像窗口中，选择“移动”工具，选中“循环播放”图层，将其拖曳到图像窗口中适当的位置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层“循环播放”。用相同的方法分别将需要的图层拖曳到图像窗口中，并调整其大小，如图所示。 （10）选择“横排文字”工具，在适当的位置分别输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为深灰色（80、80、80），其他选项的设置分别如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中分别生成新的文字图层。按住Shift键的同时，单击“矩形9”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“控制栏”。 （11）按Ctrl+S组合键，弹出“存储为”对话框，将其命名为“制作Song音乐播放器软件首页”