首页 > 网站建设 >

七步做好网站前端按钮

发布时间:2018-10-25 作者:深圳网站制作

  众所周知,网站在设计制作时是有很多元素组成的,比如文字、图像、表格、各种按钮。深圳网站制作公司今天与各位分享网页设计时怎样快速高效的做好网页按钮的经验。博纳网络根据实际操作经验整理出如下七个步骤。
制作网页按钮在Photoshop中制作网页按钮.一般可以按如此步骤进行操作。
【操作步骤】
第1步,在Photoshop中绘制出按钮形状,如矩形、圆形、椭圆或多边形。绘制按钮形状,可以使用Photoshop提供的形状工具;如果是绘制不规则的形状,则可使用【钢笔工具】、【刷子工具】和【铅笔工具】,再用【自由变形工具】和【更改区域形状工具】进行调整。
第2步,利用【图层样式】对话框对按钮对象进行处理。例如,给按钮填充渐变颜色,或者填入些底纹效果等。
第3步,给按钮添加立体效果,使其看就是个按钮,此时可以使用【样式】面板为按钮添加些样式效果,使按钮具有立体感。当然也可以使用其他效果。
第4步,进行按钮形状的编辑,最后给按钮命名。这样就完成了网页按钮的制作。
  悬停按钮是组按钮的组合,它在网页中有多种显示状态。在Photoshop中制作悬停按钮的操作步骤如下。
【操作步骤】
第1步,新建文档,在【图层】面板中新建国层l,使用图形工具绘制一个圆角矩形,填充颜色指定,如图9-23所示。
第2步,选择【窗口】【样式】命令,打开【样式】面板,从中选择
款样式,单击为当前背景图层进行应用,如图9-24所示,也可以自己利用
【图层样式】对话框自定义设计。
第3步,重命名“图层l”为“正常”,然后按Ctrl+j快捷键复制该图层命名为“移过”。为该图层应用“投影”效果,设置保持默认值即可,设置
【不透明度】为50%.降低阴影度,效果如图9-25所示。
       网站设计按钮制作实操步骤示意图9-25设计鼠标经过样式
第4步,复制“移过”图层,并命名为“按下”,双击图层缩略图,在打开的【图层样式】对话框中修改浮雕设置参数,如图9-26所示,完成鼠标按下时按钮的效果。
用户还可以设计更多的变化。例如,可以将鼠标指针移过状态设成个文字发光效果。这样当鼠标指针移到按钮上时,就会出现文字发光的效果。总之,只要能够制作出悬停按钮的3种状态,悬停按钮就算制作成功了.即使只是个简单的颜邑变换或是位置的移动也可以。
第5步,完成3种不同状态的背景样式,最后使用【文本工具】输入按钮文本,选择【图像】【裁切】命令,打开【裁切】对话框,裁}刀掉多余的区域,如图9-27所示。
第6步,隐藏“背景”图层,仅显示“正常”图层和“面对面”文字图层,选择【文件】【存储为Web所用格式】命令,在打开的【存储为Web所用格式】对话框中单击【存储】按钮即可,如图9-28所示。
 
   网站设计制作悬停按钮实操示意图9-28输出悬停按钮状态图
第7步,以同样的方式输出鼠标移过和鼠标按下时的按钮状态图,最后效果如图9-29所示。
深圳网站制作公司关于网页设计对于按钮制作处理技巧的经验分享,本文就到这里。博纳网络编辑整理。 
文章标题:七步做好网站前端按钮
本文地址:https://www.198bona.com/news/1574.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯