您现在的位置: 万盛学电脑网 >> 软件知识 >> 图文处理 >> Photoshop教程 >> ps鼠绘教程 >> 正文

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

作者:佚名    责任编辑:admin    更新时间:2022-06-22

  随着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设计立体光感效果的手机图标,三联

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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