资源简介

(共33张PPT)
第6章
网页元素设计（下）
6.3
网页按钮设计
按钮是网页构成中不容忽视的元素，面积虽小，却是网站细节的体现。设计优秀的网页按钮不仅可以引导浏览者，还可以提高用户的浏览体验，提升网站转化率。
在设计页面中的按钮时，应遵循以下3个原则。6.3.1按钮设计原则按钮的颜色应区别于周围环境色，且明度和对比度较高。此外，在设计较为重要的按钮时，可适当添加鼠标经过、点击和按下的效果，从而为访问者带来更佳的浏览体验，起到画龙点睛的作用，如图6-72所示。1．引人注意图6-72 引人注意的按钮2．准确反映功能按钮文字需要言简意赅、直接明了，如注册、下载、创建、免费试玩等，如图6-73所示。图6-73 准确反映功能的按钮网站的风格应贯穿网页的每个环节。在设计按钮时，应尽可能地结合网站风格。以游戏网页中的按钮为例，此类按钮应更注重质感，将金属、岩石、玻璃、木头等素材附在按钮上，以此来传达游戏的性质。图6-74所示为使用悬挂的木牌作为游戏页面的按钮，使按钮融入画面且符合网页风格。图6-74 符合页面风格的按钮3．符合页面风格小张为一家制作五金工具的公司制作网页时，客户要求网页风格应符合公司的行业属性，页面主色为蓝色，版块、按钮都要体现金属质感。6.3.2课堂案例——设计圆形按钮视频讲解图6-75 圆形按钮作品展示根据客户需求，小张制作了如图6-75所示的按钮。该按钮金属质感强烈，层次丰富，文字内容清晰，能吸引浏览者目光。
设计思路
① 圆形相对棱角鲜明的形状更能提升网页对浏览者的亲和力；
② 按钮立体感强，可产生凸起于页面的效果，更易吸引浏览者注意力；
③ 橙色与页面主色（蓝色）为对比色，能使按钮更加突出。
在Photoshop中新建图像文档，设置尺寸为600×600像素，分辨率为72像素/英寸，颜色模式为RGB颜色，并命名为“圆形按钮”。步骤1案例步骤新建图层，命名为“底色”，按住【Shift】键，使用“椭圆选框工具” 绘制一个300×300像素的正圆选区，再选择“渐变工具” ，在工具属性栏中设置渐变类型为“线性渐变” ，然后单击工具属性栏中的“点按可编辑渐变” ，打开“渐变编辑器”对话框，参考图6-76所示设置渐变色，再在图像中拖动鼠标填充选区。步骤2图6-76 制作按钮底色#535b5e#ffffff#ffffff#4a5154#535b5e新建图层，命名为“灰”，设置前景色为#cbcac9，按【Alt+Delete】键填充选区；按【Ctrl+T】组合键进入图像的自由变换状态，然后按住【Shift+Alt】键拖动变换框的角点控制点将灰色正圆等比例适当缩小，如图6-77（a）所示，按【Enter】键确认变换，效果如图6-77（b）所示。再新建一个图层，命名为“橙”，为选区填充#a82f24颜色，然后参考以上操作适当缩小橙色正圆，效果如图6-77（c）所示。步骤3图6-77 制作按钮外框（a）（b）（c）继续新建图层，命名为“黑”，将选区填充为黑色，在“图层”面板中将“黑”图层移动至“橙”图层下方，按【Ctrl+D】组合键取消选区；保持“黑”图层的选中状态，选择“移动工具” ，按几次【↑】方向键，制作按钮外框的阴影效果，如图6-78所示。步骤4图6-78 制作按钮外框阴影在图层面板中选中“橙”图层，然后新建图层，命名为“光01”；选择“画笔工具” ，设置前景色为#e49220，画笔大小为200，画笔形状为柔边圆，流量为60%，在橙色正圆中心单击4次，绘制橙色光效；新建图层，命名为“光02”，设置前景色为白色，在按钮中心偏下单击2次，制作白色光效，如图6-79所示。步骤5图6-79 制作按钮主体部分新建图层，命名为“光03”，使用“椭圆选框工具” 在按钮中绘制一个约180×120像素的选区，填充白色；为该图层添加图层蒙版，然后选择“渐变工具” ，设置渐变类型为“线性渐变” ，渐变色为黑白过渡，然后在图像中向上拖动鼠标，为图层蒙版填充黑白渐变（可多尝试几次，直到椭圆呈通透的效果），如图6-80所示。步骤6图6-80 制作按钮高光部分新建图层，命名为“光04”，按住【Ctrl】键单击“橙”图层缩略图，制作橙色正圆的选区，然后选择“椭圆选框工具” ，按住【Alt】键拖动鼠标修剪选区，如图6-81（a）（b）所示，再选择“渐变工具” ，为选区填充橙、黄、白3色线性渐变，效果如图6-81（c）所示。步骤7图6-81 制作按钮反光部分（一）（a）（b）（c）新建图层，命名为“光05”，选择工具箱中的“钢笔工具” ，在图6-82（a）所示位置绘制光效路径，然后按【Ctrl+Enter】组合键将路径转化为选区，如图6-82（b）所示，再为选区填充充橙、黄、白3色线性渐变，如图6-82（c）所示。步骤8图6-82 制作按钮反光部分（二）（a）（b）（c）选择“横排文字工具” ，设置字符参数，然后输入“立即购买”文字，调整文字位置，再为文字图层添加“投影”样式，如图6-83所示。到此，便完成了圆形按钮的设计。步骤9图6-83 制作文字部分小张在为一家网游公司制作游戏宣传广告页时，由于游戏题材取自三国时代，因此网页中使用的素材都带有浓烈的古风气息，大到背景，小到按钮，小张都采用古风素材进行设计和制作。6.3.3课堂案例——设计矩形按钮视频讲解图6-84 矩形按钮作品展示图6-84是小张设计的用于进入该游戏官网的按钮。该按钮颜色鲜明，十分抢眼，配合古风素材使按钮十分贴合游戏题材气氛，能有效起到吸引浏览者点击的目的。
设计思路
① 棱角分明的按钮更贴合冷兵器时代兵器的形态，因此按钮形状选择矩形；
② 为与网页风格匹配，按钮采用古风装饰素材，使其与页面其他版块更加融洽；
③ 按钮采用红色和金黄色作为主体，色彩突出，方便浏览者辨别。
在Photoshop中新建图像文档，设置尺寸为400×300像素，分辨率为72像素/英寸，颜色模式为RGB颜色，并命名为“矩形按钮”。步骤1案例步骤使用“矩形工具” 绘制一个290×95像素、填充颜色为任意颜色、无描边的矩形，按【Ctrl+O】组合键打开本章案例七“岩石.png”图像素材，将素材移至“矩形按钮”文档中并覆盖在矩形的上方，并执行“图层”>“创建剪贴蒙版”命令，将其剪贴至“形状1”图层，如图6-85所示。步骤2图6-85 制作按钮底色使用“矩形工具” 绘制一个280×87像素，填充颜色为#be4140、无描边的矩形，使其与“矩形1”图像居中对齐，再为该图层添加“描边”样式，如图6-86所示。步骤3图6-86 制作按钮主体部分按【Ctrl+O】组合键打开本章案例七“墙面.png”“龙纹.png”“高光.png”图像素材，依次将它们移至“矩形按钮”文档中，覆盖在矩形上（高光图像位于矩形上边缘和左边缘），剪贴至“矩形2”图层，然后更改“墙面.png”和“高光”图层的混合模式为“叠加”，“龙纹”图层的混合模式为“滤色”，不透明度为“20”，如图6-87所示。步骤4图6-87 添加并处理素材新建图层，命名为“反光”，选择“画笔工具” ，从工具属性栏中设置合适的画笔大小、流量（30%以下）和透明度，然后绘制白色图形，如图6-88（a）所示；将“反光”图层剪贴至“形状2”图层并调整混合模式为“叠加”，效果如图6-88（b）所示。步骤5图6-88 绘制反光效果新建图层，命名为“阴影”，使用“画笔工具” 在按钮底部和右侧绘制深灰色阴影，然后将该图层剪贴至“矩形2”图层并调整混合模式为“叠加”，如图6-89所示。步骤6图6-89 绘制阴影效果按【Ctrl+O】组合键打开本章案例七“装饰.png”和“金沙.png”图像素材，将“装饰”素材移至“矩形按钮”文档中按钮的左侧，然后按【Ctrl+J】组合键复制图像，调整方向置于对侧，如图6-90所示。步骤7图6-90 添加装饰素材选择“横排文字工具” ，设置字符参数，输入“进入官网”文字，调整文字位置，再为文字应用“内阴影”和“投影”样式；将“金沙”素材移至“矩形按钮”文档中文字上方，剪贴至“进入官网”图层，如图6-91所示。步骤8图6-91 制作主体文字部分#f8cb00按【Ctrl+O】组合键打 开本章案例七“光效.png”图像素材，移至“矩形按钮”文档中“进”字位置，并更改图层混合模式为“线性减淡”，然后按【Ctrl+J】组合键复制图像，并将复制的图像移动至“官”字位置，效果如图6-92所示。步骤9图6-92 制作文字光效选择“横排文字工具” ，设置字体为微软雅黑，字号为12，输入“ENTER”文字，调整文字位置，并为其添加“外发光”和“投影”样式，如图6-93所示。到此，便完成了矩形按钮的设计。步骤10图6-93 输入“ENTER”文字并添加图层添加样式课后练习（1）简述网页广告的分类和构图形式。（2）简述网页按钮的设计原则。（3）根据提供的素材（位于本章配套素材“红酒”文件夹中），分别设计以红酒为主题的Banner、商品主图和网页按钮，要求如下：① 整体风格以复古、奢华为主。② Banner尺寸为1 920×730像素；商品主图和网页按钮的尺寸不限，但要符合实际应用需要。③ 文案自拟。④ 写100字以上的设计说明。
THANK YOU!

展开更多......

收起↑