Photoshop制作立体光感效果手机图标

2016-02-19 16:18 3 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享Photoshop制作立体光感效果手机图标,希望可以对大家能有小小的帮助。

【 tulaoshi.com - ps制作图标 】

随着Android等操作系统的开发,现在的互联网逐步向手机端应用推进,很多都有了手机端应用程序,必须淘宝,新浪等,所以手机端应用程序UI设计也逐 步的成为新潮,下面来看下一个APP应用程序图标的制作吧,这只是个思路,算抛砖引玉,有很多时候,我们感觉我们不会,而不是正真的我们不会,是我们没有接触过。

看下效果图:

Photoshop制作立体光感效果手机图标

1.新建画布

Photoshop制作立体光感效果手机图标

2.选择圆角矩形工具,点击画布,跳出设置弹框,设置如下,颜色设置为#000000,得到圆角矩形1

Photoshop制作立体光感效果手机图标

3.继续选择圆角矩形工具,点击画布,跳出设置弹框,设置如下,颜色设置为#898989,得到圆角矩形2

Photoshop制作立体光感效果手机图标

4.将两个图层的位置摆放如下

Photoshop制作立体光感效果手机图标

5.选择椭圆工具,点击画布,跳出设置弹框,设置如下,颜色设置为#323232,得到椭圆1

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

6.复制椭圆1,得到椭圆1副本,拉到椭圆1图层下面,颜色改成#77f8f3,然后ctrl+T,按住shift+alt进行按照中心放大

Photoshop制作立体光感效果手机图标

7.将我们的Logo拖进去,调整好大小和位置

Photoshop制作立体光感效果手机图标

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

8.选择圆角矩形2,把素材包里的 tactile_noise 压缩包里面的图案自定义图案,然后给此图层添加图层样式

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

9.拷贝图层样式,粘贴到椭圆1,然后继续给椭圆1添加图层样式

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

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

10.选择椭圆1副本,添加图层样式

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

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

11.将Logo复制一层,然后ctrl+L,设置色阶

Photoshop制作立体光感效果手机图标

12.给Logo副本添加图层样式

Photoshop制作立体光感效果手机图标

13.回到Logo图层,添加图层样式

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

14.选择椭圆1图层,添加图层样式

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

15.回到圆角矩形1图层,添加图层样式

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

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

16.回到圆角矩形2图层,添加图层样式

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

17.在圆角矩形2图层上面新建一个图层,得到图层2,按住ctrl点击圆角矩形1图层,调出圆角矩形1图层的选区

,然后用白色柔焦画笔,画出如图的效果

Photoshop制作立体光感效果手机图标

18.然后按住ctrl点击圆角矩形2图层,调出圆角矩形2图层的选区,删除,得到如图效果

Photoshop制作立体光感效果手机图标

19.将图层2的不透明度改成15%

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

20.回到圆角矩形1图层,添加图层样式

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

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

21.复制圆角矩形2,得到圆角矩形2副本,去除所有的图层样式,重新添加图层样式,然后图层不透明度改成10%

Photoshop制作立体光感效果手机图标

22.同样的方法,复制椭圆1,得到椭圆1副本2,添加上个步骤的图层样式,图层不透明度改成10%

Photoshop制作立体光感效果手机图标

23.选择文字工具,在椭圆1路径上面打|||||,你自己复制引号里的,然后把图层拉到椭圆1的下面,调出椭圆1副本的选区,添加蒙板,注意调节好字体间距

Photoshop制作立体光感效果手机图标

24.给字体层添加图层样式,然后把填充改成0%,完成最后的效果

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

Photoshop制作立体光感效果手机图标

最终效果图

Photoshop制作立体光感效果手机图标

来源:https://www.tulaoshi.com/n/20160219/1611635.html

延伸阅读
标签: PS PS基础
先看看效果图 1、新建大小自定的画布。新建三个图层,分别画出三个中心透明的圆,如下图。 2、测试一下,在背景中加入一张图片,就可以看到蓝色的圆,中间部分完全透明的。 3、三个圆画好,并叠加在一起,应该是这样。 4、再给圆的中心和边缘添加一些高光。 5、为了便于学习。我们把这两种高光的制作方法详细说明一下。两...
标签: PS PS教程
教程虽然没有详细介绍按钮如何制作,不过作者在这里分享了很多按钮制作的经验,先从一些简单的效果入手,多尝试,多运用图层样式等,就可以做出自己想要的效果。 最终效果 1、按钮的形状 我个人认为按钮无非就这几种基本形状,请不要做太多奇形怪状,不要忘记按钮本身的作用“吸引用户点击”。 2、颜色 设计师应该具备审美能力...
标签: PS PS基础
先看效果图: 所用素材: 1、打开photoshop,创建一个新文档,大小是600*400,填充黑色背景; 2、选择文字层, 添加图层样式勾投影,数值如图: 3、打开灯泡素材图,抠出灯泡,将灯泡拖入,安放在字体上合适位置,然后合并所有灯泡图层,图像调整饱和度,将灯泡颜色改变为蓝色,如图: 4、选择灯泡图层,添...
标签: PS PS基础
本教程主要使用Photoshop制作金色质感的立体图标效果,前部分主要使用钢笔工具来完成形状的勾画,然后在使用3D功能和缉渐变色来完成效果图,喜欢的朋友一起来学习吧。 先看一下显示的最终效果 1、新建文件,新建图层添加一个径向渐变如图 2、新建图层,将logo的形状绘制出来 3、ctrl+J复制,填充黑色,移至底层 4、按Alt键+上...

经验教程

533

收藏

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