N Style图标制作教程(源文件psd下载)

今天小编给大家带来一个卡通风格的和微扁平风格的图标教程。粉嫩嫩的小兔子萌萌哒!大家按照教程做好这两个图标后呢,也可以尝试着去发现生活中一些更加有趣的元素,加入到我们的这个风格的图标中,做出一套风格统一的图标,是不是想想都有点小激动呢~好啦,动手做才是硬道理,开始练习吧~

第一次出UI教程,把之前参加过比赛的几套风格各异的主题图标拿制作过程出来讲解一下,图标的绘制方法有很多种,主要看你适合哪种,用得方便不,注意技巧跟细节,本教程提供源文件psd下载,希望大家多多支持!另外欢迎上传交作业啦~

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

link:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

link:

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

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

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

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

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

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

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

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

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

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

【高斯模糊】:半径3;

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

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

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

文章来源:站酷

文章作者:yu0910

(0)

相关推荐

  • N Style图标制作教程 II(源文件psd下载)

    大家还记得上次的N Style图标制作教程吗,是一只粉嫩嫩的小兔子!不知道大家有没有做作业呢?这次@yu0910继续给大家发福利,带来一大波图标制作教程,这次的风格是颓废机械风格跟不规则形状风格,本教 ...

  • 卡通笑脸图片ps图标制作教程

    卡通笑脸图片ps图标制作教程介绍简单的表情图片或图标的制作方法.有点类似水晶风格图标,用到的渐变色较多,绘制的时候可以根据自己的喜好选择不同的颜色. 操作方法 01 新建一个800 * 600 像素的 ...

  • 七夕福利大礼包!50个精选banner部分源文件PSD下载!

    小编:炸,我又出现了! 这次带来的是一个全新的一个主题,七夕快来了 是不是大家很多忙着做banner. 海报专题页的小伙伴们你们有福啦~ 咱们小海精选整理的banner干货源文件, 不管是参考还是套用 ...

  • 图标制作教程

    今天跟大家分享一下做图标,以及注意的一些事 首先做一套图标,我们先要定个主题和风格. 然后图标的原则要清楚明白,那有哪些呢? 1 识别性      2 一致性      3 兼容性      4 差异 ...

  • 快启动怎么制作u盘启动盘 快启动u盘启动盘详细制作教程

    快启动时一款功能强大的u盘制作工具,可以非常简单方便的制作u盘启动盘,可以帮助你轻松解决装机过程遇到的问题,那么快启动怎么制作u盘启动盘,下面小编就给大家带来快启动u盘启动盘详细制作教程. 工具准备 ...

  • 图标制作软件:如何从web图像创建一个图标

    在一些电脑图标下载网站上,我们常常能看到很多的图标制作素材、甚至是已经制作完成的图标,如果我们想使用这些现成图标,并一定非得把它们下载到自己电脑上才能使用。Iconworkshop图标制作软件能够直接 ...

  • 利用图标制作软件自己绘制简单图标

    在Axialis IconWorkshop这个图标制作软件的帮助下,我们可以将很多自己喜欢的图片变成桌面图标,但是有的时候自己会想要一些更独特化的图标,这个时候就需要自己来绘制一个图标了。 图标制作软 ...

  • 三星手机修改APK文件图标图文教程

    下面我带来简单易懂的三星手机修改APK文件图标图文教程 操作方法 01 下载修改APK文件工具,[apk签名.zip],并安装,解开apk(以手机QQ为例,将手机QQ的图标改成PCQQ的图标).下载好 ...

  • PS简单制作图钉一枚(附PSD下载)

    哈哈,小月今天乐此不彼哈...再给大家一篇简单易学的PS教程,制作简单图钉ICON一枚,虽然简单,但是还是需要耐心的..特别勾高光的时候...大家要按时交作业哈,同时希望大家能把做作业的心得写一下哈. ...