《PhotoshopCCUI设计案例教程电子教案第4章教案.docx》由会员分享，可在线阅读，更多相关《PhotoshopCCUI设计案例教程电子教案第4章教案.docx（90页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、YOUR LOGO原创力独家文档教材配套参考答案 课 题: 第4章 网页界面设计课 时: 16课时授课类型: 讲授+实训教学目标: 了解网页界面设计的基础知识 掌握网页界面设计的规范 认识网页常用界面类型教学重点:页界面设计的规范、网页常用界面的绘制方法教学难点:网页常用界面的绘制方法本章技能点：家居类网站-首页的绘制方法、家居类网站-产品列表页的绘制方法、家居类网站-产品详情页的绘制方法本章教学技巧：1.知识讲解2.案例实训教学过程：（一）课前准备1.授课前准备准备好教学用具和教学设备2.板书课题：第4章 网页界面设计项目目标： 了解网页界面设计的基础知识 掌握网页界面设计的规范 认识网页常
2、用界面类型3.课程引入通过“Easy Life家居电商网站”案例效果展示引入网页界面设计的概念 首页 产品列表页产品详情页（二）课程内容4.1 网页界面设计基础知识网页界面设计的基础知识包括了网页界面设计的概念、网页界面设计的流程以及网页界面设计的原则。4.1.1 网页界面设计的概念网页界面设计（Web UI design， WUI），主要是根据企业希望向用户传递的信息进行网站功能策划，然后进行页面设计美化的工作。网页界面设计涵盖了制作和维护网站的许多不同的技能和学科，包含了信息架构设计、网页图形设计、用户界面设计、用户体验设计，以及品牌标识设计和Banner设计等，如图所示。意大利设计师Gi
3、orgio Sannino创作的网页4.1.2网页界面设计的流程网页界面的设计流程可以按照网站策划、交互设计、交互自查、界面设计、界面测试、设计验证的步骤来进行，如图所示。网页设计流程1.网站策划网页界面的设计是根据品牌的调性、网站的定位而进行的，不同主题的网页，设计风格也会有区别，如图所示。因此我们要先分析需求及功能，了解用户特征，再进行相关竞品的调研，明确设计方向。 不同风格网页展示 2.交互设计交互设计是对整个网站设计进行初步构思和确定的环节。一般需要进行架构设计、流程图设计、低保真原型设计、线框图设计等具体工作，如图所示。为了方便后续的界面设计工作，低保真原型和线框图的设计与制作应直接
4、在视觉设计软件Photoshop或Sketch中进行。英国视觉设计师Filippo Chiumiento创作的网站低保真原型设计图3.交互自查交互设计完成之后，进行交互自查是整个网页设计流程非常重要的一个阶段。可以在进行界面设计之前检查出是否有遗漏缺失的细节问题，具体可以参考App界面设计中的交互自查。4.界面设计线框图审查通过，就可以进入界面的视觉设计阶段了，这个阶段的设计图就是产品最终呈现给用户的界面。界面设计要求设计规范，图片、文字内容真实，并运用Axure、Principle等软件或直接运用代码语言制作成可交互的高保真原型，以便后续的界面测试，如图所示。荷兰设计师Dennis Snel
5、lenberg创作的网站界面5.界面测试界面测试阶段是让具有代表性的用户进行典型操作，设计人员和开发人员在此阶段共同观察、记录。在测试中可以对设计的细节进行相关的调整，如图所示。Twitter经过测试中的改版，提供了夜间模式的支持6.设计验证设计验证是最后一个阶段，是为网站进行优化的重要支撑。在网站正式上线后，通过用户的数据反馈进行记录，验证前期的设计，并继续优化，如图所示。数据分析产品GrowingIO针对网页进行的用户数据分析，设计师可根据相关数据进行前期的验证及产品优化4.1.3 网页设计的原则网页设计的原则可以分为直截了当、简化交互、足不出户、提供邀请、巧用过渡、即时反应六大原则。1.
6、直截了当直截了当即“所见即所得”的直接操作原则。例如，让用户不要为了编辑内容而打开另一个页面，直接在页面内实现编辑，如图所示。直截了当的操作2.简化交互充分理解用户的意图，令用户操作简便，不为用户造成麻烦。通过使用页面内容中的操作工具，令操作和内容更好的融合，从而简化交互，如图所示。将交互操作和信息内容进行了更好的融合。在状态1中信息内容左侧设计了一个可单击的控件，当鼠标悬停时，变成了状态2，此时鼠标“指针”变为“手型”，底色也发生了变化，提醒用户进行单击。当用户单击后，变成了状态3，此时和未点击前的状态有了明显的不同3.足不出户任何页面频繁刷新和跳转都会引起盲视，打断用户心流（英语：Flow
7、，是一种将个人精神力完全投注在某种活动上的感觉）。适当地运用覆盖层、嵌入层，虚拟页面以及流程处理等方法，如图所示。列表嵌入层：通过点击左侧的展开控件，用于查看某条列表项的详情信息，以此保证用户不必跳转页面，打断心流4.提供邀请邀请是用于引导用户进入下一个交互层次的暗示和提醒。例如“拖放”“行内编辑”“上下文工具”等一大堆交互需要处理时，都面临容易被用户忽视的问题。所以向用户提供预期功能邀请、引导操作邀请以及白板式邀请等邀请是顺利完成人机交互的关键，如图所示。白板式邀请：在没有活动时，通过醒目的按钮邀请用户创建活动5.巧用过渡在界面中，适当的加入一些翻转、传送带以及滑入滑出等过渡效果，如图所示，
8、能让界面生动有趣，同时也能向用户揭示界面元素间的关系。 滑入滑出示例6.即时反应即时反应是用户进行了操作或者内部数据发生了变化，系统立即给出对应的反馈，如自动完成、实时建议、实时搜索等工具经过适当组合，如图所示，就能为用户带来高度灵敏的界面。实时搜索：随着用户输入，实时显示搜索结果4.2网页界面设计的规范网页界面设计的基础规范可以通过设计尺寸及单位、界面结构、布局、字体及图标5个方面进行详尽的剖析。4.2.1 网页设计尺寸及单位1.相关单位（1）英寸英寸（inch，in）是英式的长度单位，一般1英寸=2.54厘米。许多显示设备经常用英寸来表示大小。目前主流的台式机显示器尺寸一般为21.5、24
9、、27、32英寸，目前主流的笔记本电脑尺寸一般为13.3、14、15.6英寸，如图所示。 27英寸的iMac(左)15.6英寸的MacBook Pro（右）（2）像素像素（pixel，px）是组成屏幕画面最小的点。把屏幕中的图像无限放大，会发现图像是由一个个小点组成的，这些小点就是像素。使用Photoshop软件设计界面的网页设计师使用的单位都是px，如图所示。在Photoshop中设置网页界面的单位（3）分辨率分辨率（resolution）即屏幕中像素的数量，它等于画面水平方向的像素值画面垂直方向的像素值。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻，如14英寸屏幕的分辨率是13
10、66 px768px，也有的是1920 px1080px，如图4-16所示。1920 px1080 px的显示效果会比1366 px768 px的好。1366px768px（左）1920px1080px（右）2.设计尺寸（1）页面宽度网页中常见的尺寸及使用分布比例如下所示。在进行界面设计时，结合市场占有率以及为了能够适应宽度至少为1920px的屏幕，都是以1920px1080px为基准进行设计的。使用Photoshop推荐创建宽度为1920px尺寸的画布，高度根据网页的要求设定即可。屏幕分辨率（SCREEN RESOLUTION）统计只要设计出1920px宽度PC端的设计稿，我们就可以通过前端
11、实现响应式设计，适配移动设备，满足用户浏览需求了。遇到如电商类网站等比较复杂的功能性网站，需要单独设计移动端网页。此时宽度以iPhone6/6s/7/8为基准，设为750px，方便所有移动设备的适配。（2）安全宽度安全宽度即内容安全区域，是一个承载页面元素的固定宽度值，目的是确保网页在不同计算机的分辨率下都可以正常显示页面中的元素。在宽度为1920px的设计尺寸中，常用安全宽度如下所示。宽度为1920px的设计中的安全宽度其中Bootstrap是前端的开发框架，因此除淘宝、天猫和京东等平台具有固定的安全宽度以外，其他网站在1920px的网页尺寸上设置的安全宽度通常采用Bootstrap4.x的
12、安全宽度1200px。（3）首屏高度当用户打开电脑或移动设备的浏览器时，在不滚动屏幕的情况下，第一眼看到的画面就是首屏高度。通常首屏以上的页面关注度为80.3%，首屏以下的页面关注度仅有19.7%，因此首屏对网站设计有着极大的重要性。首屏高度需要去掉浏览器菜单栏以及状态栏的高度，如下所示。常用浏览器的状态栏、菜单栏高度如果以1080px为基准，除掉任务栏，浏览器菜单栏以及状态栏后的高度，作为设计稿的首屏高度，到了其他分辨率较低的屏幕上，图片的核心内容会因为屏幕太矮而被剪裁掉。因此，综合分辨率及浏览器的统计数据，首屏高度建议为710px，核心内容安全高度建议为580px，如图所示。首屏高度内容4
13、.2.2 网页设计的界面结构网页界面主要由页头、内容主体、页脚组成，其中页头包含了网站标识、导航等元素，内容主体包含了横幅和内容相关的信息，页脚包含了导航、版权声明等元素，如图所示。网页界面的结构4.2.3 网页设计的布局1.网格系统与App界面设计一样，在网页中，我们也可以利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，进行页面的布局设计，使布局规范简洁有秩序，如图所示。网页界面设计的网格系统2.组成元素网页设计的网格系统也由列、水槽和边距3个元素组成，如图所示。列是内容放置的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左右边缘之间的距
14、离。列、水槽以及边距3.网格的运用（1）单元格常见的PC端网页最小单位有4、6、8、10、12，目前主流计算机设备的屏幕分辨率在竖直与水平方向基本都可以被8整除，同时以8px作为单元格，视觉上也是能感受到较为明显的差异，因此推荐使用8px作为单元格的边长，如图所示。单元格（2）列PC端常用的为12列和24列，如图所示。12列在前端开发开源工具库Bootstrap与Foundation中广泛使用，适用于业务信息分组较少的中后台页面设计。24列适用于业务信息量大、信息分组较多的中后台页面设计。移动端网页则对应以6列和12列为主。PC端的12列和24列另外，列也可以不根据单元格而设置，其数量的选择应
15、结合网页的功能类型。其中单列通常在简洁图文排版的全屏设计时使用，双列常在博客、产品列表中使用，多列常用于瀑布流、图片展示等领域，如图所示。单列 (左) 双列（中）多列（右）网页（3）水槽水槽以及横向间距的宽度可以依照最小单元格8px为增量进行统一设置，如8、16、24、32、40。其中24px最为常用，如图所示。水槽尺寸设置移动端网页可根据App设计规范，一般有24、30、32、40，建议采用32px水槽。（4）边距边距的设置通常是水槽的0、0.5、1.0、1.5、2.0等倍数。以1920px为例的设计稿，网格系统一般在1200px的安全区域进行建立，此时内容与屏幕左右边缘已经有了一定距离，边
16、距可以根据画面美观度及呼吸感进行选择，如图所示。内容于屏幕左右边缘已经有了距离移动端网页可根据App设计规范，一般有20px、24px、30px、32px、40px以及50px，建议采用30px边距。4.2.4 网页设计的文字1.安全字体Web安全字体是用户系统中自带的字体，如Windows系统的微软雅黑、Mac系统的苹方。另外CSS定义了5种通用字体系列：Serif 字体、Sans-serif字体、Monospace字体、Cursive字体、Fantasy字体。设计师可以大胆采用Web安全字体，常见的Web安全字体如图所示。根据开发优先级、设计美观度，从高到低进行排列设计师在进行视觉设计时，
17、中文通常使用微软雅黑、宋体、苹方，英文和数字通常使用Serif字体中的Helvetica、Arial以及Sans-serif字体中的Georgia、Times New Roman。2.字号大小基于用户计算机显示器阅读距离（50cm）以及最佳阅读角度（0.3），14px字号能够保证用户在多数常用显示器上的阅读效率最佳，如图所示。字号大小选择我们以14px字号为默认字体，并运用不同的字号和字重体现网页中的视觉信息层次，如图所示。不同的字号和字重3.文字行高不同的字号应设置对应的行高，这样才可以维持网页中字体的秩序之美，如图所示。文字行高设置4.2.5 网页设计的图标1.设计尺寸通常在1024px1
18、024px的画板中进行制作，并留出64px的边距，如图所示，保证不同面积的图标有协调一致的视觉效果。图片来源于Ant DesignAnt Design提供了6种图标设计中最常用的基本形式供网页设计师参考，以方便设计师快速地调用并在此基础上做变形，如图所示。Ant Design图标设计基本形式2.设计元素Ant Design中将最常见的基本元素可以归纳为点、线、圆角、三角。基本元素在使用上的尺寸，如图所示。Ant Design基本元素及尺寸点：Ant Design建议，在点的尺寸选择上保持16的倍数这一原则。常用点的4种尺寸分别为80、96、112、128，如图所示。不同尺寸的点线：Ant De
19、sign在线条之间的关系采用8的倍数原则，从小到大以8的规律递增。常用线的4种尺寸分别为56、64、72、80，如图所示。不同线的尺寸圆角：Ant Design对于圆角采取的也是8的倍数原则，最常用的3种规格分别为8、16、32。其中图标内角保持直角的处理方式，如图所示。圆角的尺寸三角：Ant Design中的角度受到美式战斗机F-14tomcat的启发，将常用的角度定在约76度，如图所示。三角的尺寸Ant Design除了定义角度，对图标中实心箭头的尺寸也做了调整。在顶角大约保持76度的基础上，宽度保持8倍数的原则，间隔为24，如图所示。图标中实心箭头的尺寸3.视觉平衡Ant Design在
20、图标造型、摆放角度以及留白空间3个方面，通过对基本元素规格上的微调来达到图标的平衡感。（1）图标造型：弯曲的线条在视觉上比竖直的线条看起来细，因此需要对72px尺寸的圆形外边框上进行4px的微调，如图所示。图标造型带来的微调（2）摆放角度：倾斜的线条同样在视觉上会比竖直的线条看起来细，因此对倾斜的线条进行4px的微调，如图所示。摆放角度带来的微调（3）留白空间：当图形的留白不足时，可通过调整线条的粗细来平衡视觉重量，如图所示。留白空间带来的微调4.使用原则为支持响应式设计，交付前端的图标，尽量使用SVG矢量格式图标。或者将图标直接上传到iconfont中，让前端直接调用图标字体，如图所示。ic
21、onfont阿里巴巴矢量图标库4.3 网页常用界面类型网页界面设计是影响整个网站用户体验的关键所在。在网页设计中，常用界面类型为首页、列表页、详情页、专题页、控制台页以及表单页。1.首页网站首页，又称为网站主页，通常是用户通过搜索引擎访问网站时所看到的首张页面。首页是用户了解网站的第一步，通常会包含产品展示图、产品介绍信息、用户登录注册入口等，如图所示。 品牌Miracle首页（左） 品牌Atlanta首页（中） 品牌Carbon首页（右）2.列表页列表页，又称为“List页”，是对信息进行归类管理，方便用户能快速查看基本信息及操作的页面。在列表页中，设计的关键在于信息的可阅读性及可操作性，如
22、图所示。瑞典电商设计师Jake Sunshine（左）、波兰设计师Michael Korwin（中）、波兰设计师Michal Parulski（右）创作的列表页3.详情页详情页是产品信息的主要承载页面，对于信息效率和优先级判定有一定的要求。清晰的布局能令用户快速看到关键信息，提高决策效率，如图所示。 品牌bunnyhill详情页4.专题页专题页是针对特定的主题而制作的页面，页面会包括网站相应模块、频道所涉及的功能以及该主题事件的内容。专题页因为信息丰富，设计精美会吸引大量用户，如图所示。专题页5.控制台页控制台页，又称为“Dashboard”，集合了如数字、图形以及文案等大量多样化的信息，需要
23、一目了然地将关键信息展示给用户。在控制台页中，设计的关键是精简清晰地向用户展示庞大复杂的信息，如图所示。控制台页6.表单页表单页通常用来执行登录、注册、预定、下单、评论等任务，是产品中数据录入必不可少的页面模式。舒适的表单设计，可以引导用户高效地完成表单背后的工作流程，如图所示。表单页4.4 课堂案例制作Easy Life家居电商网站4.4.1 课堂案例制作Easy Life家居电商网站首页【案例学习目标】学习使用绘图工具、文字工具和图层蒙版制作家居电商类网站首页。【案例知识要点】使用矩形工具添加底图颜色，使用置入命令置入图片，使用图层蒙版调整图片显示区域，使用横排文字工具添加文字，使用多边形
24、工具、星形工具和直线工具绘制基本形状，最终效果如图所示。【效果所在位置】Ch04/效果/制作Easy Life家居电商网站/制作Easy Life家居电商网站首页.psd。1. 制作注册栏及导航栏（1）按Ctrl+N组合键，新建一个文件，宽度为1920像素，高度为5380像素，分辨率为72像素/英寸，背景内容为白色，如图所示，单击“创建”按钮，完成文档新建。（2）选择“视图 新建参考线版面”命令，弹出“新建参考线版面”对话框，设置如图所示。单击“确定”按钮，完成参考线的创建。 （3）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在40像素的位置新建一条水平参考线，设置如图所示，单击“
25、确定”按钮，完成参考线的创建，效果如图所示。 （4）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字。选择“窗口 字符”命令，弹出“字符”面板，在面板中将“颜色”设为灰色（59、59、59），其他选项的设置如图所示，按Enter键确定操作，效果如图所示。用相同的方法在适当的位置分别输入需要的文字，效果如图所示，在“图层”控制面板中分别生成新的文字图层。 （5）选择“直线”工具，在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为无，“描边”颜色设为灰色（131、128、128），“粗细”选项设为1像素。按住Shift键的同时，在图像窗口中适当的位置绘制直线，如图所示，在“
26、图层”控制面板中生成新的形状图层“形状1”。（6）选择“移动”工具，按住Alt+Shift组合键的同时，将直线向左拖曳至适当的位置，复制图形，效果如图所示，在“图层”控制面板中生成新的形状图层“形状1 拷贝”。（7）按住Shift键的同时，单击“欢迎来到Easy life”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“注册栏”，如图所示。 （8）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在180像素（距离上方参考线140像素）的位置新建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建，效果如图所示。 （9）选择“文件 置入嵌入对象”命令，
27、弹出“置入嵌入的对象”对话框，选择云盘中的“Ch04 素材 制作Easy Life家居电商网站 制作Easy Life家居电商网站首页 01”文件，单击“置入”按钮，将图片置入到图像窗口中。将其拖曳到适当的位置并调整其大小，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的图层并将其命名为“logo”。图4-64（10）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字。在“字符”面板中，将“颜色”设为橙黄色（195、135、73），其他选项的设置如图所示，按Enter键确定操作。用相同的方法在适当的位置分别输入需要的文字，填充为灰色（59、59、59），效果如图所示，
28、在“图层”控制面板中分别生成新的文字图层。 （11）选择“矩形”工具，在属性栏中将“填充” 颜色设为无，“描边”颜色设为灰色（52、52、52），“粗细”选项设为1像素。按住Shift键的同时，在图像窗口中适当的位置绘制矩形，如图所示，在“图层”控制面板中生成新的形状图层“矩形1”。（12）选择“移动”工具，按住Alt+Shift组合键的同时，将矩形向右拖曳至适当的位置，复制图形，效果如图所示，在“图层”控制面板中生成新的形状图层“矩形1 拷贝”。（13）按CtrlO组合键，打开云盘中的“Ch04 素材 制作Easy Life家居电商网站 制作Easy Life家居电商网站首页 02”文件，选
29、择“移动”工具，将“搜索”图形拖曳到图像窗口中适当的位置并调整其大小，效果如图所示，在“图层”控制面板中生成新的形状图层“搜索”。（14）在“02”图像窗口中，选择“移动”工具，选中“购物车”图层，将其拖曳到图像窗口中适当的位置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层“购物车”。（15）选择“多边形”工具，在属性栏中将 “边”选项设为6。按住Shift键的同时，在图像窗口中适当的位置绘制多边形，在属性栏中将“填充” 颜色设为灰色（52、52、52），“描边”颜色设为无。如图所示，在“图层”控制面板中生成新的形状图层“多边形1”。（16）选择“横排文字”工具，在适当的位置输
30、入需要的文字并选取文字。在“字符”面板中，将“颜色”设为白色，其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。 （17）按住Shift键的同时，单击“logo”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“导航栏”，如图所示。2. 制作Banner区域（1）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在1020像素（距离上方参考线840像素）的位置新建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建，效果如图所示。 （2）选择“矩形”工具，在属性栏中的“选择工具模式”选项中选择“形状”，将
31、“填充”颜色设为浅灰色（245、245、245），“描边”颜色设为无。在距离上方图形78像素的位置绘制矩形，在“图层”控制面板中生成新的形状图层并将其命名为“矩形2”，如图所示。（3）按CtrlO组合键，打开云盘中的“Ch04 素材 制作Easy Life家居电商网站 制作Easy Life家居电商网站首页 03”文件，选择“移动”工具，将图片拖曳到图像窗口中适当的位置并调整其大小，效果如图所示，在“图层”控制面板中生成新的图层“图层1”。 （4）选择“矩形”工具，在属性栏中将“填充”颜色设为无，“描边”颜色设为白色，“粗细”选项设为14像素。在图像窗口中适当的位置绘制矩形，如图所示，在“图层
32、”控制面板中生成新的形状图层并将其命名为“白色边框”。（5）单击“图层”控制面板下方的“添加图层蒙版”按钮，为“白色边框”图层添加图层蒙版。将前景色设为黑色。选择“画笔”工具，在属性栏中单击“画笔”选项，在弹出的面板中选择需要的画笔形状和大小，如图所示，在图像窗口中拖曳鼠标擦除不需要的图像，效果如图所示。 （6）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字。在“字符”面板中，将“颜色”设为灰色（73、73、74），其他选项的设置如图所示，按Enter键确定操作，在“图层”控制面板中生成新的文字图层。用相同的方法在适当的位置输入橙黄色（195、135、73）和灰色（73、73、74
33、）文字，效果如图所示。 （7）选择“矩形”工具，在属性栏中将“描边”颜色设为深灰色（8、1、2），“粗细”选项设为1像素。在图像窗口中适当的位置绘制矩形，如图所示，在“图层”控制面板中生成新的形状图层“矩形3”。（8）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为灰色（73、73、74），其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。 （9）按CtrlO组合键，打开云盘中的“Ch04 素材 制作Easy Life家居电商网站 制作Easy Life家居电商网站首页 04”文件，选择“移动”工具，
34、将图片拖曳到图像窗口中适当的位置并调整其大小，效果如图所示，在“图层”控制面板中生成新的图层“图层2”。（10）选择“矩形”工具，在属性栏中将“填充”颜色设为橙黄色（195、135、73），“描边”颜色设为无。按住Shift键的同时，在图像窗口中适当的位置绘制矩形，如图所示，在“图层”控制面板中生成新的形状图层“矩形4”。 （11）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为白色，其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。 （12）选择“横排文字”工具，在适当的位置分别输入需要的文字并选取
35、文字，在“字符”面板中，将“颜色”设为白色，其他选项的设置如图所示，按Enter键确定操作。选择“￥”文字，在“字符”面板中进行设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中分别生成新的文字图层。 （13）按住Shift键的同时，单击“矩形2”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“Banner”，如图所示。3. 制作内容区域 1（1）选择“视图 新建参考线”命令，弹出“新建参考线”对话框，在4664像素（距离上方参考线3644像素）的位置新建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建，效果如图所示。 （2）在“0
36、2”图像窗口中，选择“移动”工具，选中“送货”图层，将其拖曳到图像窗口中适当的位置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层“送货”。 （3）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为灰色（73、73、74），其他选项的设置如图所示，按Enter键确定操作，在“图层”控制面板中生成新的文字图层。用相同的方法在适当的位置输入需要的浅灰色（169、171、177）文字，效果如图所示。 （4）按住Shift键的同时，选择“送货”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“免费送货”，如图所示。用相同的方
37、法制作“免费退货”和“全天服务”图层组，如图所示，效果如图所示。 （5）选择“直线”工具，在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为无，“描边”颜色设为灰色（160、160、160），“粗细”选项设为1像素。按住Shift键的同时，在图像窗口中适当的位置绘制直线，如图所示，在“图层”控制面板中生成新的形状图层“形状2”。（6）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为灰色（73、73、74），其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。 （7）在“02”图像窗口中，选
38、择“移动”工具，选中“间隔”图层，将其拖曳到图像窗口中适当的位置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层“间隔”。（8）选择“钢笔”工具，在属性栏中将“填充”颜色设为无，“描边”颜色设为灰色（160、160、160），“粗细”选项设为1像素。按住Shift键的同时，在图像窗口中适当的位置绘制直线，如图所示，在“图层”控制面板中生成新的形状图层“形状3”。（9）选择“移动”工具，按住Alt+Shift组合键的同时，将直线向下拖曳至适当的位置，复制直线，效果如图所示，在“图层”控制面板中生成新的形状图层“形状3 拷贝”。 （10）按住Shift键的同时，单击“形状3”图层，将
39、需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“组1”。按住Alt+Shift组合键的同时，将直线向右拖曳至适当的位置，复制直线，效果如图所示，在“图层”控制面板中生成新的图层组“组1 拷贝”，如图所示。 （11）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为灰色（73、73、74），其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。 （12）选择“矩形”工具，在属性栏中将“填充”颜色设为橙黄色（195、135、73），“描边” 颜色设为无。在图像窗口中适当的位置绘制矩形，如图所示，
40、在“图层”控制面板中生成新的形状图层“矩形5”。（13）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch04 素材 制作Easy Life家居电商网站 制作Easy Life家居电商网站首页 05”文件，单击“置入”按钮，将图片置入到图像窗口中。将其拖曳到适当的位置并调整其大小，按Enter键确定操作，在“图层”控制面板中生成新的图层并将其命名为“特色1”。 按Alt+Ctrl+G组合键，为“特色1”图层创建剪贴蒙版，图像效果如图所示。（14）选择“矩形”工具，在属性栏中将“填充”颜色设为橙黄色（195、135、73），“描边”颜色设为无。在图像窗口中适当的位置
41、绘制矩形，如图所示，在“图层”控制面板中生成新的形状图层“矩形6”。（15）选择“直排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为白色，其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。 （16）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为灰色（89、89、89），其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。 （17）在“02”图像窗口中，选择“移动”工具，选中“五颗星”图层，将其拖曳到图像窗口中适当的位
42、置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层 “五颗星”。（18）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为橙黄色（194、133、72），其他选项的设置如图所示，按Enter键确定操作。用相同的方法在适当的位置输入需要的浅灰色（133、132、132）文字，在“图层”控制面板中分别生成新的文字图层，效果如图所示。 （19）按住Shift键的同时，单击“Easy Life 新款精品吊灯”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“产品介绍”，如图所示。按住Shift键的同时，单击“矩形4”图层，将
43、需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“产品1”，如图所示。用相同的方法制作“产品2”图层组，效果如图所示。 （20）选择“矩形”工具，在图像窗口中适当的位置绘制矩形，如图所示，在“图层”控制面板中生成新的形状图层“矩形7”。（21）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch04 素材 制作Easy Life家居电商网站 制作Easy Life家居电商网站首页 07”文件，单击“置入”按钮，将图片置入到图像窗口中。将其拖曳到适当的位置并调整其大小，按Enter键确定操作，在“图层”控制面板中生成新的图层并将其命名为“特色3”。按Al
44、t+Ctrl+G组合键，为“特色3”图层创建剪贴蒙版，图像效果如图所示。 （22）按住Shift键的同时，单击“特色产品”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“产品特色”，如图所示。（23）用相同的方法制作“新品推荐”图层组，如图所示，效果如图所示。 （24）按住Shift键的同时，单击“免费送货”图层组，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“内容区1”，如图所示。4. 制作内容区域 2（1）选择“矩形”工具，在属性栏中将“填充”颜色设为灰色（133、132、132），“描边”颜色设为无。在距离上方图片68像素的位置绘制矩形，如图所
45、示，在“图层”控制面板中生成新的形状图层“矩形8”。 （2）选择“文件 置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch04 素材 制作Easy Life家居电商网站 制作Easy Life家居电商网站首页 11”文件，单击“置入”按钮，将图片置入到图像窗口中。将其拖曳到适当的位置并调整其大小，按Enter键确定操作，在“图层”控制面板中生成新的图层并将其命名为“配件”。按Alt+Ctrl+G组合键，为“配件”图层创建剪贴蒙版，图像效果如图所示。 （3）选择“矩形”工具，在属性栏中将“填充” 颜色设为白色，“描边”颜色设为无。在图像窗口中适当的位置绘制矩形，如图所示，在“图
46、层”控制面板中生成新的形状图层“矩形9”。（4）在图像窗口中适当的位置再次绘制一个矩形，在属性栏中将“填充”颜色设为无，“描边”颜色设为白色，“粗细”选项设为2像素，如图所示，在“图层”控制面板中生成新的形状图层“矩形10”。（5）选择“横排文字”工具，在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为灰色（73、73、74），如图所示，按Enter键确定操作，效果如图所示。 （6）按住Shift键的同时，单击“矩形7”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“配件”，如图所示。用相同的方法制作“推荐”和“家具”图层组，如图所示，效果如图所示。 （7）选择“矩形”工具，在属性栏中的“选择工具模式”选项中选择“形状”，将“填充” 颜色设为灰色（67、67、67），“描边”颜色设为无。在图像窗口中适当的位置绘制矩形，如图所示，在“图层”控制面板中生成新的形状图层“矩形16”。 （8）在“02”图像窗口中，选择“移动”工具，选中“发送”图层，将其拖曳到图像窗口中适当的位置并调整大小，如图所示，在