每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
不定期更新一些小教程分享，希望能帮到UI新手们。点击头像可以查看我其他的一些教程。引爆大热的弥散阴影设计技巧，不跟上就OUT啦~
新的教程已发，欢迎看官们赏脸啦：http://i.ui.cn/ucenter/118849.html
即装逼，又实用，还能一秒提升作品质量，这就是：“弥散阴影”（名字瞎起的，好像这个效果还没有专门的名称） 快来跟着我学习如何这种设计技巧吧 (*^__^*)）
看完后注意到了共同点没有？没错，上面这些图都有个共同点就是点缀了整个界面的精致阴影~
有的朋友会想直接用投影样式不是更简单么？那么碰到下图这样的您就要懵逼了(⊙０⊙)
这就是本教程要分享给大家的最近大热的设计技巧：“弥散阴影”。相信大家早就见到过类似这些案例了，但你们真的尝试使用过吗？一个本来60分的古板扁平UI界面，加上这种阴影效果就能作品秒变大神啦~
现在开始三步教程，首先拿鄙人最近的一个羞羞案例来做示范（因为是示例，我把阴影加的有些重）：
第一步、这里以界面中的圆角矩形按钮来做示范，先画个230*60的圆角矩形，色值#ff4683，得到一个圆角矩形A
（新手朋友们要记住想用弥散阴影的话，先别用直角，稍微几像素的圆角或直接圆角矩形做出来的效果更好看）
第二步、ctrl+j快捷键复制圆角矩形A得到圆角矩形B，这里注意！和直接添加投影样式的区别就在这里了：一定要把B等比例缩小一些！然后透明度设40%，并向下移动15px（数值仅供参考，具体自己把握，另外记得把B图层移到A图层下方）
第三步、点开PS工具栏中的窗口-属性-蒙板，设置羽化为10，哒啦~一个最最简单的弥散阴影就做出来啦！！！（喜欢的朋友也可以加个1像素的白色投影之类的样式，丰富细节，）
依次类推，我们可以发挥创意，运用弥散阴影技巧设计出更多有意思的小部件，并且完美运用~~
本文只是希望带大家入个门，其中的技巧还有很多的：比如阴影不要乱用，一个界面1到2个点到为止即可，否则会显得界面很脏。阴影的背景尽量选择白色的会显得很通透。喜欢上这种弥散阴影的风格后，相信聪明的你还能设计衍变出更多风格的弥散阴影，看完文章自己动手试一试才能领悟到其中的奥妙哦！
（文中图片部份是网上找的，部份是我自己的，如果善用了您的作品请联系删除( ^_^ )/~~）
下一期的视频教程预告：APP主页上常用的图标按钮涉及技巧↓（已发http://www.ui.cn/detail/115974.html）
如果客官觉得本教程还行，欢迎关注并帮忙推荐哦↓
全部评论：167条
-
-
-
-
-
宋聚安
2018-10-29 21:39@shimotsuki: 切图时，直接把图标和阴影一起切出来；到了需要给开发标注时（我们现在用的都是自动标注，把PSD上传到网站后网页自动分析标注，网址甩给开发就行了），把阴影和图标合成智能对象即可，希望能够帮到您
-
shimotsuki
2018-10-28 22:29@Yell: 对 我也想问 这种投影按根据不同的效果，有可能已经超出icon本来定义的栅格范围，借楼问老师是怎么做切图的——我猜是另外单独建立个组给阴影，范围利用用别的软件拷贝有[图层特效]的图层入sketch/XD中出现的变成位图bug 确定这个组的范围 在协作软件中标注好自己用的阴影参数给程序。后期持续跟进还原情况。
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 更多
更多作品
发表评论