APP图标 – 设计之家

PS实例教程：设计立体拟物风格APP图标

sj33cn — Mon, 12 Aug 2019 23:35:52 +0000

在开始制作之前呢，首先确定好自己要做的内容有哪些，大致的一个风格。然后去寻找参考，看看其他作者如何在作品中将自己的想法展现出来。这里我选择相机、天气、日历、相册、设置、信息、视频和地图。

内容和风格确定了，参考也找的的差不多了，对于自己要做的东西有一个比较清晰的思路之后，先在草图上将自己大致的想法画出来，然后才用软件将想法构建完善。这里做的几个图标都是比较简单的，基本上可以用图层样式来实现所有的效果。

因为是拟物风格，所以在图标制作的过程当中，要注意体积和光影的表达。通过颜色的选择、相似的装饰元素使整体风格看起来更加统一和谐。

先看看效果图

教程步骤

草图

一、相机图标

步骤 01 建立文档并制作背景

新建文档，大小2000x800px，分辨率72;新建图层，命名背景，填充前景色#d6d6dd

步骤 02 制作底座

新建300x300px的圆角矩形，圆角半径60px，命名底座，添加图层样式制造体积感

步骤 03 制作镜头外圆

新建228x228px的圆形，命名【外圆1】，添加图层样式

复制外圆1，修改大小190x19px，命名【外圆2】，添加图层样式

将外圆1，外圆2编组命名【外圆】

步骤 04 镜头内部

新建大小162×162 px的圆形，命名【内圆1】

复制3个，大小分别修改为130x130px、90x90px、56x56px

分别命名为【内圆2】、【内圆3】、【内圆4】

再按顺序添加以下图层样式

步骤 05 制作玻璃球

新建大小24x24px的圆形，颜色#000000，复制一个备用

添加蒙版，擦去上半部分，添加图层样式

将复制的圆形颜色改为#ffffff，调整不透明度10%，添加蒙版，擦出一个月牙形状

步骤 06 制作镜头高光

按住CTRL+左键点击【外圆1】图层缩略图得到圆形选区

新建一个图层，用柔边圆笔刷(大概400px)在圆形选区的上半部分轻轻拍一下，颜色#ffffff，不透明度20%

用布尔运算做出图中图形(三个图层)，颜色#ffffff，不透明度30%

添加蒙版将边缘擦的模糊一点，让边缘过渡看起来自然一些

在较大的两个图像上添加图层样式

步骤 07 添加装饰性元素

新建100×300 px的矩形，颜色#d43131，调整图层顺序使它在底座上方，做剪贴蒙版

选个字体打一些装饰性的文字啥的

至此，相机就做完啦~(做完记得将相机的都编成一个组)

二、日历图标

步骤 01 制作底座和日历基本形状

将相机底座复制一个，新建228x 224 px大小的圆角矩形，圆角半径24，命名【底页1】，添加图层样式

复制底页1，命名【底页2】，修改投影大小，相对底页1上移2px

复制底页2，命名底页3，相对底页2上移2px。

PS绘制立体翻页风格日历APP图标

sj33cn — Sat, 13 Apr 2019 09:02:38 +0000

给新手的日历图标简化版教程，重点就是图层样式咯，过程细致，步骤具体，新手也可以快速的制作上手，喜欢的朋友让我们一起来学习吧。

最终效果图：

首先，新建一个文档，我的是1024*1024。

在背景层上拉一个径向渐变，颜色如图所示~~

新建一层，D键把前景背景改为默认，填充白色，选择滤镜-杂色-添加杂色，平均分布，数量50%，勾选淡色，如图所示

确定后把混合模式改为柔光，透明度30%

新建一个圆角矩形，如图所示，调整好圆角，填充颜色随便。Ctrl+a 选择水平居中，垂直居z中，Ctrl+d取消选择

双击圆角矩形添加图层样式~，数值如下

还有内阴影，颜色叠加、

颜色数值如图所示：

新建一层，D键把前景背景改为默认，填充白色，执行滤镜-杂色-添加杂色。

滤镜-模糊-动感模糊，数值如下，接着在两个图层之间按Alt+左键创建剪贴蒙版。

新建一个小一点的圆角矩形，圆角调整好，居中对齐!颜色无所谓。

PS制作QQ浏览器APP图标

sj33cn — Sun, 17 Mar 2019 07:51:59 +0000

教程的过程相对简单，布尔运算构成图标主体，效果则是用图层样式实现。有需要学习的朋友如果遇到什么问题可以下载教程的源文件，下面就一起来学习吧。

先看看效果图

新建文档，将我们所提供的纹理素材放入文档中，充当背景。

我添加了一个色彩平衡调整层，调整了一下背景的颜色。

下面，用圆角矩形工具，画出图标的主体，并添加图层样式，我添加了斜面浮雕、内阴影、投影三个样式。

复制一层这个主体，右键清除图层样式，将填充修改为0，重新添加一个新的图层样式。

接下来，我们来画QQ浏览器的图标，这个相信大家肯定会画，非常简单的布尔运算，在这里，我们分成了两层来画，首先，我们画出了下面这个形状。

我为这个形状添加了一个渐变叠加。

接下来，还是用布尔运算，补上欠缺的那部分云。

选择住组成QQ浏览器图标的这两个图层，CTRL+G，创建图层组，给这个图层组添加一个图层样式。

最后我添加了一个色阶调整层，作最后的微调。

最终效果如下：

PS设计金属质感APP图标

sj33cn — Fri, 15 Mar 2019 02:08:55 +0000

本教程主要使用Photoshop设计银色金属质感的APP图标，很多人都喜欢这样的APP图标，于是今天我们一起来学习这个教程，这个教程是一个简单的图标制作，重点是金属质感，同往常一样，我们都是用图层样式来实现。

很多人喜欢折腾图标，所以，很多人问，有没有新的图标教程，于是，今天，是一个简单的图标制作，重点是金属质感，同往常一样，我们都是用图层样式来实现。

先看看效果图

新建一个文档，我用的大小是1000X800像素，创建一个渐变填充调整层，参数如下。

将这个渐变背景图层转换为智能对象，添加一个杂色。

用圆角矩形工具画出我们的图标主体，颜色设置为#f6f5f5，添加一个斜面浮雕和投影。

复制一层主体图层，右键清除图层样式，将填充修改为0，添加一个投影样式，我们来做投影加强。

用椭圆工具画一个圆，设置图层样式。

同样的用椭圆工具画出一个小一点的圆，这个将是我们的旋纽，设置图层样式。

画一个稍微小一点的圆，我们来制作金属旋纽，效果我们通过图层样式实现。