按钮设计在日常工作中经常出现，今天给大家分享一个现代战争类按钮制作过程，希望能帮到大家，以下是效果图：
您需要准备以下素材
[img=681,320]http://uisdc.qiniudn.com/wp-content/uploads/2014/03/%E5%B0%8F%E6%95%99%E7%A8%8B20140321-%E5%BC%A0%E4%B8%9C%E4%BA%AE_07.jpg[/img]
首先，先建一个暗色背景，然后叠加一个金属纹理，调整一下。
[img=675,439]http://uisdc.qiniudn.com/wp-content/uploads/2014/03/%E5%B0%8F%E6%95%99%E7%A8%8B20140321-%E5%BC%A0%E4%B8%9C%E4%BA%AE_10.jpg[/img]
背景样式
用矩形工作开始绘制按钮基本形状。
[img=687,381]http://uisdc.qiniudn.com/wp-content/uploads/2014/03/%E5%B0%8F%E6%95%99%E7%A8%8B20140321-%E5%BC%A0%E4%B8%9C%E4%BA%AE_181.jpg[/img]
绘制完之后开始添加基本细节，把握住现代战争的特征，比如齿轮、工业设计线
[img=686,411]http://uisdc.qiniudn.com/wp-content/uploads/2014/03/%E5%B0%8F%E6%95%99%E7%A8%8B20140321-%E5%BC%A0%E4%B8%9C%E4%BA%AE_221.jpg[/img]
接下来给做好的原型添加材质,先把材质处理一下，
[img=694,700]http://uisdc.qiniudn.com/wp-content/uploads/2014/03/%E5%B0%8F%E6%95%99%E7%A8%8B20140321-%E5%BC%A0%E4%B8%9C%E4%BA%AE_251.jpg[/img]
基本形状出来之后，感觉层次较少，这是我们继续添加细节
[img=680,388]http://uisdc.qiniudn.com/wp-content/uploads/2014/03/%E5%B0%8F%E6%95%99%E7%A8%8B20140321-%E5%BC%A0%E4%B8%9C%E4%BA%AE_291.jpg[/img]
添加另外一种金属材质，让按钮变的更丰富,添加按钮厚度
[img=684,439]http://uisdc.qiniudn.com/wp-content/uploads/2014/03/%E5%B0%8F%E6%95%99%E7%A8%8B20140321-%E5%BC%A0%E4%B8%9C%E4%BA%AE_321.jpg[/img]
继续添加细节，按钮阴影处的反光、光效的添加
[img=699,476]http://uisdc.qiniudn.com/wp-content/uploads/2014/03/%E5%B0%8F%E6%95%99%E7%A8%8B20140321-%E5%BC%A0%E4%B8%9C%E4%BA%AE_361.jpg[/img]
添加文字，效果如下
[img=719,452]http://uisdc.qiniudn.com/wp-content/uploads/2014/03/%E5%B0%8F%E6%95%99%E7%A8%8B20140321-%E5%BC%A0%E4%B8%9C%E4%BA%AE_401.jpg[/img]
[img=722,275]http://uisdc.qiniudn.com/wp-content/uploads/2014/03/%E5%B0%8F%E6%95%99%E7%A8%8B20140321-%E5%BC%A0%E4%B8%9C%E4%BA%AE_441.jpg[/img]
整体的感觉，已经出来，为了让按钮更加真实，接下就是细节的调整了，我们要给按钮表面做旧处理。
[img=725,489]http://uisdc.qiniudn.com/wp-content/uploads/2014/03/%E5%B0%8F%E6%95%99%E7%A8%8B20140321-%E5%BC%A0%E4%B8%9C%E4%BA%AE_471.jpg[/img]
[img=737,311]http://uisdc.qiniudn.com/wp-content/uploads/2014/03/%E5%B0%8F%E6%95%99%E7%A8%8B20140321-%E5%BC%A0%E4%B8%9C%E4%BA%AE_501.jpg[/img]
为了按钮细节更加丰富，我们给按钮下面也添加工业线,微调整体光感，最终效果
[img=673,368]http://uisdc.qiniudn.com/wp-content/uploads/2014/03/%E5%B0%8F%E6%95%99%E7%A8%8B20140321-%E5%BC%A0%E4%B8%9C%E4%BA%AE_531.jpg[/img]
关于畅游VC
搜狐畅游视觉设计中心团队。我们是从游戏和生活中汲取创意和灵感的一群设计精灵，用爱去释放奇妙的设计魔法，描绘让你我感动的虚拟人生。
原文:畅游VC
粤公网安备 44030902001796号 粤ICP备19041343号-3
签到成功
Joker · 小丑
全部评论()
还没人评论，赶紧抢占沙发