相关分类
入门实例
文字效果
照片处理
滤镜教程
美白磨皮
图片合成
鼠绘教程
推荐教程
PS视频教程
PS作品欣赏
收费课程
飞特网 顶部通栏广告

6个小技巧教你设计模糊效果背景

闪闪的星仔发布于:2021-6-23 09:25 |来自:转载
简介: iOS 14和macOS Big Sur继续发展一种视觉风格,设计精良的模糊在建立层次结构中起着巨大的作用,这就是设计师制作漂亮的模糊效果的原因。
iOS 14和macOS Big Sur继续发展一种视觉风格,设计精良的模糊在建立层次结构中起着巨大的作用,这就是设计师制作漂亮的模糊效果的原因。下面向你展示如何通过几个步骤进行制作。

1.用中性色来提升

6个小技巧教你设计模糊效果背景 飞特网 原创PS入门实例教程


对于模糊的UI背景,使用白色或黑色,有时也可以考虑使用灰色色调。这些中性颜色是背景模糊层的最佳选择。如果你使用鲜艳的色调,模糊看起来会很奇怪,可能不适合你的UI下面的背景。

2.模糊使内容可读

6个小技巧教你设计模糊效果背景 飞特网 原创PS入门实例教程


应用时髦的视觉风格不会让我们牺牲可用性。如果你只模糊一点背景值。卡片的内容会看起来不好。

可以尝试使用有助于在背景和文本内容之间建立良好对比的值。比如:我经常使用16-24px的模糊效果,看起来效果还不错。

3.调整不透明度以模糊

6个小技巧教你设计模糊效果背景 飞特网 原创PS入门实例教程


看起来不错的模糊背景必须是半透明的。图层的不透明度过多会使模糊效果不可见。太低的不透明度会使模糊的图层与背景混合。对我来说,安全的选择大约是30-60%。

4.不要使用过多的模糊

6个小技巧教你设计模糊效果背景 飞特网 原创PS入门实例教程


背景模糊需要平衡。它不仅与不透明度有关,而且还与模糊本身的价值有关。如果模糊图层太多,则背景中漂亮的渐变效果将消失。

5.使用相同的设置提升图层

6个小技巧教你设计模糊效果背景 飞特网 原创PS入门实例教程


这是我在项目中使用的技巧。为了在模糊和半透明的UI设计组件中构建可视层次结构,我对标题,部分或卡片使用了相同的样式。

如果模糊的面板或卡片具有分组的元素或条形,请尝试使用相同的图层样式进行抬高。它给出了很好的结果。

6.在正确的背景下使用

6个小技巧教你设计模糊效果背景 飞特网 原创PS入门实例教程


应用良好的背景非常重要。当背景坚实时避免模糊。在图像或渐变上使用它,因此可以为你的设计提供很好的深度感。

总结一下

这个简单的教程向你展示了如何在设计中制作吸引人的模糊背景。如果你有自己的设计思路,欢迎大家留意互动!
38

好评
30

差评

刚表态过的朋友 (68 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计