遊戲 UI 如何做到高精度?

是純手繪調像素還是有其他的方法??


1、ui設計時注意素材質量

2、導出給程序使用的資源時注意圖片質量

3、客戶端捨得給ui體積,ui重用高避免整包過大。頁游就不太需要考慮。

4、像素規整,有時引擎會吃像素或優化非整像素、或優化通明通道。

想到再補充


這樣高精度多細節的界面設計的開山鼻祖是暗黑3的設計,國內很多遊戲都效仿其風格來做。寫實繪製型風格的設計,主要材質多採用石頭,金屬的搭配結合。

《暗黑三》界面標頭與主功能條

------------------------------------------------------------------------------------------------------------------------

如何做到這樣的進度表現的設計?

一共有兩種主流方法和一種偏門方法。

A方法:智能圖層繪畫結合製作手法【主推方法】

第一步:首先在製作尺寸畫布下面做好設計草稿。如果是端游,那麼基本就是1920*1080的畫布。

根據大致輪廓形象開始用鋼筆與圖形工具勾勒出圖形與區域(一定要用PS裡面的矢量工具,後期會放大來繪製,不然點陣圖直接糊掉了)。

第二步:將整個組或者單體形狀轉化為智能對象

智能圖層製作方法【知道這個PS功能的朋友直接往後拉即可】

放大輪廓2倍或者4倍,根據設計師自身的設計習慣與安排,開始進行對外邊框的繪製與製作,注意原圖一定要縮小對比來觀察刻畫,保存後能看到效果。一些結構與結構設計一定要刻畫好邊緣,儘力把結構都梳理出來繪畫。稍微有點筆觸的地方在縮小後都會直接像素化看不出來,但是在平塗的區域一定要選擇填充或者是漸變進行製作,只有在結構複雜的地方進行繪製,製作類似邊框一定只畫邊框裝飾就好了,物品ICON框不要用智能方法。

一些特定邊緣與邊框一定要在1:1的畫布下面製作。特別是需要展示描邊設計的情況一定要直接製作。精細描邊儘力內描邊,會顯得比較精細和準確,外描邊容易造成像素誤差。(如圖)

A方法的訣竅就是複雜的結構設計放大畫,細小的框體1:1製作。

B方法:直接原圖製作方法【需要耐心與熟練使用鋼筆工具】

第一步:還是一樣的先畫出設計草稿與方向

第二步:在原始畫布下面直接用圖形和鋼筆工具勾選開始製作,在圖層劃分上面一定要做到清晰明確,如果混亂的話,很難對結構做好拆分與製作(重要)。

輪廓底層---&>單結構輪廓層---&>細節層---&>材質層---&>效果層(圖層屬性)

每塊區域應該都是這個邏輯層。每個小結構都需要打組歸納好。

在邊緣處理上用內描邊結合蒙版效果做漸變。然後適當的地方用噴筆輕輕點兩筆。如果需要極限刻畫邊緣細節的時候,選擇鉛筆工具直接像素點畫。

B方法的訣竅就是鋼筆形狀結合少量畫筆達到效果,適合對製作比較在行的朋友。

C方法:摳圖拼接修改方法【不做推薦】

此方法最好只做快速概念設計搭建的時候使用。如果是自己作為工作和作品的話,的確可以快速短暫的得到效果,但是對設計師原創與技術能力的傷害是巨大的。

不可否認也是方法之一,這裡也做一下介紹。

第一步:找到相應的素材與參考選擇其中的部分結構作為素材扣選出來獨立建層。

第二步:素材用智能圖層放大後在根據素材開始修改設計,縮小後用USM智能銳化輕度銳化。

第三步:修修改改這個設計就快出爐了,最後處理好外邊緣因為摳圖對邊緣處理不到位會讓人覺得粗糙。修好邊,開啟USM智能銳化調整到自己滿意度,增加對比效果來彌補摳圖的像素丟失。

以上3種方法都是能解決這個問題的。

B、C方法如果看不懂,可留言後期配圖。


在做這種UI之前先要排版布局畫草圖,首先從策劃文案那裡知道這裡要放什麼,有多少個技能框、多少個快捷按鈕、技能圖標有多大……然後根據這些內容進行排版布局,可以用紙筆來畫,也可用PS畫草稿。一般有經驗的設計師會盡量考慮後期的擴容,比如加個按鈕,加個技能快捷方式的位置,一些手游上的設計還要考慮根據不同屏幕下的縮放後產生的效果。

排版確認後開始設計效果,但設計師的設計習慣不同,有的習慣手繪,有的是在PS設計圖層樣式+手繪,有的不用手繪全用PS做出來,一般來講論精細程度,PS出來的效果更好一些,但論質感,還是手繪的強。

分析這題主說的這張圖,我認為這是個用PS+手繪完成的UI界面

按鈕,用PS圖層樣式即可,(下方拼圖的金屬按鈕是在PS用圖層樣式完成的)

按鍵快捷,用PS圖層樣式即可,下方1、2……0的快捷圖加個材質作背景即可(左邊是題主的原圖,右邊的是用PS圖層樣式完成)

金屬邊框也是用PS圖層樣式(下方紫色是用PS的圖層樣式完成)

用到手繪的是這裡,其實用PS也一樣可以做出來,只是比手繪要花更多點時間。


一定是手繪。

同時貼張製作方法的圖,裡面說的是圖標,但UI的道理也是一樣的


尼瑪,部分遊戲策劃真的素質堪憂。哥大聲告訴你:把ui做到高精度是系統性的活!!!

有前輩肯教你整套流程就多學習,別亂噴。簡單說一下,還放大一倍再縮小,你知道不同的圖像引擎的縮放繪製演算法是不一樣的么?你試試用mspaint和ps分別把一張圖縮放50%效果是一樣的嗎!

親!縮放都跟圖源的尺寸都還有關係,你再試試弄個奇數尺寸的和偶數尺寸的圖看看有區別不。

看起來簡單的東西,背後其實都是有很多規範和製作標準的,比如你清楚為毛常用的圖源格式要有那麼多種嗎??做遊戲真心是個系統性的活,不要太多想當然!少年!

補充葉斌

1.各種響應控制項的尺寸要做整體規劃

2.使用字體的種類,字型大小、字色都要做整體規劃

3.手游尤其要注意多分辯率情況的考慮

4.不要用肉眼去解決控制項居中,對齊等位置問題,盡量用數學計算坐標

5.根據引擎特性考慮優化,比如減少drawcall,圖片打組,使用壓縮格式等


某遊戲UI前來回答:=_=

畫很大(不要有筆觸感),轉智能對象,縮小,銳化。OK完成了。

沒錯啊我就是這麼乾的。

(為什麼UI題會這麼多策劃回答,難道是我看錯題了0.0 題主你是問的是美術怎麼畫出來還是程序怎麼實現出來?我以為題主問的是UI製作技巧,而不是遊戲畫質優化。。。)


畫大一倍 做完縮小


謝邀。就目前來看,暴雪遊戲的設計應該是目前遊戲UI高精度所追求的標準。本人入暴雪門已經十年有餘了。

簡單來說,畫大後再縮小是最直觀有效的方法。當然這只是入門功夫,想要真正做好UI的,做到精緻,高精度,有設計內涵,還是要多參考一些好的遊戲UI設計,不只是畫出來,或者拷貝別人的內容,更多的是有自己的東西,對素材的質量,圖片質量,設計元素的提高才是做好精緻UI的關鍵。


百度 「PS 智能圖層」,好像這樣放大圖片繪製以後再縮小細節就不會丟失。

作為一個程序員,我只能幫你到這兒了。


百度的策劃吧、GameRes遊資網、知乎 策劃咋都跟吃了火藥似的


個人感覺UI設計高精度,與遊戲原畫的精修有著息息相關的聯繫,改變素材的大小,局部截圖一些不錯的地方做構圖,也可能會有意想不到的效果。

舉個例子:怎樣讓遊戲人物更精緻

1、截取人物局部,把原畫從本身的感覺抽離,變成另一種造型。

下面這張圖整體造型還不錯,而且武器和人物是分開的。原畫的造型是向前滑行,所以調整下人物角度,直接去上半身的原圖做專題製作。

截取局部後原畫會變大,很多不精細的地方會暴露,接下來我們就要精修處理。

2、增加明暗對比,讓人物更立體。

這裡用到了「曲線」和「蒙板」工具,曲線工具負責整體明暗的加強,而蒙板則是利用透明的筆刷,把很暗的地方隱藏掉,這樣部分地方就變成了透明的。暗色的底部下面會更暗,拉開了人物原畫的層次。

3、去色讓原畫灰化

有時原畫上整體人物的顏色會偏向某一種顏色,還有更讓人抓狂的會五顏六色,但是做網頁設計,一個頁面上出現的顏色不要超過三個,要不然整體看上去會很亂,分不清重點和次重點。

用「色相飽和度」工具,調整飽和度,讓原畫顏色灰化。

再次加強明暗假象光源方向。用黑色的筆刷刷在想要變暗的地方,用白色的筆刷刷在亮的地方,應用疊加、柔光,讓人物更加立體。

4、加入人物身上的細節

搜索一些素材,放在人物身上後,利用模式中的一些效果,進行溶圖。可以試試所有的疊加模式,看哪種效果最好。

5、增加環境氛圍,讓整體畫面更有局情感。

這裡增加了一些煙霧和火光。


跟前面的大神們都說得很全面了,不過還是把我自己做的一些經驗分享一下。

其實在現在手機端遊戲盛行的年代,做得精細並沒有什麼很大的用處,因為往往你做好後,程序並按照你的要求做出最終表達的效果,最後打包的時候,發現資源太大,也會導致一部分問題,載入什麼的(後續沒了解到更多,只說了個大概)

最終也不得不妥協,做個看上去差不多的交差……

不過如果自己想在項目以外提升技能的話,建議多臨摹,而且做的精細的所有作品,都需要大量的時間去磨的,就像畫素描一樣,它的明暗,光源,材質,這些最終只是技能,最最重要的還是設計思路,和天馬行空的想像力,加油


1.放大畫,畫布大小擴大兩到三倍

2.圖層轉智能對象再調整大小

3.多用形狀,鋼筆工具,對於一些還不入門道的新人來說,很喜歡直接上手畫,用筆塗塗塗,然後畫完放大後就會變得很糊很不精緻,其實很多能用形狀工具能做出的效果就盡量用形狀,放大縮小都不怕。

4.縮小後亮暗部區分明顯,有光感就顯得精緻了。


3D的UI精度輕鬆控制!同情2D的美術們。


我沒懂這個精確是什麼意思,是間距,位置擺放什麼嗎?

如果是這樣,那做到1像素以內的精確很正常啊,參考網頁設計,像素是絕對0誤差的。

一開始輔助線確定範圍,計算大小,我向來都是把所有需要的明確的計算出後再開工。做到1像素內精確是基本要求了


繪製方法很多,手繪或是用圖形疊材質,甚至也有人用三維建模貼圖渲染。至於看上去的整齊細緻,前面有個妹子說對了,先畫大圖轉psb縮小,然後精修。

另外,北京靠譜手游公司求UI一枚,前知名國際手游公司千萬美元級項目製作人+核心團隊,星戰官方御用作家撰寫遊戲同名小說,項目已簽知名發行商,待遇優厚,非血汗工廠工作模式,有意加入的童鞋請留言


畫出來!


跟ui素材的圖片壓縮格式和引擎的類型有很大關係,一般解析度越高的ui佔用資源越多,這個ui看上去是個頁游Ui,堆資源就可以了


推薦閱讀:

如何學習好平面構成?
畫畫的炭筆哪個牌子好?
如何自學 CG 繪畫做一名職業概念設計師?
請幫我看看這個色彩如何搭配。?
非美術專業的大專生如何堅持藝術夢想?

TAG:遊戲設計 | 用戶界面設計 | 美術 | 遊戲美術設計 | UI設計師 |