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