Photoshop绘制金属控件效果的网页图标

哥不再淡定无悔

哥不再淡定无悔

2016-02-16 02:21

今天图老师小编要跟大家分享Photoshop绘制金属控件效果的网页图标,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

先看看效果图

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

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

新建一个256 * 256像素文件,分辨率为300,如下图。

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

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

1、使用圆角矩形工具,设置半径值为60像素,按住Shift键绘制带有圆角的正方形,如下图。

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

2、为底层添加渐变样式,得到的效果如下图。

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

3、按Ctrl + J 复制底层得到副本,按Ctrl + T 对底部副本进行调整大小,并更改渐变方向,效果如下图。

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

4、继续按Ctrl + J 复制底层副本,得到副本2。并按Ctrl + T 进行变换处理,并为其更改渐变样式,如下图。

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

5、继续使用圆角矩形工具绘制,并为其添加图层样式,以制作类似下图所示的效果。

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

6、用同样的方法去复制,我们只需调整大小即可。再为其修改渐变样式,制作出如下图中的效果即可。颜色可以随自己喜好更改。

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

7、使用椭圆工具按住Shift键绘制正圆,并为其添加图层样式,制作金属按钮,效果如下图。

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

8、现在我们只需要对其进行复制并调整位置即可。

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

最终效果:

Photoshop绘制金属控件效果的网页图标,PS教程,图老师教程网

展开更多 50%)
分享

猜你喜欢

Photoshop绘制金属控件效果的网页图标

PS PS基础
Photoshop绘制金属控件效果的网页图标

PS绘制金属控件效果网页图标

电脑网络
PS绘制金属控件效果网页图标

s8lol主宰符文怎么配

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

Photoshop绘制金属控件图标

电脑网络
Photoshop绘制金属控件图标

Photoshop制作简单的金属控件图标

电脑网络
Photoshop制作简单的金属控件图标

lol偷钱流符文搭配推荐

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

Photoshop绘制金属质感的网页进度条效果

PS PS基础
Photoshop绘制金属质感的网页进度条效果

Photoshop绘制漂亮的网页水晶图标

PS PS基础
Photoshop绘制漂亮的网页水晶图标

lolAD刺客新符文搭配推荐

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

Photoshop调出外景婚片自然蛋黄肤色效果

Photoshop调出外景婚片自然蛋黄肤色效果

Photoshop制作绿色大气的立体感网页图标

Photoshop制作绿色大气的立体感网页图标
下拉加载更多内容 ↓