ui拟物图标教程(uiapp图标设计)-东辰网

ui拟物图标教程(uiapp图标设计)

本文主要介绍ui虚构图标教程(uiapp图标)，下面跟着东辰网详细了解一下吧。

今天，让我们练习如何设计一个伪对象风格的UI图标。整个教程的难点在于麦克风里的夜光镂空图案。教程很详细，新手可以跟着学。完成你的作业。

这是我们的最终效果:

这是原图:

让让我们开始我的生产过程。为了让后期的工作更加简单方便，我把新画布的大小设置为一个相对容易计算的整数~

原图背景太简单，我画蛇添足，做了iOS风格的背景。创建一个新的纯黑色填充层。

创建一个新层，填充白色。执行滤波器噪声添加噪声和，参数如图~

滤镜模糊运动模糊

调整这个动态模糊层的透明度为45%。

复制一个图层，CTRLT自由变化旋转90度，透明度调回到100%。图层混合模式改为覆盖。

毛刺和毛刺周围的画布看起来很不和谐。选择这两个动态模糊图层，CTRLT可以自由变化，放大到毛刺消失，背景完成。

Ctrlr打开标尺，右键单击标尺选择百分比。按ALTVE快速在中心排列两条参考线，水平和垂直。

为了图层栏的简洁和以后复制的方便，我把属于背景的三个图层打包成组隐藏起来。选择编辑首选项指南，网格和切片，间隔单位设置为20像素，子网格设置为2，简单设置为10像素，感觉不太舒服。

用椭圆工具画一个直径为840像素的圆。为了和白色背景区分，我设置为85%灰色。

按ctrl隐藏网格。双击这个形状层添加阴影。我稍微调整了一下等高线和使得这个投影的边缘被收缩并且增加了一点噪声。

加一个大家都爱的角度渐变，模拟圆形金属最好~

最后这个金属盘的倒角，斜面浮雕是最好的选择~

我仔细观察了原图，似乎有一个拉丝效果在金属盘上，但不是我们习惯的那种斑驳的放射状模糊。它类似于一个很细很密的同心圆。按d键恢复前景色和背景色。创建一个新层，填充白色。在过滤器草图中选择半色调图案。

然后极坐标，一个同心圆的拉丝效果就出来了。

如果你对上面的半色调图案有什么异议，我认为这是正常的，因为有一个圆圈在半色调图案中，你可以直接制作同心圆。但是直接做出来的同心圆线条比较粗，我想要的是线条比较细的同心圆，所以选择直线选项再用极坐标的效果更符合我的要求。最后把这个同心圆的透明度调整到8%左右，只要能隐约看到就行，继续剪成金属盘。或者给它一个面具。

然后我我将使用图形工具。把麦克风放在图标中间，按ctrl打开网格，首先用15%的灰色画一个圆，比金属盘及配件使用椭圆工具。

在amp中继续画一个间隔小1.5的圆减法与数学模式，这样我得到一个边宽为1.5间隔的圆。

把麦克风放在里面。打开网格，选择圆角矩形工具，设置圆角的直径尽可能大。比如，现在我500，用添加模式，以膜盒下半圆的直径为中心绘制一个新的麦克风支架。

继续使用减法与数学模式以1.5个单位的小间隔绘制另一个胶囊。因为吸附网格的功能，没必要精确地完成这些。

用笔切掉上囊。唐不要用矩形工具切割，它会破坏外圈。

在切割位置安排一条参考线作为麦克风的中心点。画一个1.5格的小单元作为麦克风的胶囊。

还有下面的底座。

添加内心阴影。

还有白色的投影~

画一个胶囊在创造小于麦克风半个单位音程的模式。

在图层样式中添加渐变。

浅粉色投影。

最后，斜面浮雕是必要的，但我选择外斜面。

用25%的灰色画一个中等大小的圆。ctrlaltt移动一定距离后，ctrlshiftaltt垂直复制一组。

通过水平错开一段距离来复制组。

继续移动副本。

忽略下面的镂空孔，重新排列上面镂空孔的位置，删除多余的孔，把不科学的孔一个一个移动，使它们的位置符合麦克风的半圆。

框住右边的三排。将中心点移动到垂直参考线上，水平复制。

双击圆形镂空图层，进入图层样式，混合模式改为正片叠加，透明度调整为65%左右。滴答图层蒙版隐藏效果。

简单的斜面浮雕。

在这个空心图层上加一个蒙版，让下面的部分淡去。

新建一个图层，按住ctrl点击镂空图层的矢量蒙版得到选区，用笔刷涂抹一小部分。

取消选择，自由更改ctrlt，将中心点设置在麦克风中心，垂直翻转。

高斯模糊为1.0。如果你不t觉得不够，可以稍微增加这个值。

逐渐减小笔刷的大小和硬度，在镂空的洞的位置点几下，模拟光线逐渐减弱的效果。

新建一个图层，添加矢量蒙版，复制下面麦克风的路径，然后用钢笔删除一部分用白色填充以降低透明度。模拟玻璃镜子的反射效果。如果觉得矢量蒙版麻烦，可以用图层蒙版。

最后，创建一个新层，用硬度为0的400像素笔刷点击它的中心，将混合模式改为颜色过滤和并将透明度调整为50。

搞定了。

今天，让我们实践如何设计一个准对象风格的用户界面图标。整个教程的难点在麦克风。夜光镂空图案，教程很详细，新手可以跟着学。完成你的作业。