精致金属质感水晶按钮

沙克力士

沙克力士

2016-03-18 05:57

今天图老师小编给大家展示的是精致金属质感水晶按钮,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!
  先看看最终效果吧,哈哈是不是有点复杂. 不过不要急,心情放松...注意力集中...现在我们就来"肢解"他.不难看出这个按钮主要由3部分构成:背景,水晶按钮及文字,下面我们就开始动手.

一.背景的制作:
1.打开photoshop 新建一个400*400的文件 最好是"RGB"颜色
用黑白圆形渐变绘制如图2所示渐变

图1


图2

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)2.选择滤镜 杂色 添加杂色 数值如 图3 所示

图3
3.选择滤镜 艺术效果 底纹效果 数值如 图4 所示

图4
背景效果图如图5(第一步大功告成):

图5

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)一.水晶部分的制作:
1.新建一个图层命名为“水晶--底1”,按 Ctrl + R 调出标尺 拉两条如图所示参照线,以参照线的交点为圆心,用椭圆选取工具 按住 ALT + Shift 绘制 图6 所示的正圆。

图6
2.按 Ctrl + ’ 隐藏参照线,选择渐变工具在“水晶--底1”这层绘制渐变,渐变颜色:黑白渐变,渐变方式:放射性渐变,渐变路线:由选区的左上角 按住 Shift 向右下方渐变 如图7

图7

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)3.按 Ctrl + D 取消选区 渐变的效果如 图8

图8
4.双击图层“水晶--底1”调出 图层样式 分别选择描边和投影 相关参数如 图9 图10 效果如 图11

图9

图10

图11

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)5.用椭圆选取工具在刚绘制圆形上绘制如图12所示的椭圆,按 Ctrl + Alt + D 羽化,数值为25,再按 Ctrl + M 把所选的区域调成高光如图13

图12

图13

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)6.按Ctrl + D 取消选区,在“水晶--底1”上面新建一层命名为:“水晶--底2”,再按 Ctrl + ’ 调出参照线,然后用椭圆选取工具绘制图14所示的正圆。

图14
7.用渐变工具绘制渐变:渐变颜色:黑白渐变,渐变方式:放射性渐变,渐变路线:由选区的右下角 按住 Shift 向左上角方渐变 渐变效果如图15

图15

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)8.不要取消选区,在图层“水晶--底2”上再新建一层命名为:“水晶--底3”,选择:选择 修改 收缩 数值为:3 如图16。

图15

图16
8.在图层“水晶--底3”绘制渐变:渐变颜色:深绿(R:0 G:63 B:41)白渐变,渐变方式:放射性渐变,渐变路线:由选区的右下角 按住 Shift 向左上角方渐变 按 Ctrl + ’ 取消参照线 渐变效果如图17

图17

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)9.双击“水晶--底3”调出图层样式,选择描边,数值为1,颜色为黑色,透明度为25%,在“水晶--底3”上面新建一层命名为:“水晶--内阴影” 调出“水晶--底3”的选区,(方法:用鼠标点击图18红色部分位置,下同)填充黑色。

图18
10.选择菜单:选择 修改 收缩 数值为:3 再按Ctrl + Alt + D 羽化,数值为5,按删除键删掉选择部分,取消选区(按 Ctrl+D)效果如图19

图19
11.在“水晶--内阴影”上新建一层命名为“水晶--内发光”调出“水晶--底3”的选区(方法参照第9步下同),填充白色,选择菜单:选择 修改 收缩 数值为:3,再按Delete 删除中心部分如图20。

图20

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)12.选择橡皮工具,设置如图21,把白圈的部分地方擦除,效果(m.tulaoshi.com)如图22

图21
图22 13.在“水晶--内阴影”上新建一层命名为“水晶--底高光”调出“水晶--底3”的选区(方法参照第9步下同),用椭圆选取工具按住ALT键,在选区切出如图23所示的选区,按 Ctrl + Alt + D 羽化数值为3,再填充白色,取消选区,把图层的透明度调为30% 如图24

图23

图24

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)14.在“水晶--底高光”上新建一层命名为“水晶--大光圈”,按Ctrl + ’ 调出参照线,在中心绘制一个正圆填充白色,取消选区,把这层的透明度调为10% 效果如图25

图25
15.在“水晶--大光圈”上新建一层命名为“水晶--顶高光”,按Ctrl + ’ 调出参照线,在中心绘制一个正圆填充白色,取消选区,再添加蒙版如图26

图26
15.选择黑白渐变,方向:从上到下渐变,效果如图27

图27

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)16.在“水晶--大光圈”上新建一层命名为:“水晶--底高光1”,调出“水晶--底3”的选区,选择菜单:选择 修改 收缩 数值为:4,再用椭圆选区工具 按住 ALT 键切出图28所示的选区,然后填充白色.

图28
17.取消选区,用钢笔工具把尖角的地方勾出圆角,按Ctrl + Enter 调出选区再按 Delete 删除选区部分。如图29,30

图29

图30

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)13.取消选区,添加蒙版,用黑白渐变按图31所示方向渐变。

图31
14.在“水晶--底高光1”上新建一层命名为:“水晶--底高光2”,用椭圆选取工具绘制一个小椭圆,填充白色如图32所示,再按 Ctrl + T 调出变形工具,把椭圆略向上倾斜,按 Enter 键应用变形如图33所示。

图32

图33

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)15.在“水晶--底高光2”上新建一层命名为:“水晶--顶反光1”,用钢笔工具绘制如图34所示的图形,按Ctrl + Enter 调出选区,再填充白色,然后按 Ctrl + D 取消选区。

图34
16.添加蒙版,用黑白渐变按图35所示方向渐变。

图35

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)17.在“水晶--顶反光1”上新建一层命名为:“水晶--顶反光2”,用椭圆选取工具绘制一个小椭圆,填充白色,再按 Ctrl + T 调出变形工具,把椭圆略向上倾斜,按一下Enter 键,再把这层的透明度调为60,如图36所示。

图36
18.按 Ctrl + J 把“水晶--顶反光2”复制一层命名为“水晶--顶反光2top”,再回到“水晶--顶反光2”这层,选择菜单:滤镜 模糊 高斯模糊 数值为3.5 效果如图37

图37

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)18.到这一步为止水晶部分的效果就算完成了,不过有些不满意的地方,我们自己可以适当的再调整一下,尽量让自己满意。

图38
三.文字部分的制作:
1.在图层的最上面新建一个图层用文字工具打上"68ps"几个字如图39

图39

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)2.双击图层,调出图层样式依次进行:投影、外发光、斜面和浮雕及描边的设置,设置参数如下图。
投影

外发光

斜面浮雕

描边

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)
效果
3.删格化图层,并锁定图层,具体设置如图

图40
4.选择渐变工具设置如图41,渐变方向如图42

图41

图42

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)5.用喷枪工具,压力为20%左右,适当的用黑色和白色喷出文字的暗光和高光,整体效果如图43

图43
最后给整个按钮制作一点小装饰,最终效果就做好了!PSD源文件下载

展开更多 50%)
分享

猜你喜欢

精致金属质感水晶按钮

PS PS基础 ps平面设计教程 ps去水印教程
精致金属质感水晶按钮

精致水晶图标按钮

PS PS基础 ps平面设计教程 ps去水印教程
精致水晶图标按钮

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Photoshop制作精致的带金属边框的水晶按钮

PS PS基础 PS效果
Photoshop制作精致的带金属边框的水晶按钮

金属质感圆形按钮

PS PS基础 ps平面设计教程 ps去水印教程
金属质感圆形按钮

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

PS质感水晶按钮

电脑网络
PS质感水晶按钮

Photoshop鼠绘教程:打造精致金属边框水晶球按钮

PS PS教程
Photoshop鼠绘教程:打造精致金属边框水晶球按钮

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

透明玻璃质感圆形按钮

透明玻璃质感圆形按钮

Photoshop制作两款常用水晶按钮

Photoshop制作两款常用水晶按钮
下拉加载更多内容 ↓