按钮设计在日常工作中经常出现,今天给大家分享一个现代战争类按钮制作过程,希望能帮到大家,以下是效果图:

小教程20140321-张东亮_03
 

相关教程推荐:
《总结回顾!游戏网页设计的创新之路》
《PS教程:快速打造震撼的游戏场景效果》
《PS新手教程:轻松掌握四种扁平化设计风格》

您需要准备以下素材

小教程20140321-张东亮_07

首先,先建一个暗色背景,然后叠加一个金属纹理,调整一下。

小教程20140321-张东亮_10

背景样式

用矩形工作开始绘制按钮基本形状。

小教程20140321-张东亮_18

绘制完之后开始添加基本细节,把握住现代战争的特征,比如齿轮、工业设计线

小教程20140321-张东亮_22

接下来给做好的原型添加材质,先把材质处理一下,

小教程20140321-张东亮_25

基本形状出来之后,感觉层次较少,这是我们继续添加细节

小教程20140321-张东亮_29

添加另外一种金属材质,让按钮变的更丰富,添加按钮厚度

小教程20140321-张东亮_32

继续添加细节,按钮阴影处的反光、光效的添加

小教程20140321-张东亮_36

添加文字,效果如下

小教程20140321-张东亮_40

 

小教程20140321-张东亮_44

整体的感觉,已经出来,为了让按钮更加真实,接下就是细节的调整了,我们要给按钮表面做旧处理。

小教程20140321-张东亮_47

 

小教程20140321-张东亮_50

为了按钮细节更加丰富,我们给按钮下面也添加工业线,微调整体光感,最终效果

小教程20140321-张东亮_53

关于畅游VC

搜狐畅游视觉设计中心团队。我们是从游戏和生活中汲取创意和灵感的一群设计精灵,用爱去释放奇妙的设计魔法,描绘让你我感动的虚拟人生。

官网博客:vc.changyou.com
新浪微博: @畅游VC
微信公众平台:cyou_vc

您也可以通过扫描下方二维码快速添加:

vc

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/
设计微博:拥有粉丝量66万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

点赞
收藏
继续阅读相关文章

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
评论 收藏