手机UI设计新技巧:弥漫阴影效果(ui设计手机模板)

yumo6666小时前技术文章3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关文章

前端切图css高级阴影用法drop-shadow

切图网专注于html5前端切图开发,下面给大家介绍一下前端切图css高级阴影用法drop-shadow,主要是在最近项目切图中遇到的,通常我们了解的css的阴影写法就是shadow,但是它不能解决非规...

css 设置盒子阴影,阴影和背景图保持一致

预览图首先查看预览图:原理采用了 background 属性 background: inherit;inherit 关键字使得元素获取其父元素的计算值。它可以应用于任何 CSS 属性,包括 CSS...

微软上线Babylon.js 8.0:打造更真实阴影与照明效果

IT之家 3 月 28 日消息,继上周发布 DirectX Ray Tracing(DXR)1.2 后,微软最新推出开源 3D 引擎 Babylon.js 8.0。该版本历经一年开发,新增基于图像的照...

每天一个CSS小技巧 - 不规则投影(ps不规则物体的投影怎么画)

当我们想给一个矩形或者其他能用border-radius生成的形状加投影时,box-shadow的表现都很棒的。但是,当元素添加可一些伪元素或半透明的装饰之后,border-radius会无视这些。这...

Css3中text-shadow属性使用方法及各参数所代表的含义

在CSS3中我们可以使用text-shadow属性给页面上的文字添加阴影效果,text-shadow在CSS2.1的时候曾被删除过的一个属性,但是又在css3.0中恢复了使用。①text-shadow...