PS教程!教你绘制超漂亮的渐变按钮图标 - 优设网 - UISDC

PS教程!教你绘制超漂亮的渐变按钮图标

2016/07/14 28056评论区

photoshop-elegant-gradual-button-1

编者按:很多同学问这个按钮效果要怎么实现,今天@P大点S微博 手把手给同学们临摹了一遍,重点依然是图层样式的运用,附上教程和源文件下载,想学的一起来试试!

源文件下载:http://pan.baidu.com/s/1bDCg9o

最终效果:

pdds2016071424

新建文档,这里我用的是1000X800像素,创建一个#3d3d42的纯色调整层,添加一个杂色。

pdds201607141

给这个调整层添加一个内阴影。

pdds201607142

pdds201607143

画一个黑色的正圆,将填充修改为24%,并添加一个图层样式,圆的大小我用的是500X500像素。

pdds201607144

pdds201607145

pdds201607146

利用布尔运算中的减去,你很容易的画出下面这个黑色的圆环。

pdds201607147

画一个矩形,应用Ctrl+Alt+Shift+T,你可以轻易的得到跟我图中一样的直线,同时配合蒙版,将在刚才那个圆环外部的部分涂抹掉。

pdds201607148

下面,回到直线的下层,我们画一个圆,添加图层样式。

pdds201607149

pdds2016071410

pdds2016071411

pdds2016071412

接下来,我们来画那个内圆,同样的在直线图层的下层,我画了一个黑色的圆,将填充修改为26%,并添加了一个图层样式。

pdds2016071413

pdds2016071414

pdds2016071415

下面,我们来画那个按纽,画一个正圆,添加图层样式。

pdds2016071416

pdds2016071417

pdds2016071418

pdds2016071419

pdds2016071420

最后,毫无疑问的,就是添加我们的LOGO了。

pdds2016071421

pdds2016071422

pdds2016071423

是不是异常的简单,大功告成!

pdds2016071424

1468292559x3738746547 1468306825x3738746583

欢迎关注可能是最用心做原创教程的微信公众号:

psqr21111111

「设计大咖的精品教程合集」

MBE 风格图标:
《PS热门教程!教你5分钟快速绘制超火的MBE风格图标》

五分钟海报教程:
《PS教程!5分钟设计出极具格调的艺术海报(一)》
《PS教程!5分钟设计出极具格调的艺术海报(二)》

原文地址:pdadians

yestone-uisdc-2

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

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量160万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/photoshop-elegant-gradual-button

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 设计师干货 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 海报设计 用户体验设计 设计规范 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里