当前位置:海盈网站工作室 >> 新闻中心 >> 设计前沿

CSS禅意花园 - 图片 - What Lies Beneath(三)

点击数:21362012-11-03 10:47:30 来源: 海盈网络

      口封闭区域是由颜色和材质组成的。

      口物体的体积是由长宽高组成的。

      体积感是这些视觉元素组合的结果,由此营造出了真实感。

      最后,在真实世界中取材,然后将其应用于模拟环境中自然会大大增强最终效果。在What Lies Beneath中,那个奇怪的、长着星形鼻子的鼹鼠就来自于摄影作品——这画龙点睛的一笔毫无疑问地给浏览者带来了绝妙的真实感。

      3.处理层次

      Web设计师的另一个很少考虑的问题就是作品的层次。顾名思义,层次表示环境的分层状态。联想某幢办公大楼能够帮助你理解层次的含义——每一个楼层都在不同的层次上。

      在游戏开发领域中,人们非常重视在游戏环境中创建具有真实感的层次。游戏设计师经常会参考建筑师或环境设计师设计建筑的方法。作为Web设计师,我们也可以从建筑学、环境设计以及游戏设计中学到很多关于创建分层环境的方法。下面就列出了一些。

      口层次之间的线条、空间和大小要有区别。

      口层与层之间仍是一个整体,并以某种方式保持着联系。

      口层与层之间的过渡要自然。

      口作品中总是要包含焦点或重点。

      口正如前面提到过的那样,作品中绝对不能缺少重力感。人们都希望物体能够置于某个平面上。

      What Lies Beneath中有三个层次:天空、草地以及地下部分。

      仔细观察过这些图像之后,就会发现作品良好地运用了层次。每一个层次都能与其上一层和下一层良好地衔接起来,而重点则被放在了地下一层。

      有趣的是,由于地下一层的高度在作品中占有最大的比重,加上其相对于上部和中部更深的颜色,所以作品很自然地带给人们相当的重力感。体积感就是由这些视觉元素组合起来形成的。良好的体积感也将带来绝佳的视觉体验,让浏览者就像是在欣赏真实物体一样。

      4.6.2 模拟环境中的非真实存在元素

      我们都知道,地下并没有页首文字、正文或链接之类的东西。尽管如此,Pick还是想方设法用一些独到的技术将这些非真实存在的元素和整个作品有机地结合了起来。

      首先看一下页首文字。Pick特别处理了字体,以便营造出低调、久远的感觉。将裂痕和泥土效果添加到这段文本上以后,页首文字也更好地融入到了整个作品中。

      Pick在选择颜色时同样非常小心。链接的颜色来自于星形鼻子鼹鼠身上的较明亮部分,为作品添加了一丝明亮的意味,进而更好地将这些链接与作品基调融合起来。

      作品中的链接并没有使用不同的鼠标悬停颜色,而只是在鼠标悬停时简单地显示出下划线。这并不是由于设计师的粗心,而是为了避免引入更多潜在的非真实存在元素。

      若是Pick将链接设置为其他什么颜色,例如天空部分的蓝色,或是草地部分的绿色,那么整个作品的意境将荡然无存。原因很简单——这样做也就意味着把其他层次中独特的元素风格引入到与其毫不相关的层次中。

      正因为Pick在设计时充分地考虑到了这些,整个作品的风格才仍旧能够保持高度统一。

      4.6.3 空间相关的收获

      总体说来,禅意花园的本意就是鼓励大家进行实验性的创作,WhatLics Beneath中描绘的地下环境正是这种创造力的一次绝佳体现。依靠着自己的聪明才智,加上一双善于发现的眼睛,Michael Pick最终完成了这幅如此独特的作品。

本文为《CSS禅意花园》连载系列,版权归原作者及出版社所有,请勿用于商业目的活动,我们谨向原作者及CSS禅意花园网站表示敬意。
      海盈网站工作室采用标准的DIV+CSS布局制作各类型企业、行业网站,同时提供手机网站制作网站维护等全方位专业服务,欢迎咨询。

【责任编辑:(Top) 返回页面顶端