1. 主页 > 行业资讯 > 设计文章 >

超级火漫影全方位通关指南

之前发过两个关于漫反射阴影的教程,从新手版到高级版,学生应该都学过。今天最后一个教程不仅会复习Photoshop的漫反射阴影的方法,还会添加HTML/CSS的制作方法,附上很多优秀的案例。学了漫影,海关就通关了。让我们跟上潮流吧!

目录

什么是弥散阴影?用Photoshop来设计的方法:使用矢量图形技术使用图层下拉阴影技术使用智能对象技术用Sketch来设计的方法用HTML/CSS来设计的方法HTML/CSS参考案例可供参考的创意UI设计

什么是漫影?

具体英文名还没定,不过这种手法一般叫漫影,比普通的阴影手法能表现出更深刻的感受。虽然是从平面设计衍生出来的技术,但也反映了当下的设计潮流。

Photoshop的设计方法

有了Photoshop,你可以很容易的在很多方面达到漫射阴影的效果。这次简单介绍一下如何使用矢量图、图层投影、智能对象来达到效果。

01.使用矢量图形技术

这次介绍的Photoshop中的方法,大概是最简单的方法,也是最容易编辑的。首先,让我们准备一下需要添加效果的图像。作为演示,我使用以下UI组件作为案例。

选择矩形工具创建一个与图像大小相同的矩形。在这里,我设置了750 x 1334 px。选择[矩形]工具,直接点击画布。你可以看到一个对话框弹出来让你设置大小。只需输入数值。

将绘制的形状层放在用户界面下,然后在两层之间按住选项[MAC]/Alt [Windows]键,然后单击。

复制刚刚制作的形状层,并将其命名为阴影。然后自由改变【快捷键CTRL T】,将宽度和高度调整到原来的80%,然后将底部居中对齐。

然后选择【移动工具】,选择刚刚变小的图层,向下移动20px。您可以选择该层,按住shift键,然后按下向下箭头两次,一次移动10px。

然后在[窗口]菜单中选择[属性],让我们调整[模糊]的值。应用的值取决于您设计的图像的大小。在这种情况下,我们选择66px。

应用模糊后,我们将图层的不透明度设置为80%,我们就完成了。

然后我们选择这三层,右击它们组成一个组【CTRL G】。所以我们可以同时移动多层。

这里都做好了,因为应用了矢量图层,所以值可以随时更改。也可以自由定制属于自己的优秀设计。

02.使用图层的下拉[阴影]技术

像以前一样,让我们创建一个矢量图层,其大小与需要添加效果的图层相同。这样,我们在应用各种效果的时候,就不会影响到原图了。

然后我们复制了形状层,命名为“阴影”,然后自由改变宽度和高度,调整到原来的80%中心对齐,和之前一样。然后我们双击这个图层打开图层样式界面。选择[阴影]效果,并按如下方式设置参数。

然后将图层不透明度改为80%。

这就是成品效果。这种技术,无论是形状层还是图像层,都可以一一对应的应用。

03.使用智能对象技术

到目前为止,我们已经创建了一个矩形,并在不改变原始图片的情况下应用了效果。

首先,在图层面板上,选择矩形图层和图像图层,然后右键单击并选择[转换为智能对象]。这样就可以在不破坏原图像的情况下编辑原图像。

复制你创建的智能对象,然后把它放在下面,并命名层阴影。然后在图层样式中选择【颜色叠加】,选择不透明度为100%的【黑色#000000】。

然后自由改变【快捷键CTRL T】,将宽度和高度调整到原来的80%,然后将底部居中对齐。

然后选择【滤镜】→【模糊】→【高斯模糊】,填入数值。在这种情况下,我们将其设置为65px。

选择这两个同时创建的智能对象层,右键单击并选择转换为链接对象,这将防止您在移动一个层时忘记移动另一个层。

这是完成的渲染。我们可以达到和其他技术一样的深度。

在选项设置中,如果隐藏[颜色覆盖]效果,也可以创建反映图像色调的阴影效果。

看起来有点难以理解,但从阴影中可以看到图像下部的黄色。

以下是这三种效果产生的三张图片并列的效果。无论用哪种技术,都可以很好的表现出漫影。

用素描进行设计的方法

接下来我们介绍一下用sketch这种和Photoshop一样普及的设计工具制作漫反射阴影效果的方法。

有两点需要注意:

一方面,应用阴影效果时要注意按住Option/Alt键。另一方面,你可以给阴影添加一点颜色。

用超文本标记语言设计方法

利用CSS的盒影属性,可以实现有深度的阴影效果。

1 .盒影:[水平移动(px)][垂直移动(px)][模糊半径(px)][扩展][颜色(#)];

水平和垂直移动是为了显示光线的方向,从而确定阴影的位置。比如下面这个案例,他同时使用了多个盒影,让阴影效果更加逼真细腻。

但是,如果您想在框阴影上使用悬停效果,它不会影响页面的加载。

源代码:http://codepen.io/vipcrew/pen/AXoPNA

以下是各个浏览器的支持。我们可以看到,从IE11开始,每个浏览器都开始支持它,所以这项技术在未来会越来越多的被应用。

源代码:http://caniuse.com/#feat=css-boxshadow

HTML/CSS参考案例

向每个用户界面组件添加阴影可以使图像更加完整。

源代码:http://codepen.io/caphil/pen/NxMdRo

苹果电视上专门设计的海报设计效果也可以根据鼠标的反应来移动。

源代码:http://codepen.io/mariusbalaj/pen/MaKRar

应用了渐变效果的漂亮按钮,当鼠标在上面移动时,根据悬停效果使用阴影。

源代码:http://codepen.io/Mohsen-Khakbiz/pen/RaqaOG

这也是一个简单的应用框阴影的效果。

源代码:http://codepen.io/mefynn/pen/XdyyKw

采用的材质设计再现了六种阴影效果,可以记录为速写。

源代码:http://codepen.io/sdthornton/pen/wBZdXq

可供参考的创意界面设计

这是创意UI阴影效果的设计,可以为我们在设计社区网站上的启发提供参考。很多都能给我们留下深刻的印象,所以在以后的设计中使用吧~

然后,大家一起享受设计吧~两周后见~

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/365.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息