在今天的教程中，我們將采用一個(gè)稍微不同的主題，并學(xué)習(xí)如何創(chuàng)建一些社交媒體圖標(biāo)，使用一些簡(jiǎn)單的形狀，如圓角矩形工具和橢圓結(jié)合Align和Stroke面板的強(qiáng)大功能想要學(xué)習(xí)更多的UI設(shè)計(jì)知識(shí)關(guān)注微信公眾號(hào)liangyuansi1
1.如何設(shè)置新文檔
由于我確定您已經(jīng)啟動(dòng)并在后臺(tái)運(yùn)行Illustrator，因此請(qǐng)使用以下設(shè)置啟動(dòng)它并設(shè)置新文檔（文件>新建或控制-N）：
畫板數(shù)量： 1
寬度： 800像素
高度： 600像素
單位： 像素
并從“ 高級(jí)”選項(xiàng)卡：
色彩模式： RGB
光柵效果：屏幕（72ppi）
預(yù)覽模式：默認(rèn)
快速提示：你們中的一些人可能已經(jīng)注意到缺少“ 將新對(duì)象與像素網(wǎng)格對(duì)齊”選項(xiàng)。那是因?yàn)槲艺谶\(yùn)行新的CC 2017版軟件，其中對(duì)Illustrator 處理形狀捕捉到底層Pixel Grid 的方式進(jìn)行了很大的改變。
2.如何設(shè)置自定義網(wǎng)格
由于我們將使用像素完美的工作流程創(chuàng)建圖標(biāo)，我們需要設(shè)置一個(gè)漂亮的小網(wǎng)格，以便我們可以完全控制我們的形狀 - 如果我們運(yùn)行舊版本的軟件。
步驟1
轉(zhuǎn)到編輯>首選項(xiàng)>指南和網(wǎng)格子菜單，然后調(diào)整以下設(shè)置：
網(wǎng)格線每： 1 px 細(xì)分： 1
第2步
一旦我們?cè)O(shè)置了自定義網(wǎng)格，我們需要做的就是確保我們的形狀看起來(lái)很清晰，這樣就可以在“ 視圖”菜單下找到“ 捕捉到網(wǎng)格”選項(xiàng)，每次進(jìn)入“ 像素預(yù)覽”時(shí)，它都會(huì)轉(zhuǎn)換為“ 捕捉到像素”模式。
3.如何設(shè)置圖層
創(chuàng)建新文檔后，最好使用幾個(gè)層來(lái)構(gòu)建項(xiàng)目，因?yàn)檫@樣我們可以通過(guò)一次關(guān)注一個(gè)圖標(biāo)來(lái)維持穩(wěn)定的工作流程。
話雖如此，打開“ 圖層”面板，共創(chuàng)建五個(gè)圖層，我們將重命名如下：
第1層：參考網(wǎng)格 第2層：Snapchat 第3層：instagram 第4層：youtube 第5層：facebook
4.如何創(chuàng)建參考網(wǎng)格
該 參考網(wǎng)格（或基地電網(wǎng)）是一組精確的界定參考面，這讓我們專注于規(guī)模性和一致性，以建立我們的圖標(biāo)。
通常，網(wǎng)格的大小決定了實(shí)際圖標(biāo)的大小，它們應(yīng)該始終是您在開始新項(xiàng)目時(shí)做出的第一個(gè)決定，因?yàn)槟偸窍Ｍ麖谋M可能小的尺寸開始并在此基礎(chǔ)上進(jìn)行構(gòu)建。
現(xiàn)在，在我們的例子中，我們將使用一個(gè)尺寸創(chuàng)建圖標(biāo)包，更準(zhǔn)確地說(shuō)是128 x 128 px，這是一個(gè)相當(dāng)大的圖標(biāo)包。
步驟1
首先鎖定除引用網(wǎng)格圖層以外的所有圖層，然后抓住矩形工具（M）并創(chuàng)建一個(gè)128 x 128像素的橙色（#F15A24）方塊，這將有助于定義圖標(biāo)的整體大小。
第2步
添加一個(gè)較小的120 x 120 px one（#FFFFFF），它將作為我們的活動(dòng)繪圖區(qū)域，從而為我們提供全面的4 px填充。
第3步
使用Control-G鍵盤快捷鍵對(duì)構(gòu)成參考網(wǎng)格的兩個(gè)正方形進(jìn)行分組，然后在彼此相距40 px的位置創(chuàng)建三個(gè)副本，確保將它們與畫板的中心對(duì)齊。
完成后，鎖定當(dāng)前圖層并轉(zhuǎn)到下一個(gè)圖層，我們將開始處理第一個(gè)圖標(biāo)。
5.如何創(chuàng)建Snapchat圖標(biāo)
我們將通過(guò)為Snapchat的最新成員 - 眼鏡創(chuàng)建一個(gè)圖標(biāo)來(lái)啟動(dòng)該項(xiàng)目，這是最近公布的服務(wù)的延伸。
話雖這么說(shuō)，確保你在正確的層（這將是第二個(gè)），然后放大第一個(gè)參考網(wǎng)格，以便我們可以開始。
步驟1
使用96 x 96 px圓角矩形和16 px Corner Radius創(chuàng)建圖標(biāo)的主要形狀，我們將使用它們進(jìn)行著色#F2CD66，然后將中心對(duì)齊到下面的活動(dòng)繪圖區(qū)域，距離其頂部邊緣4 px。
第2步
通過(guò)創(chuàng)建它的副本（Control-C> Control-F）為形狀提供類似環(huán)狀的高光，我們將通過(guò)將其填充與其筆劃（Shift-X）相比較來(lái)調(diào)整，然后將其顏色設(shè)置為白色（#FFFFFF）并且它的重量為8像素，確保之后將其與內(nèi)部對(duì)齊。
第3步
由于我們希望突出顯示更加微妙，我們需要選擇它然后將其不透明度降低到約30％。
第4步
一旦我們完成了高光調(diào)整，我們可以通過(guò)創(chuàng)建其主要形狀的另一個(gè)副本（Control-C）來(lái)添加圖標(biāo)的主要輪廓，我們將在前面粘貼（Control-F），翻轉(zhuǎn)其填充（Shift-X）使用8 px厚的筆劃， 顏色設(shè)置為#3A2121。
此時(shí)，您還可以選擇并分組（Control-G）所有圖標(biāo)的組成形狀，因?yàn)槿绻枰?，它可以更輕松地處理它們。
第5步
通過(guò)使用56 x 56 px圓形創(chuàng)建其主要形狀開始處理小眼睛，我們將顏色為白色（#FFFFFF）然后居中對(duì)齊到下面的黃色形狀。
第6步
使用32 x 32 px圓圈添加瞳孔 ，我們將使用該圓圈進(jìn)行著色#3A2121 ，然后將中心對(duì)齊到我們?cè)谏弦徊街袆?chuàng)建的白色形狀。
第7步
通過(guò)創(chuàng)建一個(gè)12 x 12像素的圓圈，從瞳孔的左上角添加小切口，我們將使用白色（#FFFFFF）進(jìn)行著色，然后使用“ 對(duì)齊”面板對(duì)齊其左下邊緣。
第8步
通過(guò)創(chuàng)建其白色圓圈的副本（Control-C）給眼睛一個(gè)微妙的內(nèi)部陰影，我們將在前面粘貼（Control-F），然后通過(guò)翻轉(zhuǎn)其填充（Shift-X）以及8 px厚的筆劃進(jìn)行調(diào)整（#3A2121），確保將對(duì)齊設(shè)置為內(nèi)部，然后將其不透明度降低到20％。
第9步
通過(guò)在主體上添加8 px厚的輪廓（#3A2121）來(lái)完成眼睛，然后使用Control-G鍵盤快捷鍵選擇所有組成部分并將其組合在一起。
完成后，對(duì)整個(gè)圖標(biāo)執(zhí)行相同操作。
第10步
通過(guò)添加88 x 10 px橢圓完成圖標(biāo)，我們將使用該橢圓進(jìn)行著色#3A2121 ，然后將中心對(duì)齊到底層活動(dòng)繪圖區(qū)域的底部邊緣。
第11步
通過(guò)將橢圓形不透明度降低到 30％，將橢圓變?yōu)榧?xì)微陰影，然后選擇它和圖標(biāo)，并使用Control-G 鍵盤快捷鍵將兩者組合在一起。
6.如何創(chuàng)建Instagram圖標(biāo)
假設(shè)你已經(jīng)設(shè)法完成了第一個(gè)圖標(biāo)，鎖定它的圖層并繼續(xù)前進(jìn)到下一個(gè)圖標(biāo)（這將是第三個(gè)圖標(biāo)），讓我們開始處理第二個(gè)圖標(biāo)，即Instagram圖標(biāo)。
步驟1
首先使用96 x 96 px圓角矩形創(chuàng)建圖標(biāo)的主要形狀，其中我們將使用26 px Corner Radius進(jìn)行著色#E5C2AA，然后將中心對(duì)齊到距離其頂部邊緣4 px的下方活動(dòng)繪圖區(qū)域。
第2步
使用96 x 40 px矩形（#B76F58）創(chuàng)建主體的上部較暗部分，我們將居中對(duì)齊到底層形狀的上邊緣，然后通過(guò)將其頂角的半徑設(shè)置為26 px進(jìn)行調(diào)整。
第3步
正如我們對(duì)Snapchat圖標(biāo)所做的那樣，通過(guò)創(chuàng)建較大形狀的副本（Control-C）并將其粘貼在前面（Control-F），以8 px翻轉(zhuǎn)其填充（Shift-X）來(lái)添加類似環(huán)的高光面向內(nèi)部的筆觸，顏色設(shè)置為白色（），不透明度設(shè)置為 30％。 #FFFFFF
第4步
有了亮點(diǎn)，使用另一個(gè)副本（創(chuàng)建圖標(biāo)的主要輪廓控制-C的主要形態(tài)，我們將在前面（粘貼）控制-F ），然后通過(guò)與翻轉(zhuǎn)其填充調(diào)整8 PX厚中風(fēng)與顏色設(shè)置為#3A2121。
第5步
使用鋼筆工具（P），在水平分隔線中繪制，將圖標(biāo)的兩個(gè)部分分開，使用8 px厚的筆觸，顏色設(shè)置為#3A2121。
第6步
在仍然選擇鋼筆工具（P）的情況下，使用4 px厚的筆觸，從分割線下方繪制細(xì)微的高光，顏色設(shè)置為白色（#FFFFFF），不透明度 為30％。
第7步
抓住橢圓工具（L）并創(chuàng)建一個(gè)12 x 12像素的圓圈，我們將使用它來(lái)著色#3A2121，然后在圖標(biāo)的右上角定位，在它與較大的輪廓之間留出10像素的間隙。
完成后，使用Control-G鍵盤快捷鍵選擇并分組到目前為止我們擁有的所有形狀。
第8步
通過(guò)創(chuàng)建一個(gè)44 x 44像素的橢圓開始處理鏡頭，我們將使用它進(jìn)行著色#564141 ，然后將中心對(duì)齊到圖標(biāo)的主體。
第9步
使用較小的16 x 16 px圓圈創(chuàng)建鏡頭的內(nèi)部較暗部分，我們將使用該圓圈進(jìn)行著色#3A2121，然后將中心對(duì)齊到下面的較大形狀。
第10步
通過(guò)創(chuàng)建一個(gè)較大圓圈的副本（Control-C）給鏡頭一個(gè)微妙的內(nèi)部反射，我們將在前面粘貼（Control-F）然后通過(guò)翻轉(zhuǎn)其填充（Shift-X）調(diào)整內(nèi)部厚度為8 px -facing Stroke，顏色設(shè)置為白色（#FFFFFF），不透明度為 20％。
第11步
在鏡頭的右上角添加另一個(gè)較小的反射，創(chuàng)建一個(gè)6 x 6像素的圓圈，顏色設(shè)置為白色（#FFFFFF），不透明度設(shè)置為20％，將其定位在較暗的中心，使其超出它的范圍由2像素在每一側(cè)上。
第12步
通過(guò)添加8 px粗輪廓（#3A2121）完成鏡頭，然后選擇并分組（Control-G）其所有構(gòu)圖形狀。
完成后，通過(guò)選擇和分組（Control-G）所有組成部分，對(duì)整個(gè)圖標(biāo)執(zhí)行相同操作。
第13步
通過(guò)添加細(xì)微陰影來(lái)完成圖標(biāo)，我們將使用88 x 10像素橢圓創(chuàng)建，顏色設(shè)置為#3A2121，不透明度為20％。
與往常一樣，在轉(zhuǎn)到下一個(gè)圖標(biāo)之前，不要忘記選擇并分組（Control-G）所有圖標(biāo)的組成部分。
7.如何創(chuàng)建YouTube圖標(biāo)
假設(shè)你已經(jīng)移動(dòng)到下一層（那將是第四層），放大第三個(gè)參考網(wǎng)格，讓我們開始吧。
步驟1
首先使用96 x 96 px圓角矩形創(chuàng)建圖標(biāo)的主要形狀，使用26 px Corner Radius，我們將使用它進(jìn)行著色#ED6F56，然后將中心對(duì)齊到活動(dòng)繪圖區(qū)域，距離其頂部邊緣4 px。
第2步
通過(guò)創(chuàng)建其主要形狀的副本（Control-C），我們將在前面粘貼（Control-F），然后通過(guò)翻轉(zhuǎn)其填充（Shift-X）進(jìn)行調(diào)整，添加內(nèi)部高亮，就像我們對(duì)所有其他圖標(biāo)一樣）使用8 px厚的筆劃，顏色設(shè)置為白色（#FFFFFF），不透明度 為30％。
第3步
為圖標(biāo)添加一個(gè)很好的厚8像素輪廓，將描邊顏色設(shè)置為#3A2121，然后使用Control-G鍵盤快捷鍵選擇并將所有組成形狀組合在一起。
第4步
通過(guò)創(chuàng)建一個(gè)38 x 40 px矩形開始處理小游戲箭頭，我們將使用白色（#FFFFFF）進(jìn)行著色，然后將中心對(duì)齊到下面的紅色形狀，然后稍微向右推（約3 px）。
第5步
將矩形轉(zhuǎn)為右向箭頭，方法是使用添加錨點(diǎn)工具（+）將新錨點(diǎn)添加到其右邊緣的中心，然后使用刪除錨點(diǎn)工具（ - ）刪除其右上角和右下角。。
第6步
通過(guò)創(chuàng)建它（復(fù)印件給箭頭的輪廓線控制-C>控制-F ），我們將通過(guò)它的顏色設(shè)置，調(diào)整#3A2121 ，然后翻轉(zhuǎn)其填充有8 PX厚的行程與角設(shè)置為圓形加入。
完成后，使用Control-G鍵盤快捷鍵選擇并將兩者組合在一起，然后對(duì)圖標(biāo)的組成部分執(zhí)行相同操作。
第7步
通過(guò)添加微小的陰影完成圖標(biāo)，我們將使用88 x 10像素橢圓創(chuàng)建，我們將使用#3A2121它進(jìn)行著色，將其居中對(duì)齊到活動(dòng)繪圖區(qū)域的下邊緣，確保將其不透明度降低到20％。
完成后，不要忘記選擇并將（Control-G）所有圖標(biāo)的組成部分組合在一起。
8.如何創(chuàng)建Facebook圖標(biāo)
我們現(xiàn)在是第四個(gè)也是最后一個(gè)圖標(biāo)，因此請(qǐng)確保將自己定位到最后一個(gè)圖層，然后放大其參考網(wǎng)格，以便我們可以將內(nèi)容包裝起來(lái)。
步驟1
使用96 x 96 px圓角矩形和16 px Corner Radius創(chuàng)建圖標(biāo)的主要形狀，我們將使用它們進(jìn)行著色#5D92D1，然后將中心對(duì)齊到活動(dòng)繪圖區(qū)域，距離其頂部邊緣4 px。
第2步
通過(guò)創(chuàng)建它的副本（Control-C> Control-F）為形狀賦予內(nèi)部高光，我們將通過(guò)用8 px筆劃翻轉(zhuǎn)其填充（Shift-X）來(lái)調(diào)整，將顏色設(shè)置為白色（）和然后將其不透明度降低到30％。#FFFFFF
第3步
使用其身體的另一個(gè)副本（Control-C）創(chuàng)建圖標(biāo)的主輪廓，我們將在前面粘貼（Control-F），然后通過(guò)將其顏色設(shè)置為#3A2121，然后用8翻轉(zhuǎn)其填充（Shift-X）進(jìn)行調(diào)整px厚 中風(fēng)。
完成后，使用Control-G鍵盤快捷鍵選擇并將所有三個(gè)形狀組合在一起。
第4步
通過(guò)創(chuàng)建一個(gè)14 x 78 px矩形開始處理字母“F” ，我們將顏色為白色（#FFFFFF）然后底部對(duì)齊到底層藍(lán)色形狀的可見部分，將其定位到圖標(biāo)的右側(cè)，在距離較大輪廓的距離為26 px。
第5步
創(chuàng)建一個(gè)較小的16 x 14 px矩形（#FFFFFF）并將其放置在上一步的形狀的右上角。
第6步
使用44 x 14 px矩形創(chuàng)建橫桿，我們將顏色為白色（#FFFFFF），然后右對(duì)齊我們?cè)谏弦徊街袆?chuàng)建的形狀，將其定位在距離它16 px的 位置。
第7步
選擇所有字母的部分，并且將它們組合成用一個(gè)更大的形狀探路者的團(tuán)結(jié)成形模式，刪除多余的一個(gè)錨點(diǎn)使用過(guò)程中產(chǎn)生刪除錨點(diǎn)工具（ - ） 。
第8步
雙擊生成的形狀進(jìn)入隔離模式，然后通過(guò)選擇其左上角并使用頂部欄中的實(shí)時(shí)角落 功能將其半徑設(shè)置為16像素來(lái)開始調(diào)整。
第9步
接下來(lái)，從字母的橫桿上方選擇一個(gè)角，并通過(guò)將其半徑設(shè)置 為6像素進(jìn)行調(diào)整。
第10步
最后，選擇橫桿的右下角，然后使用移動(dòng)工具將其向內(nèi)推2 px（右鍵單擊>變換>移動(dòng)>水平> -2 px）。
完成后，按Escape退出隔離模式，然后選擇并將（Control-G）所有圖標(biāo)的組成部分組合在一起。
第11步
通過(guò)添加細(xì)微陰影來(lái)完成圖標(biāo)，我們將使用具有20％不透明度的相同88 x 10像素橢圓（#3A2121）創(chuàng)建，我們將居中對(duì)齊到活動(dòng)繪圖區(qū)域的下邊緣。
完成后，選擇所有圖標(biāo)的合成部分，并使用Control-G鍵盤快捷鍵將它們組合在一起。
這是一個(gè)包裝！
你有它：一個(gè)超級(jí)簡(jiǎn)單的教程，如何使用你可能已經(jīng)每天使用的一些簡(jiǎn)單的形狀和工具創(chuàng)建你自己的社交媒體圖標(biāo)包。我希望你已經(jīng)成功地遵循了每一步，并且一如既往地學(xué)到了一些新的和有用的東西。
學(xué)習(xí)UI加微信l543597299
30
作品
37
粉絲
3
關(guān)注
分享能獲取更多贊？
密碼登錄
大牛，別默默的看了，快登錄幫我點(diǎn)評(píng)一下吧！:)
登錄 立即注冊(cè)