提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
2016开始火爆的描边风相关设计相信大家都已经看烂了,这次来分享个简单实用的三步走描边风设计教程
对不起,我又跳票了~ APP启动页的教程再等下一期吧,大家先看看这篇教程(*^__^*)
如果还不知道描边风是什么的可以先看下面几张图
以上这种又萌又漂亮的设计风格就叫描边风~ 是起源于Dribbble火透半边的MBE设计师
为什么现在才写这篇文章呢? 因为描边风很火啊,不跟着潮流写教程岂不是OUT了~
那么废话不多说,这是个超级简单的小教程,所以直接开工吧 so~
老规矩拿出寡人刚才提到的的羞羞案例来做示范:
第一步、这里以界面中的收听图标来做示范,先画个120*120的正圆形,色值#ffd401,得到一个圆形A
(为了方便新手跟着练习我这里示例形状是最简单的正圆,朋友们可以像我案例中那样用特殊形状来设计也可以,效果会更好)
第二步、ctrl+j快捷键复制圆形A得到圆形B,然后设置圆形B的颜色填充为空,边框4像素 色值#000000(边框粗细具体自己把握,但颜色别随便改,一般纯黑是最合适的。另外记得把B图层移到A图层上方)
第三步、选中圆形A然后ctrl+T等比例缩放大小为110*110,注意缩放方向是往右下的方向。然后给圆形A添加个内阴影样式,设置混合模式为“柔光”、颜色#000000、角度-24、距离13
最后随便放个纯黑的三角形上去,哒啦~ 一个最最简单的实用型描边风图标就做出来啦!!(单独展示的话,也可以像我这样加一些+-。.*等多彩符号做个装饰)
依次类推,我们可以发挥创意,运用描边风的风格设计出更多有意思的UI元素,并且完美运用到APP中~~
本文只是希望带大家入个门,其中的技巧还有很多的:比如颜色不能乱用,如果配不好色的可以用我下面提供的几个色值,还有描边的粗细要搭配好,最后当然是希望聪明的你还能设计衍变出更多的风格,都打开PS来动动手,让我们爱上设计吧~!(文中的很多精美案例都是网上找的,感谢大家的分享,如果善用了您的作品请联系删除( ^_^ )/~~)
上图这种弥散阴影效果,可看这篇教程:http://www.ui.cn/detail/87521.html
下一期的视频教程预告:教你如何快速设计一个APP启动页 ↓ (已发:http://www.ui.cn/detail/174402.html)
如果客官觉得本教程还行,欢迎关注并帮忙推荐哦↓
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册