狼牙创意网 资源共享 教程文章 查看作品内容

精美格子UI图标制作教程,创意UI图标设计,个性图标设计教程网,优秀UI教程文章学习分享

 教你制作很有创意设计感的格子UI图标,欣赏格子创意设计带来的灵感风采。
这就是我们最后想要看到的效果

其实创意很简单,只要你用心,你就会有灵感~下面我们来看具体步骤

1、我们按老规矩打开Photoshop,然后快捷键Ctrl+N新建一个文档,文档尺寸根据自己的喜欢,如下图所示。

教程|1|505x394像素

2、按住键盘的Alt键双击一下背景图层,目的是让它转换为普通图层。然后再次双击打开,这里打开图层样式面板,为其添加颜色的叠加样式,色值是#262523,如下图所示。

教程|2|609x289像素

继续为其添加渐变叠加,数值如下:

教程|3|597x367像素

3、然后利用PS内发光中的杂色功能来给它的背景添加一些杂色,同时也可以使用滤镜中的添加杂色功能,方法很多,根据自己的习惯怎么都行,目的就是为了做出创意感。

教程|4|600x294像素

现在背景效果如下图所示:

教程|5|600x350像素

4、然后接着新建一层,用白色的大号柔边画笔给它在画布中心点击出白色的亮光。如下图所示

教程|6|600x350像素

5、Ctrl+T将画面拉宽压扁,如图的创意效果

教程|7|600x349像素

6、调整一下透明度,将图层不透明度调整为10-30%,数值不定,根据你自己的实际情况而定。

教程|8|600x350像素

7、接下来创建一下icon主体。利用圆角矩形工具在画布中心点击,在弹出的对话框中设置数值,如图所示

教程|9|600x333像素

8、在圆角矩形上方随意绘制一个比其尺寸大一点的形状,因为后面会将其转换为剪贴蒙版,所以形状可随意绘制。如下图所示:

教程|10|600x350像素

为创建的形状进行角度渐变。

教程|11|605x405像素

9、做好上面的步骤之后,按住Alt键在角度渐变与圆角矩形中间点击鼠标左键,将其转换为剪贴蒙版。并且在图层名称上点击一下右键,将它转换为智能对象。如下图所示

教程|12|600x291像素

10、利用马赛克滤镜,即,滤镜>像素化>马赛克 对其进行分块处理。如图所示

教程|13|600x329像素

11、将执行了马赛克滤镜的图层Ctrl+J给它复制一下图层,然后像上面一样转换为剪贴蒙版。点击滤镜>风格化>照亮边缘。如图所示

教程|14|600x309像素

将其图层混合模式设置为线性减淡(添加),图层不透明度设置为30%。此时每个格子间都被细线分割开了。如图所示的创意效果

教程|15|600x322像素

12、将上一步创建的图层Ctrl+J再次给他复制一下。将图层混合模式设置为减去,图层不透明度设置为20%。

选择移动工具,利用键盘上的方向键将其位置向下方与右方分别移动1像素。这样格子的间隔部分便形成了凹槽的效果。如图所示,慢慢的就开始表现出创意效果了

教程|16|600x329像素

13、利用椭圆工具在icon中心绘制出一个正圆形。如图所示

教程|17|600x350像素

然后给后面添加一下角度渐变。

教程|18|599x277像素

再给它添加内阴影效果

教程|19|600x232像素

为了让画面的立体感更强,所以需要为其添加投影效果,增强创意设计感。

教程|20|600x350像素

现在来看看效果,设计创意感就更加明显了。

教程|21|600x350像素

14、用PS的椭圆工具在icon中心再次创建一个小的正圆形图形。如图所示

教程|22|600x350像素

然后再给它添加颜色叠加样式。这里的颜色选择接近黑色的深灰色。如图所示

教程|23|600x254像素

继续添加内发光。与第2步相同,我们这里利用内发光来添加杂色。

教程|24|600x279像素
接着给它添加内阴影的创意效果。

教程|25|600x291像素

然后再加上一个内部描边的效果,目的是为了让其轮廓更加明显。表现出设计的灵感和创意氛围。

教程|26|600x249像素

然后再来看看效果,是不是更有设计的创意感,看起来创意度更强了。

教程|27|600x350像素

15、图标处理好了,下面记得给它加上文字,红花配绿叶,这样才能更有创意的价值。

教程|28|600x350像素

文字加上之后给文字添加渐变效果。具体数值这里仅做参考,具体可以自己设置,如图所示

教程|29|600x400像素

继续给它添加内阴影以模拟边缘的高光,配合整体后面的创意效果,让设计创意感更融洽。

教程|30|600x210像素

立体感还不够,所以我们还要继续升华一下,阴影给它丰富起来。

教程|31|600x321像素

16、现在icon的效果是出来了,但总觉得创意感还不够强。还需要做一下细节的处理,给它添加发光!就会发生创意视觉的大变化了。

这里要注意一下,是把第4步创建的圆角矩形图层按住Alt键向上拖动复制一份,并且把填充调为0,这样大家就可以不需要再受到这个图层本身颜色的限制了,不但不受限制,还可以随心所欲的根据自己的喜欢挑战后面的创意感。如下图所示,看起来就不像之前的那样平淡。让图标的创意设计感丰富起来,体现视觉创意灵感的魅力。

教程|32|600x332像素

17、继续给后面加内发光,具体数值设置如下图所示,不一定按这个,大家可以随心所欲,根据自己的喜欢做出自己想要的创意感。

教程|33|600x340像素

不要忘记内阴影的调整,这样才能让画面的创意感不那么生硬。

教程|34|600x318像素

朋友们现在看起来是不是更漂亮更有创意了呢。

教程|35|600x350像素

到这里依然但还没有完,设计这个职业就是那么有深度,咱们继续苦逼的深入一下,让画面的设计创意感来得更猛烈一些。

18、双击一下图层,打开图层样式面板。在图层混合选项中将<图层蒙版隐藏效果>给她勾选上。如下图所示

教程|36|600x323像素

接着我们就为图层添加一个蒙版,并且用黑色画笔将细节擦出来,丰富设计的创意效果。

教程|37|600x314像素

最后咱们别忘了要画龙点睛,给图标添加上华丽的倒影。yes,你成功了~

教你制作很有创意设计感的格子UI图标,欣赏格子创意设计带来的灵感风采。

大家如果喜欢本教程文章的话就点个赞,如果有什么好作品或者好文章也欢迎分享
感谢贡献者分享

38

刚表态过的朋友 (38 人)

发布评论

最新设计文章评论

freezingpoint 2016-12-14 17:43
感谢楼主分享,
QQ群:1858446 2016-11-9 16:19
上面的群是平面设计、UI设计群哦
QQ群:1858446 2016-11-9 16:18
现在也有很多的只做主题的软件,图标以后,直接导出图片,用软件只做就好了
QQ群:1858446 2016-11-9 16:18
自己DIY的图标,主题,赞一个
QQ群:1858446 2016-11-9 16:17
创意不错 ,多设计一点,可以把给自己的手机用上自己设计的图标,这应该会很自豪
168434803 2016-10-11 16:16
很好的设计, UI学习群:432576876,免费在线学习
dilamei 2016-9-28 13:48
上华丽的倒影,怎么做???谢谢楼主
哎呦我呸 2016-7-28 11:55
666
五壮士 2016-7-15 11:22
很棒
郑倩倩 2016-7-8 09:45
好棒,教程细致
ferdeiker 2016-6-17 16:18
效果不错,就是图标少了个B子母~
独行侠 2015-11-12 09:44
创意不错哦,点赞一下。

查看全部设计文章评论(12)

QQ|关于我们|版权声明|创意素材|狼牙创意网 ( 滇ICP备14001869号 )

返回顶部
x

狼牙创意网

GMT+8, 2017-1-21 23:14 , Processed in 0.038044 second(s), 21 queries .

返回顶部

注册