资源简介

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

展开更多......

收起↑