设计联系人和短信图标,颓废机械风格UI图标教程
分类:生活方式

然后选择【椭圆工具】(快捷键U,可按Shift+U切换),在画布点击【创建椭圆】弹出层,设置宽度为172px,高度为170px,并勾选【从中心】,然后点击确定;

Step07:绘制LYNN Rabbit头部部分,用【椭圆工具】创建一个椭圆,设置图层混合选项,再绘制耳朵部分,注意描边细节跟阴影,脸部一一拆分,大多数用是用钢笔工具、椭圆工具、图层蒙版、设置图层混合选项等完成,在这就不一一详细说明,最后加上耳朵阴影和高光,拉个椭圆白色透明渐变,设置不透明度为50%,完成图标的绘制。

【内阴影】:正片叠底,填充颜色#464646,角度90°,距离1px,阻塞0,大小1px;

同理复制yuan图层命名为yuan_bian02,填充颜色为#金沙贵宾会登录官方网站,fff2f7,载入选区向下移动两像素,反向选区后添加图层蒙版;

Step05:复制yuan图层命名为nei_yuan,点击【编辑】—【自由变换路径】(快捷键Ctrl+T),缩小80%(记得点击【保持长宽比】),右键清除图层样式,选择【混合选项】设置:

金沙贵宾会员登录 1

【内阴影】:颜色#金沙贵宾会官网, c33c6d,不透明度70%,角度120°,距离5,阻塞2,大小8,

第一次出UI教程,把之前参加过比赛的几套风格各异的主题图标拿制作过程出来讲解一下,图标的绘制方法有很多种,主要看你适合哪种,用得方便不,注意技巧跟细节本教程提供源文件psd下载(文章末端左下角有附件可以下载)或者网盘链接下载:

金沙贵宾会员登录 2

教程源文件:可爱卡通风格的软件图标PSD源文件

再选择【椭圆工具】创建宽度跟高度都为172px的圆,填充颜色为#c74a78;命名为yuan_di,对齐于yuan图层并放在其下面;

01采用素材图片 Rust_4.JPG,混合模式:强光,不透明度15%;

再复制yuan图层命名为yuan_bian01,选择右键清除图层样式,填充颜色改为# ffadcb;按住Ctrl键点击图层载入选区,按方向键向上和向左移动一像素,再反向选区(快捷键Shift+Ctrl+I),再点击【图层】窗口的【添加图层蒙版】;

Step02:先填充背景,色值为#282828(PS:这步主要是为了方便图标观看,背景色值不定,看着舒服,不影响图标外观即可);

再复制图层载入选区,填充颜色为#FFFFFF,向上移动一像素,反向选区(快捷键Shift+Ctrl+I),再点击【图层】窗口的【添加图层蒙版】。其他破损处也是使用这种操作方法;

【渐变叠加】:线性渐变,色值从上到下为 # feb8d2 — # ff80af,角度为90°;

金沙贵宾会员登录 3

复制di图层重命名为di_bian,选择右键清除图层样式,填充颜色改为# 616161;按住Ctrl键点击图层载入选区,向上移动两像素,再反向选区(快捷键Shift+Ctrl+I),再点击【图层】窗口的【添加图层蒙版】;

本教程主要使用Photoshop制作可爱卡通风格的联系人图标,作者把之前参加过比赛的几套风格各异的主题图标拿制作过程出来讲解一下,图标的绘制方法有很多种,主要看你适合哪种,用得方便不,注意技巧跟细节,本教程提供源文件PSD源文件下载,不懂的朋友一起来学习吧。

【渐变叠加】:线性渐变,色值从上到下为 # 1479cf — # 3a9bff,角度为90°;

01采用素材图片 Rust_5.JPG,混合模式:正片叠底,不透明度70%;

再选择【椭圆工具】创建宽度跟高度都为172px的圆,填充颜色为#c74a78;命名为yuan_di,对齐于yuan图层并放在其下面;

Step06:复制nei_yuan图层命名为nei_yuan_ban,清除图层样式,自由变换路径缩小94%(记得点击【保持长宽比】),颜色# FFFFFF,不透明度改为10%;再载入yuan_ban的蒙版选区,点击【图层】窗口的【添加图层蒙版】;

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

Step02:先填充背景,色值为#282828(PS:这步主要是为了方便图标观看,背景色值不定,看着舒服,不影响图标外观即可);

金沙贵宾会员登录 4

Step07:绘制备份图标,选择【椭圆工具】(快捷键U,可按Shift+U切换),在画布上按住Shift键画一个正圆,再选择【椭圆工具】,并选择路径【减去顶层形状】,画一个圆环,选择【钢笔工具】(快捷键P,可按Shift+P切换),并选择路径【合并形状】,在圆环右边处画一个三角形,最后再选【钢笔工具】,并选择路径【减去顶层形状】,画一个缺口,完成备份图标,重命名为backup,填充颜色#202020,设置图层样式:

先看看效果图

金沙贵宾会员登录 5

03采用素材图片 纹理.png,混合模式:变暗,不透明度30%;

下面是教程

金沙贵宾会员登录 6

Step09:制作内部框残旧金属纹理部分,一样是采用素材图片嵌入和笔刷绘制;

选择【椭圆选框工具】(快捷键M,可按Shift+M切换),按住Shift键,画一个正圆选区(大小自己把握),可对齐图层,然后点击【图层】窗口的【添加图层蒙版】;

【描边】:大小1px,内部,渐变90°,# 157acf — #78bbff,

【渐变叠加】:线性渐变,色值从上到下为 #金沙贵宾会员登录,282828 — #aeaeae,角度为90°;

Step04:复制yuan图层(快捷键Ctrl+J)命名为yuan_ban,选择右键清除图层样式,填充颜色为#FFFFFF;不透明度改为30%;

Step03:选择【椭圆工具】,按住Shift键,画一个正圆,填充颜色为# 9eceff,图层命名为message,再选【钢笔工具】(快捷键P,可按Shift+P切换),在选项栏里【路径操作】选择【合并形状】,并选中路径,画一个三角形;右键选择【混合选项】,设置:

【内阴影】:正片叠底,颜色#2c1d02,角度90°,距离1px,阻塞0,大小5px;

【描边】:大小3px,内部,颜色# d85082,

然后选择【椭圆工具】(快捷键U,可按Shift+U切换),在画布点击【创建椭圆】弹出层,设置宽度为172px,高度为170px,并勾选【从中心】,然后点击确定;

02 使用笔刷,颜色#8c8c8c,不透明度30%;

金沙贵宾会员登录 7

Step01:选择【圆角矩形工具】(快捷键U,可按Shift+U切换),在画布点击【创建圆角矩形】弹出层,设置宽度为120px,高度为120px,半径20px,并勾选【从中心】,然后点击确定;

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

金沙贵宾会员登录 8

金沙贵宾会员登录 9

Step03:重命名图层为di,右键设置图层样式:

金沙贵宾会员登录 10

金沙贵宾会员登录 11

金沙贵宾会员登录 12

金沙贵宾会员登录 13

金沙贵宾会员登录 14

【描边】:大小3px,外部,线性渐变,色值从上到下为 #787878 — #484848,角度为90°;

金沙贵宾会员登录 15

Step04:复制yuan图层(快捷键Ctrl+J)命名为yuan_ban,选择右键清除图层样式,填充颜色为#FFFFFF;不透明度改为30%;

金沙贵宾会员登录 16

Step03:选中椭圆图层,命名为yuan,右键选择【混合选项】,选择【渐变叠加】,线性渐变,色值从上到下为 #feb5d0 — #ff7fae,角度为90°;

Step02:把圆角矩形图层命名为di,然后右键选择【混合选项】,设置:

【渐变叠加】:线性渐变,色值从上到下为 #e5c511 — #644200,角度为90°;

Step05:复制yuan图层命名为nei_yuan,点击【编辑】—【自由变换路径】(快捷键Ctrl+T),缩小80%(记得点击【保持长宽比】),右键清除图层样式,选择【混合选项】设置:

金沙贵宾会员登录 17

END:根据自己喜爱跟感觉调试破旧金属纹理,完成其他图标。

Step01:点击 — 【文件】— 【新建】(快捷键Ctrl+N)新建一个新的图像,命名好并把宽度设置为800px,高度为600px,分辨率为72dpi,然后点击确定,记得顺手保存(快捷键Ctrl+S),以免做一半PS崩溃或者其他原因被关闭了那就悲催了~

再复制nei_yuan图层命名为nei_yuan_bian,清除图层样式,填充颜色改为# ffb9d3;载入选区向上移动两像素,反向选区,再点击【图层】窗口的【添加图层蒙版】,再把nei_yuan_bian图层向下移动一像素;

02 使用笔刷,颜色# 181818,混合模式:叠加,不透明度40%;

一、卡通风格,联系人图标

再复制yuan图层命名为yuan_bian01,选择右键清除图层样式,填充颜色改为# ffadcb;按住Ctrl键点击图层载入选区,按方向键向上和向左移动一像素,再反向选区(快捷键Shift+Ctrl+I),再点击【图层】窗口的【添加图层蒙版】;

【描边】:大小1px,内部,颜色#606060;

金沙贵宾会员登录 18

【高斯模糊】:半径3;

金沙贵宾会员登录 19

【内阴影】:颜色# c33c6d,不透明度70%,角度120°,距离5,阻塞2,大小8,

Step02:选择【圆角矩形工具】(快捷键U,可按Shift+U切换),在画布点击【创建圆角矩形】弹出层,设置宽度为180px,高度为180px,半径20px,并勾选【从中心】,然后点击确定;

END:Duang~ 完成图标后加个华丽丽的背景,再用同样的方法就绘制出一套主题图标啦~

【渐变叠加】:线性渐变,色值从上到下为 #4b4b4b — #98988d,角度为90°;

金沙贵宾会员登录 20

这一步可自由发挥,自己觉得金属图片哪块可以作为纹理即用就可,参数也可自己调试叠加,以实际效果为主;

复制图层message命名为message_ceng,填充颜色为# 4da2f9,载入图层选区向上移动三像素,反向选区,再点击【图层】窗口的【添加图层蒙版】;

先看效果:金沙贵宾会员登录 21

Step01:点击 — 【文件】— 【新建】(快捷键Ctrl+N)新建一个新的图像,命名好并把宽度设置为800px,高度为600px,分辨率为72dpi,然后点击确定,记得顺手保存(快捷键Ctrl+S),以免做一半PS崩溃或者其他原因被关闭了那就悲催了~

Step01:点击 — 【文件】— 【新建】(快捷键Ctrl+N)新建一个新的图像,命名好并把宽度设置为800px,高度为600px,分辨率为72dpi,然后点击确定,记得顺手保存文件(快捷键Ctrl+S)。

【渐变叠加】:线性渐变,色值从上到下为 # feb8d2 — # ff80af,角度为90°;

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

金沙贵宾会员登录 22

Step04:制作残旧金属纹理部分,这一步采用的是素材图片嵌入和笔刷绘制,可在网上搜索关键字:残旧、颓废、喷溅、金属等字眼下载相关素材,ps:本教程所用到的图片跟笔刷连同图标源文件psd均有提供(见附件下载或者网盘链接),笔刷如何载入请自行百度,谢谢!

Step04:载入message图层选区,填充颜色#134573,取消选区(快捷键Ctrl+D),点击【滤镜】 — 【模糊】 — 【动感模糊】和【高斯模糊】,

金沙贵宾会员登录 23

Step05:绘制短信图标上笑脸部分,选择【椭圆工具】,按住Shift键,画一个正圆,填充颜色为# 0675d5,大小适中即可,并复制图层(快捷键Ctrl+J或者选择【移动工具】Ctrl+V,按住Alt键拖动),再选择【文字工具】(快捷键T,可按Shift+T切换),输入字符),文字颜色为# 0675d5,大小适中,这里的文字大小为30px,组合成为一个笑脸字符:) 完成图标的绘制。

这一步可自由发挥,自己觉得金属图片哪块可以作为纹理即用就可,参数也可自己调试叠加,以实际效果为主,完成图标绘制;

金沙贵宾会员登录 24

复制图层(快捷键Ctrl+J或者选择【移动工具】按住alt键拖动),复制四个小圆分别放在四个角;

金沙贵宾会员登录 25

金沙贵宾会员登录 26

金沙贵宾会员登录 27

金沙贵宾会员登录 28

【描边】:大小3px,内部,颜色# d85082,

金沙贵宾会员登录 29

同理复制yuan图层命名为yuan_bian02,填充颜色为#fff2f7,载入选区向下移动两像素,反向选区后添加图层蒙版;

再复制图层backup重命名为backup_bian,载入选区,向上移动一像素,反向选区(快捷键Shift+Ctrl+I),再点击【图层】窗口的【添加图层蒙版】,设置图层样式:

【投影】:颜色#789bc0;角度120°,距离1px,扩展0,大小1px;

金属纹理主要是不断通过设置图层的混合模式和不透明度的参数值叠加调试而成的,本教程调试后的参数如下:

二、微扁平化 —— FLEXAGON (短信图标)

绘制插槽:选择【矩形工具】(快捷键U,可按Shift+U切换),画一个长方形,大小自定适合即可,设置图层样式:

再复制nei_yuan图层命名为nei_yuan2,清除图层样式,自由变换路径缩小90%(记得点击【保持长宽比】),颜色# FFFFFF,不透明度改为5%;

【内阴影】:正片叠底,颜色#474747,角度90°,距离3px,阻塞0,大小3px;

【动感模糊】:角度90°,距离7;

【描边】:大小2px,外部,线性渐变,色值从上到下为 #929292 — #3b3b3b,角度为90°;

选择【椭圆选框工具】(快捷键M,可按Shift+M切换),按住Shift键,画一个正圆选区(大小自己把握),可对齐图层,然后点击【图层】窗口的【添加图层蒙版】;

Step08:绘制螺丝孔:选择【椭圆工具】,在画布上按住Shift键画一个小正圆,大小自定适合即可,设置图层样式:

一、卡通风格 —— LYNN Rabbit (联系人图标)

Step05:制作金属破损处,选择【钢笔工具】(快捷键P,可按Shift+P切换),绘制几个不规则多边形,形状自由发挥自定,配置金属纹理背景,颜色深点即可,此处举例:填充颜色#777777,设置图层样式:

把图层不透明度设置为50%,并把图层向下移动五像素;

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

金沙贵宾会员登录 30

【渐变叠加】:线性渐变,色值从上到下为 #333333 — #c6c6c6,角度为90°;

END:继续duang~ duang~ duang~,一套华丽丽的微扁平化的主题图标就这样出炉啦~

金属纹理主要是不断通过设置图层的混合模式和不透明度的参数值叠加调试而成的,本教程调试后的参数如下:

Step03:选中椭圆图层,命名为yuan,右键选择【混合选项】,选择【渐变叠加】,线性渐变,色值从上到下为 #feb5d0 — #ff7fae,角度为90°;

【渐变叠加】:线性渐变,色值从上到下为 #353535 — #0c0c0c,角度为90°;

再复制图层message命名为message_bian,填充颜色为# c7e3ff,载入图层选区向上移动一像素,反向选区,再点击【图层】窗口的【添加图层蒙版】;

Step06:复制图层di重命名为nei_di,点击【编辑】—【自由变换路径】(快捷键Ctrl+T),缩小90%(记得点击【保持长宽比】),右键清除图层样式,选择【混合选项】设置:

link:

最后复制六个图层,并排放在底部且居中排列;

本文由金沙贵宾会官网发布于生活方式,转载请注明出处:设计联系人和短信图标,颓废机械风格UI图标教程

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文