恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
三步制作出这种精美弥散阴影
0.0°
原创文章 / 教程 / / 举报
213752 1551 2512 167

更新于:2017-06-03

不定期更新一些小教程分享,希望能帮到UI新手们。点击头像可以查看我其他的一些教程。引爆大热的弥散阴影设计技巧,不跟上就OUT啦~

新的教程已发,欢迎看官们赏脸啦:http://i.ui.cn/ucenter/118849.html


即装逼,又实用,还能一秒提升作品质量,这就是:“弥散阴影”(名字瞎起的,好像这个效果还没有专门的名称) 快来跟着我学习如何这种设计技巧吧 (*^__^*))

Image title

Image title

Image title

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

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

Image title

Image title

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


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

Image title


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

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

Image title


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

Image title



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

Image title



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

Image title

Image title

Image title

Image title

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

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


下一期的视频教程预告:APP主页上常用的图标按钮涉及技巧↓(已发http://www.ui.cn/detail/115974.html

Image title


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

Image title


创建于:2017-04-21
收藏

1551人已收藏

宋聚安

不定期更新课程 可加微信s85009500咨询啦~

  • 24

    作品

  • 7122

    粉丝

  • 43

    关注

  • 一批精选APP作品界面 PSD分享
  • 三要素教你设计流行 大白风格UI
  • UI视频教程 教你设计个简历APP
  • 简单三步 教你设计个精美启动页

猜你喜欢

    宋聚安

    宋聚安

    不定期更新课程 可加微信s85009500咨询啦~

    人气明星助人为乐首页达人砖家原创达人
    • 7122

      粉丝

    • 2.4

      人气

    • 6751

      颜值

    作品

      GDC Award 2021启航

      推广

      最新推荐

      如何搭建 B 端设计规范

      3536 0 2

      相关佳作
      换一换

        宋聚安

        点赞:2512

        收藏:1551

        评论:167

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

        你确定要举报三步制作出这种精美弥散阴影

        如果查出恶意举报,十天内禁止提交任何举报申请。

        0/200

        上传证据: 超过10M的附件请使用网盘地址

        点击上传附件

        对谁可见:

        全部设计师
        • 全部设计师
        • 推荐设计师和认证设计师

        您确认要推荐?

        该作品发布时间:2017年04月21日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

        账号或密码错误,请重新输入

        账号或密码错误,请重新输入

        登录

        账号或密码错误

        发送验证码 120s 验证码错误

        登录