网页设计时光的运用与效果

   为了展现网页面的主题或者是贴近游戏的氛围,常常会看见游戏的网页面中运用了许多不同类型的光效的渲染,一个简单的元素有时候加上一点光效运用就可以化腐朽为神奇效果。那么光效究竟是如何具体地影响页面的视觉观感的呢?

  1、 丰富页面的层次

  当人物和背景的颜色比较接近时,为了增强人物的立体感和空间感,可以在人物上添加光效,拉开人物和背景的距离,形成视觉差异,这样需要强调的人物就瞬间凸显了出来,页面的层次也一下子体现出来了。


  2、 烘托气氛

  光效的颜色、形状和出现的位置会对设计表达的气氛产生很直接的影响,就好像现实中的光源一样,浅色暖色调的光效给人光明温暖的感觉,深色冷色调的就给人阴暗冷酷的感觉,同样的素材加上不同的光效,展现的也许就是完全不同的立场。具体到游戏页面设计,不同的势力性格不同,通常都有各自的代表颜色,这时候用对应的光效来表现,很容易就能烘托出这些势力不同的个性来,是非常基本的运用。



  3、 视觉焦点

  有时候光效在页面上以光源的形式出现,这样可以很容易抓住用户的眼球,吸引住用户的焦点,页面上需要重点强调的信息,就可以展现在光源附近,这时光效充当的就是引导用户的作用,非常简单,但是很有效。


  不过更多的时候,光效不单单只有上述的一种功能,在页面设计的过程当中,会将三者功能结合到一起。

  可以看见下面页面中灯光和烟火让整个舞台气氛火热,仿佛可以感受到现场的表演的热情。光影的对比,让舞台看起来有着强烈的空间感。聚光灯的照射引导用户的视线,一眼就能看到重点突出的视觉焦点。


  知道了光效作用的原理,我们自然就明白了什么时候在哪里加什么光效,就能达到我们的目的,那么如何来做光效呢,让我们实做一次试试看:


  添加了火焰的光效,人物显得比较动态鲜活,整个画面更有一种对抗的战火纷飞的感觉,但是现在整个画面结合度还不够高,这个时候我们往往会通过调整人物的色调和对比度等方法来使整个画面更加和谐,但是不要漏掉一个重要的步骤就是环境色,可以通过在人物身上添加环境色来使人物和光效得到更好的结合,而且有质感的光效就像现在用的火焰,可以将材质叠加到人物的明暗面让画面更加真实生动(如图中绿点标示部位)。最后,我们可以添加一些飘动的零散的火光,让火焰的更有动感。


  光的特效使用和技巧千变万化,使用恰当可起到画龙点睛的效果,以上只是我在平时常用的一些技巧,在此抛砖引玉,欢迎大家一起讨论。

时间: 2024-07-30 16:10:06

网页设计时光的运用与效果的相关文章

PS制作网页设计中立体卷页效果教程

最终效果: 1) 利用圆角矩形工具建立一条路径;使用转换点工具移动左上角路径节点,使其产生卷页的形状; 2) 用任意一种色彩填充工作路径;再复制下半部分;对其添加图层样式,如图所示. 3) 用任意一种色彩绘制一个圆角矩形;将其图层移至红色矩形之后;添加图层样式,如图所示. 4) 再新建一层,绘制圆色矩形,颜色为黑色,高度与红色矩形相同;按CTRL键点击黑色矩形所在图层,调出黑色矩形选区,将选区向左移动一定的距离,按Delete键删除; 将黑色矩形置到白色矩形下面,改变其图层透明度40%;如图所示

网页设计色彩及网站配色

一个网站,给用户留下第一印象的既不是网站丰富的内容,也不是网站合理的版面布局,而是网站的色彩.色彩对人的视觉效果非常明显,一个网站设计成功与否,在某种程度上取决于设计者对色彩的运用和搭配.因为网页设计属于一种平面效果设计,在排除立体图形.动画效果之外,在平面图上,色彩的冲击力是最强的,它很容易给用户留下深刻的印象.因此,在设计网页时,我们必须要高度重视色彩的搭配. 一.色彩的基础知识 色彩五颜六色.千变万化,我们平时所看到的白色光,经过分析在色带上可以看到,它事实上包括红.橙.黄.绿.青.蓝.紫

20个以细腻动画取胜的优秀网页设计

  动画今年是热门,像一场跳跃腾挪的表演,久看也不免厌倦.在这波浪潮里,有一小股设计师别出心裁,给网站加了细腻而不恼人的动画,一方面给网站添了生气,不致沉闷,一方面顺应潮流,锦上添花,实在是聪明得紧,来学习一下. 目前很多网页设计已经运用新的HTML5视频以及CSS3+JS来实现很棒的动画效果,不过我们在使用动画时也不能太弦,可以适当的并且有意义的去使用,这才不会分散网站访客的注意力. 网页设计中如何合理使用动画效果呢? 我们可以参考今天整理的20个融合细微动画的优秀网页设计作品,这些网页使用了

手绘草图进行网页设计,你试过吗?

 说到网页设计,大家都会想到在网络上实现,尽管当今是个互联网时代,但不一定要完全依赖于互联网.原始的设计工作大多都是采用手绘的形式获得设计草图,虽然通过电子设备完成网页设计能够更加直观地实现页面动效,但可以不排除为了让页面更加精美会花费更多的时间和精力,仅仅为了一个设计草图,网页大概的模样而已.       奇亿网络作为专业的网页设计公司,常常也是利用电子设备来完成网页的设计,在制作的过程中的确要耗费更多的资源,既然是网页的设计草图,为何不返璞归真,通过手绘的方式让页面更加快速地呈现在客户眼前呢

网页设计:一种细腻的导航效果的制作方法

设计|网页|网页设计 一般的导航效果大家都很熟悉了,例如用CSS给导航文本设置上.下划线.背景颜色或位移等.前面的帖子中有网友提到http://www.tonta.com.cn/这个网站,偶发现其首页中的导航效果不错,虽然flash做的没有很眩的效果,但是比较细腻,看上去很舒服. 闲来无事,尝试在dw中实现同样的导航效果. 首先分析效果的组成,鼠标经过时背景发生变化,小图象转动.Ok!考虑使用dw中的swap image(翻转图)+背景图象变化(CSS定义)应该可以实现效果. 准备4张gif图象

透明效果的网页设计:巧妙运用透明效果

文章描述:学会运用透明效果绝对是你增长设计经验的捷径.像运用其他效果一样,充分运用这项技术,并在不同的情境下检验,使其达到预期的效果.想要掌握它,最大的挑战就是在图文并茂的情况下确保文本的可读性,并且透明的部分不会遮挡到下面的图层.多去尝试一些不同程度和形式的 运用好透明效果是提高网页设计水准的重要方法之一.如同使用其他方法一样,设计师们有很多种手段将透明效果运用到网页中,今天这篇文章就来好好和您分享一下关于"透明"的实用小技巧哟:) 在网页设计中使用透明效果是件既美观又冒险的事儿.透

网页设计技巧:视差滚动效果和图形化在网页中的呈现

文章描述:ONE 视差滚动效果 Parallax Scrolling. ONE 视差滚动效果 Parallax Scrolling 大家小时候是否玩过红白机或小霸王上面的游戏? 这些游戏基本上都是通过前景与背景在场景移动时产生不同的视差,从而达到简单的立体效果 所以说视差滚动不是啥新鲜事儿,我们小时候就玩过了-- 目前这种视差滚动效果被越来越多的国外网站所应用, 成为网页设计的热点趋势 给它以重新定义 不过这类效果的使用也需要看具体环境和最终页面出来的整体性能,防止页面过于拖沓. 其次,设计上要

网页设计视觉体验:WEBJX收集国外滚动效果网页设计案例

文章描述:网页设计中30个惊人的滚动效果. 近些年来,用户对视觉体验的要求不断提高,而设计师们也开始在网页设计中加入各种特效元素以满足用户的需求.滚动效果被越来越多的国外网站所应用,成为网页设计的热点趋势.在本文中,将为你展示网页设计中30个惊人的滚动效果,厌倦了千篇一律,呆板网页设计的你也不妨一试. Peter Pearson Campaign Monitor Buero-Buero Lewers Siebennull Kalendiar [1] [2] [3] [4] [5]  下一页

网页设计中最有灵感的幻灯效果设计

中文原文:66个网页设计中完美的幻灯展示实例译自:66 Examples of Perfect SlideShow Presentation in Web Design请尊重版权,转载请注明出处,多谢! 我最近注意到的一个非常有趣的趋势是在幻灯演示中展现关键信息.现代设计师喜欢尝试并观察用户如何与作品进行交互.尽管幻灯并不是一个普遍的趋势但是依然作为新的设计风格而不断涌现,而且越来越多的设计师注意到它并在他们的作品中使用,这种新的趋势开始崭露头角. 在本文中,你将发现各种高度创意的.漂亮的.独特