当前位置: 首页 >> APP界面设计_APPUI设计_APP设计素材 >> 阅读正文

手机UI设计风格当中的新技巧:弥漫阴影效果

你知道2016年最火的最流行的扁平化设计新技巧是什么吗? 最近在UI设计界大热的一个词,还有APP UI设计师专门出了一个教程的新技巧。

它就是手机UI设计风格当中的新技巧:弥漫阴影效果。

最近各位设计师朋友,在追波网(dribbble.com)上经常看到的一种特别萌、特别可爱的UI作品展示效果。如下图:

app设计当中的弥散阴影效果

 

在UI中国、站酷网上 ,宋聚安的设计师发表了一篇《三步制作出这种精美弥散阴影》的原创UI教程。3月上旬掀起了一阵全民 学习弥漫阴影效果的风。

 

弥漫阴影效果

 

在此,25学堂将这套 手机UI设计风格当中的新技巧:弥漫阴影效果的设计手法传授给大家。

下面的教程的原创作者:宋聚安   来自广州的设计爱好者。25学堂感谢他的分享。

 

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

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

弥散阴影2

 

 

第二步、ctrl+j快捷键复制圆角矩形A得到圆角矩形B,透明度设30%,并向下移动10px(记得把B图层移到A图层下方)。

A方法  UI设计新技巧2

第三步、有2种常见的方法实现。

A方法:  点开PS工具栏中的滤镜-模糊-高斯模糊功能,设置模糊半径为6即可。

B方法:点开PS工具栏中的窗口-属性 – 蒙板,设置羽化为10。

弥散阴影33

 

一个最简单的弥散阴影就做出来啦!!!其他的需要各位去发挥想象创造力了!

需要PSD的小伙伴可以去下载:百度网盘下载地址

 

这样的弥漫阴影效果特别适合用在APP界面设计上的一些小元素上。如按钮、图标、线或者是APP作品展示的方面。有些时候,我们需要加上这种阴影效果,让作品一秒变大神啦!

当然,我们前端的工程师们,也可以使用css3的阴影效果来实现的。不是很难。

使用弥漫阴影效果的APP UI设计作品,增强了层次感和空间感,顿时变得立体很多。

感兴趣的小伙伴,赶快去学起来吧!

 

本文标题:手机UI设计风格当中的新技巧:弥漫阴影效果

本文地址:http://www.25xt.com/appdesign/11070.html

本文关键词: , ,

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。