ui图标制作教程(ui图标怎么画)

本文主要介绍ui图标制作教程(如何绘制ui)，下面跟着东辰网详细了解一下吧。

继续带来一大波图标制作教程，这次的风格是颓废的机械风格和不规则形状风格，本教程依然提供源文件psd下载，网盘链接下载:,希望大家多多支持！也欢迎上传交作业~

先看效果:

步骤01:点击文件新建(快捷键Ctrl)新建一张图片，命名，设置宽度为800px，高度为600px，分辨率为72dpi，然后点击确定，记得保存文件方便(快捷键Ctrl)。

步骤02:选择【圆角矩形工具】(快捷键U可按ShiftU)，在画布上点击【创建圆角矩形】弹出图层，设置宽度为180px，高度为180px，半径为20px，勾选【距中心】，点击确定；

步骤03:将图层重命名为di，右键设置图层样式:

【斜面和浮雕】:样式:内斜面，模式:平滑，深度100%，方向:向上，大小3，柔化1，阴影角度90，勾选【使用全局光】，高度30，高光模式颜色#dedede，阴影模式颜色#262626，

【渐变叠加】:线性渐变，颜色值从上到下#333333#C6C6，角度90；

复制di层，重命名为di_bian。选择右按钮清除图层样式，并将填充颜色改为#616161。按住Ctrl键，单击图层加载选区，向上移动两个像素，然后反转选区(快捷键ShiftCtr)，然后在图层窗口中单击添加图层蒙版；

步骤04:制作磨损的金属纹理部分。这一步使用了素材图片的嵌入和笔刷绘制。可以在网上搜索关键词:破旧、颓废、泼水、金属等词下载相关资料。ps:本教程使用的图片和画笔是和图标源文件psd一起提供的(见附件下载或网盘链)。请自行下载画笔。谢谢大家！

金属质感主要通过设置图层的混合模式和叠加不透明度的参数值来调试。本教程中调试后的参数如下:

01使用材料图片Rust_5。JPG，以及混合模式:正片叠放在底部，不透明度70%；

使用笔刷，颜色#8c8c8c，不透明度30%；

03采用了素材图片的质感。png，混合模式:变暗，不透明度30%；

这一步可以自由发挥，想用哪个金属画面做纹理都可以，参数也可以自己调试叠加，重在实际效果；

步骤05:要使金属断裂，选择【钢笔工具】(快捷键P，按Sh。IftPswit)，画几个不规则多边形，形状可以自由定制。只需配置金属质感背景，让颜色变深。例如，在这里填充颜色#777777并设置图层样式:

【内影】:正片叠底，填充色#464646，角度90，距离1px，遮挡0，尺寸1px；

复制图层并载入选区，用#FFFFFF填充，上移一个像素，反转选区(快捷键ShiftCtr)，然后在图层窗口中点击添加图层蒙版。其他破损的地方也用这种操作方法；

步骤06:将复制的图层di重命名为nei_di，点击编辑自由变换路径(快捷键Ctrl)缩小90%(记得点击保持纵)，右键清除图层样式，选择混合选项设置:

【渐变叠加】:线性渐变，颜色值从上到下为#4b4b#98988d，角度为90；

【投影】:正片叠底，颜色#202020，角度90，距离5px，扩展0，大小8px；

Step07:绘制备份图标，选择椭圆工具(快捷键U，可按ShiftU)，在画布上画一个完整的圆，然后选择椭圆工具，选择路径减去顶部形状，画一个圆，选择钢笔工具(快捷键P，可按ShiftP)，选择路径合并形状，并在圆上。最后选择钢笔工具，选择路径【减去顶部形状】，画一个缺口，完成备份图标，重命名为backup，填充颜色#202020，设置图层样式:

【笔画】:大小3px，外部，线性渐变，颜色值从上到下为#787878#484848，角度为90；

【内影】:正片叠底，颜色#474747，角度90，距离3px，遮挡0，尺寸3px；

复制图层备份，重命名为backup_bian，加载选区，向上移动一个像素，反转选区(快捷键ShiftCtr)，然后在图层窗口点击添加图层蒙版，设置图层样式:

【渐变叠加】:线性渐变，颜色值从上到下#282828#aeeaeae，角度90；

步骤08:画螺丝孔:选择【椭圆工具】，按住Shift键在画布上画一个小圆，设置图层样式:

【笔画】:大小为2px，外部，线性渐变，颜色值从上到下为#929292#3b3b3b，角度为90；

【渐变叠加】:线性渐变，颜色值从上到下#353535#0c0c0c，角度90；

复制层(快捷键CtrlJ或选择【移动工具】按住alt键)，复制四个小圆分别放在四个角上；

绘制槽:选择【矩形工具】(快捷键U可按ShiftU)，绘制矩形，设置图层样式:

【笔画】:尺寸1px，内侧，颜色#606060；

【内影】:正片叠底，颜色#2c1d02，角度90，距离1px，遮挡0，尺寸5px；

【渐变叠加】:线性渐变，颜色值从上到下为#E5c511#644200，角度为90；

最后复制六层，排列在底部和中间；

St,希望大家多多支持！也欢迎上传交作业~

先看效果:

步骤01:点击文件新建(快捷键Ctrl)新建一张图片，命名，设置宽度为800px，高度为600px，分辨率为72dpi，然后点击确定，记得保存文件方便(快捷键Ctrl)。

步骤02:选择【圆角矩形工具】(快捷键U可按ShiftU)，在画布上点击【创建圆角矩形】弹出图层，设置宽度为180px，高度为180px，半径为20px，勾选【距中心】，点击确定；

步骤03:将图层重命名为di，右键设置图层样式:

【斜面和浮雕】:样式:内斜面，模式:平滑，深度100%，方向:向上，大小3，柔化1，阴影角度90，勾选【使用全局光】，高度30，高光模式颜色#dedede，阴影模式颜色#262626，

【渐变叠加】:线性渐变，颜色值从上到下为#333333#c6c6c。6、角度为90；

复制di层，重命名为di_bian。选择右按钮清除图层样式，并将填充颜色改为#616161。按住Ctrl键，单击图层加载选区，向上移动两个像素，然后反转选区(快捷键ShiftCtr)，然后在图层窗口中单击添加图层蒙版；

步骤04:制作磨损的金属纹理部分。这一步使用了素材图片的嵌入和笔刷绘制。可以在网上搜索关键词:破旧、颓废、泼水、金属等词下载相关资料。ps:本教程使用的图片和画笔是和图标源文件psd一起提供的(见附件下载或网盘链)。请自行下载画笔。谢谢大家！

金属质感主要通过设置图层的混合模式和叠加不透明度的参数值来调试。本教程中调试后的参数如下:

01使用材料图片Rust_5。JPG，以及混合模式:正片叠放在底部，不透明度70%；

使用笔刷，颜色#8c8c8c，不透明度30%；

03采用了素材图片的质感。png，混合模式:变暗，不透明度30%；

这一步可以自由发挥，想用哪个金属画面做纹理都可以，参数也可以自己调试叠加，重在实际效果；

步骤05:制作碎金属，选择【钢笔工具】(快捷键P，可按ShiftP)，画几个不规则多边形，形状自由，配置颜色较深的金属纹理背景。例如，在这里填充颜色#777777并设置图层样式:

【内影】:正片叠底，填充色#464646，角度90，距离1px，遮挡0，尺寸1px；

复制图层并载入选区，用#FFFFFF填充，上移一个像素，反转选区(快捷键ShiftCtr)，然后在图层窗口中点击添加图层蒙版。其他破损的地方也用这种操作方法；

步骤06:将复制的图层di重命名为nei_di，点击编辑自由变换路径(快捷键Ctrl)缩小90%(记得点击保持纵)，右键清除图层样式，选择混合选项设置:

【渐变叠加】:线性渐变，颜色值从上到下为#4b4b#98988d，角度为90；

【投影】:正片叠底，颜色#202020，角度90，距离5px，扩展0，尺寸8px；

Step07:绘制备份图标，选择椭圆工具(快捷键U，可按ShiftU)，在画布上画一个完整的圆，然后选择椭圆工具，选择路径减去顶部形状，画一个圆，选择钢笔工具(快捷键P，可按ShiftP)，选择路径合并形状，并在圆上。一个三角形，最后选择钢笔工具，选择路径【减去顶部形状】，画一个缺口，完成备份图标，重命名为backup，填充颜色#202020，设置图层样式:

【笔画】:大小3px，外部，线性渐变，颜色值从上到下为#787878#484848，角度为90；

【内影】:正片叠底，颜色#474747，角度90，距离3px，遮挡0，尺寸3px；

复制图层备份，重命名为backup_bian，加载选区，向上移动一个像素，反转选区(快捷键ShiftCtr)，然后在图层窗口点击添加图层蒙版，设置图层样式:

【渐变叠加】:线性渐变，颜色值从上到下#282828#aeeaeae，角度90；

步骤08:画螺丝孔:选择【椭圆工具】，按住Shift键在画布上画一个小圆，设置图层样式:

【笔画】:大小为2px，外部，线性渐变，颜色值从上到下为#929292#3b3b3b，角度为90；

【渐变叠加】:线性渐变，颜色值从上到下#353535#0c0c0c，角度90；

复制图层(快捷键CtrlJ或者选择【移动工具】按住alt键)，复制四个小圆分别放在四个角上；

绘制槽:选择【矩形工具】(快捷键U可按ShiftU)，绘制矩形，设置图层样式:

【笔画】:尺寸1px，内侧，颜色#606060；

【内影】:正片叠底，颜色#2c1d02，角度90，距离1px，遮挡0，尺寸5px；

【渐变叠加】:线性渐变，颜色值从上到下#E5c511#644200，角度90；

最后复制六层，排列在底部和中间；

Step09:将磨破的金属质感做为内框的一部分，和嵌入素材图片，用笔刷画画是一样的；

金属质感主要通过设置图层的混合模式和叠加不透明度的参数值来调试。本教程中调试后的参数如下:

01使用材料图片Rust_4。JPG，和混合模式:强光，不透明度15%；

使用画笔，颜色#181818，混合模式:叠加，不透明度40%；

使用笔刷，颜色#3f311d，混合模式:叠加，不透明度50%；

这一步可以自由发挥。我觉得哪块金属图片可以做纹理，参数也可以自己调试叠加，重在实际效果完成图标绘制；

END:根据自己的喜欢和感觉调试磨破的金属质感，完成其他图标。

了解更多ui图标制作教程(如何绘制ui图)相关内容请关注东辰网。