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

琼花吧

琼花吧

2016-02-19 16:18

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

随着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://m.tulaoshi.com)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最终效果图

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

展开更多 50%)
分享

猜你喜欢

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

设计创意
Photoshop制作立体光感效果手机图标

Photoshop设计立体光感效果的手机图标

PS PS基础
Photoshop设计立体光感效果的手机图标

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

Photoshop设计多彩立体效果的光感文字

PS PS基础
Photoshop设计多彩立体效果的光感文字

Photoshop制作立体效果的日历图标

PS PS基础
Photoshop制作立体效果的日历图标

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

Photoshop设计立体效果的手机图标教程

PS PS基础
Photoshop设计立体效果的手机图标教程

Photoshop制作立体感艺术效果字

PS PS基础
Photoshop制作立体感艺术效果字

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

特卡乔夫兄弟А.П. и С.П. Ткачевы Tkachev Brothers(Sergei Tkachov & Aleksei Tkachov)人物油画

特卡乔夫兄弟А.П. и С.П. Ткачевы Tkachev Brothers(Sergei Tkachov & Aleksei Tkachov)人物油画

多款现代时尚的纹理背景墙室内设计作品

多款现代时尚的纹理背景墙室内设计作品
下拉加载更多内容 ↓