ui设计图标方法(ps教程分享)

今天我给大家带来一个比较有意思的UI设计，小伙伴要是喜欢呢，就跟着我一起操作哈，下面跟进步骤哦。

第一步，新建图层，这个相信大家都已经熟记于心了，那我就不配图了，记得，新建图层的时候，拉上参考线哦。还有接下来，我们要选圆角矩形从中心点画一个圆角矩形，具体参考图如下。

第二步，我们在网上找了个木质素材，随机拉到画布里。

第三步，鼠标回到我们画的圆角矩形图层，然后按ctrl键以及鼠标点击图层缩略图，这样我们便获得了圆角矩形的选区，获得选区之后，我们ctrl+shift+i，反向选区，然后按删除键。效果如图

第四步，我们开始对这个木质素材图层进行调试，首先，我们点击图层，然后右键，出现混合选项，我们进行如下调试。

第五步，恩，调试完成了，点确定，再之后我们新建图层，选择椭圆选框工具，从中心点进行拉正圆，具体要结合快捷键alt+shift，那么正圆形选区形成了，我们接下来就开始填充灰色。

第六步，我们找到滤镜，点击杂色，选择添加杂色。

第七步，杂色已经添加完毕，我们再选择滤镜栏里的模糊工具，找到径向模糊，调好，点确定。

第八步，确定之后，会出现如下效果，我们发现这做好的效果中心点并没有在我们拉的参考线中间，这时候我们要选择这个图层，稍微移动一下，把它移动到中心点。

第九步，好了，中心点对好了，我们选用椭圆选框工具，从中心点按alt+shift绘制正圆，随后ctrl+shift+i反向选区，删除键。

这一步的目的就是为了把多余的边缘去掉。得到里面的正圆。

第十步，我们再新建图层，鼠标回到刚刚这个圆形之上，按ctrl+图层缩略图，获得圆形选区，接下来我们选择渐变工具，调试渐变颜色。（如果有不懂得，可是看下爱之趣的Photoshop小白到高手的课程，此课程高清配字幕，并且有萌萌哒的助教提供售后解答哦。）

好了，话不多说，看下我调试的渐变效果。

第十一步，渐变设置完成，点确定，鼠标点击新建的图层，再选择径向渐变，然后拖拉，这样得到的结果如下。

第十二步，ctrl+d取消选区，这回我们看看，是不是感觉很神奇，恩，那我们接下来要做的是，想办法把低下刚刚做得径向模糊效果透出来，那么我们就尝试降低刚刚做的那个渐变图层的透明度。

降低之后，金属的质感是不是就出来了呢，当然有细心的小伙伴会发现，这一步怎么中心圆的边缘怎么有一种凹下去的感觉呢，嘻嘻嘻，因为就在刚刚，我获得圆形选区，偷偷的把木质纹理的那个图层中间给删除掉了呢，具体看下图层里的缩略图就会发现，那木质纹理的图层是不是少了一圈呢。

好了，说到这里，我们开始进行下一步。

第十三步，我们再新建图层，然后从中心点绘制正圆选区，然后填充黑色，最后把黑色圆圈的图层做一下外发光。

第十四步，到这里我们已经快完成了，那么我们回头看看，之前画的圆角矩形多少有些太过平直，这样看起来效果不会太好，那么我们会到圆角矩形的图层，重新绘制一个半径值大一点的圆角矩形，然后把木质纹理重新处理下。得到的结果如下。

第十五步，这样看起来是不是更圆滑，更顺眼了些呢，嘻嘻嘻，那么继续下一步，我们再新建图层。从中间绘制一个正圆，这次的正圆要比黑色正圆小一些，，最后我们填充红色。

第十六步，这时候效果已经基本完成了，可是我么发现如果在红色的圆形上做一些效果会更好一些，所以在这里，我们给红色的圆圈加上一个斜面浮雕，这样，整体效果图就出来了，让我们来看一看。