制作一组创意的食物图标
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 本教程由尋圖標(biāo)icon.52112.com提供
?
?
創(chuàng)建新文檔
和所有新項(xiàng)目一樣，首先要?jiǎng)?chuàng)建一個(gè)新文檔（File> New或Control-N），進(jìn)行如下設(shè)置：
畫板數(shù)量：?1
寬度：?800像素
高度：?600像素
單位：像素
并從“高級”選項(xiàng)卡：
色彩模式：?RGB
光柵效果：屏幕（72 ppi）
將新對象與像素網(wǎng)格對齊：選中
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?本教程由尋圖標(biāo)icon.52112.com提供
項(xiàng)目整理
新項(xiàng)目的創(chuàng)作需要清晰的思路和簡明的圖層，現(xiàn)在我們要做的就是打開圖層面板，然后創(chuàng)建七個(gè)新圖層，按以下方式重命名：
第1層>background背景
第2層>bottle瓶子
第3層>cheese奶酪
第4層>milk box牛奶盒
第5層>salami薩拉米香腸
第6層>olive橄欖
第7層>tomato番茄
第8層>egg雞蛋
項(xiàng)目開始的時(shí)候注意鎖定除了我們將要處理的層之外的所有層，這樣我們就不會意外地移動或錯(cuò)放一些形狀。
創(chuàng)建背景
一旦我們完成了新項(xiàng)目的整理，我們就可以將自己定位到第一個(gè)圖層，開始處理背景層。
第1步
選擇鋼筆工具（P）并繪制一個(gè)28像素寬的線段，使用8 px粗線條，顏色設(shè)置為＃2B2525，頂端為圓形，然后定位距離左側(cè)106 px、距底邊122 px的位置。
第2步
完成第一個(gè)步驟之后，我們繪制一個(gè)更寬的518像素（＃2B2525）的線段，然后再添加一個(gè)更小的2像素（＃2B2525）的線段，使用“對齊”面板將它們彼此間隔設(shè)置為16 px，選擇并分組（ Control-G）我們繪制出的圖像。
第3步
在第一個(gè)線段繪制完成后，創(chuàng)建一個(gè)456x456 px圓圈，使用#DBDBDB進(jìn)行著色，然后定位到線段下方（右鍵單擊>排列>發(fā)送到后面），使其下部與參考線線重疊。
第4步
隱藏圓與線段重疊的部分，創(chuàng)建一個(gè)456x372 px矩形（以橙色突出顯示）作為剪切蒙版，然后選擇它和底層圓圈，右鍵單擊>制作剪貼蒙版。
第5步
一旦你處理好了圓圈，接下來我們就可以鎖定當(dāng)前圖層并繼續(xù)前進(jìn)到下一個(gè)圖層，開始處理瓶子。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 本教程由尋圖標(biāo)https://icon.52112.com提供
創(chuàng)建瓶子
隨著背景的完成，我們現(xiàn)在可以開始創(chuàng)建我們的第一個(gè)元素：瓶子
第1步
選擇矩形工具（M）并創(chuàng)建124x312矩形作為瓶子的主要形狀，然后使用＃EFE0DC對其進(jìn)行著色，定位到線段的上半部分，調(diào)整其距離左邊緣130 px的位置。
第2步
完成形狀后，使用添加錨點(diǎn)工具（+）在；矩形兩側(cè)添加錨點(diǎn)，一個(gè)距離頂邊14 px，另一個(gè)距離頂邊66 px。
第3步
調(diào)整瓶子的整體形狀，在移動工具的幫助下單獨(dú)選擇頂部兩個(gè)側(cè)錨點(diǎn)向內(nèi)推24 px（右鍵單擊>變換>移動> + / - 24 px）。
第4步
單獨(dú)選擇中心錨點(diǎn)，調(diào)整其手柄直到獲得平滑的曲線完成瓶子上部和下體之間的過渡。
第5步
在瓶子的上邊緣添加一個(gè)76x8像素的矩形，將其顏色設(shè)置為＃999999
第6步
完成之后創(chuàng)建一個(gè)瓶子的副本（Control + C）并將其粘貼到適當(dāng)?shù)奈恢?#xff08;Control + F），然后將其填充（Control + X）填充為8 px的輪廓（＃2B2525），然后設(shè)置角度為圓角。
完成后，選擇三個(gè)形狀Control + G鍵盤快捷鍵將它們組合在一起。
第7步
在瓶子填充形狀的頂部邊緣添加一個(gè)84 x 36像素的矩形，使用＃AD6050對其進(jìn)行著色，作為瓶蓋。
第8步
給瓶蓋一個(gè)8像素的輪廓（＃2B2525），然后使用鋼筆工具（P）添加五個(gè)垂直線段，彼此間隔6 px，然后我們將其與其余部分分組（Control + G）。
第9步
創(chuàng)建一個(gè)88 px長的線段（＃2B2525），設(shè)置8 px的寬度，放置在瓶子的頸部。
第10步
添加另一個(gè)較小的24 px長線段（＃2B2525）并將其放置在瓶子的中心位置，距離我們剛剛在上一步驟中添加的線段的一段距離。
第11步
使用橢圓工具（L）創(chuàng)建一個(gè)84x102像素的形狀（＃DD5F5F），我們將與瓶子的中心對齊，距離我們剛剛創(chuàng)建的線段的距離為16像素。
第12步
給標(biāo)簽一個(gè)8 px寬的輪廓（＃473333）和兩個(gè)虛擬文本彼此間隔8 px，然后選擇并分組（Control + G）所有形狀。
將所有完成的形狀組合到一起作為單個(gè)對象。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 本教程由尋圖標(biāo)https://icon.52112.com提供
創(chuàng)建奶酪
完成我們合成的第一個(gè)元素，然后鎖定它的圖層，繼續(xù)第三個(gè)元素的處理。
第1步
選擇矩形工具（M）并創(chuàng)建一個(gè)192x188像素形狀（＃EAB575），將其左角半徑設(shè)置為44像素進(jìn)行調(diào)整，然后將其定位到距背景線左側(cè)106像素的距離。
第2步
接下來我們在矩形右上方繪制出一個(gè)28x28像素的圓圈（用橙色突出顯示）然后使用路徑尋找器給奶酪添加圓孔。
第3步
給最終得到的形狀創(chuàng)建8 px的輪廓（＃2B2525），然后將它們組合在一起（Control + G）。
第4步
創(chuàng)建奶酪的側(cè)面部分，選擇面包主體然后創(chuàng)建一個(gè)副本（Control + C> Control + B）將其定位在距其輪廓52 px處，填充顏色設(shè)置為＃CE8A41。
第5步
使用橢圓工具（L）創(chuàng)建幾個(gè)圓孔，使用＃CE8A41進(jìn)行著色，為它們設(shè)置8 px的輪廓（＃2B2525）。將繪制的橢圓進(jìn)行分組（Control + G）。
由于我們已經(jīng)完成了奶酪的設(shè)計(jì)，現(xiàn)在我們選擇所有的形狀并使用Control + G鍵盤快捷鍵將它們組合在一起，然后鎖定它的圖層并繼續(xù)創(chuàng)建下一個(gè)元素。
創(chuàng)建牛奶盒
現(xiàn)在我們定位在第四層（即“牛奶盒”）上，讓我們開始處理合成中的第三個(gè)元素。
步驟1
首先繪制一個(gè)132x140像素的矩形來創(chuàng)建牛奶盒正面的主要形狀，使用#EFEAEA對其進(jìn)行著色，然后將其放置在背景的右側(cè)，距離線段的右邊緣122 px。
第2步
給我們剛剛創(chuàng)建的圖形添加8 px的輪廓（＃2B2525），使用我們之前相同的復(fù)制方法創(chuàng)建副本，選擇并進(jìn)行分組（Control-G）得到的兩個(gè)形狀。
第3步
使用132x48 px矩形創(chuàng)建牛奶盒的上半部分，使用#EFEAEA對其進(jìn)行著色，然后將其放置在之前創(chuàng)建的圖形上方。
第4步
使用添加錨點(diǎn)工具（+）在矩形中間添加錨點(diǎn)，然后使用刪除錨點(diǎn)工具（ - ）刪除其兩邊錨點(diǎn)，調(diào)整形狀。
第5步
給出我們剛剛得到的圖形添加8 px的輪廓（＃2B2525），然后使用Control + G鍵盤快捷鍵選擇并將兩個(gè)形狀組合在一起。
第6步
接下來創(chuàng)建一個(gè)牛奶盒正面的副本（Control + C> Control + F）然后將其寬度增加到136 px作為牛奶盒的側(cè)面部分，將其放置在距離它的66 px的左側(cè)。
第7步
使用直接選擇工具（A）左鍵單擊填充并將其顏色更改為稍暗的顏色（＃999999）。
第8步
由于我們希望我們剛剛創(chuàng)建的側(cè)面部分位于框的前面，所有我們首先必須選擇它，然后通過右鍵單擊>排列>發(fā)送下一層將圖形調(diào)整到后面。
第9步
給三角形創(chuàng)建一個(gè)副本（Control + C> Control + F）然后將其從下面圖形對齊。
第10步
使用直接選擇工具（A）選擇并將填充顏色更改為稍暗的顏色#BFBFBF。
第11步
由于我們需要在牛奶盒正面方延伸出頂側(cè)部分，因此我們必須使用添加錨點(diǎn)工具（+）為其邊緣添加新的錨點(diǎn)，然后通過將錨點(diǎn)拖向新的錨點(diǎn)來調(diào)整它們前三角形的尖端。
第12步
一旦我們調(diào)整好頂部的形狀，我們就可以通過右鍵單擊>排列>發(fā)送到后面將其放置到三角后面。
第13步
使用70x20 px矩形創(chuàng)建包裝盒的上部，使用＃999999進(jìn)行著色，然后將其放置在其他形狀的頂部。
第14步
選擇我們剛剛創(chuàng)建的形狀，并使用＃2B2525作為顏色，創(chuàng)建一個(gè)8像素的輪廓。
第15步
使用鋼筆工具（P）創(chuàng)建四個(gè)42 px的線段，添加8 px的輪廓（＃2B2525），將彼此間隔跳幀為6 px，進(jìn)行分組（Control + G）并將它們定位到我們前面的步驟中創(chuàng)建形狀的中間。
第16步
完成后，選擇所有的頂部元素進(jìn)行分組（Control + G）。
第17步
開始處理盒子的正面標(biāo)簽，創(chuàng)建一個(gè)124x48像素的矩形，使用＃DD5F5F進(jìn)行著色，然后與矩形中心對齊。
第18步
選擇鋼筆工具（P）并使用8 px的筆添加標(biāo)簽的頂部和底部輪廓，顏色設(shè)置為＃2B2525。完成后，使用Control-G鍵盤快捷鍵選擇標(biāo)簽的組成形狀并將其分組。
第19步
創(chuàng)建62x48 px的矩形做為盒子的側(cè)面標(biāo)簽，使用＃BA4F4F進(jìn)行著色，然后定位到底部部分的中心。
第20步
給矩形的頂部和底部添加輪廓，完成后選擇并將三個(gè)形狀組合在一起（Control + G）。
第21步
選擇牛奶盒本身，添加兩條虛擬文本，使用Control + G鍵盤快捷鍵將創(chuàng)建的圖形進(jìn)行分組。
完成牛奶盒后，不要忘記選擇和分組（Control + G）盒子的組成元素，防止以后操作過程中誤點(diǎn)。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 本教程由尋圖標(biāo)https://icon.52112.com提供
如何創(chuàng)建薩拉米香腸
在我們開始之前不要忘記鎖定前一層并選擇第五層，在第五層創(chuàng)建薩拉米香腸。
步驟1
創(chuàng)建68x68 px的圓圈作為薩拉米香腸的前部，使用＃E0A9A9進(jìn)行著色，然后定位到牛奶盒的前部，距離其右邊緣44 px。
第2步
使用復(fù)制的方法給出我們剛剛創(chuàng)建的圖形添加8 px的輪廓，顏色設(shè)置為＃2B2525，然后選擇并分組（Control + G）這兩個(gè)形狀。
第3步
使用鋼筆工具（P）創(chuàng)建兩條線段（一個(gè)較短和一個(gè)較長）添加到薩拉米香腸的前部。將線段的寬度設(shè)置為8像素，將其顏色設(shè)置為＃2B2525。
將繪制的圖形進(jìn)行選擇和分組（Control + G），然后放置到底層部分。
第4步
創(chuàng)建120x68 px的矩形作為薩拉米香腸的身體，使用＃C66767進(jìn)行著色，然后將其放置在我們剛創(chuàng)建的正面下方，令它與右半部分重疊。
第5步
在“變換”面板中將其右角的半徑設(shè)置為34 px，調(diào)整我們剛剛創(chuàng)建的形狀。
第6步
使用＃2B2525作為筆觸顏色，使得到的形狀具有8像素的輪廓。
第7步
建立56x16 px的圓角矩形和8 px的輪廓作為薩拉米香腸的標(biāo)簽，使用#EFEAEA對其進(jìn)行著色，然后定位到香腸的上半部分，確保它與其香腸輪廓重疊。
第8步
為標(biāo)簽添加8 px的輪廓（＃2B2525），然后使用Control + G鍵盤快捷鍵將兩個(gè)形狀組合在一起。
第9步
由于我們希望標(biāo)簽附著到薩拉米香腸的表面，然后使用底層填充形狀的副本作為剪切蒙版（兩種形狀選擇>右鍵單擊>制作剪貼蒙版）以隱藏任何不需要的部分。
選擇并分組（Control + G）香腸的主要元素。
第10步
創(chuàng)建一個(gè)22x16像素的橢圓來添加薩拉米香腸“尾巴”部分，使用＃A54646對其進(jìn)行著色，然后將其放置香腸的右側(cè)。
第11步
給“尾巴”創(chuàng)建一個(gè)8像素的輪廓（＃2B2525）將兩個(gè)圖形進(jìn)行（Control + G）分組，確保它們不會被意外分開。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?本教程由尋圖標(biāo)https://icon.52112.com提供
創(chuàng)造橄欖
雖然它是我們作品中最小的元素，但是這個(gè)小橄欖的細(xì)節(jié)會增加作品整體的感覺。
第1步
使用30x22像素橢圓創(chuàng)建橄欖的主要形狀，使用＃819B64進(jìn)行著色，然后將其定位到牛奶盒的側(cè)面部分。
第2步
給橄欖一個(gè)8像素的輪廓（＃2B2525），然后使用Control + G鍵盤快捷鍵選擇并將兩者組合在一起。
創(chuàng)建番茄
我們現(xiàn)在是我們作品的第六個(gè)元素，即小番茄。所以假設(shè)你已經(jīng)選擇第六層，那么我們就開始吧。
步驟1
使用86x86 px圓圈創(chuàng)建番茄的主要形狀，我們將使用＃DD5F5F將其著色并朝向奶酪的中心定位，距離其左側(cè)約92 px。
第2步
選擇我們剛剛創(chuàng)建的形狀，并給它一個(gè)8像素的輪廓（＃2B2525），然后將兩者組合在一起（Control-G）。
第3步
創(chuàng)建12x16像素的橢圓作為番茄葉，使用＃819B64進(jìn)行著色，然后定位到番茄的上部。
第4步
給葉子一個(gè)8像素的輪廓（＃2B2525），然后使用Control + G鍵盤快捷鍵將兩個(gè)形狀組合在一起。
第5步
選取我們剛剛完成的番茄葉創(chuàng)建副本（Control + C> Control + F）并通過右鍵單擊>變換>旋轉(zhuǎn)并在角度值字段中輸入-45旋轉(zhuǎn)來創(chuàng)建其余的葉在。
然后，選擇旋轉(zhuǎn)的形狀并將它們定位在中心葉的左側(cè)。
第6步
通過抓取左側(cè)的葉子創(chuàng)建副本（Control + C> Control + F）并將其定位到中心葉的另一側(cè)來創(chuàng)建番茄葉子。
第7步
完成番茄，通過添加番茄的尾部，使用14x14 px矩形創(chuàng)建主體，使用深綠色（＃647F52）進(jìn)行著色，然后定位在番茄頂部。
第8步
選擇并將其底部錨點(diǎn)朝向內(nèi)側(cè)推動2 px來調(diào)整我們剛剛創(chuàng)建的形狀。
完成后，將生成的形狀添加8 px的輪廓（＃2B2525），然后將兩個(gè)組合（Control + G）和番茄的組成形狀組合在一起。
創(chuàng)造蛋
我們現(xiàn)在已經(jīng)到了我們的第七個(gè)也是最后一個(gè)組成元素，雞蛋，正如您將看到的那樣，它很容易創(chuàng)建。
所以，確保你在最后一層，讓我們完成這個(gè)。
第1步
使用56x56 px圓圈創(chuàng)建雞蛋的主要形狀，使用#EFEAEA進(jìn)行著色，定位到番茄的左側(cè)。
第2步
使用直接選擇工具（A）選擇其頂部錨點(diǎn)，然后使用移動工具將其推向頂部（右鍵單擊>變換>移動>垂直> - 16像素）調(diào)整圓。
第3步
使用Control + G鍵盤快捷鍵將生成的形狀賦予8 px厚的輪廓（＃2B2525），然后將兩個(gè)形狀組合在一起。
第4步
使用橢圓工具（L）添加另一個(gè)較小的24x24像素圓，使用＃EAB575進(jìn)行著色，然后將其定位到蛋的中心。
第5步
給我們創(chuàng)建的黃色圓圈上添加輪廓（＃2B2525），然后將兩個(gè)圖形進(jìn)行分組（Control + G），完成雞蛋和蛋黃。
完成
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（本教程由尋圖標(biāo)https://icon.52112.com提供）
?
?
總結(jié)
以上是生活随笔為你收集整理的制作一组创意的食物图标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html5 canvas 绘制上下浮动的
- 下一篇： 林语堂:《醒觉·对人生的态度》