• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】詳細解析古代中式圖標繪製過程




    詳細解析古代中式圖標繪製過程

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是情非得已,感謝情非得已提供設計理論的實作教學。

    教學大綱:

    具有明顯古代中式傳統象徵紋樣或裝飾的圖標。其一,來自民間工藝:陶瓷、刺繡、窗花、藍印花布,蠟染、剪紙、雕刻、編織等


    設計理論教學開始

    一,何謂古代中式圖標

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

    詳細解析古代中式圖標繪製過程

    二,如何構思和繪製草稿

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

    詳細解析古代中式圖標繪製過程

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

    詳細解析古代中式圖標繪製過程

    三,初步細化草圖

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

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

    詳細解析古代中式圖標繪製過程

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

    詳細解析古代中式圖標繪製過程

    四,再次深入細化

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

    詳細解析古代中式圖標繪製過程

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

    詳細解析古代中式圖標繪製過程

    五,調整顏色並最後輸出

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

    詳細解析古代中式圖標繪製過程

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

    詳細解析古代中式圖標繪製過程

    六,小Tips大作用

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

    詳細解析古代中式圖標繪製過程

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

    — —

    文章永久連結為: 詳細解析古代中式圖標繪製過程