MOBA英文全稱為Multiplayer Online Battle Arena Games，意為多人聯(lián)機在線競技游戲。從2009年Dota火遍全球，到今天全民LOL的時代，MOBA類游戲已經(jīng)伴隨了我們將近7年的時間了。

　　目前市場上比較有代表性的有：

　　Dota、Dota2、英雄聯(lián)盟、超神英雄、風暴英雄、神之浩劫、眾神爭霸等...

　　Moba作為一個新的游戲品類，看看他們的官網(wǎng)，做一些對比分析，總結(jié)出一些規(guī)律，希望以后對此類游戲的視覺設(shè)計能提供一些依據(jù)和參考。

　　一、產(chǎn)品分析與定位

　　二、打造場景氛圍

　　市場上分享的形式有很多，打造方法也是各式各樣，但是對MOBA類游戲的場景氛圍打造至今還沒有這種很詳細的教程，那么我們今天以創(chuàng)世聯(lián)盟為案例，教大家如何快速打造場景。

　　先看下創(chuàng)世聯(lián)盟官網(wǎng)最終效果！

　　1、素材分析

　　素材可以分為（1）、史詩級高質(zhì)量素材（2）、普通的粗糙素材。

　?。?）別人家給力史詩級高質(zhì)量素材！！

　　如果擁有史詩級別高質(zhì)量素材，簡單粗暴直接的說就是人長得美穿什么都好看！你只要稍作修飾，配上好的標題和漂亮的版式設(shè)計，整個頁面氛圍就會好到震撼。如下圖：

　　（2）、自家的普通缺胳膊斷腿素材。。

　　我們往往接到的都是二三線產(chǎn)品，遇到的素材并不是想象中那樣炫酷，而且有時需求方還會指定用一些粗超的人設(shè)素材。。當時我就不樂意了?。?！然并沒卵用！工作還要繼續(xù)！更何況我們又有一顆史詩情結(jié)裝逼的心！那我們該怎么做？

　　2、找視覺參考

　　根據(jù)想象中游戲的大亂斗場景，五殺畫面，找一些炫酷，震撼的畫面進行視覺參考。

　　3、找素材彌補

　　對于素材是多看，多收集，規(guī)范整理，方便日后工作能快速運用。最近也在準備一篇【設(shè)計師超級整理術(shù)】教程，大家可以持續(xù)關(guān)注。

　　推薦：花瓣網(wǎng)、國外CG網(wǎng)站找素材。

　　根據(jù)視覺參考的大亂斗是一個由中心向四周散發(fā)的畫面，所以場景選擇的也都是對稱發(fā)散圖形。

　　4、形式感

　　為了保證畫面平衡，四周人設(shè)動作造型基本保持對稱是一個比較穩(wěn)妥的方法，所以選擇了這3個人設(shè)出于他們的動作考慮。左側(cè)用了女槍和浣熊2個角色是因為她們比較瘦小，為了和右側(cè)男騎士壯漢保持一個畫面平衡。

　　5、定光源(光源分為2種：一、暖光源 二、冷光源)

　　在MOBA類場景氛圍營造上，光線是營造氣氛的利器。

　　這里主要是對場景定光源（中間提亮四周壓暗），中間用暖黃色的主光源提亮，旁邊用藍色冷光作對比，之所以這樣處理是為了使中間的主題畫面更突出。

　?。?）、首先，對場景復(fù)制一層，在新的圖層對原畫進行高斯模糊處理。圖層選濾色屬性，在模糊的這個圖層增加濾鏡蒙版進行擦除，把不需要模糊的地方用畫筆擦掉，這個方法可以讓場景增加景深效果。

　?。?）、其次，利用“色階”（快捷鍵Ctrl+L），把場景暗部加深，提高亮部，加強對比。

　　現(xiàn)在場景的氛圍已經(jīng)比較到位了，如下圖。

　　6、修模型（明暗關(guān)系處理）

　?。?）、利用"色階"調(diào)整（快捷鍵Ctrl+L），讓人物明暗對比爭強，質(zhì)感爭強。

　　（2）、利用"加深減淡"提亮人物的受光面，壓暗人物的背光面。加強光源照射效果，使人物更有立體感，畫面更有空間。

　?。?）、根據(jù)光源，給人物添加形狀選區(qū)，填充黑色。

　?。?）調(diào)整圖層透明度，讓人物的明暗程度和背景在同一個環(huán)境層次里面。添加蒙版圖層，根據(jù)光源方向，擦出亮部。

　　其他英雄也是用同樣的方法處理，得到最終畫面。

　　7、畫面潤色（質(zhì)變時刻）

　　（1）、利用“顏色查找”快速制造大感覺

　　顏色查找是一個調(diào)整圖層，它的位置如下圖。添加了顏色查找后，在顏色查找的面板里找到3DLUT文件，下拉就可以看到很多自帶特效的樣式，有冷，有暖，重口味的，小清新的，可以一個個嘗試，有適合的就可以直接用。這里就不多講。

　　（2）、光源潤色

　　首先，新建圖層，做柔光或者疊加圖層混合模式。用畫筆吸取暖黃色，然后畫筆在主光源處疊加暖色光源。

　　其次，利用“色彩平衡”、“色相飽和度”、“色階”等進行圖層整調(diào)！很快就得到自己想要的一個畫面氛圍基調(diào)。

　　再次，新建圖層，做柔光圖層混合模式。利用黑色畫筆壓暗畫面四周，再次突出中間的畫面。

　　最終，這個畫面的氛圍就差不多完成了。新建一個圖層，填充灰色，用來做內(nèi)容模塊的背景，與場景做漸變效果。

　　8、字體設(shè)計

　　標題字體設(shè)計參考DNF設(shè)計師高露潔和LOL設(shè)計師帥強的字體教程。

　　9、飄絮物（史詩級別裝逼利器）

　　（1）、漂浮物可以是很多形式出現(xiàn)，根據(jù)畫面需求添加飄絮的雪花、星星光效等，會讓畫面變的很精細，提高畫面質(zhì)感。

　?。?）、畫面人物腳下增加一些飛濺碎石，增強畫面的力量感，讓畫面瞬間震撼起來！合理添加飄絮物可以給畫面添加氣氛，并且制造空間感，是史詩級別裝逼利器。

　?。?）、畫面打造的差不多了，接下來設(shè)計頭部登錄注冊框的界面設(shè)計。

　　三、版式設(shè)計

　　內(nèi)容板塊平面化、輕薄的版式設(shè)計，會減弱背景不必要的視覺效果，這樣可以提高對信息的瀏覽等用戶體驗效果。

　　END：完成！

　　四、總結(jié)

　　這個官網(wǎng)頁面依然能夠繼續(xù)深入，但是目前這個效果圖平常使用已經(jīng)足夠了，如果想練手，還是有很多細節(jié)可以深入。這次教程詳細提供了一個MOBA游戲場景氛圍打造的設(shè)計流程和想法，再到如何版式設(shè)計等。并且通過多個點睛之筆給整個畫面增色！想要更加全面學(xué)習游戲UI設(shè)計知識，我們還可以去到CGWANG各大校區(qū)了解游戲UI設(shè)計專業(yè)課程，磨刀不誤砍柴工，不斷地完善自己的知識儲備，提升自己的設(shè)計技能才能使我們及時跟上市場對設(shè)計者的要求。