一，何謂古代中式圖標

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

二，如何構思和繪制草稿

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

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

三，初步細化草圖

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

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

3）多利用參考圖，畢竟完全靠想象會不夠真實準確，抽取參考圖中有用的紋樣和裝飾物來添加古代中式風格的元素，沒有這些元素的添加，這個圖標就不會有明顯的風格化。(有些參考圖是平面化的圖紋，所以在添加細節(jié)的時候要把其轉化為立體的帶有形體轉折的結構關系，這個就比較考驗設計師的基礎造型能力了)

?四，再次深入細化

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

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

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

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

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

六，小Tips大作用

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

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

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

原文地址：騰訊GDC

 
================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是一個分享網(wǎng)頁設計、無線端設計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設計講座：每月邀請國內(nèi)互聯(lián)網(wǎng)公司設計前輩及行業(yè)總監(jiān)在群內(nèi)及YY語音（YY頻道：15335158）分享實戰(zhàn)經(jīng)驗。
設計微博：擁有粉絲量42萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設計 微信號：【youshege】優(yōu)設哥的全拼
您也可以通過掃描下方二維碼快速添加：