简单实现描边图标绘制!三步实现“实用型”描边风设计

分享到:更多 ()

2016开始火爆的描边风相关设计相信大家都已经看烂了,这次来分享个简单实用的三步走描边风设计教程

对不起,我又跳票了~   APP启动页的教程再等下一期吧,大家先看看这篇教程(*^__^*)

如果还不知道描边风是什么的可以先看下面几张图

Image title

Image title

Image title

以上这种又萌又漂亮的设计风格就叫描边风~  是起源于Dribbble火透半边的MBE设计师

为什么现在才写这篇文章呢? 因为描边风很火啊,不跟着潮流写教程岂不是OUT了~   而且:

Image title

那么废话不多说,这是个超级简单的小教程,所以直接开工吧 so~

老规矩拿出寡人刚才提到的的羞羞案例来做示范:

Image title

第一步、这里以界面中的收听图标来做示范,先画个120*120的正圆形,色值#ff4683,得到一个圆形A

(为了方便新手跟着练习我这里示例形状是最简单的正圆,朋友们可以像我案例中那样用特殊形状来设计也可以,效果会更好)

Image title

第二步、ctrl+j快捷键复制圆形A得到圆形B,然后设置圆形B的颜色填充为空,边框4像素 色值#000000(边框粗细具体自己把握,但颜色别随便改,一般纯黑是最合适的。另外记得把B图层移到A图层上方)

Image title

第三步、选中圆形A然后ctrl+T等比例缩放大小为110*110,注意缩放方向是往右下的方向。然后给圆形A添加个内阴影样式,设置混合模式为“柔光”、颜色#000000、角度-24、距离13

Image title

最后随便放个纯黑的三角形上去,哒啦~ 一个最最简单的实用型描边风图标就做出来啦!!(单独展示的话,也可以像我这样加一些+-。.*等多彩符号做个装饰)

Image title

依次类推,我们可以发挥创意,运用描边风的风格设计出更多有意思的UI元素,并且完美运用到APP中~~

Image title

Image title

Image title

本文只是希望带大家入个门,其中的技巧还有很多的:比如颜色不能乱用,如果配不好色的可以用我下面提供的几个色值,还有描边的粗细要搭配好,最后当然是希望聪明的你还能设计衍变出更多的风格,都打开PS来动动手,让我们爱上设计吧~!(文中的很多精美案例都是网上找的,感谢大家的分享,如果善用了您的作品请联系删除( ^_^ )/~~)

Image title

上图这种弥散阴影效果,可看这篇教程:http://www.zuimeiui.com/fine-diffuse-shadow-style.html

 

如果客官觉得本教程还行,欢迎关注并帮忙推荐哦↓

分享:宋聚安

 

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 简单实现描边图标绘制!三步实现“实用型”描边风设计

0
分享到:更多 ()