蘇州(zhou)網頁設計-淺談頁面設計中光的特效
為了展現頁面的主題或者是貼近游戲的氛圍,常常會看見游戲的頁面中運用了許多不同類型的光效的渲染,一個簡單的元素有時候加上一點光效就可以化腐朽為神奇。那么光效究竟是如何具體地影響頁面的視覺觀感的呢?
1、 豐富頁面的層次
當人(ren)物和背景的顏色比較接近(jin)時,為(wei)了(le)增強人(ren)物的立體(ti)感和空間感,可以在(zai)人(ren)物上(shang)添加(jia)光效,拉開人(ren)物和背景的距(ju)離,形成視覺差異,這樣需要(yao)強調的人(ren)物就瞬間凸顯了(le)出來,頁面的層次(ci)也(ye)一下子體(ti)現(xian)出來了(le)。
2、 烘(hong)托(tuo)氣氛
光效的(de)(de)(de)顏(yan)色(se)、形狀和出現(xian)的(de)(de)(de)位(wei)置會對設(she)計(ji)表(biao)(biao)達的(de)(de)(de)氣氛產(chan)生(sheng)很直接的(de)(de)(de)影響,就(jiu)(jiu)好像現(xian)實中的(de)(de)(de)光源一(yi)樣,淺色(se)暖色(se)調的(de)(de)(de)光效給人(ren)光明溫暖的(de)(de)(de)感覺(jue)(jue),深色(se)冷色(se)調的(de)(de)(de)就(jiu)(jiu)給人(ren)陰暗(an)冷酷(ku)的(de)(de)(de)感覺(jue)(jue),同(tong)(tong)樣的(de)(de)(de)素(su)材加上不(bu)同(tong)(tong)的(de)(de)(de)光效,展現(xian)的(de)(de)(de)也許就(jiu)(jiu)是(shi)完全不(bu)同(tong)(tong)的(de)(de)(de)立場。具體到游戲頁面設(she)計(ji),不(bu)同(tong)(tong)的(de)(de)(de)勢(shi)力性格不(bu)同(tong)(tong),通常都有(you)各自的(de)(de)(de)代表(biao)(biao)顏(yan)色(se),這(zhe)時(shi)候用對應的(de)(de)(de)光效來表(biao)(biao)現(xian),很容易就(jiu)(jiu)能(neng)烘托出這(zhe)些(xie)勢(shi)力不(bu)同(tong)(tong)的(de)(de)(de)個(ge)性來,是(shi)非(fei)常基本(ben)的(de)(de)(de)運用。
3、 視(shi)覺焦(jiao)點(dian)
有時候光(guang)效在(zai)頁面上以(yi)(yi)光(guang)源(yuan)的(de)形式(shi)出現(xian),這樣可以(yi)(yi)很容(rong)易抓(zhua)住(zhu)用(yong)(yong)戶的(de)眼球,吸引(yin)住(zhu)用(yong)(yong)戶的(de)焦點(dian),頁面上需要重點(dian)強調的(de)信息(xi),就可以(yi)(yi)展現(xian)在(zai)光(guang)源(yuan)附近,這時光(guang)效充當(dang)的(de)就是引(yin)導用(yong)(yong)戶的(de)作用(yong)(yong),非(fei)常(chang)簡(jian)單,但是很有效。
不(bu)過更多的(de)時候,光效不(bu)單單只(zhi)有上述的(de)一種功能(neng)(neng),在(zai)頁(ye)面設計的(de)過程當中(zhong),會將三者(zhe)功能(neng)(neng)結(jie)合(he)到一起。
可(ke)以看(kan)見(jian)下面頁(ye)面中燈(deng)光(guang)和煙火(huo)讓整個舞(wu)臺氣氛火(huo)熱,仿佛可(ke)以感(gan)受到(dao)現(xian)場的表演(yan)的熱情。光(guang)影的對比,讓舞(wu)臺看(kan)起來有著強烈(lie)的空(kong)間感(gan)。聚光(guang)燈(deng)的照(zhao)射引(yin)導用戶的視線(xian),一(yi)眼就(jiu)能看(kan)到(dao)重點突出的視覺焦(jiao)點。
知道了(le)光(guang)效(xiao)作(zuo)用的(de)原(yuan)理,我們自然就明白了(le)什么(me)(me)時候在哪里(li)加什么(me)(me)光(guang)效(xiao),就能達到我們的(de)目的(de),那么(me)(me)如何來做(zuo)光(guang)效(xiao)呢,讓(rang)我們實做(zuo)一次試試看:
添加了火(huo)焰的(de)光(guang)效(xiao),人物(wu)(wu)顯得(de)比較動態鮮(xian)活,整個(ge)畫(hua)面更(geng)有(you)一(yi)種(zhong)對抗(kang)的(de)戰火(huo)紛飛的(de)感(gan)覺(jue),但是(shi)現(xian)在(zai)(zai)整個(ge)畫(hua)面結合度還不夠高(gao),這個(ge)時候我(wo)們(men)往往會(hui)通過(guo)調(diao)(diao)整人物(wu)(wu)的(de)色調(diao)(diao)和對比度等方(fang)法(fa)來使整個(ge)畫(hua)面更(geng)加和諧,但是(shi)不要漏掉一(yi)個(ge)重要的(de)步(bu)驟(zou)就(jiu)是(shi)環境色,可(ke)(ke)以通過(guo)在(zai)(zai)人物(wu)(wu)身(shen)上添加環境色來使人物(wu)(wu)和光(guang)效(xiao)得(de)到更(geng)好的(de)結合,而且(qie)有(you)質(zhi)感(gan)的(de)光(guang)效(xiao)就(jiu)像現(xian)在(zai)(zai)用的(de)火(huo)焰,可(ke)(ke)以將材(cai)質(zhi)疊加到人物(wu)(wu)的(de)明暗面讓畫(hua)面更(geng)加真實生動(如圖中綠點標示部(bu)位)。最后(hou),我(wo)們(men)可(ke)(ke)以添加一(yi)些飄(piao)動的(de)零散的(de)火(huo)光(guang),讓火(huo)焰的(de)更(geng)有(you)動感(gan)。