注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

优品设计

简约至上 点石成金(http://www.upindesign.com

 
 
 

日志

 
 

10 simple ways to make glossy button  

2008-01-17 17:14:32|  分类: 网站设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

                                        来源:http://www.jay-han.com/

Woot. My first tutorial! Glossy button is current in thing in web design, because it is eye-catchy, pretty and friendly. Not sure about how the trand started but I pretty sure is Apple button style! There are some ways to “glossify” a button, which I will teach you how to make below. Tutorial work file is included also. But first, let me teach you the simple steps of making a glossy button.

Step by step glossy button tutorial

First, use the Rounded Rectangular tool to make the button shape. Then, Ctrl-select the shape layer, a marquee is created.

With the marquee is still there, select Rectangular Marquee Tool, press Alt and draw a marquee selection below the button. The marquee selection now is cut into half. Create a new layer on top of the button shape layer.

Then, select Gradient Tool. Make your foreground color to white, then select the Foreground to Transparent gradient, then from the bottom of marquee selection you made just now, drag a vertical straight gradient (hold Shift for perfect vertical).

Gradient is applied. Ctrl-D to deselect. Final tweak is reduce the opacity to best blend with the button. Done!

How easy isn’t it? Below are more alternatives way of making glossy buttons.

1. Gradient from middle to top

This is the one I shown above. The method I use the most.

2. Gradient from top to bottom

This is just the reverse style of above. Just drag the gradient from top to bottom of button.

3. Using fill white color

Instead of using gradient, actually glossy effect can be achieve easily by using Paint Bucket Tool too.

4. Using Inner Shadow

Inner Shadow also can achieve glossy effect. Select Inner Shadow: layer blend = normal, color = white, angle = 90 degree, distance = to the center of button, size = 0. Then you can adjust the opacity. But this glossy effect is not very nicely achieved.

5. Using Gradient Style

This is one of my favourite method, by just using gradient style alone. The blend step of one end of gradient drag until close to another gradient end, then you can achieve the effect. To add realistic feel, create the shiny feel over the bottom of button.

6. Use black gradient instead of white

Instead of white, we can use black too, but now revert the selection from top part of button to bottom part of button. But the glossy feel a little different from white color haha.

7. Contract the marquee to give 3D feel

Similar to style 2, but now before we apply white gradient, go to Select > Modify > Contract, I use 3px. The selection now is contracted. The effect here is actually more realistic and 3D.

8, 9, 10. Different glossy shape style

Instead of the normal glossy shape above, you can use other shapes too. A more rounded one, rounded edges one or even wild style. Just play with it! You might achieve surprise result.

  评论这张
 
阅读(243)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017