PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

编者按:超简单3步教你画出今年大热的弥散阴影!设计师若想玩好弥散阴影,需要控制好阴影的范围和方向,界面中忌多个大范围的阴影,否则会有脏乱感。阴影若要保持通透光亮,更要注意把按钮或组件放置在底色较白净的层上。不多说,直接看教程!

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

PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

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

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

PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

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

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

PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

第一步

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

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

PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

第二步

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

PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

第三步

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

PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

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

PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

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

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

「腾讯人气过万的好文合集」

敏捷用研指南:

《腾讯专业干货!一份系统全面的敏捷设计用研指南》

QQ表情怎么改版的?

《腾讯设计师揭秘!QQ默认表情优化背后的设计故事》

HTML 5动效设计方法大全!

《腾讯干货!由浅入深科普最常用的八种HTML 5动效制作手法》

原文地址:ui.cn

PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量104万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

收藏 76
点赞 2

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。