教學課件2-5-寫實圖標的繪制

寫實圖標的繪制授課教師：肖文婷寫實圖標的繪制授課教師：肖文婷寫實圖標，以擬物為基礎(chǔ)進行圖形創(chuàng)意，強調(diào)圖標極強的真實感與質(zhì)感表現(xiàn)。擬物化設(shè)計是為了模擬真實的物理世界。通常，這需要設(shè)計的在線應(yīng)用的形式看起來像真實世界的變體，比如像電子合成器軟件，做的像鍵盤。這種界面的設(shè)計方式，在過去幾年的界面設(shè)計風格中占據(jù)了主導(dǎo)的地位。但是寫實圖標并不是畫得跟照片一樣，而是讓創(chuàng)造的圖標比較逼真，又超越真實，比如圓形的蠟燭臺、木質(zhì)的便簽條、發(fā)光質(zhì)感的信封等。一組寫實圖標設(shè)計寫實圖標，以擬物為基礎(chǔ)進行圖形創(chuàng)意，強調(diào)圖標極強的真實感與質(zhì)繪制立體寫實圖標主要包括以下8個要素：

Perspective（透視）

LightSource（光源）

Shadows（陰影）

Color&Saturation（顏色和飽和度）

SizeRequirements（尺寸要求）

Detail（細節(jié)-紋理質(zhì)感）

IconDevelopment（圖標流程）

UIContextExamples（用戶界面）注意：一般繪制系統(tǒng)圖標時，先畫一個512px最大尺寸的，然后其他大于32px尺寸直接縮小。從大尺寸到小尺寸，圖標要一樣清楚。大尺寸圖標意味著很多細節(jié)，繪制小圖標時省略不需要的細節(jié)，在16px或12px等尺寸時使用正視，去掉復(fù)雜的細節(jié)，變得更簡潔，只要能看出隱喻即可?！緦憣崍D標繪制要素】成套系統(tǒng)寫實圖標繪制立體寫實圖標主要包括以下8個要素：【寫實圖標繪制要素】成繪制寫實圖標的流程大致如下：1、盡量找具有參考價值的照片和圖片。2、歸納出造型重點、提煉顏色、紋理細節(jié)。3、有重點性的夸張造型和構(gòu)圖表現(xiàn)。4、概念草稿3-20張，各個角度，各種組合。5、勾輪廓線——填充固有色——暗部陰影——高光——疊紋理——扣細節(jié)——環(huán)境色添加。6、包裝發(fā)布（加上漂亮的背景色）?！緦憣崍D標繪制注意事項】繪制寫實圖標的流程大致如下：【寫實圖標繪制注意事項】寫實相機圖標過程圖寫實相機圖標過程圖【繪制寫實皮包圖標實例】自定義磨砂紋理圖案【繪制寫實皮包圖標實例】自定義磨砂紋理圖案繪制背景底圖繪制背景底圖教學ppt課件2-5-寫實圖標的繪制教學ppt課件2-5-寫實圖標的繪制繪制皮包底面繪制皮包底面教學ppt課件2-5-寫實圖標的繪制繪制皮包底面第二層繪制皮包底面第二層教學ppt課件2-5-寫實圖標的繪制繪制皮包中間矩形線繪制皮包中間矩形線教學ppt課件2-5-寫實圖標的繪制繪制皮包中間矩形線繪制皮包中間矩形線教學ppt課件2-5-寫實圖標的繪制繪制皮包中間線細節(jié)繪制皮包中間線細節(jié)教學ppt課件2-5-寫實圖標的繪制皮包中間線細節(jié)完成皮包中間線細節(jié)完成繪制皮包下部皮革形狀繪制皮包下部皮革形狀教學ppt課件2-5-寫實圖標的繪制添加皮包下部皮革機理添加皮包下部皮革機理教學ppt課件2-5-寫實圖標的繪制添加皮包下部皮革機理添加皮包下部皮革機理添加皮包下部皮革縫線效果添加皮包下部皮革縫線效果教學ppt課件2-5-寫實圖標的繪制細化皮包下部皮革部分細化皮包下部皮革部分皮包中間皮革部分皮包中間皮革部分教學ppt課件2-5-寫實圖標的繪制繪制皮包蓋形狀繪制皮包蓋形狀教學ppt課件2-5-寫實圖標的繪制繪制皮包蓋形狀繪制皮包蓋形狀教學ppt課件2-5-寫實圖標的繪制繪制皮包蓋縫線繪制皮包蓋縫線繪制皮包蓋縫線繪制皮包蓋縫線教學ppt課件2-5-寫實圖標的繪制繪制皮包蓋細節(jié)繪制皮包蓋細節(jié)繪制皮包帶形狀繪制皮包帶形狀繪制皮包帶縫線繪制皮包帶縫線教學ppt課件2-5-寫實圖標的繪制繪制皮包帶上的圓孔繪制皮包帶上的圓孔繪制皮包帶橫扣形狀繪制皮包帶橫扣形狀教學ppt課件2-5-寫實圖標的繪制繪制皮包帶橫扣皮質(zhì)紋理繪制皮包帶橫扣皮質(zhì)紋理教學ppt課件2-5-寫實圖標的繪制繪制皮包帶橫扣上的圓扣繪制皮包帶橫扣上的圓扣教學ppt課件2-5-寫實圖標的繪制繪制皮包帶橫扣上的圓扣繪制皮包帶橫扣上的圓扣教學ppt課件2-5-寫實圖標的繪制完成圓扣及繪制皮包帶橫扣上的金屬扣完成圓扣及繪制皮包帶橫扣上的金