Photoshop设计蓝色立体效果APP图标

2016-02-15 23:21 34 1 收藏

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的Photoshop设计蓝色立体效果APP图标,手机电脑控们准备好了吗?一起看过来吧!

【 tulaoshi.com - PS 】

作者的图标制作的非常精细,用到的图层也非常多。过程:先把图标的结构分解出来,然后由底部往上开始制作,先画出每一层的图形,再用图层样式等来制作质感。

最终效果

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

1、新建一个1000 * 1000px的画布,背景填充#808b5e1,用圆角矩形工具创建一个400 * 400px,圆角60px的形状置于画布中央,命名为底板,添加图层样式如下图。

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

2、Ctrl + J 复制底板层,并在图层上右键选择清除图层样式,改名为厚度层,移到底板层的下层,用选择工具向下移动10个像素,并修改图层样式如下图。

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

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

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

3、Ctrl + J 复制厚度层,改名为发光层,并在图层上右键选择清除图层样式,移到厚度层的下层,将图层样式的填充修改为0%,并修改图层样式如下图。

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

4、在底板层上新建一层命名为高光,前景色设置为#4dc9f0,选择画笔工具画一个边硬度为0%的点,然后Ctrl + T 将圆压扁,同时选区工具删除一半的圆,Ctrl + T 调整高光层到合适的位置,回车确认调整不透明度为60%,效果如下图。

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

5、将底板的图层组成一个组,命名为底板,用椭圆工具画出一个205 * 205的正圆置于底板组上并居中,命名凸出效果,并添加图层样式。

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

6、Ctrl + J 复制凸出效果层,右键选择清除图层样式,并命名为平滑外发光层,修改颜色为#80b5e1,添加图层样式如下。

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

7、Ctrl + J 复制凸出效果层,保留平滑外发光层的图层样式,并命名为大渐变层,添加图层样式如下。

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

8、Ctrl + J 复制大渐变层,右键选择清除图层样式,命名为小渐变层,Ctrl + T ,然后按照Alt + Shift 等比例居中将小渐变层缩小成195 * 195,添加图层样式如下。

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

9、将凸出效果的几个图层合成一个组,命名凸出效果。

Ctrl + J 复制小渐变层,拉出凸出效果组,并修改名字为立体球,Ctrl + T然后按住Alt + Shift中间等比例缩小,将立体球层缩小185 * 185px的圆,并清楚立体球的图层样式,重新添加下面的图层样式。

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

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

9、将凸出效果的几个图层合成一个组,命名凸出效果。

Ctrl + J 复制小渐变层,拉出凸出效果组,并修改名字为立体球,Ctrl + T然后按住Alt + Shift中间等比例缩小,将立体球层缩小185 * 185px的圆,并清楚立体球的图层样式,重新添加下面的图层样式。

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

Photoshop设计蓝色立体效果APP图标,PS教程,图老师教程网

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

来源:https://www.tulaoshi.com/n/20160215/1565210.html

延伸阅读
标签: PS PS基础
本教程主要是用一个很小的例子教你使用Photoshop制作一枚质感立体图标,通过体验我们才能知道设计师们制作这样一枚枚小小图标的不容易,感谢原作者的制作:
Photoshop绘制蓝色立体效果的小货车图标   本教程主要使用Photoshop绘制蓝色立体效果的小货车图标,整体的效果主要先使用钢笔工具勾画出轮廓,然后在使用图层样式来完成效果图,喜欢的朋友让我们学习吧。 先看看效果图 第一步 使用钢笔工具画出小货车的大的形状,值得注意的是一些形状中的细节,不要忽略,这是让图...
标签: PS PS基础
首先给大家看看整体效果,1.新建文件。大小400*300,做球形渐变。 2.用圆角矩形工具画一个251*237的圆角矩形,这一边我用了一个图层合成的,下面有图层截图,做出有一些擦拭过的感觉就可以了 3.这一步用钢笔工具画出来一个平台,我的大体思路就是先勾出大体形状,整个平台分三部分,上面.下面.中间高光。对上下两个部分添加木纹...
标签: PS PS基础
今天我们给大家带来的PS教程是如何在Photoshop中创建一只可爱的Twitter小鸟,这是一篇专注icon设计细节的精品教程,希望大家能够喜欢。 点此下载最终PSD文件: MissYuan_小鸟源文件.rar 先看看效果图 第1步: 新建一个PSD文件,尺寸为800×600px。使用椭圆工具,按住Shift键绘制出一个正圆形,颜色设置为##0099FF。 按住Alt+...

经验教程

633

收藏

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