1. 程式人生 > >設計一組精美的足球圖示

設計一組精美的足球圖示

(本教程由尋圖示icon.52112.com提供)

 

 

建立新文件

我們首先建立一個新文件(檔案>新建或控制-N),進行以下調整:

  • 畫板數量: 4

  • 版面設定:從右向左

  • 間距: 64畫素

  • 寬度: 128畫素

  • 高度: 128畫素

  • 單位:畫素

“ 高階”選項:

  • 色彩模式: RGB

  • 光柵效果:螢幕(72 ppi)

 

 

設定圖層

一旦我們建立了新文件,接下來我們則需要設定幾個圖層,以便將參考網格與圖示分開,這將有助於我們簡化工作流程。

開啟“ 圖層”面板,建立兩個圖層,將其命名:

  • 第1層>參考網格

  • 第2層>圖示

(本教程由尋圖示icon.52112.com提供)

 

建立參考網格

接來下開始建立參考網格,這將有助於我們對齊圖示和調整圖示大小。

第1步

選擇矩形工具(M)建立一個128x128畫素的正方形,使用#F15A24進行著色,然後使用“ 對齊”面板的“ 水平和垂直對齊中心”選項定位到第一個畫板的中心。

第2步

建立另一個較小的120x120畫素正方形(#FFFFFF),將其定位到前一個形狀的中心,用作我們的繪圖區域,提供4畫素的輪廓。

第3步

使用Control + G鍵盤快捷鍵選擇兩個形狀並將它們組合在一起,然後建立它們的副本(Control + C)新增到剪貼簿,然後我們使用(Control + F)貼上到每個剩餘的畫板上。組合並鎖定背景圖層,進行下一步操作。

(本教程由尋圖示icon.52112.com提供)

 

建立足球鞋圖示

定位到第一個畫板選擇第一圖層,我們開始建立足球鞋圖示。

第1步

選擇橢圓工具(L),然後使用120x120 px的圓建立背景,使用#5FB3FF對其進行著色,然後定位到底層畫板的中心。

第2步

接下來的建立一個112x12畫素的矩形,使用#FFFFFF進行著色然後放在位置繪圖區域底邊40畫素的位置。

第3步

選擇“ 變換”面板的“ 矩形屬性”中將其底角的半徑設定為8 px,調整我們剛剛建立的矩形的形狀。

第4步

使用描邊方法為形狀賦予輪廓,然後建立它的副本(Control + C),貼上在圖形前面(Control + F),將其顏色更改為#19649B進行調整。使用填色(Shift + X)填充顏色,將生成的形狀的權重設定為8 px,將角設定為圓形。

第5步

使用12 px高8 px寬的畫筆(#19649B)繪製垂直線條,放置在位於距離鞋底左邊緣24 px的位置,使用Control +G選擇並將所有三個形狀組合在一起。

第6步

建立一個8x10畫素的矩形(#19649B)開始處理鞋底的鋸齒,使用直接選擇工具(A)單獨選擇其底部錨點進行調整,然後使用箭頭鍵或移動工具(右鍵單擊>變換>移動>水平>±2 px將其推入內部方向2畫素的距離(具體取決於你從哪一側開始)。將生成的形狀新增為4 px的輪廓(#19649B),分組(Control + G),然後將繪製的圖形定位在鞋底的底部邊緣上,距離左錨點4畫素的位置。

第7步

給剛剛建立的圖形新增四個副本(Control + C> Control + F四次),將他們放置在參考影象中看到的位置。建立完成時,不要忘記選擇並分組(Control + G)當前建立的形狀,然後再繼續下一步。

第8步

建立一個112x36 px的矩形開始繪製靴子的上部分,使用#9FDFFF進行著色,然後將其放置在鞋底的頂部邊緣上方。

第9步

使用新增錨點工具(+)給剛剛建立的形狀新增幾個新錨點,通過使用直接選擇工具(A)單擊並拖動它們調整到它們在參考影象中看到的位置。

第10步

調整其底部和右側腳踝的錨點使用平滑選項進行調整,然後重新選擇錨點的把手,進行調整,直到你得到一個不錯的弧度。

第11步

給剛剛建立的形狀新增副本(Control + C> Control + F)新增內部的高光,將其與內部對齊的並新增8 px的輪廓(#FFFFFF)。

第12步

選擇並將其底部錨點向下推進4 px(右鍵單擊>)來調整其高度。(變換>移動>垂直> 4畫素)。

第13步

使用20x16 px矩形(#FFFFFF)新增鞋子的腳跟,將其左上角的半徑設定為“ 變換”面板的“ 矩形屬性”中的16 px。為生成的形狀新增8 px的輪廓(#19649B),給圖形進行分組(Control + G),然後將兩者放在上部填充形狀的右下角。

第14步

建立三條24 px寬36 px高的斜線(#19649B)繪製阿迪達斯鞋子的線條,彼此間隔16 px,進行分組(Control + G)然後定位在如參考影象所示的位置。

第15步

建立一個32x16 px的矩形(#19649B)新增腳趾部分的側面部分,我們將對齊到鞋子上部分的左下角,然後通過重新定位其右上方的錨點,使其最終與第一個條紋平行。

第16步

建立4x4 px的圓建立鞋帶孔眼,使用#19649B進行著色,然後定位到參考影象中高光的上部。

第17步

靴子的上半部分完成以後我們就可以進行分組(Control + G)了,我們選擇前面貼上底層填充形狀的副本(Control + C)來掩蓋它們(Control + F)然後選擇副本和組,右鍵單擊>製作剪貼蒙版。

第18步

接下來給靴子的上部新增8 px粗輪廓(#19649B)完成圖示,選擇所有完成的圖形並進行分組(Control + G),然後對整個圖示執行相同操作。

(本教程由尋圖示icon.52112.com提供)

建立足球場圖示

 

一旦我們完成了第一個圖示的處理,我們就可以跳到下一個畫板,我們將逐步在該區域建立足球場圖示。

 

第1步

首先使用120x120 px的圓建立背景,使用#5FB3FF對其進行著色,然後將中心對齊到底層的畫板。

第2步

接下來建立一個56x64 px矩形(#9FDFFF)開始處理足球場的左半部分,給矩形建立8 px的內部高光(#FFFFFF)和8 px的輪廓(#19649B),我們將繪製的圖形進行分組(Control + G)然後居中對齊到繪圖區域的左邊緣。

第3步

建立一個8 px輪廓(#19649B)12x24畫素的矩形(#FFFFFF),將其進行分組(Control + G),然後將中心對齊到上一步驟形狀的左邊緣。

第4步

建立12x16 px的矩形(#FFFFFF),將其右角的半徑設定為8 px進行調整,將圖形定位在上一步建立圖形的下方(右鍵單擊>排列>向下一層移動) 。完成後,選擇剛剛建立的圖形並進行組合(Control + G)。

第5步

給我們剛剛完成圖形建立副本(Control + C> Control + F)移動到右半部分,給圖形做垂直反射(右鍵單擊>變換>反射>垂直),然後定位到繪圖區域的另一側。

第6步

建立24x24 px的圓(#FFFFFF)建立8 px的輪廓(#19649B)給圓形的中間新增一個24 px高8 px寬的直線(#19649B),使用Control + G鍵盤快捷鍵將三個圖形組合在一起。

第7步

完成圖示,建立幾個4x4 px圓圈(#19649B)作為球員,調整到參考影象中看到的陣型或您自己選擇的陣型進行定位,選擇所有圖形並進行分組(Control + G)。

(本教程由尋圖示icon.52112.com提供)

 

 

建立裁判口哨圖示

 

一旦我們完成了第二個圖示的處理,我們就可以轉到相鄰的畫板,建立裁判哨子。

 

第1步

 

建立120x120 px的圓圈新增背景,使用#5FB3FF對其進行著色,然後將中心對齊到下面的活動繪圖區域。

第2步

使用64x64 px圓圈為哨子的圓形部分建立主要形狀,我們將使用#9FDFFF進行著色,然後將其定位在距活動繪圖區域左邊緣中心16 px的位置。

第3步

使用新增錨點工具(+)在圓形的右上部分新增新錨點來,然後使用直接選擇工具(A)擇頂部錨點並刪除它(Delete)。

第4步

選擇鋼筆工具(P),建立參考影象中的形狀。

第5步

使用“ 實時角”工具將其內側角的半徑設定為8 px,然後使用“ 移動”工具選擇並將其右側部分的底部錨點向內推動4 px的距離來調整生成的路徑(右側單擊>變換>移動>水平> -4 px)。

第6步

給我們剛剛建立的圖形新增8 px的內部高光(#FFFFFF)和8 px的輪廓(#19649B),在移動之前選擇並將它們組合在一起(Control + G)進行下一步。

第7步

建立16x16畫素的圓(#FFFFFF)新增哨子的裝飾,在其上方我們再新增一個較小的8x8畫素(#19649B)圓,將其分組(Control + G)然後定位到哨子圓形的中心部分。

第8步

建立20x4 px矩形(#19649B)建立哨子上方的小口,通過選擇並將其左下錨點向內推動4 px(右鍵單擊>變換>移動>水平> 4 px)進行調整。為生成的形狀建立8 px的輪廓(#19649B),給圖形進行分組(Control + G),然後將兩個定位在參考影象中的位置。

第9步

使用8x4 px矩形(#19649B)和8 px粗輪廓(#19649B)新增凸起部分,將它們分組(Control + G)然後定位在喙頂部。

第10步

建立12x12 px和8 px輪廓的圓(#19649B)新增哨子底部的小圓,將其定位在哨子圓形部分的前端。完成後,選擇並將所有組成形狀組合(Control + G)在一起,然後對整個圖示執行相同操作。

(本教程由尋圖示icon.52112.com提供)

 

建立擴音器圖示

 

接下來我們跳轉到最後一個畫板,開始進行揚聲器的繪製。

 

第1步

 

首先建立120x120畫素的圓作為背景,使用#5FB3FF對其進行著色,然後將中心對齊到下面的繪圖區域。

第2步

使用112x64 px矩形為擴音器建立主要形狀,使用#9FDFFF進行著色,然後將中心對齊到底層畫板。

第3步

選擇並將左錨點向內推動20 px的距離來調整我們剛剛建立的矩形的形狀(右鍵單擊>變換>移動>垂直>±20畫素,具體取決於從哪一側開始)。

第4步

將生成的形狀賦予8 px內部高光(#FFFFFF),完成之後,繼續進行下一步。

第5步

建立四條44 px寬64 px高的直線(#19649B)為揚聲器新增細節,將彼此的間隔調整為24 px,給完成的圖形進行分組(Control + G),然後將它們居中對齊到底層畫板。

第6步

建立一個88x64畫素的矩形並新增8 px的輪廓(#19649B)放置在下圖所示的位置,建立它的副本(Control + C> Control + F)來遮蔽對角線細節(選擇副本形狀>右側單擊>製作剪貼蒙版)。完成後,選擇蒙版形狀和矩形,並使用Control + G鍵盤快捷鍵將它們組合在一起。

第7步

使用填充形狀的副本(Control + C> Control + F)遮住我們剛剛建立的形狀,新增8 px的輪廓,然後再繼續下一步。

第8步

建立32畫素和72畫素高同樣寬8畫素的直線(#19649B)分別放置在圓形的後部和前部。完成後,使用Control + G鍵盤快捷鍵選擇並分組剛剛建立的形狀。

第9步

完成圖示,建立24x24 px和8 px輪廓的圓(#19649B),將其放置在揚聲器的後面(右鍵單擊>排列>向後排列),如參考中所示影象。完成圖形以後,將所有圖形選擇並組合(Control + G)在一起。

完成

 

(本教程由尋圖示icon.52112.com提供)