三步制作出这种精美弥散阴影

用户头像
广州/UI设计师/10年前/8673浏览
三步制作出这种精美弥散阴影
用户头像
宋聚安

2015开始大热的弥散阴影设计技巧,不跟上就OUT啦~

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


5ff957065db86ac7257948831f88.jpg




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

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


3ed857065d2d32f875a944d3c510.jpg


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


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


第一步、这里以界面中的圆角矩形按钮来做示范,先画个230*60的圆角矩形,色值#ff4683,得到一个圆角矩形A(新手朋友们要记住想用弥散阴影的话,先别用直角,稍微几像素的圆角或直接圆角矩形做出来的效果更好看)


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

efb257065d9a6ac7257948cc3618.jpg


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


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





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

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


下一期的视频教程预告:APP主页上常用的图标按钮涉及技巧↓


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

141
举报
|
152
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
拟物风质感写实UI卡片合集源文件
新能源APP应用UIKit
【新年UI图标】银行卡icon
我的钱包-UI界面设计-app
高级感金属拟物 UI设计组件库
抽象液态渐变UI背景模版
【新年UI图标】影音icon
3D渐变流体抽象矢量UI背景图
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
3D卡通UI界面图标可爱插画免扣素
高级表盘系列UI源文件
【新年UI图标】汽车icon
【新年UI图标】游戏/娱乐icon
UI应用平面图标
【新年UI图标】珠宝icon
【新年UI图标】优惠券icon
【新年UI图标】钱包icon
手表表盘UI系列
UI通用设计素材1
UI 登录界面设计模板包
科技医疗透明柜UI界面设计
新拟态风格 UI设计组件库
钱包ui模板
智能家居中心 简约 UI设计组件库
你可能喜欢
大家都在看
登录注册