不管你看得起不看得起我,我都是一个蓝色小图标!(图标+背景+自定义图案设置)(原创文章)

5/7/2014来源:Photoshop教程人气:2257

 

最近上微博,貌似UI设计灰常热,偶然看到国外一组蓝色小图标,被这种简洁干净的风格吸引了,于是已经尝试做了一下,今天跟大家分享一下经验!我尽量把教程做的详细简单些,高手们可以尽情跳过一些步骤!欢迎大家踊跃交流!

 

 

这个是当时看到的老外的图

 

 

开始教程之前,大家跟我喊一句,

 

钓鱼岛是中国的!!!

Let’s go

 

 

 

 

1、新建文档800*40072dpi

 

 

2、为了规范和制图方便,我一般会调出参考线(ctrl+;)和网络(ctrl+’),我们打开编辑-首选项-参考线、网格和切片菜单,进行网格设置,跟本次教程文档大小(800*400)相配合即可(每个大格间距50),这里设置间隔50,子网络5.

 

 

 

3、将背景转为图层并填充蓝色 4c9eeb

 

4、我们为背景加入一些颗粒效果。

滤镜-杂色-添加杂色

 

5、给背景加入一些光的感觉。在图层混合模式里改动。

 

 

 

6、添加后的效果。

 

 

颗粒和光的感觉有了,我们现在加入自制的“格子”。

格子虽然不复杂,但经常看到有的朋友深受其困扰,总是奔波于下载各种样式,其实这种图案触类旁通,我带大家做一下~

 

 

7、新建文档,50*5072dpi,透明。

如果我看教程,那我一定会想凭什么是50??有的作者可能不会解释,于是我们模仿的时候,只会照搬而不懂原理,导致下次还是不会设置。

 

这种深深的不安感会在我等菜鸟心中埋下,会很恐惧~不管你们是不是这感觉,我反正是。。。。我的菜鸟同胞们,李菊福不???!!

 

50的由来是我们上面根据网格设置的哦,50刚好一大格,不是凭空来的,一句话,设计从文档大小设置就开始了!

 

8、选择选区工具,如图设置。

 

 

9、调出网格(ctrl+’),用刚刚设置好大小的选区,画出四个竖线,由于网格线的存在,对齐很容易。

 

 

 

 

10、新建编组,外框,在左侧画出一条竖线。

 

 

 

 

11、选择选区工具,如图设置。Bingo!要画横线了

 

 

 

 

 

12、如图,内部四条横线在中间,外框是最上边的横线。

将内部组的不透明度降低到50%

这样设置可以模拟出外框粗,内框细的效果,参见PS自带网格~

 

 

 

 

13ctrl+alt+shift+e盖印图层(注意要把背景图层隐藏掉~,我们要做的是背景透明的),

打开编辑-定义图案,如图键入名字即可。

好了这个文档就可以关掉了~

 

 

 

 

14、回到之前的背景图层,加入图案叠加,选择刚刚自己做的图案,如图设置~

效果看起来还不错吧,如果想让网格再浅一些,可以把不透明度再拉低。

 

 

 

 

15、做好这几步之后的效果图。

 

 

 

 

 

16OK,这个背景搞定之后,开始画图。

图标我就以三角形开始,做出一个由三角形变化而来的图形。

会进行一些切割,过程中基本的图案制作操作都会涉及。

 

选择多边形工具

 

 

 

 

17、三角形的设置。

 

 

 

 

 

18、建立一个三角形之后,我们摁下键盘上的A键(路径选择工具的快捷键),ctrl+c复制一份,然后ctrl+v粘贴,ctrl+t进行旋转,如图~

 

 

 

 

选择第一种叠加方式进行组合。

 

 

 

 

19、我们继续摁下键盘上的A键,选择这个6角图形,ctrl+c复制一份,然后ctrl+v粘贴,ctrl+t进行缩放。

为什么不会镂空??因为此时设置还是第一种方式组合,我们选中小6角形,改为第二种方式组合。

 

 

 

 

 

 

20、效果图~小图标很可爱,虽然站酷上的同志们都爱重口味。。。

 

 

 

 

 

21、下面添加图层样式

 

别担心,我会把为什么这样设置告诉大家。

Don’t worry ,be happy.(有知道这句话出处的战友们,吱一声!!你懂的)

 

 

 

 

 

20、先加入投影,因为背景颜色比较浅,如果先上渐变叠加,我们叠加浅色的不容易看出来色彩是否合适,先加入投影把主体和背景分离出来~

 

 

 

 

21、现在加渐变(大家可以试试把投影层去掉,是不是没法判断颜色了?所以不是因为投影排在第一个就第一个设置它哦!!)

 

 

 

 

 

 

22、添加内阴影,可以和上图对比一下,看作用在哪里,大家来找茬~

 

 

 

 

23、添加一个描边,看着更舒服。渐变的颜色是#4c8ab4#60b6ee

 

 

 

 

24、效果图

 

 

 

 

 

 

基本内容就是这些,下面给大家分享一下我画这种简单小图标的方法。

 

1、  我以小信封为例,先画一个矩形,添加描边。

 

 

 

 

2、新建图层,用画笔工具涂一下信封的样子。

 

 

 

 

3、  白线把黑色矩形划分之后,黑色部分就是我们需要勾出的图形,再进行切割即可~

 

 

      

 

 

 

 

 

前些天在站酷下载的方正经黑体很适合这风格~

 

大家尽情发挥想象力吧!!

欢迎加我微博 @南门盖饭王:http://weibo.com/gaifanwang