网页元素设计(下)

第6章网页元素设计（下）情景模拟随着电子商务的发展，网上店铺越来越多，竞争压力越来越大。为了从众多店铺中脱颖而出，除了需要提供优质的产品和服务外，还需要通过优质的网页商品广告和商品主图等吸引消费者的点击。因此，许多网店经营者找到小张的创业团队，希望他们帮助设计符合需要的网页广告和商品主图等。掌握网页Banner、悬浮广告、弹窗广告、通栏广告和商品主图的设计知识，能够根据需要设计这些广告。掌握网页按钮的设计知识，能够根据需要设计网页按钮。学习目标6.1网页广告设计网页广告设计是一种能充分激发设计师想象力和灵感的工作，一个好的网页广告不仅能够有效传递信息，还能给予人们艺术上的享受。常见的网页广告可分为Banner、悬浮广告、弹窗广告和通栏广告。6.1.1网页广告分类56Banner也称旗帜广告、横幅广告，是最基本的网页广告形式之一，用于宣传企业或产品，如图6-1所示。Banner一般置于网站页首，使用GIF或JPEG格式的图像文件。Banner的尺寸和内容可以根据网站的需要灵活设置，目的都是吸引浏览者的注意。在页面同一版块中展示多张Banner时，可通过代码将Banner按顺序轮播展示。1．Banner图6-1轮播Banner图6-2悬浮广告7悬浮广告一般位于页面主体内容两侧，并会随滚动条上下移动。悬浮广告的覆盖面广，互动性强，受众群体鲜明，广告费用低，但广告随页面移动会降低访问者的浏览体验。悬浮广告的具体尺寸可根据实际页面宽度而定。图6-2所示网页中位于页面右侧的就是悬浮广告。2．悬浮广告8图6-3弹窗广告弹窗广告是用户打开网页时以弹窗的形式出现在页面中的广告，如图6-3所示。弹窗广告具有很强的广告效应，但由于弹窗出现前没有任何征兆，突然出现时会使浏览者产生反感。弹窗广告的尺寸不固定，可以是小型弹窗，也可以是全屏弹窗。3．弹窗广告94．通栏广告通栏广告与网页等宽，但高度较低，呈长条状，内容多以文字和简单的图像为主。图6-4所示红框中的就是通栏广告，它位于2个信息版块之间，起到传递信息、美化页面和承上启下的作用。图6-4通栏广告不同的构图形式可达到不同的视觉效果。在制作网页广告时应根据产品、主题、素材等选择合适的构图形式进行制作，使画面中的各元素相互呼应并达到平衡。6.1.2网页广告的构图形式10以Banner广告为例，常见的构图形式如图6-5所示，下面分别说明。图6-5网页广告的构图形式11图6-6图文居中式构图121．图文居中式图文居中式是Banner广告中最常用的构图方式之一，是指将Banner中的图文以画面的中轴线居中对称进行组合，从而让视觉焦点集中到画面中间，使画面平衡、稳定，如图6-6所示。图6-7左右对称式构图2．左右对称式图文左右对称排列也能够使画面达到平衡，如图6-7所示。14图6-8对角式构图3．对角式对角式构图是指将主体内容倾斜放置，形成对角对称。这样的构图形式动感活泼又不失稳定，具有很强的设计感，如图6-8所示。15图6-9平铺式构图4．平铺式平铺式构图适用于产品数量较多的广告，是指将每个产品平铺排列，并保持间距相等，再将文案置于产品上方或叠加在产品上。这种构图形式秩序感强，能给人整洁、规范的感觉，如图6-9所示。辐射式构图是指利用素材运动趋势将浏览者的视觉中心集中到一点。这样的构图形式空间感、次序感强，能够有效地突出产品或主题内容，如图6-10所示。图6-10辐射式构图165．辐射式课堂互动欣赏图6-11所示的网页广告，并简要分析其广告分类和构图形式。图6-11网页广告网页广告设计的常见误区包括主题混乱、字体风格与广告内容背离、颜色搭配失衡、装饰元素烦琐等。网页美工在制作广告前应明确广告主题，确定是打折减价、节日活动、产品推销还是其他，再确定各信息间的层级关系。6.1.3网页广告设计误区1819主题是广告的核心价值所在，是广告最应突出的点。图6-12（a）所示为销售服装网站的Banner，该Banner中没有模特或衣服，只有抽象的文字和单调的色彩，并且文字层级模糊，无法起到宣传效果。图6-12（b）所示的Banner主题明确，色彩对比鲜明，文案层级清晰，图文联系紧密，具有很强的视觉冲击力。1．主题混乱图6-12主题混乱与主体清晰的Banner（a）（b）20为了体现“可爱”的主题，图6-13（a）所示的Banner背景运用了手绘元素，而标题字体却使用了力量感较强的黑体，这与背景图像的风格相悖，造成图文搭配不协调，弱化了主题。图6-13（b）所示同样是“可爱”主题的Banner，图像与文字的风格统一，营造了清爽、活力、可爱的气氛。2．字体风格与广告内容背离图6-13字体风格与广告内容背离和契合的Banner（a）（b）21色彩是广告组成中的重要部分。优秀的色彩搭配能够吸引浏览者，而失衡的色彩搭配会严重影响广告的美观性。图6-14（a）所示的Banner色彩搭配失衡，导致色彩明度相近，文案层级区分不明显，不易于阅读。图6-14（b）所示的Banner能够给人强烈的代入感，将床、背景和文案的色彩用色相、纯度做区分，从而更好地体现了家具的品质。3．颜色搭配失衡图6-14颜色搭配失衡和协调的Banner（a）（b）22广告中的装饰元素如果运用得当，能够烘托主题，丰富画面。图6-15（a）所示的Banner中装饰元素过于烦琐，不仅没有起到应有作用，还使画面混乱。图6-15（b）所示的Banner则将装饰元素虚化，融入背景，起到了很好的辅助作用。4．装饰元素烦琐图6-15装饰元素烦琐和简洁的Banner（a）（b）小张的创业团队接到了一个工业制造企业的Banner设计项目。在与该项目负责人沟通时，对方是这样描述需求的：“我们是一家从事工业制造的企业，现需要制作一个宣传企业文化的广告，以此体现我公司的博大、生机。广告最好视觉感受强烈，效果明显，尺寸为1920×800像素。”6.1.4课堂案例——设计企业网站Banner23视频讲解24图6-16企业网站Banner作品展示图6-16所示为根据需求分析设计出的企业网站Banner。该Banner整体色调统一，主题明确；以深蓝色的宇宙作为背景，以翱翔的飞机作为主体，通过宏大的场景表现企业博大的气质；以飞机后方的光芒体现生机、希望。设计思路①选择主体物、背景素材。由于客户是机械制造行业，因此选择与之相关的飞机、宇宙素材。②光代表希望、梦想、生机等，通过飞机图像后耀眼的光芒体现企业的实力。③通过左右结构将文字置于画面左侧，使画面达到平衡。26在Photoshop中新建图像文档，设置文档尺寸为1920×800像素，分辨率为72像素/英寸，颜色模式为RGB颜色，并命名为“企业网站Banner”。步骤1图6-17填充渐变背景案例步骤在工具箱中选择“渐变工具”，在工具属性栏中将渐变样式设为“径向渐变”，单击“点按可编辑渐变”打开“渐变编辑器”对话框，分别设置左右色标的颜色为#163985和#141e3f，然后在图像中拖动鼠标填充渐变色，如图6-17所示。步骤227按【Ctrl+O】组合键打开本章案例一“星空.jpg”素材图像，将其移至“企业网站Banner”文档中的合适位置，并利用“图层”面板调整混合模式为“线性减淡”，然后按【Ctrl+L】组合键打开“色阶”对话框，将图像亮度压暗，如图6-18所示。步骤3图6-18导入“星空”图像素材并调整图像明暗28更改星空图像的图层名称为“星空”，然后单击“图层”面板下方的“添加图层蒙版”按钮，添加图层蒙版；将前景色设为黑色，选择工具箱中的“画笔工具”，从工具属性栏中设置画笔大小为40，硬度为0，然后在过亮的星光处拖动鼠标涂抹。在涂抹处将显示下层的背景图像，从而将过亮的星光覆盖，如图6-19所示。步骤4图6-19处理“星空”图像素材29按【Ctrl+O】组合键打开本章案例一“地球.png”“白云.jpg”素材图像，将“地球.jpg”图像移至“企业网站Banner”文档中，更改图层名称为“地球”；按【Ctrl+T】组合键执行“自由变换”命令，按住【Shift】键拖动变换框四个角的控制点之一等比例缩小图像，再分别拖动上方和左侧中间的控制点垂直翻转和水平翻转图像，接着将图像移至合适位置，按【Enter】键确认变形；更改图层混合模式为“滤色”，如图6-20所示。步骤5图6-20导入并处理“地球”图像素材30将“白云.jpg”素材图像移至“企业网站Banner”文档中地球图像上方，按【Ctrl+T】组合键执行“自由变换”命令，调整大小并旋转，然后移至合适位置，按【Enter】键确认；更改图层名称为“白云”并添加图层蒙版，然后参考步骤4的操作使用“画笔工具”处理蒙版（可根据情况调整画笔大小），使白云图像变得稀疏，如图6-21所示。步骤6图6-21导入并处理“白云”素材图像31按【Ctrl+O】组合键打开本章案例一“光效.psd”图像素材，如图6-22（a）所示；使用“移动工具”将“01光效”图像移动至“企业网站Banner”文档中的合适位置，并将该图层命名为“01”；按【Ctrl+T】组合键进入自由变换图像状态，再右击图像，执行“变形”命令，接着通过拖动变形网格的控制点和控制柄调整光线弧度，使其贴合地球边缘，如图6-22（b）所示。最后按【Enter】键确认变形。步骤7图6-22打开“光效”素材并处理“01光效”图像（a）（b）32提示在为图像或文字添加光效时，应根据其形状、走势对光效的形状进行处理，才能达到逼真的效果。图6-22（b）所示就是贴合地球形状处理光效的。33按步骤7的操作方法，将“02光效”图像移至“企业网站Banner”文档中的合适位置并做变形处理，然后将该图层命名为“02”，效果如图6-23（a）所示；将“03光效”图像移至“企业网站Banner”文档中，使其光源与02光效的光源重合；分别为“02”“03”图层添加图层蒙版，并使用“画笔工具”编辑蒙版，处理的光效中的杂色，效果如图6-23（b）（c）所示。步骤8图6-23处理“光效02”“光效03”图像（a）（b）（c）34按【Ctrl+O】组合键打开本章案例一“月球.png”素材图像，使用“移动工具”将其移动至“企业网站Banner”文档中的合适位置，然后选择“02”图层，按【Ctrl+J】组合键复制图层，再按【Ctrl+T】组合键执行“自由变换”命令，调整光线大小、位置和角度，使其贴合“月球”图像的下边缘，效果如图6-24所示。步骤9图6-24导入并处理“月球”素材35按【Ctrl+O】组合键打开本章案例一“飞机.png”图像素材，使用“移动工具”将其移动至“企业网站Banner”文档中的合适位置，如图6-25所示。步骤10图6-25导入“飞机”素材36使用“横排文字工具”在飞机图像的左侧输入主体文案（字体都为微软雅黑，字号分别是135、34和20点，颜色为白色），并将各文字左对齐，然后在画面右下角输入叙述文字，使画面达到平衡，效果如图6-26所示。到此，就完成了企业网站Banner的设计。步骤11图6-26添加文案某网店决定在七夕节推出特惠活动，网站运营人员请小张的创业团队以“约惠吧”为主题，为他们制作电饭煲和热水壶促销广告。6.1.5课堂案例——设计家电促销Banner37视频讲解38图6-27家电Banner作品展示根据需求分析设计出的家电Banner如图6-27所示。该Banner为紫色调，以此呼应七夕浪漫神秘的感觉。Banner文案层次分明，将文字与产品组合放置，并添加发光效果，能够有效吸引浏览者的视线，达到很好的宣传效果。设计思路①该Banner尺寸较宽，因此应将商品图与文字集中放置，使视觉中心集中到画面中间；②Banner的背景选在舞台，配合射灯、荧光等光效，突出促销活动的热烈；③选择紫色作为广告的色调，渲染七夕浪漫的氛围。40在Photoshop中新建图像文档，设置文档尺寸为1920×730像素，分辨率为300像素/英寸，颜色模式为RGB颜色，并命名为“家电Banner”。步骤1图6-28导入并复制“背景”图像素材案例步骤按【Ctrl+O】组合键打开本章案