復(fù)古中國(guó)風(fēng)游戲圖標(biāo) 設(shè)計(jì)思路與繪制步驟

一，何謂古代中式圖標(biāo)

 

具有明顯古代中式傳統(tǒng)象征紋樣或裝飾的圖標(biāo)。其一，來(lái)自民間工藝：陶瓷、刺繡、窗花、藍(lán)印花布，蠟染、剪紙、雕刻、編織等；其二來(lái)自宗教藝術(shù)，如宗教傳說(shuō)和神話(huà)傳說(shuō)，廟宇、石窟中的壁畫(huà)、藻井、龕楣、塑像服飾、基座、建筑、雕刻以及各種供器裝飾。其三是來(lái)源于封建帝王、王公貴族、富豪商賈等所占用的陳設(shè)品、日用品、服飾、首飾、建筑……（設(shè)計(jì)師自身素材庫(kù)的收集和整理很重要，并且需要適當(dāng)?shù)膶W(xué)習(xí)中式/歐式紋樣發(fā)展歷史知識(shí)，這樣可以提高設(shè)計(jì)前期的準(zhǔn)備工作）

 

 

二，如何構(gòu)思和繪制草稿

 

1）根據(jù)游戲風(fēng)格和產(chǎn)品需求，可以在紙上大致畫(huà)幾個(gè)方案草圖，草圖可以不用太細(xì)，有個(gè)大致的感覺(jué)便可，主要是找找圖標(biāo)透視的角度，尋找下外輪廓的大感覺(jué)，如果是系列圖標(biāo)，其外輪廓最好是有一定的聯(lián)系性，這個(gè)階段，可以盡量放開(kāi)來(lái)畫(huà)，潦草啊什么的都無(wú)所謂，追求快速表達(dá)，注意下筆的節(jié)奏感和連續(xù)性，不用在意別人是否看得懂，設(shè)計(jì)師自己明白即可。（不在草圖上進(jìn)行細(xì)化是為了減少時(shí)間上的消耗，而把細(xì)化的工作放到電腦上來(lái)進(jìn)行）

 

 

2）把草圖想法在電腦上用畫(huà)筆繪制出來(lái)，這里選擇用了ps自帶的圓頭筆且設(shè)置為不透明，用形狀語(yǔ)言來(lái)造型，注意這5個(gè)圖標(biāo)是一個(gè)體系，即再怎么變化都跳脫不出大的框架，但每個(gè)單獨(dú)的圖標(biāo)都要有所區(qū)分，保持大形的基礎(chǔ)上營(yíng)造連續(xù)的變化，這里更多的還是考慮剪影的感覺(jué)，類(lèi)似概念設(shè)計(jì)，剪影的形狀感找對(duì)了，往里面添加細(xì)節(jié)就相對(duì)容易多了。

 

三，初步細(xì)化草圖

 

1）這個(gè)階段是對(duì)上面的草稿進(jìn)行第一階段的細(xì)化，邊細(xì)化可以邊糾正之前設(shè)計(jì)或想法不到位的地方。因跟產(chǎn)品溝通后，由于排期和項(xiàng)目進(jìn)度，重新對(duì)設(shè)計(jì)理念進(jìn)行了調(diào)整。為了使個(gè)體圖標(biāo)的差異拉大，有推翻之前部分設(shè)計(jì)，這個(gè)階段不再以圓為大輪廓大形狀來(lái)設(shè)計(jì)，而是以三角形，四邊形，五邊形，復(fù)雜多邊形到復(fù)雜圓呈階梯式遞進(jìn)設(shè)計(jì)。

 

2）對(duì)圖標(biāo)的明暗關(guān)系進(jìn)行細(xì)化，在圖標(biāo)的左上角引入一個(gè)光源，便于更好的塑造體積感，從左上角到右下角光感自然衰減，稍微添加金屬材質(zhì)屬性。接著加入一定的變化紋樣，紋樣本身可以用云紋，宗教紋樣，獸紋，青銅器花紋來(lái)表現(xiàn)，利用各種角度和位置來(lái)穿插，拉開(kāi)造型的差異性，減少重復(fù)感。

 

 

3）多利用參考圖，畢竟完全靠想象會(huì)不夠真實(shí)準(zhǔn)確，抽取參考圖中有用的紋樣和裝飾物來(lái)添加古代中式風(fēng)格的元素，沒(méi)有這些元素的添加，這個(gè)圖標(biāo)就不會(huì)有明顯的風(fēng)格化。(有些參考圖是平面化的圖紋，所以在添加細(xì)節(jié)的時(shí)候要把其轉(zhuǎn)化為立體的帶有形體轉(zhuǎn)折的結(jié)構(gòu)關(guān)系，這個(gè)就比較考驗(yàn)設(shè)計(jì)師的基礎(chǔ)造型能力了)

 

 

四，再次深入細(xì)化

 

1）抽取上圖左上角圖標(biāo)進(jìn)行更深入細(xì)化，完善形體的各種空間轉(zhuǎn)折關(guān)系，凹凸關(guān)系，里外關(guān)系，注意厚度的體現(xiàn)（如圖紅框部分是體現(xiàn)厚度的地方），高光點(diǎn)，反光，材質(zhì)金屬感，粗糙感顆粒感，劃痕破損等等，不同的材質(zhì)有不同的畫(huà)法，調(diào)整了中間風(fēng)格傾向不夠明確的圖案，整個(gè)圖標(biāo)可以先畫(huà)一半，另一半可以用對(duì)稱(chēng)復(fù)制的方法過(guò)去，但如果要畫(huà)出更讓人信服的效果，另一半對(duì)稱(chēng)過(guò)去后也需要根據(jù)光源的走向略微加以調(diào)整，否則素描關(guān)系就很假。最后加入兩邊的金屬環(huán)，讓構(gòu)圖更加飽滿(mǎn)，重量感更加均衡，避免頭重腳輕的感覺(jué)。

 

 

2）在處理完素描關(guān)系后，可以用新建一層圖層，混合模式設(shè)置為【顏色】，用大的噴槍把圖標(biāo)的固有色調(diào)涂上去，并讓色彩隨著素描關(guān)系變化，在大致獲得想要的色調(diào)后，合并圖層，并備份一層以備后患，然后就是順著結(jié)構(gòu)一筆一筆的去過(guò)度顏色了。加入一些小光點(diǎn)，配合加深/減淡工具的使用，會(huì)讓整個(gè)圖標(biāo)響亮起來(lái)，然后適當(dāng)銳化，可以提高造型的硬度，注意高光要卡在關(guān)鍵的轉(zhuǎn)折位置上。

 

 

五，調(diào)整顏色并最后輸出

 

1）把圖標(biāo)放入實(shí)際界面中觀察，發(fā)現(xiàn)目前色彩飽和度稍低，金色的質(zhì)感略顯不足，顏色中有帶一點(diǎn)點(diǎn)的黃綠，所以把色彩稿合并，然后用飽和度&曲線(xiàn)工具反復(fù)的調(diào)整顏色，除了提高飽和度外，還需要單獨(dú)對(duì)黃色通道的顏色適當(dāng)加強(qiáng)，讓其純正一些，然后讓顏色稍微偏一丁點(diǎn)紅，這樣會(huì)更有色澤感。最后把圖標(biāo)縮小到實(shí)際的尺寸放入界面中再做下檢驗(yàn)。

 

 

2）最后根據(jù)實(shí)際尺寸再調(diào)出剩下的4種顏色，在調(diào)色過(guò)程建議找些參考圖來(lái)看，在有所依據(jù)的情況下，保證調(diào)色的準(zhǔn)確性，這樣一個(gè)圖標(biāo)根據(jù)色彩屬性就產(chǎn)生了的5種變化。

 

 

六，小Tips大作用

 

1）Photoshop智能對(duì)象可以不損失圖像質(zhì)量的情況下，方便的進(jìn)行縮放，同時(shí)在智能對(duì)象的雙畫(huà)布繪制情況下，只要原始文件保存更新，智能對(duì)象也會(huì)同步更新，非常適合設(shè)計(jì)師反復(fù)修改和快速查看圖標(biāo)縮小后的效果。

 

 

2）在智能對(duì)象的基礎(chǔ)上，還可以使用智能濾鏡進(jìn)行的銳化，而且可以隨意編輯銳化的值，選擇合適的銳化比例來(lái)實(shí)現(xiàn)設(shè)計(jì)師所要的效果。

 

感謝大家的閱讀，希望本文對(duì)您有一些幫助，也期待與您的交流。