MOBA英文全稱為Multiplayer online Battle Arena Games,意為多人聯(lián)機(jī)在線競(jìng)技游戲。
目前市場(chǎng)上比較有代表性的有:
Dota、Dota2、英雄聯(lián)盟、超神英雄、風(fēng)暴英雄、神之浩劫、眾神爭(zhēng)霸等...
Moba作為一個(gè)新的游戲品類,看看他們的官網(wǎng),做一些對(duì)比分析,總結(jié)出一些規(guī)律,希望以后對(duì)此類游戲的視覺設(shè)計(jì)能提供一些依據(jù)和參考。
一、產(chǎn)品分析與定位
二、打造場(chǎng)景氛圍
市場(chǎng)上分享的形式有很多,打造方法也是各式各樣,但是對(duì)MOBA類游戲的場(chǎng)景氛圍打造至今還沒有這種很詳細(xì)的教程,那么我們今天以創(chuàng)世聯(lián)盟為案例,教大家如何快速打造場(chǎng)景。
先看下創(chuàng)世聯(lián)盟官網(wǎng)最終效果!點(diǎn)擊可以看大圖?。。?/p>
1、素材分析
素材可以分為(1)、史詩級(jí)高質(zhì)量素材(2)、普通的粗糙素材。
(1)別人家給力史詩級(jí)高質(zhì)量素材??!(??д?)b
如果擁有史詩級(jí)別高質(zhì)量素材,簡(jiǎn)單粗暴直接的說就是人長(zhǎng)得美穿什么都好看!你只要稍作修飾,配上好的標(biāo)題和漂亮的版式設(shè)計(jì),整個(gè)頁面氛圍就會(huì)好到震撼。如下圖:
(2)、自家的普通缺胳膊斷腿素材。。o(╯□╰)o
我們往往接到的都是二三線產(chǎn)品,遇到的素材并不是想象中那樣炫酷,而且有時(shí)需求方還會(huì)指定用一些粗超的人設(shè)素材。。當(dāng)時(shí)我就不樂意了!??!然并沒卵用!工作還要繼續(xù)!更何況我們又有一顆史詩情結(jié)裝逼的心!那我們?cè)撛趺醋觯?br />
2、找視覺參考
根據(jù)想象中游戲的大亂斗場(chǎng)景,五殺畫面,找一些炫酷,震撼的畫面進(jìn)行視覺參考。
3、找素材彌補(bǔ)
對(duì)于素材是多看,多收集,規(guī)范整理,方便日后工作能快速運(yùn)用。最近也在準(zhǔn)備一篇【設(shè)計(jì)師超級(jí)整理術(shù)】教程,大家可以持續(xù)關(guān)注。
推薦:花瓣網(wǎng)、國(guó)外CG網(wǎng)站找素材。
根據(jù)視覺參考的大亂斗是一個(gè)由中心向四周散發(fā)的畫面,所以場(chǎng)景選擇的也都是對(duì)稱發(fā)散圖形。
4、形式感
為了保證畫面平衡,四周人設(shè)動(dòng)作造型基本保持對(duì)稱是一個(gè)比較穩(wěn)妥的方法,所以選擇了這3個(gè)人設(shè)出于他們的動(dòng)作考慮。左側(cè)用了女槍和浣熊2個(gè)角色是因?yàn)樗齻?strong>比較瘦小,為了和右側(cè)男騎士壯漢保持一個(gè)畫面平衡。
5、定光源(光源分為2種:一、暖光源 二、冷光源)
在MOBA類場(chǎng)景氛圍營(yíng)造上,光線是營(yíng)造氣氛的利器。
這里主要是對(duì)場(chǎng)景定光源(中間提亮四周壓暗),中間用暖黃色的主光源提亮,旁邊用藍(lán)色冷光作對(duì)比,之所以這樣處理是為了使中間的主題畫面更突出。
(1)、首先,對(duì)場(chǎng)景復(fù)制一層,在新的圖層對(duì)原畫進(jìn)行高斯模糊處理。圖層選濾色屬性,在模糊的這個(gè)圖層增加濾鏡蒙版進(jìn)行擦除,把不需要模糊的地方用畫筆擦掉,這個(gè)方法可以讓場(chǎng)景增加景深效果。
(2)、其次,利用“色階”(快捷鍵Ctrl+L),把場(chǎng)景暗部加深,提高亮部,加強(qiáng)對(duì)比。
現(xiàn)在場(chǎng)景的氛圍已經(jīng)比較到位了,如下圖。
6、修模型(明暗關(guān)系處理)
(1)、利用"色階"調(diào)整(快捷鍵Ctrl+L),讓人物明暗對(duì)比爭(zhēng)強(qiáng),質(zhì)感爭(zhēng)強(qiáng)。
(2)、利用"加深減淡"提亮人物的受光面,壓暗人物的背光面。加強(qiáng)光源照射效果,使人物更有立體感,畫面更有空間。
(3)、根據(jù)光源,給人物添加形狀選區(qū),填充黑色。
(4)調(diào)整圖層透明度,讓人物的明暗程度和背景在同一個(gè)環(huán)境層次里面。添加蒙版圖層,根據(jù)光源方向,擦出亮部。
其他英雄也是用同樣的方法處理,得到最終畫面。
7、畫面潤(rùn)色(質(zhì)變時(shí)刻)
(1)、利用“顏色查找”快速制造大感覺
顏色查找是一個(gè)調(diào)整圖層,它的位置如下圖。添加了顏色查找后,在顏色查找的面板里找到3DLUT文件,下拉就可以看到很多自帶特效的樣式,有冷,有暖,重口味的,小清新的,可以一個(gè)個(gè)嘗試,有適合的就可以直接用。這里就不多講。
(2)、光源潤(rùn)色
首先,新建圖層,做柔光或者疊加圖層混合模式。用畫筆吸取暖黃色,然后畫筆在主光源處疊加暖色光源。
其次,利用“色彩平衡”、“色相飽和度”、“色階”等進(jìn)行圖層整調(diào)!很快就得到自己想要的一個(gè)畫面氛圍基調(diào)。
再次,新建圖層,做柔光圖層混合模式。利用黑色畫筆壓暗畫面四周,再次突出中間的畫面。
最終,這個(gè)畫面的氛圍就差不多完成了。新建一個(gè)圖層,填充灰色,用來做內(nèi)容模塊的背景,與場(chǎng)景做漸變效果。
8、字體設(shè)計(jì)
標(biāo)題字體設(shè)計(jì)參考DNF設(shè)計(jì)師高露潔和LOL設(shè)計(jì)師帥強(qiáng)的字體教程。
9、飄絮物(史詩級(jí)別裝逼利器)
(1)、漂浮物可以是很多形式出現(xiàn),根據(jù)畫面需求添加飄絮的雪花、星星光效等,會(huì)讓畫面變的很精細(xì),提高畫面質(zhì)感。
(2)、畫面人物腳下增加一些飛濺碎石,增強(qiáng)畫面的力量感,讓畫面瞬間震撼起來!合理添加飄絮物可以給畫面添加氣氛,并且制造空間感,是史詩級(jí)別裝逼利器。
(3)、畫面打造的差不多了,接下來設(shè)計(jì)頭部登錄注冊(cè)框的界面設(shè)計(jì)。
三、版式設(shè)計(jì)
內(nèi)容板塊平面化、輕薄的版式設(shè)計(jì),會(huì)減弱背景不必要的視覺效果,這樣可以提高對(duì)信息的瀏覽等用戶體驗(yàn)效果。
END:完成!
四、總結(jié)
這個(gè)官網(wǎng)頁面依然能夠繼續(xù)深入,但是目前這個(gè)效果圖平常使用已經(jīng)足夠了,如果想練手,還是有很多細(xì)節(jié)可以深入。這次教程詳細(xì)提供了一個(gè)MOBA游戲場(chǎng)景氛圍打造的設(shè)計(jì)流程和想法,再到如何版式設(shè)計(jì)等。并且通過多個(gè)點(diǎn)睛之筆給整個(gè)畫面增色!本次分享大概是這樣子。謝謝!
附上詳細(xì)的GIF教程圖
感謝瀏覽與學(xué)習(xí),特此贈(zèng)送大家我最近整理的24張高清炫酷無水印英雄聯(lián)盟壁紙!媽媽再也不擔(dān)心你們沒有好看的電腦桌面了!(??д?)b 友情提示:因?yàn)閳D片高清,所以壓縮文件有點(diǎn)大,請(qǐng)耐心下載。