這個(gè)圖標(biāo)是一個(gè)經(jīng)典揭秘冒險(xiǎn)游戲《紀(jì)念碑谷2》的APP圖標(biāo)禀忆。它的新版圖標(biāo)看起來華麗清新凯旋，不妨跟著教程繪制一下叙甸，通過它來練習(xí)鋼筆工具和學(xué)習(xí)繪制扁平插畫游戲圖標(biāo)的基本思路。推薦過來給思緣的朋友學(xué)習(xí)备籽，希望大家可以喜歡。
關(guān)注公眾號(hào)分井，liangyuansi1獲取最新學(xué)習(xí)UI資料
先看看效果圖
1车猬、新建畫布，尺寸512*512尺锚，分辨率72ppi珠闰。用圓角矩形工具繪制一個(gè)圓角為90px的512*512的圓角矩形。給圓角矩形添加圖層樣式如圖瘫辩。
2伏嗜、用橢圓工具繪制顏色為#ffffff的8px正圓，并復(fù)制十余個(gè)伐厌，改變部分圓的透明度承绸，達(dá)到圖a的效果。
1挣轨、分析出柱體的俯視圖军熏，這樣更容易明白圖標(biāo)中柱體應(yīng)如何繪制。八芒星柱體的俯視圖如下卷扮，由兩個(gè)正方形組合而成荡澎。
2均践、根據(jù)俯視圖開始繪制柱體。仔細(xì)觀察圖a和圖b摩幔，發(fā)揮空間想象力彤委，根據(jù)數(shù)字提示看看怎么由圖b得到圖c的。
新建70*150的矩形热鞍，得到圖c的矩形3葫慎。
新建50*150的矩形，自由變換斜切30°薇宠，得到圖c的矩形2偷办。
矩形5與矩形8受光程度不同，因此顏色不一澄港。只要繪制出圖c的矩形2和矩形3椒涯，通過水平變換和移動(dòng)位置就可以得到圖c。
3回梧、用鋼筆工具沿著柱體頂點(diǎn)畫出部分八芒星废岂，隨后添加圖層樣式漸變疊加，參考數(shù)值如下：
添加圖層蒙版擦除部分區(qū)域狱意，實(shí)現(xiàn)近實(shí)遠(yuǎn)虛的效果湖苞。
記得關(guān)閉第二步中的矩形1與矩形7的圖層顯示，八芒星中擦除過的部分不透明度降低详囤，不關(guān)閉顯示則會(huì)影響八芒星的顏色效果财骨。擦除效果接近圖d即可。
4藏姐、繪制八芒星描邊隆箩。按住鍵盤上的 Ctrl 鍵，鼠標(biāo)單擊八芒星圖層的縮略圖得到選區(qū)羔杨。
得到八芒星的選區(qū)后捌臊，選中選框工具(快捷鍵M)，在選區(qū)內(nèi)單擊鼠標(biāo)右鍵選擇“變換選區(qū)”兜材。
選區(qū)變換大小如圖作參考
接著新建圖層理澎，即可激活描邊選項(xiàng)。隨后添加圖層蒙版擦除部分區(qū)域护姆。
以同樣的步驟繪制顏色為#82b3ff的2px描邊矾端，以及16px的漸變描邊，漸變疊加參數(shù)如下圖卵皂。完成效果參考如圖e秩铆。
1、小艾達(dá)可拆分如圖：
① 用AI的形狀生成工具繪制而成
② 用布爾運(yùn)算繪制而成
③ 由三角形和圓形組成的圓錐，添加錨點(diǎn)改變弧度而來
④ 復(fù)制一個(gè)部件③殴玛，添加漸變疊加(90°線性)捅膘，用布爾運(yùn)算繪制而成
⑤和⑥用鋼筆工具繪制而成，再加上影子滚粟，小艾達(dá)的繪制就完成了
2寻仗、蘿爾可拆分如圖
① 是添加了漸變疊加的82*82圓
②是添加了漸變疊加(90度線性)的60*60圓
③運(yùn)用布爾運(yùn)算
部件⑤領(lǐng)口部分要與部件④等寬。部件⑤用鋼筆工具繪制凡壤，添加了漸變疊加(圖f效果)署尤，并用畫筆工具畫了一層暗面增加立體感
⑥是鋼筆工具畫輪廓，保持與艾達(dá)的手弧度一致亚侠，畫筆工具畫陰影
⑦運(yùn)用布爾運(yùn)算繪制出襠部曹体，運(yùn)用鋼筆工具繪制腿與腳
完成以上步驟最終成果
堅(jiān)持到這里并成功繪制的同學(xué)都超棒的!一步步跟著分析、拆分圖標(biāo)中的元素硝烂，練習(xí)了鋼筆工具以及布爾運(yùn)算箕别，再看看以下用到相似元素的圖標(biāo)，是不是有種豁然開朗的感覺呢?歡迎留言提問,期待你提交的作業(yè)滞谢。
關(guān)注公眾號(hào)串稀，liangyuansi1獲取最新學(xué)習(xí)UI資料
