3步教你快速绘制时尚的弥散阴影【UI设计培训】
作者:一网学   最后更新时间:2016-03-24 17:01:12

小编:弥散阴影近年大热,设计师想要玩好弥散阴影,就需要控制好阴影的范围和方向,界面中忌多个大范围的阴影,好了话不多说,直接上正文。

宋聚安:不知道大家有没有注意,从去年开始突然流行一种萌萌哒的阴影设计技巧,先看下面几张图(反正我是去年才开始用这种技巧的,可能是我知道的太晚 (*^__^*))

1ms201603232ms201603233ms20160323

看完后注意到了共同点没有?没错,上面这些图都有个共同点就是点缀了整个界面的精致阴影~

有的朋友会想直接用投影样式不是更简单么?那么碰到下图这样的您就要懵逼了(⊙0⊙)

4ms201603235ms20160323

这就是本教程要分享给大家的最近大热的设计技巧:“弥散阴影”。相信大家早就见到过类似这些案例了,但你们真的尝试使用过吗?一个本来60分的古板扁平UI界面,加上这种阴影效果就能作品秒变大神啦~

现在开始三步教程,首先拿鄙人最近的一个羞羞案例来做示范(因为是示例,我把阴影加的有些重):

6ms20160323

第一步

这里以界面中的圆角矩形按钮来做示范,先画个230*60的圆角矩形,色值#ff4683,得到一个圆角矩形A

(新手朋友们要记住想用弥散阴影的话,先别用直角,稍微几像素的圆角或直接圆角矩形做出来的效果更好看)

7ms20160323

第二步

Ctrl+J快捷键复制圆角矩形A得到圆角矩形B,这里注意!和直接添加投影样式的区别就在这里了:一定要把B等比例缩小一些!然后透明度设40%,并向下移动15px(数值仅供参考,具体自己把握,另外记得把B图层移到A图层下方)

8ms20160323

第三步

点开PS工具栏中的窗口-属性-蒙板,设置羽化为10,哒啦~一个最最简单的弥散阴影就做出来啦!!!(喜欢的朋友也可以加个1像素的白色投影之类的样式,丰富细节,)

9ms20160323

依次类推,我们可以发挥创意,运用弥散阴影技巧设计出更多有意思的小部件,并且完美运用~~

10ms2016032311ms2016032312ms2016032313ms20160323

本文只是希望带大家入个门,其中的技巧还有很多的:比如阴影不要乱用,一个界面1到2个点到为止即可,否则会显得界面很脏。阴影的背景尽量选择白色的会显得很通透。喜欢上这种弥散阴影的风格后,相信聪明的你还能设计衍变出更多风格的弥散阴影,看完文章自己动手试一试才能领悟到其中的奥妙哦!

(文中图片部份是网上找的,部份是我自己的,如果擅用了您的作品请联系删除( ^_^ )/~~)

原文地址:ui.cn

推荐阅读:

华为设计总监:年轻设计师应该如何进步?

ADOBE EXPERIENCE DESIGN CC简单体验预览

人工智能!未来谷歌的AlphaGo会取替设计师的工作?

关注微信公众号:设计人物 一起来“窥探”设计师们背后的故事吧!


上一篇:求职经验:准备用户体验设计作品集的8条实用方法

下一篇:换位思考!什么样的产品才是用户想要的呢?

其它免费教程

怎样用Sketch绘制《疯狂动物城》的主角朱迪和尼克

时间:2016-03-09 点击:3514

小编:最近《疯狂动物城》火得不要不要的,口碑好评也都逆天了,最亮眼的还是动画电影里狐狸和兔子。今天作...

怎样快速设计一张高品位高水准的海报?

时间:2015-03-27 点击:1732

最适合大学生社团的海报教程!今天的教程跟平时不一样,我们从一张糟糕透顶的海报开始,一步一步教你改善它...

《设计心理学》之如何让用户使用简单的设计?

时间:2016-11-14 点击:1627

然鹅,对设计师而言有这样一个绕口的悖论:感觉简单的并不等于用起来简单;增加可见的选项就会降低感觉上的...

给淘宝商品加上真实倒影教程——淘宝美工培训

时间:2014-09-22 点击:2618

作者制作倒影的方法非常不错。过程:先把产品抠出来,并把每一个面也抠出来,都放到一个组里面;然后把这个...

采用好方法,才能高效率设计好logo?【平面设计培训】

时间:2015-03-05 点击:2524

就以朵璞设计工作室为造动剧场设计Logo的过程为例,与大家分享个中点滴。这是个不可多得的正面案例,当...

更多设计教程>>


在家就能免费试听
多了解下对你最终选择总是有帮助的
姓名:
电话:
Q Q:
答案:
邮箱:
留言:
提交试听申请