【雕虫小技】如何体现层次感

每个月绩效考核时，都会把他们当月的设计作品都浏览一遍，以前可能就在绩效表上进行简单的文字点评，点到即止吧，最近两个月慢慢的尝试对他们的设计作品给予针对性的建议（时间比较充足的话）。这里拿一个比较简单的小例子来讲解下《如何体现层次感》。

这是一个手机活动的头部，第一眼看时觉得还不错啊，近实远虚，色彩明亮。但看久总觉得哪里不对。人物和标题似乎黏在一块，配合虚化的背景，整体显得有点飘。可以尝试着把人物和前面的标题拉开来，然后给标题增加点光效。修改步骤如下：

1、近实远虚，区分主次

先把人物图层转成智能对象，然后添加高斯模糊，然后把主体部分用画笔涂抹让它清晰些。可以处理成一种边缘带模糊的感觉。这时人物和背景会稍微融合点，跟前面的标题也拉开了一点空间感。

2、增加光影，拉开层次

在人物图层上面再加一层空白图层，混合模式叠加或是柔光，然后用白色画笔在向光的一面的边缘擦拭，可以柔化边缘，造成一种透光的感觉，这样人物会更立体一些。

同时在也给标题新建一个图层蒙版，用同样的操作为边缘加上一些高光，这样会让标题更加立体。

再到花瓣上找一些光效，放在标题上面，这样头部的层次感就会出来。

看情况还可以给人物加上一层渐变蒙版，为的是让人物呈现在背景上更加自然。

最终效果如下：

大概就是这样，总结下小技巧：

（1）掌握基本的体现层次的知识，比如近实远虚、近大远小等，对素材做必要的模糊处理；

（2）通过添加光影，可以拉开物体的距离，产生层次。在画面中增加前景也可以拉开层次感。比如添加飘动的花瓣、叶子、飞石等。

有兴趣的同学，可以下载附件自己练习一下，相信你们会做得更好。

---

小课堂：什么是层次感？

画面的层次感，说白了其实就是画面的内容有对比、有节奏、主次清晰。

对于一些场景感比较强的页面，强调空间感和距离感，有虚实之分，光影层次清晰；

而一些扁平化的页面，则强调色彩对比、元素大小要有所区别，让页面产生一种浏览的节奏。

这里推荐阅读两篇关于层次感的文章

1、梁东波老师的《巧妙做设计之突出层次感》——了解基础概念

http://www.zcool.com.cn/article/ZMTQyOTY4.html

2、畅游出品的《海报视觉之网页应用》——实践经验，加深理解

   http://www.zcool.com.cn/article/ZNDA5NTI0.html