你好,欢迎访问远方教程PC版!
广告位招租
网站首页 >> PS教程 >> PS经典案例 >> 文章内容

photoshop制作网页常用小按钮案例(第1页)

[日期:2014-12-13]   来源:远方教程  作者:远方教程   阅读:4888次[字体: ] 访问[旧版]
 捐赠远方教程 

  今天,我们就来设计几款最常用的网页小巧按钮。

  第一款:像素按钮

  这是目前最为流行的一种按钮,在每个以像素为主题的网站上几乎都能看到它的身影。想要最大程度的减小网页大小,这种按钮可是不二法门。这种按钮简单大方,除了个性化的网站之外,用于公司网页也非常合适。

  新建一个Photoshop文档,RGB模式,白色背景。

  新建一层,复位色板,将前景色设为一种浅灰色,如例子中的RGB(239,239,239),用矩形选框工具选择一个小矩形,填充前景色后取消选择。

  下面我们来制作按钮的立体效果。这里,我们完全用添加图层样式的方法,双击图层,打开图层样式对话框,我们来依次添加:

  首先选择斜面和浮雕样式,设置结构为内斜面,方法为平滑,深度为1%,方向在上,大小和软化均为2像素,阴影角度为146度,使用全局光,高度为30度,光泽保持默认,高光和暗调的混合模式与颜色都不变,不过不透明度分别设为100%和43%;

  其次是内阴影模式,模式为正常,颜色为白色,不透明度为100%,角度为146度,使用全局光,距离为1像素,阻塞为100%,大小为0,品质不变;

  接下来是描边,将描边大小设为1像素,位置在外部,混合模式为正常,不透明度为100%,填充类型为颜色,描边颜色设为黑色;

  最后是投影样式,将阴影颜色设为黑色,不透明度为22%,角度为120度,取消全局光,距离为3像素,扩展为0,大小为0,品质保持默认不变。

  好了,现在你可以选择细一些的字体,最好是专门的像素字体,在按钮上写上文字。在设置文字选项的时候,有一项需要特别注意,那就是要将文字消除锯齿的方式设为无,否则字体会出现模糊。整个制作过程如图1所示。


图1

  如果觉得灰色太单调,你也可以为按钮添加各种颜色,过程和前面的大致相同,但有些地方有些细微差别。

  在新建图层、设置选区后,设置你的前景色,如这里我们将前景色设为RGB(106,175,5),填充选区后取消选择。然后开始设定图层样式。在斜面和浮雕样式中,将深度设为100%,大小和软化为1像素,注意要将阴影的高光模式设为颜色减淡,不透明度为65%,暗调的不透明度也要减低一些;和刚才不同,我们取消了内阴影样式,在描边样式中,将描边颜色设为一种较深的灰色,如RGB(132,132,132),当然,你也可以用黑色描边;对于投影样式,由于按钮本身的颜色较深,相对的,我们可以将阴影的不透明度设的稍微高一些,40%即可。最后,写上文字。

第1页 第2页 第3页
图片展示
 
相关评论
站长推荐