PS教程丨游戲網(wǎng)頁(yè)設(shè)計(jì)小技巧〔I〕「附調(diào)色三部曲」

時(shí)間：2023-09-26 03:54:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-26 03:54:01 來源：網(wǎng)站運(yùn)營(yíng)

PS教程丨游戲網(wǎng)頁(yè)設(shè)計(jì)小技巧〔I〕「附調(diào)色三部曲」：餓師兄：「設(shè)計(jì)本無(wú)對(duì)錯(cuò)之分，綠色笑臉僅代表可能會(huì)更好。本人設(shè)計(jì)水平有限，根據(jù)自己的工作日常，匯總了一些關(guān)于游戲網(wǎng)頁(yè)設(shè)計(jì)方面的小技巧。說得不對(duì)的或者有需要補(bǔ)充的歡迎大家評(píng)論，共同進(jìn)步！」

1. 書法標(biāo)題排版時(shí)盡量拆開每一個(gè)字去排

左圖的文字為輸入法直接輸出，右圖則是每一個(gè)字拆開單獨(dú)去排版，對(duì)比之下右側(cè)的文字通過大小和位置上的變化，使得排版更加錯(cuò)落有致，整體性更強(qiáng)。「也更能表達(dá)出作者想吃雞腿的決心」

2. 在合適的場(chǎng)景給素材增加溢出的暖光

右圖中心的暖光起到畫龍點(diǎn)睛的作用，會(huì)讓瀏覽者感覺到畫面更加鮮活溫暖，畢竟有陽(yáng)光的地方總是充滿生機(jī)。

3. 段落性的內(nèi)容排版，請(qǐng)優(yōu)先考慮易讀性

字號(hào)、顏色、行距等等，都是基于能夠讓瀏覽者更易閱讀的角度出發(fā)；在設(shè)計(jì)時(shí)考慮給出重點(diǎn)文字及鏈接文字的配色方案，讓文字層級(jí)更加明朗。

4. 讓交互元素更加生動(dòng)

結(jié)合游戲本身，對(duì)頁(yè)面中的交互元素進(jìn)行更加形象化的設(shè)計(jì)，不僅可以增加頁(yè)面的趣味性，也可以直接刺激瀏覽者的點(diǎn)擊欲望。

5. 文字疊加材質(zhì)時(shí)避免出現(xiàn)過曝現(xiàn)象

同樣的材質(zhì)，文字顏色取自同一色系，但飽和度和明度上的差異，導(dǎo)致最終呈現(xiàn)效果的差異。材質(zhì)過曝不一定只由文字的色彩決定，有時(shí)也跟材質(zhì)的疊加模式有關(guān)，這個(gè)平衡點(diǎn)需不斷嘗試。

6. 適當(dāng)?shù)卦黾忧熬坝兄诶_空間感

右圖中通過添加兩側(cè)前景的樹無(wú)疑讓畫面的縱深感更強(qiáng)了，通過這樣的處理，能讓瀏覽者明顯感覺到右圖中的人物離我們更遠(yuǎn)一些。

7. 背光時(shí)可嘗試給文字增加透光效果

右圖中，文字增加透光效果后能讓人感覺到文字與整體畫面的聯(lián)系。文字是受到背光影響的，感覺呼吸性更強(qiáng)了，而不是直愣愣地丟在畫面中。

8. 多人組合時(shí)，利用周圍環(huán)境元素去進(jìn)行人物層次的區(qū)分

多人組合時(shí)，如果不人為地進(jìn)行層次區(qū)分，會(huì)給人感覺素材重疊嚴(yán)重，畫面平坦沒有景深。合理地利用周圍環(huán)境中的光、云、煙霧等元素，可以很好地對(duì)畫面的主體元素進(jìn)行層次上的區(qū)分。

9. 豎排文字時(shí)要注意正確的閱讀順序

古文中文字豎向排版時(shí)，閱讀方向?yàn)閺纳现料拢瑥挠业阶?。通常情況下還是按照正常的閱讀順序去進(jìn)行排版。「PS直排文字工具輸入時(shí)也能體現(xiàn)」

10. 學(xué)會(huì)給場(chǎng)景中的素材添加環(huán)境色

未經(jīng)的原畫怎樣才能跟場(chǎng)景融合？添加環(huán)境色是必不可少的。不知道應(yīng)該怎么添加？建議你找找類似場(chǎng)景的照片去進(jìn)一步觀察。

11. 適當(dāng)弱化部分場(chǎng)景可以讓你的主體更加突出

這部分很好理解，網(wǎng)頁(yè)是傳達(dá)信息的，不止是單純讓你關(guān)注畫面的。弱化場(chǎng)景后，人物、文字以及按鈕能，都能得到進(jìn)一步的突出。「模糊是比較常用的一種方法」

12. 給文字做效果時(shí)應(yīng)首先基于文字的識(shí)別度

同樣的文字效果，右圖暗色背景下要明顯好于左圖亮色背景，左圖考慮的不應(yīng)該是如果讓文字更有質(zhì)感，而是先搞清楚文字配什么顏色識(shí)別度更高。

13. 試著讓畫面中的元素關(guān)聯(lián)起來

右圖中通過添加人物投影，讓人物和圓盤之間產(chǎn)生了聯(lián)系。雖然只是一個(gè)很不起眼的小細(xì)節(jié)，但是往往就是這些小細(xì)節(jié)，決定了你畫面的高度。

14. 修飾類元素不要影響主體的識(shí)別度

綠葉、花瓣、碎石、火焰等類型的元素，只是起到進(jìn)一步烘托氛圍的作用，切勿本末倒置，讓其搶了主體的風(fēng)頭。

15. 盡可能讓LOGO能夠清晰地展現(xiàn)

---

• 調(diào)整素材的明暗

這步比較簡(jiǎn)單，直接看下圖：

沒有變化？仔細(xì)看人物的面部。這里用曲線做了微微提亮的處理， 建議在調(diào)整的時(shí)候采用微調(diào)，有時(shí)過度調(diào)整會(huì)導(dǎo)致素材質(zhì)量的降低及失真。

• 給素材添加大環(huán)境色

何為大環(huán)境色？就是你的素材所處的大環(huán)境下的顏色， 比如，夜色中適當(dāng)添加冷色，火熱戰(zhàn)場(chǎng)適當(dāng)添加暖色?？聪聢D：

這一步我個(gè)人通常是先在素材的圖層之上加一個(gè)純色的柔光層：

這個(gè)柔光層的目的是什么？它只是給素材一個(gè)大致的很弱的環(huán)境色， 在飽和度和明暗上不能過分的影響原始素材，只是讓素材對(duì)環(huán)境色有微微的體現(xiàn)。 所以，上圖中的黃色區(qū)域?yàn)榻ㄗh的取色區(qū)域。

然后再利用“色彩平衡”對(duì)素材進(jìn)行細(xì)調(diào)， 陰影、中間調(diào)和高光分別對(duì)應(yīng)素材的暗部、中間部和亮部。 「注：這里調(diào)整的數(shù)值也不宜過大，通常情況下建議在+-10以內(nèi)，一邊觀察，一邊調(diào)整」

• 利用柔性畫筆對(duì)素材受光和背光進(jìn)一步調(diào)整

想讓你的素材跟背景看起來融合，這一步是必不可少的； 只有通過分析來判定素材在場(chǎng)景中的受光和背光，并且手動(dòng)去打造， 才能讓你的素材在場(chǎng)景中看起來不那么生硬。

注：打光的方法請(qǐng)移步至?xí)秤蝪c的主頁(yè),「VC教程」如何快速打造逆光場(chǎng)景， 這里就不再贅述了，感興趣的朋友可以前去查閱。

不止是游戲或者合成，對(duì)一些偏品牌類的圖片進(jìn)行處理， 也是類似的方法，最重要的摸清楚你想要的是什么調(diào)性。

上圖我想做成一種日式風(fēng)格，通過觀察一些日式風(fēng)的照片，可以大致把握的一些特點(diǎn)： 低飽和，對(duì)比較弱，畫面看起來特別素，給人一種“蒼白”的感覺。 方向有了，其他就只是操作的問題，記?。?調(diào)整時(shí)微調(diào)，邊觀察邊調(diào)整，寧可多次操作，不要一次就過「度」。

• 漸變映射

漸變映射的原理是什么呢？我們通過一個(gè)例子來講解

不知道上面的表達(dá)大家能不能看懂？ 其實(shí)漸變映射利用的是原圖的明暗關(guān)系，「跟原圖本身的顏色多彩沒有關(guān)系」

將畫面中的暗部、中間調(diào)、亮部依次賦予你所定義的漸變范圍。