网页设计技巧分享:网页页面光影特效的运用

文章描述:浅谈页面设计中光影的特效。

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

1、 丰富页面的层次

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

2、 烘托气氛

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

3、 视觉焦点

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

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

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

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

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

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

时间: 2024-09-16 10:04:25

网页设计技巧分享:网页页面光影特效的运用的相关文章

网页设计技巧:创建网页背景材质的方法

文章描述:网页设计技巧:创建网页背景材质的方法. 在网页设计中创建背景材质通常是根据设计方向展开设计的第一步,也是确定设计基调的重要环节.虽然大多数情况下,网页背景材质是非常细微和低调的,但是由于整个背景的范围较大,所以会给人强烈的心理感受.所以这篇文章中,我会就网页背景材质创建过程中常用到的方法做一总结,希望对于大家在设计中的开头步骤能够给与帮助的参考. 一.使用现成的图案来创建网页背景材质. 1.下载现成的图案样式,或者自己动手创建图案,关于如何自己创建图案,之前我写的一篇文章<在Photo

网页设计技巧之网页首屏高度如何确定?

一个经验丰富的网页设计师在做网页原型设计或者视觉效果图时,首先必须要做的是标注清楚网站首屏的高度线,以便直观的看到网站首屏的高度,首屏可以显示的元素.那么,我们该如何来标注一个网页的首屏线那?笔者结合网上的一些谈论特整理如下: 首屏的高度直接跟客户端的各种客观的条件有关系,因为我们要确定首屏的高度(标注首屏线)就需要结合一些相对准确的内部统计数据来分析了,根据各个客户端的操作系统.浏览器分布和屏幕分辨率等情况,并结合常见浏览器状态栏.任务栏等高度进行分析如下: 第一步:分析常见分辨率及浏览器下高

网页设计技巧之网页首屏高度如何确定

中介交易 SEO诊断 淘宝客 云主机 技术大厅 一个经验丰富的网页设计师在做网页原型设计或者视觉效果图时,首先必须要做的是标注清楚网站首屏的高度线,以便直观的看到网站首屏的高度,首屏可以显示的元素.那么,我们该如何来标注一个网页的首屏线那?郑州网海科技公司设计部首席设计师小K结合网上的一些谈论特整理如下: 首屏的高度直接跟客户端的各种客观的条件有关系,因为我们要确定首屏的高度(标注首屏线)就需要结合一些相对准确的内部统计数据来分析了,根据各个客户端的操作系统.浏览器分布和屏幕分辨率等情况,并结合

网页设计技巧:分析网页图片在网页中展现形式

文章描述:网页设计中图片展现形式的思考. 图片,是构成网页的基本元素之一.图片不仅能够增加网页的吸引力,传达给用户更加丰富的信息,同时也大大地提升了用户在浏览网页的体验.图片的展示形式丰富多样,不同形式的图片展现也让浏览网页的乐趣变得更加多样化. 跟随我们分别来体验一下目前存在的各种图片展现形式,让我们的眼睛去旅行吧. 一.多图展现 图片限制最大高度或宽度并进行矩阵平铺展现,这是最常见的多张图片展现形式.不同的边距与距离可产生不同的风格,用户一扫而过的快速浏览可以在短时间获得更多的信息.同时,鼠

网页设计技巧:学习网页设计的网格系统

文章描述:网格系统是一种好的习惯,也是一种格式化的设计工具.有了它,你能更专注于内容呈递,更专注于强调重点. 网格确保了设计结构的组织分明.结构明晰.我们可以通过网格系统更好的打造设计的信息层级,让设计阅读起来更具有韵律感.就跟编码一样,编码需要有机的组织结构,而网页设计的网格系统也是同样的作用. The Grid System 设计师用起来舒服,开发者用起来顺手,当然,网格系统对于用户也是大有裨益的.我一直在强调设计要注重用户体验--毕竟,客户为你的内容消费,因此你要向他们提供有价值的体验.使

网页设计技巧剖析:专题页面设计传情达意

文章描述:推荐:如何设计"传情达意"的专题头图. xiaoning:相信大家在平时的工作中,经常会碰到专题的设计吧!而且大部分是时间紧任务重.专题不同于网站的常规页面,常规页面更侧重于内容的阅读及人机的交互,因此可读性.可用性是第一位的,装饰性次之. 而专题正好相反,它更侧重于通过气氛的渲染来"传情达意".首屏的头图在气氛的渲染中尤为重要. 我们知道了头图在专题设计中的重要性,那构成头图的主要元素又有哪些呢?它们有 文字.背景.色彩.布局这四种主要元素.下面就通过一

网页设计案例分享:网页专题设计技巧

文章描述:先以CP设计的的这个奥运专题为例分析专题设计中常遇到的一些问题. 先以CP设计的的这个奥运专题为例分析专题设计中常遇到的一些问题. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]  下一页

网页设计经验分享:网页设计师要团队合作

文章简介:本文的重点不在于讨论设计,而是放在设计师本身,探讨独自工作对事业发展与身心的危害.人是群体性动物,理应在群体中发挥最大的效力,而非孤独的工作. 无论是自由职业者.小代理行的创始人或是网站站长,我们中的太多人是独自工作的.数字革命的消极面就是制造隔离.网络使得我们可以独自完成那些之前需要团队才能完成的工作.它使得我们能摆脱地理上的限制,使我们能在家上班.但当我们从中受益的时候,这些也使得我们变得孤立起来. 孤立的危害 随着时间的流逝,与世隔绝地工作(即使你作为一个团队的一部分也一样)最终

网页设计技巧:特殊人群的设计关怀

文章描述:网页设计技巧:特殊人群的设计关怀.   2010年12月,Thomas应邀参加中国交互设计体验日大会,展开了一次主题为<特殊人群的设计关怀>的演讲.演讲主要介绍了在做产品设计时,公司对于特殊群体的一些考虑.以下是对这次演讲的现场记录: "盲人对QQ的依赖度非常高." 在正式演讲之前,想请大家看一段视频.大家可以看出这是个怎样的用户吗?是的,这是一位盲人.可能很多人会吃惊,盲人怎么可以使用QQ?其实盲人不光使用QQ,他们正在利用互联网的很多服务充实自己的生活.我们关