創建文件
與任何新項目一樣,首先要設置一個新文檔(文件>新建或Control + N),進行調整:
畫板數量:1
寬度:800像素
高度:600像素
單位:像素
在“高級”標籤中:
色彩模式:RGB
柵格效果:屏幕(72 ppi)
將新對象與像素網格對齊:已選中
溫馨提示:通過將“配置文件”設置爲“ Web”,可以自動觸發其中的大多數設置,唯一的設置不是文檔畫板的“寬度”和“高度”
打開“圖層”面板,然後創建四個圖層,我們將其命名如下:
第1層>參考網格
第2層>揹包
第3層>筆記本
第4層>計算器
我們將鎖定除將要處理的形狀以外的所有形狀,以免意外移動或放錯某些形狀
創建我們的參考網格
一旦我們對項目文件進行了分層,我們就可以開始創建參考網格,這將通過關注一致性和大小來幫助我們創建圖標。
第1步
抓住矩形工具(M),創建一個128 x 128像素的正方形,我們將使用#F15A24對其進行着色,然後使用“對齊”面板的“水平和垂直對齊中心”選項將其放置在Artboard的中心
第2步
創建另一個較小的120×120像素正方形,它將用作活動繪圖區域,從而爲我們提供了一個4像素的全邊框,使用白色
(#FFFFFF)爲形狀着色,然後將兩個顏色分組(Control + G),然後再創建兩個副本,一個副本位於左側,另一個副本位於右側,與原始副本之間的距離爲40 px
創建和定位參考網格後,鎖定它們的圖層,繼續前進到下一個網格,在此我們將開始處理第一個圖標
創建揹包圖標
進入揹包層後,放大其參考網格,以便可以更好地瞭解要創建的內容
第1步
抓住圓角矩形工具,使用72×100 px形狀和4 px角半徑創建揹包的主要形狀,使用黃色(#F4BD5D)進行着色,然後將其放置在活動繪圖區域的底部, 留下8像素的空白
第2步
通過打開“變換面板”並將其頂角的半徑設置爲36像素,調整剛剛創建的形狀
第3步
選擇形狀,然後選擇“對象”>“路徑”>“偏移路徑”,爲該輪廓指定輪廓,然後在“偏移值”字段中輸入4 px,將生成的對象的顏色更改爲#3D3232,以使其突出
第4步
通過繪製80×24像素的矩形(#7C7171),創建揹包的下部,然後我們將使用該圖標的黃色形狀進行遮罩
溫馨提示:如果您以前從未使用過剪貼蒙版,請不要擔心,因爲該過程本身非常簡單:首先選擇要遮蓋的形狀以及要用作剪貼的形狀 遮罩,然後右鍵單擊並選擇製作剪貼蒙之所以使用剪貼蒙版而不是探路者的“形狀模式”,是因爲“剪貼蒙版”可以更輕鬆,更快速地調整形狀
第5步
使用矩形工具(M)創建一個72×4像素的水平分隔線(#3D3232),我們將其放置在揹包下部的頂部,因爲它將用作輪廓
此時,最好選擇我們到目前爲止創建的所有形狀,然後使用Control+G鍵盤快捷鍵將它們分組在一起
第6步
通過使用40×24 px的圓角矩形和2 px的圓角半徑創建前袋,我們將使用淺灰色(#A39999)對其進行着色,並使用“偏移路徑”爲其賦予相同的4 px粗輪廓(#3D3232)方法,擁有兩種形狀後,將它們放置在揹包的下部,在輪廓之間留出8 px的空隙
第7步
向剛創建的口袋的上部添加一個48×8像素的矩形(#FFEAC5),從下方使用灰色形狀對其進行遮罩,然後向其底部添加一個40×4像素的矩形(#3D3232)
第8步
接下來開始爲口袋繪製細節,首先,抓住矩形工具(M),繪製一個32×2像素的形狀(#3D3232),將其放置在距剛創建的水平輪廓2像素處,將兩者水平對齊
第9步
在上一步中創建的拉鍊線上添加一個帶有2 px圓角半徑的4×6 px圓角矩形(#3D3232),將其朝左側放置,確保隨後將它們分組(Control-G)
第10步
接下來,創建兩個2 px高的矩形(#3D3232),它們具有不同的長度(8 px和4 px),我們將彼此相距2 px,然後朝着前袋的右下角放置
第11步
完成揹包的前袋,添加一個10×8像素的圓角矩形和一個2像素的圓角半徑,然後添加一個稍寬的20×8像素的矩形,使
用#3D3232對其進行着色,然後彼此之間的距離爲2像素,確保隨後將它們放置在上部
在繼續下一步之前,請不要忘記選擇所有口袋的組成形狀,並使用Control + G鍵盤快捷鍵將它們分組在一起
第12步
在前袋全部完成之後,我們可以專注於其周圍的區域,並開始爲其添加細節
因此,選擇矩形工具(M)並創建兩個8×2 px形狀(#3D3232),將其放置在口袋的每一側,在它們與較粗的水平輪廓之間留出4 px的間隙
第13步
添加兩條明細線後,創建另一個72×2像素的矩形(#3D3232),我們將其放置在口袋輪廓的下方,相距2像素
第14步
在仍然選擇“矩形工具”(M)的情況下,創建兩個2×4 px形狀(#3D3232),將它們都放置在我們剛剛創建的水平線下方,並在揹包的每一側
第15步
通過創建兩個彼此相距32 px的8×4 px矩形(#3D3232)來添加皮帶,將其放置在揹包的底部
第16步
通過創建6×28 px矩形(#D8A14A)開始在左側口袋上工作,通過從“變形面板”將其左下角的半徑設置爲2 px進行調整,使用“偏移路徑”方法給它一個4像素的輪廓線(#3D3232),然後放置兩個形狀並在它們與活動圖形區域的底部之間留出16像素的間距
第17步
使用14×8 px矩形(#FFEAC5)創建側袋的上部,將使用下面的黃色形狀對其進行遮罩,在其下面添加另一個6×4 px矩形(#3D3232),該矩形將用作輪廓,然後使用Control + G鍵盤快捷鍵選擇並組合所有其組成的形狀
第18步
抓取我們剛剛創建的一個副本(Control + C> Control + F),然後將其放置在揹包的另一側,以確保通過垂直翻轉(右)進行調整,從而創建第二個側袋 單擊>變換>反射>垂直
第19步
向背包的上部移動幾個像素,然後使用矩形工具(M)創建一個32×4像素的形狀(#3D3232),該形狀將用作拉鍊線,並確保與前端的距離爲12像素口袋
第20步
使用帶有2 px圓角半徑的4×6 px圓角矩形(#3D3232)創建拉鍊滑塊,我們將其定位到上一步中創建的形狀的右側,留出4 px的間隙
由於這兩種形狀都屬於同一部分,因此請選擇它們並進行分組(按Control + G),以免它們被意外分開
第21步
放置輔助拉鍊後,抓住矩形工具(M),然後創建一個16×6像素的形狀(#FFEAC5),它將用作揹包的名稱標籤。 創建4像素輪廓(#3D3232),然後將兩個形狀放置在拉鍊上方,與拉鍊之間的距離爲8像素
第22步
向名稱標籤的中心添加一個12×2 px的小矩形(#3D3232),然後選擇其所有組成元素並將它們分組在一起(Control + G)
第23步
完成揹包圖標,添加頂部手柄,將使用28×24 px的圓角矩形(#3D3232)和12 px的角半徑創建頂部手柄,從中提取較小的20×16 px的8px角半徑使用探路者的減負前形狀模式
添加手柄後,選擇並組合所有圖標元素(Ctrl + G),然後鎖定當前圖層,以便我們可以繼續前進到第三個圖標並開始處理第二個圖標
創建筆記本圖標
假設您已經將自己放置在正確的圖層上,請放大其參考網格,然後開始使用
現在,您可能已經注意到,第二個圖標實際上是由筆記本和筆組成的,這就是爲什麼我們將從創建兩者中的最後一個開始
第1步
抓住矩形工具(M),使用4×76 px形狀創建筆的主體,我們將使用深灰色(#7C7171)進行着色,使用“偏移路徑”方法爲它提供4 px的粗輪廓,然後將兩者朝着活動繪圖區域的左下角放置,向底部保留4 px的間隙,向左保留6 px的較大的間隙
第2步
設置好主要形狀後,使用8×4 px矩形創建下端,使用#3D3232進行着色
第3步
畫一個2×2 px的圓圈,然後畫一個較大的2×8 px的矩形,再畫一個較小的2×4 px的矩形,爲筆的主體添加一些細節,將所有三個形狀彼此隔開2 px,進行分組(按Control + G鍵),然後將其定位到筆的下部
第4步
通過向其主體的上部添加一個帶有4 px輪廓(#3D3232)的8×24 px矩形(#A39999),來創建筆的筆帽,確保輪廓重疊
第5步
通過繪製三個8×2 px的矩形(#3D3232),彼此間隔2 px,開始對頂蓋添加細節,我們將對它們進行分組(Control + G),然後朝其頂部放置2 px的空間間隙
第6步
通過繪製一個4×18 px的矩形,然後是一個較小的2×14 px的矩形,創建一個片段剪輯,使用#3D3232對其進行着色,然後分組(按Control + G)使其與第一條水平細節線對齊
第7步
通過向筆帽的上部添加一個8×8像素的圓圈(#3D3232),結束筆的操作
然後選擇其所有組成元素並將其分組(Control + G),以使它們不會分開
第8步
通過創建一個84×112 px矩形(#F4BD5D)開始在筆記本上工作,通過將其右上角的Radius設置爲8 px進行調整,使用“偏移路徑”方法爲它提供4 px的粗輪廓(#3D3232),然後將兩個形狀朝着筆的右側放置,在它們之間留出4 px的間隙
第9步
使用矩形工具(M)創建一個10×112 px的形狀,使用#FFEAC5對其進行着色,然後朝黃色形狀的左側對齊
第10步
向我們剛剛創建的形狀的右側添加另一個較窄的4×112 px矩形(#3D3232),再向其中心對齊一個較小的2×56 px矩形(#3D3232),確保選擇並 然後將所有三個形狀分組(按Control + G)
第11步
通過創建28行的2×2 px矩形(#D8A14A),在水平和垂直方向上彼此隔開2 px,向其添加微妙的紋理,將所有正方形放置到位後,將它們分組(Control + G),以便可以跟蹤它們,然後將紋理放置在筆記本計算機的黃色部分上
第12步
筆記本圖標的完成,通過添加一條小帶子,繪製一個帶有4 px輪廓(#3D3232)的6×112 px矩形(#A39999)來創建,在上面將添加兩個1×112 px矩形(#3D3232)朝向兩側
完成後,別忘了將錶帶的元素(Ctrl + G)組合在一起,然後將圖標的組合形狀組合在一起,以便它們可以粘在一起
創建計算器圖標
假設您已經鎖定了上一層並移至最後一層,請放大其參考網格,然後通過創建計算器圖標來完成該包
第1步
使用圓角矩形工具,使用具有4 px角半徑的92×112 px形狀(#F4BD5D)創建設備的主體,然後爲其指定4 px輪廓(#3D3232),將這兩個形狀與基礎的中心對齊 參考網格
第2步
通過繪製100×42 px的矩形來創建計算器的上部,使用#FFEAC5進行着色,然後從下方使用黃色形狀進行遮罩
第3步
在我們剛創建的形狀下方添加一個92×4像素的矩形,使用#3D3232對其進行着色,因爲它將用作輪廓
第4步
通過在屏幕上創建68×14像素的矩形(#7C7171),並以4像素的輪廓線(#3D3232)開始工作,然後將其與計算器上部的中心對齊
第5步
繼續前進,然後通過繪製帶有4 px輪廓(#3D3232)的8×4 px矩形(#A39999)開始創建實際的按鈕,分組兩個(Control + G),然後創建四個行,每個行的四個按鈕在水平和垂直方向上的間距均爲4 px
第6步
通過使用直接選擇工具(A)選擇填充矩形,將右按鈕列的顏色更改爲#7C7171
第7步
從底部的行中刪除前兩個按鈕,然後使用28×4 px矩形(#7C7171)創建一個較寬的按鈕,併爲其設置通常的4 px粗輪廓(#3D3232)
由於我們希望整個底部行都具有相同的顏色,因此請將第三個按鈕更改爲#7C7171,然後選擇並分組(按Control + G)
第8步
通過在屏幕下方添加一個圓形的4×4 px重置按鈕(#3D3232)和兩個2 px高的矩形(寬度不同(6和20 px),彼此之間相距2 px)到頂部,結束圖標
完成後,請使用Control + G鍵盤快捷鍵選擇並分組所有圖標的組成形狀
完成啦!