网页设计中的层次、色调、创意_平面设计吧吧_直线网

平面设计吧
已关注 | 取消 +关注
关注：35
帖子：1,340

签到

07月19日
尚未签到

看帖图片精品视频

共有回帖数 0 个

网页设计中的层次、色调、创意
取消只看楼主收藏回复

霜晨守候
等级：
大家在浏览网页时经常可以看优秀的海报设计，这些设计往往可以通过其优秀的颜色处理、场景打造、氛围渲染、排版布局、文字处理以及巧妙的创意等方面来抓住浏览者的眼球。那么今天我们就跟大家分享一下一些优秀的海报设计在网页中的应用。大家在浏览网页时经常可以看优秀的海报设计，这些设计往往可以通过其优秀的颜色处理、场景打造、氛围渲染、排版布局、文字处理以及巧妙的创意等方面来抓住浏览者的眼球。那么我们是不是可以吸收这些优秀的海报视觉，来帮助我们设计其他领域的东西呢？设计是相通的，答案自然也是肯定的。那么今天我们就跟大家分享一下一些优秀的海报设计在网页中的应用。我们主要通过层次、色调和创意三个方面来跟大家进行讲解。01. 层次画面的层次感，说白了其实就是画面的内容有主次之分，有空间感和距离感，有虚实之分，光影层次清晰，这样的画面才起来才真实、丰富，而且通过一些特殊的处理手法，可以进一步拉开画面中不同元素的层次，使得主体更加突出。（因本部分的讲解不涉及到色彩方面的知识，为了更便于大家观察，所以对海报进行了去色处理）远近关系

上两图中按箭头所示方向由近及远，画面纵深感强，远近景层次明显，画面感很强。运用到网页设计当中如下：

这张海报其实更接近于咱们生活中的实景拍摄，而且是那种有明显对焦主体，毫无疑问是图中拿着竹竿的美女。那这时，虽然前景的花草离我们更近，但是因为它们偏离我们的对焦点（我们的视线并没有直接去看这些花草），所以，这时候前景的花草我们也是去做模糊处理的，甚至有的时候模糊度比远处的场景还要明显。这个是需要了解的。那我们再看下海报中的虚实关系在网页中的应用。

通过上面的例子可以看出，把握好画面中的虚实层次，结合网页的内容，可以使页面看起来更加接近真实场景，视觉体验上来说更加逼真。氛围关系

图1通过烟雾来拉开女主与远处机器人的层次，烟雾既弱化了远处机器人，同时突出了女主，让两者有一个明显的层级关系；图2中人物本身颜色较暗，背景也是暗色，这时候如果直接把人物置入，人物就会与背景融为一体，这里利用人为添加的光效、碎片等氛围元素，凸显了人物的边缘轮廓，背光的效果使人物从黑暗中分离出来；图3也是同理，只不过它通过光影和烟雾一起来区分众多人物之间的层次关系。那么氛围关系运用到网页设计当中如下：

通过上面的例子可以看出，合理利用一些氛围元素的渲染，例如光、烟雾、云等素材，不仅可以起到烘托页面气氛的作用，而且可以突出主体，同时弱化主体外的其他元素，成功地拉开主体与其他非主体元素之间的层次关系。02. 色调画面的色调，是传达画面所要表达情感的有效途径。不同的色调可以给人带来不同的体验，正是因为有了不同的色彩，才使得我们的设计更加丰富。色调统一

上面几个例子中，为了更进一步的融入大环境中，设计师都对原始素材进行了色调上的二次处理，整个网页的风格在色调上保持统一。冷暖对比

楼主 2016-06-08 13:17 回复

共有回帖数 0 个

发表

登录直线网账号

本吧信息

查看详情

zhangxuzxangu

本吧公告
暂无公告

我常逛的吧

我管理的吧