PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第4章.docx

《PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第4章.docx》由会员分享，可在线阅读，更多相关《PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第4章.docx（98页珍藏版）》请在课桌文档上搜索。

1、教案编号：4课题：第4章网页界面设计课时：16课时授课类型：讲授+实训教学目标： 了解网页界面设计的基础知识 掌握网页界面设计的规范 认识网页常用界面类型教学重点：页界面设计的规范、网页常用界面的绘制方法教学难点：网页常用界面的绘制方法本章技能点：家居类网站-首页的绘制方法、家居类网站-产品列表页的绘制方法、家居类网站-产品详情页的绘制方法本章教学技巧：1 .知识讲解2 .案例实训教学过程：（一）课前准备1 .授课前准备准备好教学用具和教学设备2 .板书课题：第4章网页界面设计项目目标： 了解网页界面设计的基础知识 掌握网页界面设计的规范 认识网页常用界面类型3 .课程引入通过“EasyLif

2、e家居电商网站”案例效果展示引入网页界面设计的概念首页产品列表页OHLeOSO产品详情页(二)课程内容4.1 网页界面设计基础知识网页界面设计的基础知识包括了网页界面设计的概念、网页界面设计的流程以及网页界面设计的原则。4.1.1 网页界面设计的概念网页界面设计(WebUIdesign,WUI),主要是根据企业希望向用户传递的信息进行网站功能策划，然后进行页面设计美化的工作。网页界面设计涵盖了制作和维护网站的许多不同的技能和学科，包含了信息架构设计、网页图形设计、用户界面设计、用户体验设计，以及品牌标识设计和Banner设计等，如图所示。意大利设计师Giorgio Sannino创作的网页4.

3、1.2 网页界面设计的流程网页界面的设计流程可以按照网站策划、交互设计、交互自查、界面设计、界面测试、设计验证的步骤来进行，如图所示。网页设计流程设计验证1 .网站策划网页界面的设计是根据品牌的调性、网站的定位而进行的，不同主题的网页，设计风格也会有区别，如图所示。因此我们要先分析需求及功能，了解用户特征,再进行相关竞品的调研，明确设计方向。不同风格网页展示2 .交互设计交互设计是对整个网站设计进行初步构思和确定的环节。一般需要进行架构设计、流程图设计、低保真原型设计、线框图设计等具体H作，如图所示。为了方便后续的界面设计工作，低保真原型和线框图的设计与制作应直接在视觉设计软件Photosho

4、p或Sketch中进行。H0fwp09Vt*IrI英国视觉设计师FiIippoChiUmient。创作的网站低保真原型设计图3 .交互自查交互设计完成之后，进行交互自查是整个网页设计流程非常重要的一个阶段。可以在进行界面设计之前检查出是否有遗漏缺失的细节问题，具体可以参考APP界面设计中的交互自查。4 .界面设计线框图审查通过，就可以进入界面的视觉设计阶段了，这个阶段的设计图就是产品最终呈现给用户的界面。界面设计要求设计规范，图片、文字内容真实，并运用AXUre、PrinCiPIe等软件或直接运用代码语言制作成可交互的高保真原型，以便后续的界面测试，如图所示。5.界面测试荷兰设计师Dennis

5、SnelIenberg创作的网站界面界面测试阶段是让具有代表性的用户进行典型操作，设计人员和开发人员在此阶段共同观察、记录。在测试中可以对设计的细节进行相关的调整，如图所示。设计验证是最后一个阶段，是为网站进行优化的重要支撑。在网站正式上线后,通过用户的数据反馈进行记录，验证前期的设计，并继续优化，如图所示。数据分析产品GrowingIO针对网页进行的用户数据分析，设计师可根据相关数据进行前期的验证及产品优化4.1.3网页设计的原则网页设计的原则可以分为直截了当、简化交互、足不出户、提供邀请、巧用过渡、即时反应六大原则。1 .直截了当直截了当即“所见即所得的直接操作原则。例如，让用户不要为了编

6、辑内容而打开另一个页面,直接在页面内实现编辑，如图所示。IIIMI-mUMNIm MNMm-HII-llll 1111:1111:1111直截了当的操作2 .简化交互充分理解用户的意图，令用户操作简便，不为用户造成麻烦。通过使用页面内容中的操作工具，令操作和内容更好的融合，从而简化交互，如图所示。51Iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii36IlllllHillllMlllinnillllllHlllllllllllllHlIllllllllllllllllllllllllllNllllllllllinil

7、llllllIIIIII状态2HHl川川W川HIH川川Il川川IHiHw川川IHH川川IIiiiimiiiimiiiiimiiiiiiiniiiiiiiiiiiiiiiiIlllllllllllllHllllllllllllllllllllinillllllllllllllIlllliuillllMllllMllllllNllllllllllIIIIllIlllllllllllliaillllllllllllllllllllliailllllllllllll将交互操作和信息内容进行了更好的融合。在状态1中信息内容左侧设计了一个可单击的控件，当鼠标悬停时，变成了状态2,此时鼠标“指针”变为“手型

8、”，底色也发生了变化，提醒用户进行单击。当用户单击后，变成了状态3,此时和未点击前的状态有了明显的不同3 .足不出户任何页面频繁刷新和跳转都会引起盲视，打断用户心流（英语：Flow,是一种将个人精神力完全投注在某种活动上的感觉工适当地运用覆盖层、嵌入层，虚寸以页面以及流程处理等方法，如图所示。IINimiiiminiuniNlllinillIHIIIIHhumniii1111三BillIlllIHlMNlllIlllHUM图MiiiibiiiiiiiiiiiiiiuiiiiiiiiiiminiMQIiiiiniiiiiaiiiiHiiiiiininiiiiiuiihmMMIIIMMMIMNII

9、nilllIIIIIHIH列表嵌入层：通过点击左侧的展开控件，用于查看某条列表项的详情信息，以此保证用户不必跳转页面，打断心流4 .提供邀请邀请是用于引导用户进入下一个交互层次的暗示和提醒。例如拖放行内编辑上下文工具等一大堆交互需要处理时，都面临容易被用户忽视的问题。所以向用户提供预期功能邀请、引导操作邀请以及白板式邀请等邀请是顺利完成人机交互的关键，如图所示。3）、,二制，湛动Ifl白板式邀请：在没有活动时，通过醒目的按钮邀请用户创建活动5 .巧用过渡在界面中，适当的加入一些翻转、传送带以及滑入滑出等过渡效果，如图所示，能让界面生动有趣，同时也能向用户揭示界面元素间的关系。滑入滑出示例6 .

10、即时反应即时反应是用户进行了操作或者内部数据发生了变化，系统立即给出对应的反馈，如自动完成、实时建议、实时搜索等工具经过适当组合，如图所示，就能为用户带来高度灵敏的界面。ElIiiiiiiiiniiiiiiiiinihiIiininiiiii缘巨人Iiiiiiiiiiiiiiiiiniiiniiiiiiiihi绿巨人IlllllllllllllllimiHllllMllIIIIIHI实时搜索：随着用户输入，实时显示搜索结果7 .2网页界面设计的规范网页界面设计的基础规范可以通过设计尺寸及单位、界面结构、布局、字体及图标5个方面进行详尽的剖析。4.2.1网页设计尺寸及单位1 .相关单位(1)英寸

11、英寸(inch,in)是英式的长度单位，一般1英寸:2.54厘米。许多显示设备经常用英寸来表示大小。目前主流的台式机显示器尺寸一般为21.5、24、27、32英寸，目前主流的笔记本电脑尺寸一般为13.3、14、15.6英寸，如图所示。27英寸的iMac（左）15.6英寸的MaCBOOkPro（右）(2)像素像素(pixel,px)是组成屏幕画面最小的点。把屏幕中的图像无限放大,会发现图像是由一个个小点组成的，这些小点就是像素。使用PholoShoP软件设计界面的网页设计师使用的单位都是PX,如图所示。文修(关闭)在Photoshop中设置网页界面的单位(3)分辨率分辨率(resolution)

12、即屏幕中像素的数量，它等于画面水平方向的像素值X画面垂直方向的像素值。屏幕尺寸一样的情况下,分辨率越高，显示效果就越精细和细腻，如14英寸屏幕的分辨率是1366px768px,也有的是1920px1080px,如图4-16所示。1920PXXlO80px的显示效果会比1366px768px的好。1366px768px(左)1920px1080px(右)2 .设计尺寸(1)页面宽度网页中常见的尺寸及使用分布比例如下所示。在进行界面设计时，结合市场占有率以及为了能够适应宽度至少为1920px的屏幕，都是以1920px1080px为基准进行设计的。使用Photoshop推荐创建宽度为1920px尺寸

13、的画布，高度根据网页的要求设定即可。屏幕分辨率(SCREENRESOLUTION)统计MSKA(P*)M*dA8(ox)候用分比例192010019.22%136676811.50%1538645.38%3606404.68%109004.67%14409004.52%10247683.71%13607683.19%128010243.04%12807202.82%只要设计出1920px宽度PC端的设计稿,我们就可以通过前端实现响应式设计，适配移动设备，满足用户浏览需求了。遇三口电商类网站等t徽复杂的功能性网站，需要单独设计移动端网页。此时宽度以iPhone66s78为基准,设为750px,方

14、便所有移动设备的适配。(2)安全宽度安全宽度即内容安全区域，是一个承载页面元素的固定宽度值，目的是确保网页在不同计算机的分辨率下都可以正常显示页面中的元素。在宽度为1920px的设计尺寸中，常用安全宽度如下所示。宽度为1920px的设计中的安全宽度常用平台海宝天猫京东Bootstrap3.xBootstrap4.x安全宽度950px990px990px1170px1200px其中BootStraP是前端的开发框架，因此除淘宝、天猫和京东等平台具有固定的安全宽度以外，其他网站在1920px的网页尺寸上设置的安全宽度通常采用Bootstrap4.x的安全宽度1200px(3)首屏高度当用户打开电脑

15、或移动设备的浏览器时，在不滚动屏幕的情况下，第一眼看到的画面就是首屏高度。通常首屏以上的页面关注度为80.3%,首屏以下的页面关注度仅有19.7%,因此首屏对网站设计有着极大的重要性。首屏高度需要去掉浏览器菜单栏以及状态栏的高度，如下所示。常用浏览器的状态栏、菜单栏高度34K三菜蛆栏市UHfr8t（S内）。Chromeatea22gc(海规限)60xISpx8%.“而M20pc132px15px1%UIEarea24poc120pISpx35%e3603!,三24px140pxISpx28%国ea*三24PX147pISp1%6度粗桃I25（XX163pxISpx5%如果以1080px为基准，

16、除掉任务栏，浏览器菜单栏以及状态栏后的高度，作为设计稿的首屏高度，到了其他分辨率较低的屏幕上，图片的核心内容会因为屏幕太矮而被剪裁掉。因此，综合分辨率及浏览器的统计数据，首屏高度建议为710px,核心内容安全高度建议为580px,如图丽。STOpx均件H4O64%t9人,不下面内已4.2.2 网页设计的界面结构网页界面主要由页头、内容主体、页脚组成，其中页头包含了网站标识、导航等元素，内容主体包含了横幅和内容相关的信息，页脚包含了导航、版权声明等元素，如图所示。1920 O*ran 1200 m页头Heaoor立 欣栏 Nflvigaton内害主体BahfG Footer网页界面的结构9M 5

17、8710im4.2.3 网页设计的布局1 .网格系统与APP界面设计一样，在网页中，我们也可以利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，进行页面的布局设计，使布局规范简洁有秩序，如图所示。网页界面设计的网格系统2 .组成元索网页设计的网格系统也由列、水槽和边距3个元素组成，如图所示。列是内容放置的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左右边缘之间的距离。Subheader列、水槽以及边距3 .网格的运用(1)单元格常见的PC端网页最小单位有4、6、8、10、12,目前主流计算机设备的屏幕分辨率在竖直与水平方向基本都可以被8整除

18、，同时以8px作为单元格，视觉上也是能感受到较为明显的差异，因此推荐使用8px作为单元格的边长，如图所示。单元格PC端常用的为12列和24列，如图所示。12列在前端开发开源工具库BOolStr叩与Foundation中广泛使用,适用于业务信息分组较少的中后台页面设计。24列适用于业务信息量大、信息分组较多的中后台页面设计。移动端网页则对应以6列和12列为主。12另外，列也可以不根据单元格而设置，其数量的选择应结合网页的功能类型。其中单列通常在简洁图文排版的全屏设计时使用，双列常在博客、产品列表中使用，多列常用于瀑布流、图片展示等领域，如图所示。单列（左）双列（中）多列（右）网页（3）水槽水槽以

19、及横向间距的宽度可以依照最/J埠元格8px为增量进行统一设置，如8、16、24、32、40o其中24px最为常用，如图所示。移动端网页可根据App设计规范，一般有24、30、32、40,建议采用32px水槽。（4）边距边距的设置通常是水槽的0、0.5、1.0、1.5、2.0等倍数。以192OPX为例的设计稿，网格系统一般在1200px的安全区域进行建立，此时内容与屏幕左右边缘已经有了一定距离，边距可以根据画面美观度及呼吸感进行选择，如图所示。内容于屏幕左右边缘已经有了距离移动端网页可根据App设计规范，一般有20pxx24pxx3Opxx32pxx40px以及5Opx,建议采用3Opx边距。4

20、.2.4网页设计的文字1 .安全字体Web安全字体是用户系统中自带的字体,如Windows系统的微软雅黑、Mac系统的苹方。另外CSS定义了5种通用字体系列：Serif字体、Sans-serif字体、Monospace字体、Cursive字体、FantaSy字体。设计师可以大胆采用Web安全字体，常见的Web安全字体如图所示。McOSMl为博资金字体SmSri.WtSUFonts村tt安箜字体Sw伙bSEIrt安金字作MofwpcWbSf,8ttmm三MMicrosoftYHi隼方PlgFagsCHevetaGeorgia、.，,一，IR体SimHd夔黑体HiBnOSansGeAhalTime

21、eMoraco家体SnSun华文IBjISTHeItIUghtkSTKMTahomaTimesNewRomanUickteConscie新宋体NSlmSun隼文黑体STHeltITretxjchMMSPatetinoCourier(S三FangSonQ华文体STKaitsVerdanaPatetinoUnotypeCourierNew总体KafTI华文宋体STSongAAdIBIadCGaramondConeolae仿宋.GB282华文仿5RSTFfIm(MCtBookmanm(.GB2312CharcoalBookAntiquaGonovaG9d99tLucMdSonsUnlcteLucid

22、aGrandeComicSansMScursiv根据开发优先级、设计美观度，从高到低进行排列设计师在进行视觉设计时，中文通常使用微软雅黑、宋体、苹方,英文和数字通常使用Serif字体中的HelVetica、Arial以及SanS-Serif字体中的Georgia、TimesNewRomano2 .字号大小基于用户计算机显示器阅读距离（50cm）以及最佳阅读角度（0.3）,14px字号能够保证用户在多数常用显示器上的阅读效率最佳，如图所示。我们以14px字号为默认字体，并运用不同的字号和字重体现网页中的视觉信息层次，如图丽。32ptRegular我是字体Abcdefghoi2345678924p

23、tRegular我是字体Abcdefghoi2345678920ptRegular我是字体Abcdefghoi23456789HMKllino16ptBold我是字体Abcdefghoi23456789TWIe14(Bold我是字体Abcdefoh323456789Body214ptRegUr税是字体ABCOeFGH0123456789Bodyl12pt我星字体A0COFOHOI23457M12ptReQUarH7G76763838720三角的尺寸AntDesign除了定义角度，对图标中实心箭头的尺寸也做了调整。在顶角大约保持76度的基础上,宽度保持8倍数的原则，间隔为24,如图所示。w:26

24、4 H: 172w: 240 H: 158w: 216 H: 142Wt 144 H: 94图标中实心箭头的尺寸3.视觉平衡AntDesign在图标造型、摆放角度以及留白空间3个方面，通过对基本元素规格上的微调来达到图标的平衡感。(1)图标造型：弯曲的线条在视觉上比竖直的线条看起来细，因此需要对72px尺寸的圆形外边框上进行4px的微调，如图所示。图标造型带来的微调(2)摆放角度：倾斜的线条同样在视觉上会比竖直的线条看起来细，因此对倾斜的线条进行4px的微调，如图所示。摆放角度带来的微调(3)留白空间：当图形的留白不足时,可通过调整线条的粗细来平衡视觉重量,如图所示。留白空间带来的微调4.使用

25、原则为支持响应式设计，交付前端的图标，尽量使用SVG矢量格式图标。或者将图标直接上传到iconfont中,让前端直接调用图标字体,如图所示。iconfont阿里巴巴矢量图标库4.3网页常用界面类型网页界面设计是影响整个网站用户体验的关键所在。在网页设计中，常用界面类型为首页、列表页、详情页、专题页、控制台页以及表单页。1.首页网站首页，又称为网站主页，通常是用户通过搜索引擎访问网站时所看到的首张页面。首页是用户了解网站的第一步,通常会包含产品展示图、产品介绍信息、用户登录注册入口等，如图品牌Miraele首页（左）品牌Atlanta首页（中）品牌CarbOn首页（右）2.列表页列表页，又称为L

26、ist页”，是对信息进行归类管理,方便用户能快速查看基本信息及操作的页面。在列表页中，设计的关键在于信息的可阅读性及可操作性，如图所示。瑞典电商设计师JakeSunshine（左）波兰设计师MiChaelKorwin（中）、波兰设计师MiChalParulski（右）创作的列表页3详情页详情页是产品信息的主要承载页面，对于信息效率和优先级判定有一定的要求。清晰的布局能令用户快速看到关键信息，提高决策效率，如图所示。品牌bunnyhi11详情页4 .专题页专题页是针对特定的主题而制作的页面，页面会包括网站相应模块、频道所涉及的功能以及该主题事件的内容。专题页因为信息丰富，设计精美会吸引大量用户，

27、如图所示。专题页5 .控制台页控制台页，又称为“DashbOard,集合了如数字、图形以及文案等大量多样化的信息，需要一目了然地将关键信息展示给用户。在控制台页中，设计的关键是精简清晰地向用户展示庞大复杂的信息，如图所示。乌克兰设计团队ArtLemOn创作西班牙Ul设计师jokinL创作英国产品设计师JlIIiaJakUbiak创作控制台页6 .表单页表单页通常用来执行登录、注册、预定、下单、评论等任务，是产品中数据录入必不可少的页面模式。舒适的表单设计，可以引导用户高效地完成表单背后的工作流程，如图所示。由印度尼西亚UUX设计师MamSa Dyan DIPtya创作由立陶宛UVUX设计师Si

28、mOn AIeXander创作表单页由立陶宛UIAJX设计部DraSiUS M创作4.4课堂案例一制作EaSyLife家居电商网站4.4.1 课堂案例一制作EasyLife家居电商网站首页【案例学习目标】学习使用绘图工具、文字工具和图层蒙版制作家居电商类网站首页。【案例知识要点】使用矩形工具添加底图颜色，使用置入命令置入图片，使用图层蒙版调整图片显示区域，使用横排文字工具添加文字，使用多边形工具、星形工具和直线工具绘制基本形状，最终效果如图所示。【效果所在位置】Cho4/效果倒作EasyLife家居电商网站/制作EasyLife家居电商网站首页.psd。1.制作注册栏及导航栏(1)按Ctrl+

29、N组合键，新建一个文件，宽度为1920像素，高度为5380像素，分辨率为72像素，英寸，背景内容为白色，如图所示，单击“创建”按钮，完成文档新建。(2)选择“视图新建参考线版面”命令，弹出“新建参考线版面”对话框，设置如图所示。单击“确定”按钮，完成参考线的创建。(3)选择“视图新建参考线”命令，弹出“新建参考缓对话框，在40像素的位置新建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建，效果如图所示。(4)选择“横排文字”工具T.,在适当的位置输入需要的文字并选取文字。选择“窗口字符，命令，弹出“字符”面板，在面板中将“颜色”设为灰色(59、59、59),其他选项的设置如图所

30、示，按Enter键确定操作，效果如图所示。用相同的方法在适当的位置分别输入需要的文字，效果如图所示，在“图层”控制面板中分别生成新的文字图层。欢迎来到EaSy life注册我的茶户(5)选择“直线”工具,在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为无,“描边”颜色设为灰色(131、128、128)粗细”选项设为1像素。按住Shift键的同时，在图像窗口中适当的位置绘制直线，如图所示，在“图层”控制面板中生成新的形状图层“形状I”。登录注册I(6)选择“移动”工具中按住A)t+Shift组合键的同时，将直线向左拖曳至适当的位置，复制图形，效果如图所示，在“图层”控制面板中生成

31、新的形状图层“形状1拷贝”。登录I注册I我的账户(7)按住Shift键的同时，单击“欢迎来到EaSylife”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“注册栏”，如图所示。(8)选择“视图新建参考线”命令，弹出“新建参考线”对话框，在180像素(距离上方参考线140像素)的位置新建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建，效果如图所示。(9)选择“文件置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择云盘中的“Ch04素材制作EaSyLife家居电商网站制作EaSyLife家居电商网站首页01”文件，单击“置入”按钮，将图片置入到图像窗

32、口中。将其拖曳到适当的位置并调整其大小，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的图层并将其命名为“log。”。Eo/yUfe图4-64(10)选择“横排文字”工具T.,在适当的位置输入需要的文字并选取文字。在“字符”面板中，将“颜色”设为橙黄色(195、135、73),其他选项的设置如图所示，按Enter键确定操作。用相同的方法在适当的位置分别输入需要的文字，填充为灰色(59、59、59),效果如图所示，在“图层”控制面板中分别生成新的文字图层。在微软瑞R-316点-d值期嗓0四：3三0%上JIT18%xo州。点TT,.IEaJylife关于M*r)b-imwfir三

33、T1c*rtjft*MS9S*三-(Il)选择“矩形”工具口.，在属性栏中将“填充”颜色设为无，“描边”颜色设为灰色(52、52、52),“粗细”选项设为1像素。按住Shift键的同时，在图像窗口中适当的位置绘制矩形，如图所示，在“图层”控制面板中生成新的形状图层“矩形KoIj2三IampI(12)选择“移动”工具中.,按住Alt+Shift组合键的同时，将矩形向右拖曳至适当的位置，复制图形，效果如图所示，在“图层”控制面板中生成新的形状图层“矩形1拷贝”。IilffiIRfiWF(13)按Ctrl+0组合键，打开云盘中的“Ch04素材制作EaSyLife家居电商网站制作EaSyLife家居电

34、商网站首页02”文件，选择“移动”工具乜，将“搜索”图形拖曳到图像窗口中适当的位置并调整其大小，效果如图所示，在“图层”控制面板中生成新的形状图层“搜索”。0l录I注题I我的髭户0(14)在“02”图像窗口中，选择“移动”工具也，选中“购物车”图层，将其拖曳到图像窗口中适当的位置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层“购物车”。MIIlffiI0S(15)选择“多边形工具O.,在属性栏中将“边”选项设为6。按住Shift键的同时，在图像窗口中适当的位置绘制多边形，在属性栏中将“填充”颜色设为灰色(52、52、52),“描边”颜色设为无。如图所示，在“图层”控制面板中生成

35、新的形状图层多边形lo置量I注燃I我的急户回目(16)选择“横排文字”工具T.,在适当的位置输入需要的文字并选取文字。在“字符”面板中，将“颜色”设为白色，其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。X不三苹方7常尿114点.二色(自动)0VE3Q卜Ii*0%IToo%HX100%芈直颜色：H0录ii2ffiTTTTTT,T.TTfi注册把背景S区口QG向2 .制作Banner区域(1)选择“视图新建参考线”命令，弹出“新建参考缓对话框，在1020像素(距离上方参考线840像素)的位置新建一条水平参考线,设置如图所示，单击“确定”按钮，完

36、成参考线的创建，效果如图所示。(2)选择“矩形”工具口，在属性栏中的“选择工具模式”选项中选择“形状”，将“填充”颜色设为浅灰色(245、245、245)描边”颜色设为无。在距离上方图形78像素的位置绘制矩形，在“图层”控制面板中生成新的形状图层并将其命名为“矩形2”，如图所示。(3)按Ctrl+O组合键，打开云盘中的“Ch04素材制作EaSyLife家居电商网站制作EaSy1.ife家居电商网站首页03”文件，选择“移动”工具,将图片拖曳到图像窗口中适当的位置并调整其大小，效果如图所示，在“图层”控制面板中生成新的图层“图层o3flMktSReouhr客厅家具我们的故事2019FURNITU

37、RE OESION50j5VJl(tt)Va日4o0%yIToo%Xoo%os&-.TTTTTT,T1TTfi-yftiST1鼻国英南-S(7)选择“矩形”工具口.，在属性栏中将“描边”颜色设为深灰色(8、1、2),“粗细”选项设为I像素。在图像窗口中适当的位置绘制矩形，如图所示，在“图层”控制面板中生成新的形状图层“矩形3”。IH客厅家具我们的故事2019(8)选择“横排文字”工具T,在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为灰色(73、73、74),其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。(9)按Ctr

38、l+O组合键，打开云盘中的“Ch04素材制作EaSyLife家居电商网站制作EaSy1.ife家居电商网站首页04”文件，选择“移动”工具也，将图片拖曳到图像窗口中适当的位置并调整其大小，效果如图所示，在“图层”控制面板中生成新的图层“图层2”。(IO)选择“矩形”工具口，为无。按住Shi丘键的同时，在新的形状图层“矩形4”。(11)选择“横排文字”工具“颜色”设为白色，其他选项的设中生成新的文字图层。冲手方，28，ri(Stt)VaO400%V100%工1004H0PTTTTTT,T.T霍6，C不了1%果国英博，印封(12)选择“横排文字”工具中，将“颜色”设为白色，其他选板中进行设置如图所

39、示，按Ent图层。-客厅家具我G的故2019O-在属性栏中将“填充”颜色设为橙黄色(195、135、73)描边”颜色设苗像窗口中适当的位置绘制矩形，如图所示，在“图层”控制面板中生成r-n客厅家具II我fl的故.2019_H-fT.,在适当的位置输入需要的文字并选取文字，在“字符”面板中，将置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板T-客厅家具JaiSIII我们的故2019上字寻T.,在适当的位置分别输入需要的文字并选取文字，在“字符面板项的设置如图所示，按Enter键确定操作。选择“”文字，在“字符”面er键确定操作，效果如图所示，在“图层”控制面板中分别生成新的文

40、字fl客厅家具我们的故事2019(13)按住Shift键的同时，单击“矩形2”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“Banner”,如图所不O3 .制作内容区域1(1)选择“视图新建参考线”命令，弹出“新建参考缓对话框，在4664像素(距离上方参考线3644像素)的位置新建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建，效果如图所示。新建爹考法取向O水平(H)有宜(V)(取辆)位置(P): 4664像房(2)在“02”图像窗口中，选择“移动”工具也，选中“送货”图层，将其拖曳到图像窗口中适当的位置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层“送货”。客厅家具我们的故事2019(3)选择“横排文字”工具T.,在适当的位置输入需要的文字并选取文字，在“字符”面板中，将颜色”设为灰色(73、73、74),其他选项的设置如图所示，按Enter键确定操作，在“图层”控制面板中生成新的文字图层。