| 网站首页 | Photoshop资源 | Photoshop学院 | Photoshop展示 | 设计素材 | 设计学院 | 留言本 | 返回总部 | 
您现在的位置: Photoshop资源站 >> Photoshop学院 >> 网页设计 >> 按钮制作 >> 正文
  Glossy Button 有光泽的按钮           ★★★★ 【字体:
Glossy Button 有光泽的按钮
作者:佚名    文章来源:ps.onegreen.org    点击数:    更新时间:2008-8-3    

  Step 1

  Start off with a button, either curved or rectangled. I used a rectangle. Be sure to make the pixel edge ' Inside '. I used a dark green.

  

Step 2

  Put a gradient colour in the box. Preferably a bright colour. Make sure its brighter near the bottom and get darker towards the top.

  You can use the HEX codes i used:

  TOP: #5cbf04

  BOTTOM: #93dd16

  Now goto 'Inner Shadow' and use the following settings:

  Blend Mode: Overlay (#FFFFFF)

  Opacity 45%

  Distance 2

  Choke 0

  Size 0

  It should like something like this:

  

Step 3

  Now you want to add some of the bright green to it

  Get a new layer and use the 'gradient' took in the tool bar. Make sure the top settings are as followed:

  

  Press 'CTRL + Click the first layer in the layer pallette. It should be selected. Goto 'Select' - 'Modify' - 'Contract' and put in '2'

  Zoom into the button and click the gradient tool from the top line, down to the bottom.

  So far it should be like so:

  

Step 4

  Now stretch the new layer across and centralise it, so it looks like:

  

Step 5

  Double click this layer in the layer palette and goto 'color overlay'. Click the red box and at the top of the box, you will see the dark green pixel stroke. Just below that there should be a light green pixel line. Click that line with the picker.

  You should come out with something like this:

  

Step 6

  Now press 'CTRL + Click the first layer in the layer palette' and make a selection. Goto 'select' - 'modify' - 'contract' - '2'

  Then get the select tool (square) and go across half of the box. It should look like:

  

Step 7

  Make a new layer and press 'CTRL + Backspace'. Move this layer above the rest of the layers.

  Where it says Opacity, select 15%

  It should turn out like this:

  Thanks!

文章录入:onegreen    责任编辑:onegreen 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    最新热点 最新推荐 相关文章
    在线制作与众不同的个性签名档
    使用Photoshop设计一个简单而专业的网站
    Photoshop制作咖啡店主题网站主页
    Photoshop打造一款美女水晶按钮
    Photoshop打造超酷网站登录界面
    Photoshop和ImageReady制作闪心动画边框
    Photoshop简单制作网页半透明按钮
    Photoshop制作水晶按钮网页导航
    新鲜视觉 非常规网页设计作品欣赏
    Photoshop制作电梯按钮