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

优品设计

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

 
 
 

日志

 
 

Creating cool push button in Photoshop  

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

  下载LOFTER 我的照片书  |

Creating cool push button in Photoshop - gowebway - 优品设计

Recently I created a push button and I think it is quite cool and decided to create a tutorial here in my blog. There is quite a variety of styles of push button in the real world and the one I did here is more to gaming arcade push button styles. The final button design is shown above. What do you think?

Like my last tutorial, this tutorial also uses a lot of layer styling. To make the tutorial more understandable and effective, I include a starting working PSD, a final outcome PSD as well as the ASL working layer styles file. You can download it here: Push Button Tutorial Files. Just download and extract it, launch Adobe Photoshop and starts the tutorial!

Creating cool push button in Photoshop - gowebway - 优品设计

Before proceed, let me show you the structures of the push button we going to create. There are 6 shape layers to construct the push button:

  • Gray Border
  • Gray Body
  • Button Shadow
  • Button Orange Body
  • Button 3D Highlight
  • Button 3D Shadow

Then, open the pushbutton-start.psd file, inside, you will find the all the 6 basic shape layers but without the styling. You can see that basically, all of them are done by using Ellipse Tool. Then, load the Push-Button-Styles.asl file into your Styles palette. By following the instructions written in the picture below, apply the styles respectively to all the six shape layers.

Creating cool push button in Photoshop - gowebway - 优品设计

After applying all the layer styles, you had successfully create a push button! I hope you all like the final result of the push button. Eventually you can check the final result at the pushbutton-final.psd file. Since it was a push button, I think it is better to include a pushed-in version, you can find it in the final PSD too.

Hope you like this tutorial, if there is comment or you have a better outcome, feel free to share it out here :D.

  评论这张
 
阅读(124)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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