LV. 3
GP 2

【心得】多圖注意!!「製作屬於你獨一無二的界面」自製UI教學(01/28更新)

樓主 賣帽人 aabbcc3333
GP550 BP-
06/04更新 常見問題 #95
01/28更新 更新後問題 #158

由於之前一篇問題中有人想知道UI製作方法 看似複雜 其實很簡單!
所以今天就來一篇簡短不負責任的教學
我們一邊聽音樂一邊做吧


開始前首先要確認你的電腦中有Photoshop
因為開啟tga檔需要Photoshop 沒有的話就去拜拜google大神吧

然後可以從資料夾拿出 HUDAtlas.tga 最好先另外備份多一個
(預設路徑:Program Files\GarenaLoLTW\GameData\Apps\LoLTW\Game\DATA\Menu\Textures)
或者可以從這個網站看看有沒有自己喜歡的用來作加工

完成以上步驟後連點兩下 HUDAtlas.tga Photoshop就會自動開啟 這是原廠UI


會用到的熱鍵:
Ctrl+C : 複製
Ctrl+V : 貼上
Ctrl+T : 調整大小
Ctrl+Alt+Z : 回到上一步
歡迎PS大神補上

1.單純改顏色
首先開啟一個新的空白圖層

然後在空白圖層把想塗的範圍選出來 不然會塗出界喔
使用筆刷隨便塗一下


最後在這裡選擇覆蓋


這樣就完成啦~~是不是很簡單
完成後對著圖層右鍵 選擇
合併圖層就可以儲存 大功告成啦


2.加上圖片文字
來到主菜了 就是加上圖片文字等等
例子(載點):

真姬很可愛對吧
真姬很可愛對吧
真姬很可愛對吧

開始前準備你的素材(最好是白色/純色底的) 而我就用真姬醬為大家作示範
連點兩下背景令他變成圖層

使用魔術棒工具選取空白的地方 (按shift+左鍵可以選取多個範圍)
選取完成後右鍵按下反轉選取

把她複製出來 這樣就可以有兩個真姬啦
回到tga檔 把它貼上後調整一下大小及位置


以下是重點
以下是重點
以下是重點

因為很重要所以說三次

回到你的材料 選擇色版 點下面的儲存選取範圍為色版 這樣就會出現了一個
Alpha圖層

(白色為有效範圍) 再把它複制一次 回到tga檔 同樣點選色版Alpha1並把它設為可見
重複一次貼上、調整大小及位置 色版必需與素材重疊 (更快提取合適大小色版方法請往下拉)

「這裡解說一下
色版Alpha中彩色的地方才會於遊戲中被顯示出來 換言之紅色地方就不會被顯示出來
所以為什麼即使把素材加上後 在遊戲中也看不到!? 就是因為沒有加上色版」


然後把圖層合拼 儲存 把它放回資料夾就完成了馬上進入遊戲自訂模式觀賞一下(建議把允許顯示動畫關掉 不然會有兩顆石子在轉轉轉的)
這就是我現在的UI


要注意的地方(想到更多會再加上):
UI的框架範圍是有限的 範圍大概是這樣

比較需要注意的是角色框 它並不是與右邊那塊連在一起的!
如果想在這裡放上素材就需要剪裁一下 例如這樣


個人做法:

首先把素材貼上 調整大小及位置 然後按Ctrl+數字鍵的[+]放大

把色版Alpha設為可視 再放大位置 把素材拉高一點 看到色版邊緣就可以沿著邊緣選取

使用移動工具調整位置

最後色版重複一次以上步驟就完成了

(05/08)更快提取合適大小色版方法:
(建議喜歡用滑鼠拉框框來調整素材大小的同學使用)

首先把素材貼上然後同樣調整位置、大小或剪裁等等

直接框選整個範圍 然後複製

開新檔案 高寬設定為500就可 背景內容選透明

在新檔案中按下Ctrl+V貼上 再框選整個素材 然後換移動工具把它隨意移動一下 就會自動選取了素材喔

最後跟之前一樣 選擇色版 點下面的儲存選取範圍為色版 出現Alpha後點一下再複製

回到tga檔 選擇色版 點一下Alpha 然後貼上 再調一下位置

這樣就可以得到跟素材同樣大小的色版喔

大致上是這樣
另外如果有同學想修改按TAB出來的計分板、商店以及允許顯示動畫才會出現的小石子的話
需要修改Menu資料夾內的dds檔及gfx檔 不過這就是另一門學問喔~
550
-
未登入的勇者,要加入討論嗎?
板務人員:

5293 筆精華,10/08 更新
一個月內新增 3
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】