Photoshop绘制蓝色圆形网页按钮

2016-02-16 06:18 34 1 收藏

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐Photoshop绘制蓝色圆形网页按钮,希望大家看完后也有个好心情,快快行动吧!

【 tulaoshi.com - PS 】

先看效果图。

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

新建文档500x500像素,背景白色。画布中心位置设置2条辅助线,以后步骤画圆以辅助线中心为参考点。

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

建新层画一正圆选区,填充50%灰色

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

添加图层样式。

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

新建图层2,画一个小些的白色正圆。

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

选择图层1(描边层),做一个大点的正圆选区。

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

用加深减淡工具涂抹上部和下部,效果如下,隐藏辅助线。

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

画一个比白色正圆大一些的选区,填充50%灰色。

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

添加图层样式。

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

效果如下。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

新建图层4,调出图层2(白色正圆)选区,白到透明直线渐变,图层不透明度50%,ctrl+T变形一下

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

高斯模糊2像素,建新层,用椭圆工具减法模式做如下选区,填充#97e0ff

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

去掉选区,高斯模糊20像素,图层不透明度40%

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

添加一些文字及图形。

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

最后用钢笔画一个路径,前景色#b6edf7画笔描边,你懂的,最终效果如下

Photoshop绘制蓝色圆形网页按钮,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160216/1569077.html

延伸阅读
标签: PS PS基础
下面是详细的制作过程,图文并茂.
标签: PS PS基础
面对相同的效果,每个人的实现方法都不尽相同,我把我常用的方法在这里写出来,第一次写教程,如有不妥之处望多多包涵。本次为写教程部分地方重新制作了一下,与之前发的图片在色彩等方面多少会有不同之处。 废话少说,先看效果图 1.制作按钮本体。先画一个圆角矩形,并加上渐变滤镜 这里颜色的选择是重点,选择好颜色后就已经有一种柔和...
标签: PS PS基础
如果你是设计师,那么创建界面元素是非常重要的技能。本次教程中,我们会创建一个简单漂亮的切换开关按钮。切换开关经按钮常用于某项功能的启用与关闭,他们经常出现在UI设计与网页应用设计中,好了,来开始我们的教程吧。 先看看效果图 下面是教程 第1步: 打开Photoshop,Ctrl+N新建一个文档,尺寸选择600×500px。 第2步: 按住...
标签: PS PS教程
本文由 中国 龟爬树(邓志峰) 原创,转载请保留此信息!   1、新建一个150X150像素的透明文档,用矩形选择工具选取一个方形区域,并填充白色,如下图 2、点击右键设置图层样式如下图 渐变叠加 描边 3、再新建一个6X6像素的文档,用铅笔工具画斜线如下图: 4、现在选择菜单项,编辑--定义图案,取...
标签: PS PS基础
效果图和绘制方法如下:

经验教程

238

收藏

32
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部