- 浏览: 192111 次
- 性别:
- 来自: 北京
最新评论
-
hncdcsm1:
非常给力,找了很久了,谢谢分享
99款高质量免费(X)HTML/CSS模板(转自blog.bingo929.com不错) -
yuying:
谢谢诶!
非常不错的CSS表单显示效果
凡是你目光所及——光线和阴影无处不在。你看到的任何东西都反射回光线,也都或多或少产生阴影。光线和阴影帮助我们去感知我们的所见,并且帮助我们理解材质纹理、尺寸大小以及位置空间 。
所以,当我们试图让Web页面设计更加自然生动、栩栩如生的时候,对于光线和阴影的透彻理解就显得相当重要了。以下5种利用光线和阴影的技法 让你的页面得以重塑,使它们在屏幕上变得引人注目。
光线和阴影的快速解析
在下面这个简单的图例中,我们可以看到,光源从画面左上方投射过来,高光在光线最强的那一面上,而阴影则落在离光源最远的那一面。在这张图片中,通过光和影的表现,我们得以了解物体的外观和纹理质感。
但是你有疑问了,这些和Web设计有什么关系?
如果你正尝试投身入丰富、真实的界面和网站设计,那么光线和阴影无疑是你的良师益友。同样的,许多传统艺术家运用此法让笔下所画之物跃然纸上,你也可以利用光影让你的设计空间感十足并博得人们的视觉兴趣点。让我们开始吧。
1、使用光源
也许运用光线的最重要的一点就是要了解光是从哪里来的。光源的方向几乎决定了高光和阴影投射的位置(虽然在Web设计中你可以适当的调整一下规则)。如果你使用的是Photoshop,使用“全局光”可将所有的光照效果遵循同一个光源方向。
在设计中(哪怕只是线性或径向渐变)控制光源有助于为你的设计增添一种环境效果。当然也可以为设计添加一个视觉焦点 。
案例
Campaign Monitor 运用一个放射性的光线以表现一种太阳在页面后升起的效果。
Icebrrg 运用光线让网站有种处于水面之下的感觉。
Mike Precious 使用了多处光源以增加视觉兴趣点,并且风格上合(右上角的)工作灯联系起来。
Deaxon 在其logo背后运用一个细微的光源,起到了突出logo视觉效果的作用。
2、渐变
在真实世界种,几乎没有什么是单一色调的。光影无处不在。巧妙的渐变运用是让设计具有深度并让设计在屏幕之上变得真实生动的绝好方法。
渐变的关键点是不要太过生硬 。如果你使用Photoshop,可在图层样式中添加渐变。你可以随意的设置渐变的起始点;如果你改变了元素的大小,那么渐变也将重新调整。
案例
nclud’s website 是渐变运用的经典教案,它告诉我们即使细微的渐变也可以在分割和组织内容版面上取得非常好效果的。
CSS Ninjas 给人的第一眼印象是单调的颜色,但细看之下每种颜色都有着细微的渐变,使其变得具有质感。
3、高光
高光可以平衡阴影,并且需要在靠近光源的物体边缘上 使用。巧妙的设计之下,高光往往被忽略掉,因为你甚至没有注意到它。虽然不是每一处设计都适用,但是一个细小的高光往往可以让界面在光亮度上显得不同。高光越“明晰”,界面呈现上就越显光亮。
要细致的体会高光,我们需要放大拉近观察它。添加高光的一个妙计就是在200%或者更大的放大比例下工作,因为原始尺寸之下你很难清楚地观察你所做的一切。
案例
Icon Dock 以及 Newism 两者都运用一个半透明白色线条以给页面元素的顶端边缘添加一个高光。几乎难以察觉的效果却让设计十分出彩。
你也许已经去过Apple 的网站。但是,你也许没有注意到它导航栏中元素底部的漂亮的高光效果,这让导航文字变得凹凸有致。
4、阴影基础
就像渐变一样,阴影也是Web设计师手中“常用武器”之一。如果运用恰当,阴影可以很好的增加立体感和质感 。关键是不要用过火了。
阴影的特征取决与光线的方向和强弱,以及物体和阴影投射面之间的距离。光线越强,阴影随之越深和明显;光线越弱,阴影随之越柔和。
案例
由于应用起来十分简单,当阴影效果在网上崭露头角时,无数的网站便开始选择使用这种设计。如果经过巧妙运用的话,哪怕是很细微的一处设计也能让空间感油然而生。
LinkedIn 在它侧边栏的底部添加了一个非常细微的阴影,从而产生立体感。
Google —— 也许是互联网上最忙碌的页面 —— 依然在它的搜索页上加入细微的阴影效果。
5、阴影进阶
你可以用很多方式超越基础的阴影效果,从而赋予一个物体以三维空间感。拉长投影是一种在页面上改变物体空间位置关系的很好的途径。
在下面这个例子中,同样一听可乐罐依靠阴影呈现出完全不同的空间位置感觉 。
案例
Emotions by Mike 很聪明的用阴影(以及光线)将一个原本是平面的背景变成地面。
Superkix 运用阴影让运动鞋像是“浮”在网站之上。当你改变页面大小的时候,阴影也跟着改变,好像光线在移动一样。
Sofa 在光线和阴影的优秀运用下,白色背景上产生了地面的空间感觉。
发表评论
-
如何解决ps导出jpg或png文件过大的问题
2019-07-08 09:48 2577最近做图,忽觉存储文件过程中MAC奇慢无比,竟然发现存储出来 ... -
在线loading图标生成网站
2014-07-15 11:39 1197分享几个优秀的在线loading图标生成网站,方便实现。htt ... -
备忘录
2014-04-17 16:52 704text-shadow:0 1px 1px rgba(25 ... -
好设计的20条金律
2014-01-27 16:46 544可以打破规则,但不 ... -
转:5个设计师应该去的优质设计分享平台 [复制链接]
2012-08-28 16:16 786http://dribbble.com/ http://dr ... -
转一个关于英文自动断行问题的贴子
2011-04-08 20:18 2182转自:http://maymei.ycool.com/post ... -
22个实用的在线配色网站
2010-11-22 09:21 1476如果感觉对色彩的把握还不是很到位,如果你的设计的时候色彩的感觉 ... -
ie6png透明
2010-11-08 22:19 822var arVersion = navigator.appVe ... -
div层遮盖flash(兼容浏览器)
2010-10-26 22:34 1001div层遮盖flash(兼容浏览器) 转自:htt ... -
(转)75个最佳Web设计资源,强烈推荐!
2010-10-03 21:14 863本文地址:http://www.woiweb.net/top- ... -
CSS实现自动等比例缩略图的方法
2010-10-02 15:30 1719完美解决自动缩略图的代码,以实现对原图的等比例收缩。 代码 ... -
针对Google Chrome谷歌浏览器的CSS hack
2010-09-14 13:26 3078所幸Google Chrome用的是与Safari一样的 ... -
解决不同浏览器窗口大小是否显示某DIV问题
2010-09-12 22:57 1014解决不同浏览器窗口大小是否显示某DIV问题: <SCR ... -
图片在DIV中居中
2010-05-07 17:20 1880图片在DIV中永远居中 <div id=&quo ... -
设定网页最小最大宽度和高度(兼容IE6)
2010-03-30 21:38 3025/* 最小寬度 */ .min_width{min-widt ... -
您需要了解的DIVCSS网页布局的8条面试题目
2010-01-26 10:03 846CSSer与其他IT职位一样,在找工作的时候,都会面临着面试官 ... -
转来的总结CSS规范
2010-01-25 15:33 940最近领导让整理个CSS规范做个内部培训,搜了搜资料,觉得这篇文 ... -
如何用css实现圆角_CSS实现圆角解决方案(转)
2010-01-14 18:22 2557导言: 本文探讨的是圆角框的终极解决 ... -
网页设计的3D元素运用25例
2010-01-12 22:23 717Yoast ... -
第一次当站长
2009-04-14 09:07 919在玩开心网成瘾的过程里,我萌发了自己也倒腾一个SNS社区的想法 ...
相关推荐
设计降成本应用工具:创新技法.ppt
设计降成本应用工具创新技法.pptx
30日均线与MACD综合应用技法
3ds max 渲染技术课堂finalRender应用技法精粹
用于标识身份的小型视觉设计,多为各种组织和商业机构所使用
(精品)室内设计手绘表现技法教案.pdf
数字短片创作为了扩展大家在影片制作上的认识,将视野投放到更广的范围上,探讨短片创作的方方面面,从剧本创作,视觉语言的表达,到数字技术的运用,我们试图给大家一个全面的图景。在此基础上,同学们再去构思整个...
园林设计中的CAD技法.pdf
PS-AI教程-H5设计思维与技法——hao123手绘与实景打造H5专题.docx
本书具有很高的技术含量和参考价值,特别适合以真实视觉效果为首位的影视动和特效制作从业人员,是建筑设计、工业产品、广告包装等行业的渲染应用技术指南,也是CG渲染爱好者自学用书,适合初学者和有一定水平的中、...
浅析三维动画技法在AR实用型APP中的应用——以《忆光AR相册》为例.pdf
创新思维与技法的开发和应用技术类-5页.pdf
《产品设计表现技法》教学大纲 .pdf
海报设计中的经常使用表现技法.pdf
【三维设计】2013届高考数学一轮复习 题型技法点拨 快得分系列(九)构造法在空间向量中的应用 新人教版
Photoshop.CS5人像照片专业修饰技法
Photoshop.CS5卡通漫画人物绘制技法
资源名称:Photoshop专业抠图技法-PDF 视频 素材教程内容:选择是图像处理的首要工作,而抠图则是选择的一种具体应用形式,也是Photoshop中最为重要的技法之一。《Photoshop专业抠图技法》深入剖析了选择的概念和...
水晶石技法CSS+DIV商业网站设计【随书光盘】