5种在设计中应用光线和阴影的简单技法
文章来源:菏泽网站建设 文章作者:Rocs blog 日期:2009年08月31日
凡是你目光所及——光线和阴影无处不在。你看到的任何东西都反射回光线,也都或多或少产生阴影。光线和阴影帮助我们去感知我们的所见,并且帮助我们理解材质纹理、尺寸大小以及位置空间。
2、渐变
在真实世界种,几乎没有什么是单一色调的。光影无处不在。巧妙的渐变运用是让设计具有深度并让设计在屏幕之上变得真实生动的绝好方法。
渐变的关键点是不要太过生硬。如果你使用Photoshop,可在图层样式中添加渐变。你可以随意的设置渐变的起始点;如果你改变了元素的大小,那么渐变也将重新调整。
案例
nclud’s website 是渐变运用的经典教案,它告诉我们即使细微的渐变也可以在分割和组织内容版面上取得非常好效果的。
CSS Ninjas 给人的第一眼印象是单调的颜色,但细看之下每种颜色都有着细微的渐变,使其变得具有质感。
3、高光
高光可以平衡阴影,并且需要在靠近光源的物体边缘上使用。巧妙的设计之下,高光往往被忽略掉,因为你甚至没有注意到它。虽然不是每一处设计都适用,但是一个细小的高光往往可以让界面在光亮度上显得不同。高光越“明晰”,界面呈现上就越显光亮。
要细致的体会高光,我们需要放大拉近观察它。添加高光的一个妙计就是在200%或者更大的放大比例下工作,因为原始尺寸之下你很难清楚地观察你所做的一切。
案例
Icon Dock 以及 Newism 两者都运用一个半透明白色线条以给页面元素的顶端边缘添加一个高光。几乎难以察觉的效果却让设计十分出彩。
你也许已经去过Apple的网站。但是,你也许没有注意到它导航栏中元素底部的漂亮的高光效果,这让导航文字变得凹凸有致。
相关文章
- ·09/291997年至2009年 中国电子商务十二年大事记
- ·09/29js中的文档模式-document.compatMode
- ·09/29轻松搞定IE的CSS制作网页技巧3则
- ·09/29Adobe Flash:腹背受敌与何去何从
- ·09/27网络时代下商品评价的重要性
- ·09/27轻松搞定IE的CSS制作网页技巧3则
- ·09/27卢松松:如何修改源码的网页模板?
- ·09/27名师讲堂之Kent Beck——响应式设计
- ·09/26分享英文音乐网站的经营经验
- ·09/2617个Joomla教程和模板网站