今天給大家?guī)硪粋€有些老的教程，但是練習技法什么的還是不會老哈！

步驟1

我們可以創(chuàng)立兩個文件圖層，一個叫背景，一個叫游戲機，然后我們確保位于正確的圖層上,然后使用矩形工具 (M) 創(chuàng)建一個800 x 600px的形狀,我們將使用#F96969進行著色,然后使用”對齊”面板的”水平和垂直對齊中心”來對齊畫板的中心位置。

步驟2

完成后,鎖定當前圖層,然后我們到下一個繼續(xù)圖層繪制,這個時候我們就將開始繪制我們的游戲機了。

2.創(chuàng)建游戲的正面底部

有了背景,我們現(xiàn)在可以專注于我們的小游戲機了,我們將使用Illustrator 的一些基本形狀創(chuàng)建該游戲機。我們將首先繪制設備的正面部分,完成后將會繪制側面的厚度部分。

步驟1

開始繪制設備的主體,創(chuàng)建一個144 x 232px 矩形的圓角為 8px,我們將使用#EDE4E4來著色。

步驟2

使用直接選擇工具 (A),選擇形狀的右下角,并通過在變換面板的矩形屬性將其半徑設置為 32 px 來調(diào)整其圓度。

步驟3

創(chuàng)建游戲機的側面部分,選中我們現(xiàn)在繪制好的形狀的副本(ctrl-C + ctrl-B),并將其向左移動 24 px,確保將其顏色更改為較暗一些的顏色(#DDCCCC)。

步驟4

創(chuàng)建一個游戲機主形狀的副本 (Ctrl-C), 并將其粘貼到原位 (Ctrl-F),然后通過進入對象 > 路徑 >偏移路徑，并將偏移的值設置為-4px。

步驟5

我們將使用此偏移來創(chuàng)建外部的高光,通過選擇它的副本,然后使用路徑查找器的減去頂層形狀模式來切掉不要的部分。然后,選擇生成的形狀并將其顏色更改為白色(#FFFFFF),將其混合模式設置為”變亮”,并將其不透明度降低到 40%。

步驟6

此時,最好使用 Ctrl-G 鍵盤快捷鍵把做好的元素打組,從而將游戲機的正面與其側面部分分開。這樣,我們只需雙擊分組對象就可以進入隔離模式,然后就可以向其添加新的東西。使用矩形工具 (M), 創(chuàng)建一個 144 x 4 px 水平分隔線 (#D8C5C5), 我們將會設置一個距離游戲機的頂部16px的間隙.

步驟7

在它上方添加另一個更暗的144 x 2 px 矩形(#C1A8A8),當添加完第二條水平分隔線后,選擇它和較粗的線,并使用 Ctrl-G 鍵盤快捷鍵將它們組合在一起。

步驟8

接下來,我們將在我們剛才創(chuàng)建的兩條水平分隔線上添加兩個 6 x16px 的矩形 (#D8C5C5),將每個矩形放置在正面邊緣距離中心12 px的地方。

步驟9

將剛才繪制的矩形放在其頂部,然后將它們 (Ctrl-G) 打組,這樣就不會因意外而讓他們錯位。

步驟10

使用矩形工具 (M), 再創(chuàng)建兩個 2 x 10 px 形狀,我們將使用白色(#FFFFFF)著色,然后定位到每個垂直分隔器的左側,確保將其混合模式調(diào)整為”變亮”,并將其不透明度降低到 40%。

步驟11

接下來,我們將開始繪制關閉/打開開關,創(chuàng)建一個10 x 4px 矩形 (#D8C5C5),將其對齊正面的頂部部分,并將其定位到第一個垂直分隔器的右側。

步驟12

使用圓角矩形工具,創(chuàng)建具有4px 圓角的28 x 8px的形狀(#D8C5C5),然后添加一個較小的20 x 4px圓角矩形(#EDE4E4),其頂部圓角半徑為2px。

步驟13

創(chuàng)建兩個2 x 4px的矩形 (#EDE4E4),然進行圓角處理，然后放到圖片中對應的位置。

步驟14

使用三個2 x 2px的矩形(#C1A8A8)作為陰影,從而賦予此部分更多立體感。

步驟15

通過添加一些細節(jié)(如垂直線下方的陰影)來完成開關,重復使用我們已有的形狀,通過將其顏色設置為#C1A8A8來調(diào)整它們。添加陰影后,不要忘記將細微的高光繪制到開關的按鈕上半部分,使用白色(#FFFFFF),為混合模式提供”變亮”,為”不透明度”設置為 40%。

步驟16

在較寬的水平分隔線下方添加一個 136 x 2px (#FFFFFF) 矩形,通過將混合模式設置為”變亮”并將其不透明度降低到 40%,我們將其作為高光。到現(xiàn)在,我們幾乎完成了游戲機的上半部分,這意味著我們現(xiàn)在可以專注于創(chuàng)建顯示器了,這是所有的樂趣發(fā)生的地方。

步驟17

選擇圓角矩形工具,創(chuàng)建一個 88 x 120px 的形狀,具有 4 px 的圓角半徑,我們將使用#7E7E89進行著色,然后將其定位在水平高光下方具有4 px 的距離的位置。

步驟18

顯示屏就位后,我們必須稍微調(diào)整一下,將其右下角半徑設置為 20 px,而不是用默認的4px。

步驟19

使用前面創(chuàng)建正面的方法創(chuàng)建顯示器的厚度感,然后選擇形狀并將其顏色更改為黑色#000000,將其不透明度降低到 20%。

步驟20

在使用類似的過程,添加一個2 px寬的內(nèi)部高光,使用白色(#FFFFFF),為混合模式為”變亮”,不透明度為 20%。

步驟21

在矩形工具 (M) 的幫助下,創(chuàng)建一個 80 x 64px 的形狀,我們將使用#82874D進行著色,因為它將充當顯示器的活動區(qū)域,并將其放置在灰色圖形上,確保將其與其中心對齊。

步驟22

通過使用偏移路徑工具繪制4 px 厚的內(nèi)陰影(顏色:黑色)為屏幕提供一些厚度感然后不透明度設置為20%。

步驟23

添加陰影后,選擇筆工具 (P) 并跟隨幾個對角線繪制高光,使用白色(#FFFFFF)作為填充顏色,將混合模式設置為柔光,并將不透明度降至40%。

步驟24

此時,屏幕已接近完成。我們現(xiàn)在需要做的是添加一些小點綴在游戲機上面,然而你可以使用#6B6B75來著色。

步驟25

通過添加兩對白色垂直矩形來作為高光，將其混合模式改為:變亮; 不透明度:20%,然后選擇其所有組合元素,并使用 Ctrl-G 鍵盤快捷鍵將它們打組在一起。

步驟26

使用橢圓工具 (L) 創(chuàng)建一個 44 x 44 px 的圓圈 (#DDCCCC),他將距離屏幕底部大約 24 px。

步驟27

創(chuàng)建一個垂直的14 x 36 px 圓角矩形 (#6B6B75),其圓角半徑為2px ,我們將添加副本并旋轉他,確保將它們居中到基礎圓的中心。

步驟28

通過添加一個 12 x 12px 的圓圈(#5E5E68),為按鈕提供一些厚度感。我們將圓放置在中心位置。

步驟29

通過添加幾個白色矩形來作為高光，然后混合模式:變亮，不透明度: 20%，和陰影(顏色:#BAA0A0),然后將它們組合在一起(Ctrl-G)。

步驟30

由于我們將再添加幾個按鈕,因此現(xiàn)在最好添加垂直高光,這樣我們就不必在創(chuàng)建后將它們調(diào)整到后面。因此,使用矩形工具 (M) 創(chuàng)建四對高光,對填充顏色使用白色 (#FFFFFF),將混合模式設置為”變亮”,并將不透明度降低到 40%,并將它們定位到游戲機的右側。

步驟31

添加高光后,您可以選擇橢圓工具 (L), 并用它來創(chuàng)建兩個16 x 16px的按鈕(#A86578),我們會將他放置在距離游戲機的右側36px與距離底部62px的位置。（其中一個按鈕）

步驟32

通過創(chuàng)建一個白色的半圓來作為高光，然后混合模式為:變亮，不透明度為: 20%，并使用形狀的副本來作為小陰影,我們將使用#DDCCCC進行著色,然后使用 Ctrl-G 鍵盤快捷鍵將所有按鈕元素組合在一起。

步驟33

把我們剛才的按鈕復制一份放到下圖差不多的位置即可

步驟34

選擇鋼筆工具 (P),并使用8px帶圓角的描邊 (#7E7E89),繪制一條將用作選擇按鈕的斜線。

步驟35

給按鈕繪制一個的高光，使用白色大小為2px的線，記得線要用圓角的哦，底層陰影(顏色:#DDCCCC，大小為8px。將它們打組(ctrl-G),并在大約相距4px的位置處創(chuàng)建副本。

步驟36

在游戲機的右下角添加小揚聲器格柵,繪制六條 4px 粗細的描邊線 (#AD9C9C),帶有圓角的哦。

步驟37

做好了之后我們可以吧之前做的那個開關放置到底部這里來，如圖的位置！這樣我們的游戲機就差不多做完了。然后我們需要繪制一個圓角矩形！放置到方向鍵的上面。如圖所示！

3. 將添加一些細節(jié)到游戲機的側面

此時,我們幾乎完成了在游戲機正面的工作,這意味著我們現(xiàn)在可以專注于它的側部。

步驟1

選擇正面部分的主高光的副本,并將其粘貼到側面,確保將其與左側對齊,其不透明度設置為60%,然后打組 (Ctrl-G) 并將它們同時放到到背面(右鍵單擊>排列>發(fā)送到底部。

步驟2

創(chuàng)建游戲機正面部分的副本(Ctrl-C + Ctrl-F),然后對其應用 4px 的偏移,我們將在副本的幫助下來創(chuàng)建新的圖形。然后,將生成的形狀的顏色更改為#BAA0A0,并將其放到其左側,使其與游戲機側面可見區(qū)域的中心對齊。

步驟3

現(xiàn)在我們需要把多余的部分用剪切蒙版去掉！對于剪切蒙版的用法不清楚的小伙伴可以看看我以前的教程哦！

步驟4

使用矩形工具 (M) 創(chuàng)建一個 10 x 4px 的形狀,我們將使用#BAA0A0進行著色。

步驟 5

接下來,在我們剛剛創(chuàng)建的水平分隔線上方添加一個10 x 2px的矩形作為陰影(#A58888),并在下面繪制10 x 2 px的白色矩形作為高光，混合模式:變亮，不透明度: 60%。

步驟6

選擇矩形工具 (M) 并創(chuàng)建10 個8 x 2 px形狀,我們將使用#A58888進行著色,并彼此垂直分布6px,確保將它們到游戲機的底部有48px。

步驟7

使用我們剛剛創(chuàng)建的矩形組,并將它們下移2px,將其顏色更改為#BAA0A0，這些圖像更有厚度感！

步驟8

通過在我們剛剛創(chuàng)建的線條下面添加第三個副本來完成側格柵的高光,我們需要通過將寬度從8px 更改為4px 來調(diào)整這些矩形。然后,將其顏色更改為白色(#FFFFFF),并將混合模式設置為”變亮”,同時將其不透明度降至 60%。

步驟9

如果你已經(jīng)到達了最后一步,這意味著你已經(jīng)成功地完成了我們的小游戲機?，F(xiàn)在我們要創(chuàng)建一個陰影,只需選擇橢圓工具 (L) 并繪制一個 148 x 16 px 的橢圓,我們將使用較深的紅色 (#DD5252) 著色,然后放在游戲機下方,距離它 12 px的位置就好了。

原文地址：ENVATO TUTS+

譯文地址：UI中國

作者：Andrei Stefan

譯者：米夏小雨

在這個教程中，我們將告訴大家，如何設置簡單的網(wǎng)格，使用使用簡單的矩形和變換效果。

同樣的我們也提供一個AI源文件供大家下載，以便學習與交流！

點擊下載AI源文件   提取碼8owx

一. 如何創(chuàng)建新文檔并設置網(wǎng)格

1. 首先，我們新建文檔，寬度850px，高度900px，顏色模式RGB。

2. 執(zhí)行“視圖”>“顯示網(wǎng)格”“對齊網(wǎng)格”。

3. 執(zhí)行“編輯>首選項>參考線和網(wǎng)格>”。

4. 設置網(wǎng)格線間隔為10px，次分隔線為1。

5. 執(zhí)行“編輯>首選項>單位”。

6. 將單位都設置為像素。

7. 執(zhí)行“窗口”，勾選“信息”。

二. 如何創(chuàng)建彩虹背景

8. 選擇矩形工具，創(chuàng)建一個 850 x 150 像素的矩形，剛才我們勾選了信息，我們可以很方便的查看矩形的位置，選擇填充并將其顏色設置為R = 255 G = 0 B = 0。有了網(wǎng)格與信息，將矩形對齊，將是一個非常簡單的事情。

9. 確保選中矩形，然后執(zhí)行“效果>扭曲和變換>變換”。

10. 將“ 移動 – 垂直”滑塊拖動到150像素，在“ 副本”輸入字段中輸入5，然后單擊“ 確定”。

11. 確保仍然選中矩形，執(zhí)行“對象>擴展外觀”。

12. 然后取消組合。

13. 接下來，我們逐個選擇矩形，并用下面顯示的填充顏色替換現(xiàn)有的填充顏色。

三. 如何創(chuàng)建文本效果框架

14. 選擇矩形工具，并創(chuàng)建一個380 x 440像素的形狀。用白色填充這個新形狀（R = 255 G = 255 B = 255）并將其放置如下所示。

15. 選擇路徑選擇工具，并選擇白色矩形，執(zhí)行“效果>風格化>圓角”。

16. 在圓角半徑選項中輸入 10px。

17. 選擇矩形工具，并創(chuàng)建一個340 x 400像素的形狀。用 R = 255 G = 0 B = 0 填充這個新矩形，將其不透明度降低到30％左右，并將其放置如下圖所示。

四. 如何創(chuàng)建和對齊文本效果

18. 選擇“文本工具”，添加我們的文本，顏色設置為黑色，效果如下所示。

19. 選擇文本，右鍵“創(chuàng)建輪廓”。

20. 執(zhí)行“對象>取消編組”。

21. 下面，我們適當?shù)臑槲谋具M行對齊。

22. 選擇紅色矩形，然后將其刪除。

五. 如何樣式化文本效果

23. 執(zhí)行“窗口”，勾選“路徑查找器”，選擇所有字母形狀和白色形狀，然后單擊“ 分割”按鈕。

24. 逐個選擇字母形狀，并粗略地調(diào)整旋轉，如下圖所示。

25. 選擇所有白色形狀，將它們轉換為復合路徑（對象>復合路徑>建立）。

26. 復合路徑建立完后，我們將其置于頂層。

27. 下面，選擇住這些黑色文本形狀，也給它們應用一個10像素的圓角。

28. 不要取消這些黑色文本形狀，然后執(zhí)行“效果>風格化>陰影”。（這里的截圖有問題，黑色文本已經(jīng)是圓角了，我沒有重新截圖，見諒）

29. 投影的參數(shù)設置，如下圖所示。（這里的截圖有問題，黑色文本已經(jīng)是圓角了，我沒有重新截圖，見諒）

30. 同樣的，我們選擇白色形狀，也給它添加一個陰影。

31. 投影的參數(shù)設置，如下圖所示。

最終效果

先看看效果圖

設置新文檔

首先創(chuàng)建一個新文檔(文件>新建或控制+ N)，并進行以下設置：

畫板數(shù)量： 1

寬度： 1200像素

高度： 640像素

單位：像素

進入“ 高級”選項卡：

色彩模式： RGB

光柵效果：屏幕(72 ppi)

設置圖層

創(chuàng)建好了新文檔，接下來創(chuàng)建圖層。

打開“ 圖層”面板，創(chuàng)建兩個圖層，將其命名如下：

第1層>背景

第2層>火車

創(chuàng)建背景

圖標開始之前我們首先創(chuàng)建背景圖層

第1步

選擇矩形工具(M)創(chuàng)建一個1200×640 px矩形，使用#EA7B54進行著色，然后選擇“ 對齊”面板的“ 水平”和“ 垂直對齊中心”選項，將其中心對齊到底層的“ 畫板”。

第2步

創(chuàng)建一個808×16 px矩形作為鐵軌，使用#434F59進行著色，然后定位距離畫板底部邊緣108 px的位置。

第3步

創(chuàng)建兩個16×16 px圓圈(以綠色突出顯示)并將它們放置在矩形的兩邊，然后使用路徑查找器減去多余部分。

第4步

使用Shift + X鍵盤快捷鍵將生成的形狀轉換為輪廓，然后在“ 筆觸”面板中將“ 筆觸的權重”設置為8 px，將“ 角”設置為“ 圓形”。

第5步

創(chuàng)建17個8×8像素正方形(#434F59)作為鐵軌上的小螺栓，將彼此間隔調(diào)整為36 px，將它們定位在軌道的下邊緣。然后選擇它們和鐵路使用Control + G鍵盤快捷鍵將它們組合在一起。

第6步

完成了背景的繪制，我們可以鎖定它的圖層然后繼續(xù)進行下一步開始構建火車的圖層。

創(chuàng)建火車底盤

完成了鐵軌的繪制，我們就可以開始繪制火車的底盤部分了。

第1步

創(chuàng)建火車底盤的主形狀，首先建立508×16像素的矩形調(diào)整8像素的輪廓(#434F59)，我們將其定位在距離鐵軌左邊緣84像素，上方88像素的位置。

第2步

創(chuàng)建兩個相距4 px的4×4 px圓(#434F59)給火車底盤上添加第一對螺栓，我們將分組(Control + G)，然后定位到底盤的左側，如參考圖像所示。

第3步

創(chuàng)建六組由兩個4×4 px圓圈(#434F59)組成的螺栓，放置到參考圖像中的位置。完成后，使用Control + G鍵盤快捷鍵選擇并將所有螺栓和底盤組合在一起。

創(chuàng)建火車頭的后端

一旦我們完成底盤的工作，我們就可以繪制火車頭的后端了。

第1步

首先創(chuàng)建一個176×112像素的矩形，添加一個8 px的輪廓(#434F59)，將定位它在底盤上方，距離其左邊緣4 px。

第2步

創(chuàng)建24×48像素矩形(#434F59)放置在先前創(chuàng)建的形狀的左側，將兩者的邊緣對齊。

第3步

選擇鋼筆工具(P)創(chuàng)建一條”L”形狀8 px的圓角線條(#434F59)。

第4步

創(chuàng)建8 px輪廓(#434F59)的64×120 px矩形作為棚頂支柱，調(diào)整到距離下部矩形左邊緣40 px的位置。

第5步

創(chuàng)建一個160×24像素的矩形，使用#434F59進行著色，然后定位到參考圖像中看到的位置。

第6步

創(chuàng)建168×8 px矩形(#434F59)添加水平的細節(jié)裝飾，然后在其上方添加9個8×16像素的較小矩形(#434F59)，將彼此間隔調(diào)整為8 px。完成所有形狀后，使用Control + G鍵盤快捷鍵選擇并分組，然后再繼續(xù)下一步。

第7步

創(chuàng)建16×112 px矩形(#434F59)創(chuàng)建車廂陰影，將其與當前部分的右邊緣對齊，然后使用直接選擇工具(A)選擇其左下錨點進行調(diào)整，使用“ 移動”工具向外移動16像素(右鍵單擊>“變換”>“水平”> -16像素)。完成后，使用Control-G鍵盤快捷鍵選擇所有形狀組合在一起。

第8步

創(chuàng)建84×36像素大小8 px輪廓的矩形(#434F59)創(chuàng)建車廂上的小箱子，將其定位在火車車身上，距離車身左邊緣20 px的位置。

第9步

創(chuàng)建一個較小的84×12像素、8 px的矩形(#434F59)放置到箱子的上半部分，將其放置到上一個形狀的頂部，使它們的輪廓重疊。

第10步

花一些時間在箱子上添加一些細節(jié)，例如4×4 px螺栓(#434F59)和12×16 px鎖(#434F59)，使用參考圖像作為參考。完成后，選擇并分組(Control + G)所有的組成形狀，然后再繼續(xù)下一步。

第11步

創(chuàng)建較小的8×52 px矩形(#434F59)創(chuàng)建箱子陰影，選擇左下錨點并向外推動8 px(右擊>變換>移動>水平> -8來調(diào)整px)。完成后，將生成的形狀放在箱子邊框的左側，選擇并將兩者組合在一起(Control + G)，然后再轉到下一步。

創(chuàng)建火車的車廂

一旦我們完成了火車后端的工作，我們可以向右移動幾個像素開始創(chuàng)建艙室。

第1步

首先創(chuàng)建一個8 px輪廓(#434F59)136×232 px矩形，將其定位到機箱上，確保其左邊緣與前一部分的右邊緣重疊。

第2步

創(chuàng)建一個112×88像素的矩形(#434F59)添加窗口，將矩形堆疊在一個120×8像素(#434F59)的矩形上方，將兩個矩形選擇并進行分組(Control + G)，然后定位在距離車艙中心16 px的位置。

第3步

創(chuàng)建8×28 px矩形作為門把手，使用#434F59進行著色，然后如參考圖像中所示定位到車艙的左側。

]]> http://m.createwh.com/50923.html/feed 0 http://m.createwh.com/50841.html http://m.createwh.com/50841.html#respond Thu, 27 Jun 2019 09:05:30 +0000 今天和大家分享一個實用的illustrator海報設計教程，主要是實現(xiàn)客戶經(jīng)常說的大氣、科技感的效果，效果圖如下，是不是看起來很復雜的樣子？不用擔心，其實也就簡幾步就能實現(xiàn)，沒什么復雜的技法，會AI基礎的同學就能制作出來哦，下面我們一起來學習吧！

這里涉及到的第一個知識點就是畫圓點虛線，在 Ai里畫圓點虛線的方法有好幾個，這里給大家分享一個最簡單的。

第一步：用鋼筆工具隨意畫一條線，在描邊面板中把描邊的粗細數(shù)值設為5；

第二步：把描邊的端點改成圓角；

第三步：勾選虛線選項，然后把虛線數(shù)值改為0，間隙數(shù)值設為6，圓點虛線就做好了。

效果如下：

原理：線是由無數(shù)個點沿著一條路徑排列而成的，當把畫筆的端點設置成圓角時，就代表這條直線是由圓點組成的，只是因為每個圓點挨的非常近，所以看起來就像一條線。而勾選虛線選項就是為了使這些圓點分開，虛線的數(shù)值表示虛線的長度，我們只需要維持圓點本身的狀態(tài)，所以這里的數(shù)值要設置成0。畫筆的粗細值就是圓點的直徑，而間隙就是指相連兩個圓點的圓心之間的距離，當間隙的距離等于圓點的直徑時，這兩個圓點正好想切。所以間隙距離必須大于圓點的直徑才能成為真正的虛線。

第二個知識點就是混合工具，這個大家應該都有所了解，我就簡單的說一下。

第一步：在畫板里畫一個圓圈，然后在它的外圍畫兩個扭扭曲曲的線框，如下圖，（其實只要兩個對象就能就能做混合效果，不過對象越多變化會越豐富，當然也更難控制）：

第二步：同時選中這三個圖形，然后在菜單欄的對象中選擇混合-建立，就得到了如下效果。

提示：我們還可以雙擊工具欄中的混合工具，在間距選項中點選“指定步數(shù)”選項來修改步數(shù)。

搞清楚了圓點虛線和混合工具后，前面所說的那張海報就水到渠成了，我們只需在把已經(jīng)畫好的輪廓圖形的描邊參數(shù)改成如下就好了。首先我們來設置最里面的圓圈的參數(shù)，虛線數(shù)值為0，間隙為5。

然后再來設置外圍兩個線框的參數(shù)，中間線框的間隙參數(shù)設為7，最外線框的間隙參數(shù)設為9，這么做是為了虛線的間隙從里往外變得越來越大。

調(diào)整好參數(shù)后就得到了如下效果，如果對輪廓的形狀不滿意，還可以用直接選擇工具，拖動外輪廓上的錨點和手柄來調(diào)節(jié)形狀。

調(diào)整后大致效果如下，中間部分變化比較小，外圍部分變化比較豐富。

調(diào)整好后把圖形復制到Ps中填充顏色，具體顏色大家可以自由發(fā)揮。

最后再把圖形周圍用蒙板擦一下，使其融進背景里，搭配一點文字就完成了，最終效果和原圖會有所差別，但方法就是這樣。

第二個我要分享的技巧是如何做出用圖形組成的球體效果，如下圖。

很多人可能會以為這個需要3Ｄ軟件才能完成，其實通過Ai就能很快做出來，操作方法如下。

第一步：排列一組圓點。

第二步：從窗口菜單欄中打開符號面板，選中排好的圓點，然后在符號面板的底部點擊新建符號圖標，于是我們就把這組圓點設置成了符號，創(chuàng)建這個符號是為了后面貼圖用。

第三步：用圖形工具畫一個圓，填充一個顏色，然后刪除最左邊的錨點，這樣我們就得到了一個沒有封閉的半圓。

第四步：選中圖形，在效果菜單欄中找到3Ｄ效果，選擇繞轉，然后我們就打開了3Ｄ繞轉選項的面板。

第五步：在3D面板中保留默認參數(shù)，然后勾選左下角的預覽，我們就可以看到剛剛創(chuàng)建的那個半圓已經(jīng)變成了一個球體。

第六步：點擊預覽旁邊的貼圖選項進入貼圖面板，然后在面板頂部的符號欄中選擇剛剛創(chuàng)建好的圓點符號。

第七步：點擊面板左下角的“縮放以合適”按鈕，再點擊右下角的“確定”，這時我們可以看到圓點已經(jīng)附在了球體表面。

第八步：回到“3Ｄ繞轉選項”面板后，把透視參數(shù)改到80左右，這時球體上圓點大小的對比就變得更強烈了。

然后我們可以把鼠標移到左上角的立方體處，拖動立方體以調(diào)整預覽圖的角度，完成這波操作后就有了如下效果。

通過創(chuàng)建不同的貼圖符號，我們可以做出很多類似的效果。

第九步：把球體圖形擴展后，取消群組、釋放剪切蒙板，我們就可以把附在球體表面的圓點貼圖單獨拿出來了。

同樣，其他的圖形也可以拿出來，這種形式我們也能在海報設計中常?？吹剑胍玫角懊嫣岬降男Ч?，我們還需要填充顏色，以及重新添加一個圓底。

第十步：畫一個與圖形同樣大小的圓，填充好漸變色（用漸變網(wǎng)格工具效果更佳）。圖形也可以填充一個類似的顏色，然后疊印在剛剛畫的圓上就可以了。

不同的貼圖和顏色搭配可以得到不同的效果。

總結

設計技巧雖然不是設計最本質(zhì)的東西，但它是可以使設計變得更好看、更新穎、更具視覺沖擊力的有效手段，并且它可以大大提高工作效率，所以也很值得我們學習和研究，希望這篇文章對你有用。

作者：蔥爺
ID:congyenanian

不用擔心，杰哥帶你一起探究下：

A

直接選擇工具（A）：一種非常有用且常用的工具，用于選擇路徑或?qū)ο笾械奶囟ㄥ^點和手柄。特別適用于操縱組或復合形狀的單個組件而不影響整個形狀。

全選界面中的元素（Ctrl/Command-A）：全選界面中所有的元素，可用于查找確認畫面的元素分布范圍。

 B   

畫筆工具（B）：一種徒手繪圖工具，可將各種書法屬性和筆刷樣式應用于描邊路徑。

斑點畫筆工具（Shift-B）：一種繪圖工具，其作用類似于畫筆，但創(chuàng)建封閉的填充路徑而不是筆畫。

C 

剪刀工具（C）：可以在一條線或一個點上切割路徑或框架。

錨點工具（Shift-C）：單擊可以把曲線路徑上的錨點轉變成直角，點擊不放拖動錨點可以把錨點直角轉變成曲線。

菜單欄-效果（Alt/Option-C）：打開菜單欄—效果。

D 

復位顏色（D）：點擊D可以復位顏色，填充色為白色，描邊色為黑色。

繪圖模式切換（Shift-D）：正常繪圖和背面繪圖模式切換。

重復復制元素（Ctrl/Command-D）：復制一個元素后，一直按Ctrl/Command-D會連續(xù)重復上一步復制的內(nèi)容。

 E   

自由變換工具（E）：縮放，傾斜或旋轉所選元素的變換工具。

橡皮擦工具（Shift-E）：一種繪圖工具，用于擦除光標拖動的任何對象。

輔助處理（Ctrl/Command-E）：利用顯卡（GPU）的顯存加快復雜物體的顯示速度。

導出畫板（Ctrl/Command-E）：導出所有畫板。

 F   

全屏模式（F）：按兩次快捷鍵F，可全屏顯示，操作界面。

粘貼在最前面（Ctrl/Command-F）：Ctrl—c復制當前對象，Ctrl—f粘貼在原位置最前面。

菜單欄-文件（Alt/Option-F）：打開菜單欄—文件。

G   

漸變工具（G）：通常與漸變面板結合使用，此工具可以編輯漸變的形狀，大小和混合。

編組（Ctrl/Command-G）：可將界面中兩個或兩個以上的元素組合。

取消編組（Ctrl/Command-Shift-G）：取消編組，釋放出各個獨立的元素。

H   

手形工具（H）：此工具允許用戶抓住畫板并在應用程序窗口中移動它。當你放大你的作品但希望看到更多的設計或移動到另一個區(qū)域而不縮小時，這是完美的選擇。菜單欄-幫助（Alt/Option-H）：打開菜單欄—幫助。

滿屏畫板（Ctrl/Command-Shift-H）：此工具將當前畫板范圍擴滿到可繪圖滿屏范圍。

I   

吸管工具（I）：一種出色的工具，可讓用戶對對象的顏色，外觀屬性，效果或類型進行采樣，并將該選擇應用于其他地方。

拼寫檢查（Ctrl/Command-I）：用戶在畫板上輸入一段英文，選中英文，按快捷鍵Ctrl/Command-I，彈出拼寫檢查面板，開始檢測并把錯誤的單詞給抹黑突出顯示出來，點更改按鈕，建議單詞欄有一些建議單詞給我們選擇。

透視網(wǎng)格工具顯示與取消（Ctrl/Command-Shift-I）:顯示透視網(wǎng)格工具或取消透視網(wǎng)格工具。

顯示隱藏字符（Ctrl/Command-Alt/Option-I）：顯示隱藏字符或隱蔽隱藏字符。

J   

柱形圖工具（J）：用于創(chuàng)建具有垂直列的圖形的工具。用戶可以操縱圖表的值和總體大小。

連接（Ctrl/Command-J）：連接路徑的兩端以創(chuàng)建閉合路徑。當您發(fā)現(xiàn)對象具有開放路徑時尤其有用。

 K   

實時上色（K）：一種時髦的工具，用于為選定的封閉路徑添加平面顏色。有了它，您可以繪制對象的面或邊緣，而無需填充對象本身。

首選項（Ctrl/Command-K）：快捷打開首選項面板（菜單欄編輯-首選項-常規(guī)等）。

切片工具（Shift-K）：此工具可讓用戶將圖像拖動到要切片的區(qū)域，從而將圖切割為網(wǎng)絡圖像。您可以根據(jù)自己的喜好使用指南指導切片。最初用于設計的Web布局。

字句調(diào)整（Ctrl/Command-Alt/Option-K）：快捷打開字符面板，跳轉到“設置所選字符的自居調(diào)整”。

顏色設置（Ctrl/Command-Shift-K）：打開顏色設置面板，可配置個性所需的顏色方案。

 L   

橢圓工具（L）：常見的形狀工具。它創(chuàng)建圓和橢圓。

實時繪畫選擇工具（Shift-L）：用戶可以使用此工具選擇實時繪制組的面和邊，允許在某種程度上更改選定的部分。

圖層選項（Ctrl/Command-Alt/Option-L）：彈出圖層選項面板，可更改圖層名稱，顏色等配置。

 M   

矩形工具（M）：一種形狀工具，可以簡單地創(chuàng)建任何大小的矩形。

形狀生成器（Shift-M）：用于合并或分離選定形狀和經(jīng)常重疊形狀的工具。

N   

鉛筆工具（N）：用于創(chuàng)建和編輯手繪線的工具?？梢詫⒏鞣N畫筆和描邊屬性應用于線條以實現(xiàn)各種風格。與畫筆工具不同，使用畫筆繪制時無法配置尺寸和形狀變化（例如通過平板電腦壓力）。

新建文檔（Ctrl/Command-N）：創(chuàng)建新的文檔包含文檔信息的面板，包括顏色模式，標尺單位和畫板尺寸。

Shaper工具（Shift-N）：使用Shaper工具可隨意繪制矩形、橢圓、多邊形或直線，并可將其調(diào)整成完美的幾何形狀。

模板新建（Ctrl/Command-Shift-N）：打開本地現(xiàn)有的模板，新建一個帶模板的文檔。

新建空白文檔（Ctrl/Command-Alt/Option-N）：自動創(chuàng)建跟上次屬性尺寸相同的空白文檔。

 O   

鏡像（O）：在指定軸上翻轉所選對象的工具。

畫板工具（Shift-O）：允許用戶編輯畫板尺寸或創(chuàng)建其他畫板。

打開工具（Ctrl/Command-O）：打開一切AI可識別的文件，圖片等。

菜單欄-對象（Alt/Option-O）：打開菜單欄—對象。

打開Bridge文件（Ctrl/Command-O）：打開Adobe Bridge，選中模板/內(nèi)容再AI中打開。

P   

鋼筆工具（P）：一種繪圖工具，可創(chuàng)建錨點并允許用戶繪制直線或曲線。

透視網(wǎng)格工具（Shift-P）：創(chuàng)建一個網(wǎng)格，用作透視圖的指導。

打?。–trl/Command-P）：彈窗打印面板，調(diào)整打印前各種參數(shù)配置，直接打印。

置入（Ctrl/Command-Shift-P）：置入工具，可置入圖片和txt文檔，置入時可默認大小也可劃定范圍。

文檔設置（Ctrl/Command-Alt/Option-P）：針對現(xiàn)有文檔重編輯，包含單位、出血位、網(wǎng)格大小，顏色以及畫板編輯等。

 Q   

套索工具（Q）：用它繪制的任何形狀的對象的錨點。

關閉軟件（Ctrl/Command-Q）：關閉AI軟件，溫馨提示：隨時保持保存（Ctrl-s）的習慣，養(yǎng)成這個習慣絕不后悔。

R   

旋轉工具（R）：允許用戶將對象旋轉到任何角度的工具。

變形工具（Shift-R）：工具欄中的液化工具之一，變形工具允許將工具拖過對象的任何方向上操縱對象。這樣做會創(chuàng)建新的錨點并改變對象的形狀，以用戶希望的方式進行成型。

顯示隱藏標尺（Ctrl/Command-R）：顯示隱藏畫板標志，鼠標右鍵點擊畫板標尺可更改標志單位。

 S   

比例縮放工具（S）：根據(jù)固定或指定點調(diào)整對象大小的工具。無論你是希望在不損失矢量質(zhì)量或細節(jié)的情況下使對象變大或變小，都非常有用。

符號噴涂工具（Shift-S）：此工具可在你沿著圖片平面拖動工具的任何位置放置多個符號實例。

儲存為（Ctrl/Command-S）：將該畫板的信息儲存為AI格式文件，下一次操作時按ctrl/command-s直接保存現(xiàn)有信息（作為設計師一定要養(yǎng)成ctrl-s的習慣，你不會后悔的）。

另儲存為（Ctrl/Command-Shift-S）：將畫板內(nèi)容另存為AI格式文件或其他格式文件。

儲存為副本（Ctrl/Command-Alt/Option-S）：將畫板內(nèi)容存儲為AI格式或其他格式的文件副本。

T   

文字工具（T）：一種常用工具，可創(chuàng)建水平垂直類型文字，完全可編輯和路徑文字工具。

打開字符畫板（Ctrl/Command-T）：將字符面板快速調(diào)出，可設置字體、字體大小、字間距、行間距等。

菜單欄-文字（Alt/Option-T）：打開菜單欄—文字。

制符表（Ctrl/Command-Alt/Option-T）：打開制符面板，可設置數(shù)字、位置和自由連字。

 U   

網(wǎng)格工具（U）：將矢量對象轉換為網(wǎng)格對象。

V 

選擇工具（V）：可能是最常用的工具之一，它允許用戶選擇一個對象進行自定義，操作，在窗口周圍移動，等等。

透視選擇工具（Shift-V）：結合使用透視網(wǎng)格的工具，允許用戶將對象等帶入透視圖并與創(chuàng)建的網(wǎng)格交互，同時將所述對象保持在該透視圖中。

粘貼（Ctrl/Command-V）：此工具需配合ctrl-c復制使用，粘貼處于當前顯示畫面的正中心。

粘貼文案（Ctrl/Command-Shift-V）：此工具粘貼默認復制的內(nèi)容。

 W   

混合工具（W）：一種方便的工具，可在所選對象（包括顏色和/或形狀）之間創(chuàng)建過渡變形。

寬度工具（Shift-W）：此工具允許用戶在一個筆劃內(nèi)創(chuàng)建寬度的設置變化，完全由用戶控制。特別適用于使用壓力感應平板電腦，可以更好地控制筆劃的寬度。

關閉當前窗口（Ctrl/Command-W）：關閉當前操作的窗口。

X   

填充色切換（X和Shift-X）：用于切換填充和描邊顏色并分別切換它們的快捷鍵。在AI中工作以加快工作流程并專注于使用矢量圖形而不是通過面板和菜單進行創(chuàng)建時，此快捷鍵非常有用。

剪切（Ctrl/Command-X）：用于剪切相關元素。

Y   

魔棒工具（Y）：允許用戶選擇具有相似屬性的對象，路徑等。當您想要將所有粉紅色物體一次性變?yōu)榫G色或某種筆觸樣式時，這是一款非常棒的工具。

預覽模式（Ctrl/Command-Y）：允許用戶在文檔的輪廓和預覽模式之間切換。

 Z   

縮放工具（Z）：一種常用工具，通過增加放大倍率來聚焦矢量工作的某個區(qū)域，或通過減小放大尺寸來聚焦在較大的圖像上。

返回上一步（Ctrl/Command-Z）：允許用戶在規(guī)定步數(shù)內(nèi)返回上一步上一步直到設置的最大返回數(shù)。

在上面，了解了AI中的A到Z的快捷鍵和對應的效果，趕緊動手試試吧……

原文地址：設計杰作

作者：杰哥

扁平風格的插畫可以是采用線來表現(xiàn)，這和大部分線性圖標的制作方法類似，所不同的是，圖標的規(guī)模明顯小一些，所要兼顧的圖形也要少得多。線是一種值得我們探索的圖形表現(xiàn)方式。無論是否將其進行填色，我們都能被線條所牽引進入到圖形本身，這給了我在設計產(chǎn)品海報時一些靈感。今天我們就和大家一起來制作這個由線條來作為主元素的圖形海報。

靈感來源

1、圖案的參考是來自 pinterest 上瀏覽到的線體插畫，基本是延續(xù)這個風格，只是改變了線條表現(xiàn)方式，稍后我們在過程中再重點提示。

2、整個海報的概念是起源我們在做 pagepan 這個產(chǎn)品所產(chǎn)生的「積木」的聯(lián)想，這時選用了樂高積木來作為主要的創(chuàng)作重心。

學習建議

這篇文章適合那些已經(jīng)有軟件基礎想要進階扁平線體插畫的小伙伴~

工具

Adobe Illustrator CC (2019)

我已經(jīng)習慣用AI來畫線條的圖案，其他軟件不熟悉也沒有深入了解。

草圖過程

草圖是一個非常非常重要的過程，甚至它是后面所有工作的基礎。鑒于我們大部分人包括我自己都沒有好好對待過，所以這一次我們來彌補這一環(huán)節(jié)。草圖我畫了三次，每次都作部分優(yōu)化，最后成品如下。

毫不夸張，只有認真對待草圖的創(chuàng)作過程，才是真正享受到設計的樂趣。

畫好草圖后，大家最好能從草圖進入對圖案實現(xiàn)的分析。我們把實現(xiàn)整個圖案大致分為三個部分：

① 立體式的積木

② 設備部分

③ 背景裝飾

接下我們就分步驟來完成這些不同的圖形，要知道它是如何制作出來的。

生成立方體

這里積木的表現(xiàn)最重要的一個表現(xiàn)是：立體，并且是大家平時最常見的等距立體風格。等距立體風格，我們曾經(jīng)在用AI繪制3D等距立體夢幻風格插畫中講過其畫法以及在開始繪制前的準備工作，那么這篇文章里我們就省略分步驟的講解。

STEP 01

打開AI，新建一個1200px*850px的文檔，然后再在這個新文檔中建立起等距立體風格所需要準備的參考線。有人問參考線用處大不大？說實話，因為AI當中有默認的等距立體的3D轉換設置，因此基本不會差多少，主要是調(diào)整細節(jié)的時候用得上。

準備好的參考線如下圖：

你可以按以下的提示操作，更詳細可以進入用AI繪制3D等距立體夢幻風格插畫中查看。

1. 利用【矩形網(wǎng)格工具】，寬度/高度設置為1000，水平/垂直設置為：50
2. 選中網(wǎng)格，鼠標右鍵，進入【變換>縮放】，不等比的參數(shù)設置為，水平：100%，垂直：86.602%
3. 【變換>傾斜】，傾斜角度參數(shù)：30
4. 【變換>旋轉】，旋轉角度參數(shù)：-30
5. 【視圖>參考線>建立參考線】

STEP 02

要畫線體圖案，首先大家要把形體畫出來，形體是非線體的，這方便塑形，一旦形體外輪廓確定，就可以通過填充轉線條的方式做出線條圖案。

以上的思路確定好后，我們就要開始繪制立方體。第一步，我們先畫出一個尺寸為160*68的矩形。矩形填充為灰色，關閉描邊。

對于這個尺寸我建議大家最好和我的設置相同，并且記錄一下，等下我會告訴大家為什么要這樣做。

然后選中這個矩形，進入到【效果>3D>凸出與斜角】，將其轉為立方體。你需要改變這兩個參數(shù)設置：

• 位置：等角-右方
• 凸出厚度：68 （這個數(shù)值和你的矩形的高度一致）

位置一欄下拉選框里的「等角」開頭的選項，都是適用于等距立體風格的。

STEP 03

接下復制上一步所做的立方體，雖說我們現(xiàn)在稱這個對象為立方體，其實它的本質(zhì)還是一個平面矩形（因為還沒擴展對象），所以我們繼續(xù)改變這個平面矩形的尺寸，改變它的寬度，將其寬度從原來的160改變?yōu)?28。

這就是要求你要記住第一個矩形尺寸的原因，因為228是從160+68得到的。由于我們這里會畫出三個等高而不等長的矩形，但是我們希望它們表現(xiàn)是逐級等距增大，所以需要一個參數(shù)。有人問這里不需要這樣計算行不行？就是看著好看但不需要數(shù)學計算可不可以，我的答案是當然可以，但是數(shù)字的確是一個便捷控制形體的工具。

當你把尺寸改變后，整個立方體也就是延長了。用相同的方法，復制第三個，也是在228基礎上增加68，第三個矩形的寬度增加到296。于是我們得到想要的三個立方體如下：

STEP 04

將已有的立方體的位置進行調(diào)整，這時需要打開參考線，輔助將其排列成一下的樣式：

STEP 05

用STEP 02-04 的方法來做出另外一邊的立方體，所不同的是另一邊的兩個立方體，它們的尺寸分別是：

68*68

160*68

而他們在轉變?yōu)榱⒎襟w時，進入3D工具中，位置一欄設置為【等角>上方】。當你繪制好兩個立方體，就可以將它們拼成下面的形狀。當右邊的兩個立方體因為擋住視線很難對齊邊緣時，可以降低它們的透明度來查看是否對齊。

這時立方體的大形體基本完成，讓我們轉戰(zhàn)制作細部。

細部：按鈕和圓孔

所謂的細部其實也就是細節(jié)的部分，這部分在這里表現(xiàn)就是一些諸如按鈕、圓孔這樣的部分。

STEP 06

我們首先來制作圓孔，其實大家可以發(fā)現(xiàn)圓孔就是一個圓，只是這個圓看上去有透視之感（所以它不是一個正圓），但基本上它沒有凸出。那么大家可以如何做呢？

你也可以用到3D工具：首先繪制一個灰色的無描邊的正圓。然后進入【3D>凸出與斜角】，設置可以如下所示：

位置：等角-上方 厚度：0

STEP 07

復制這個代表圓孔的圖案，然后放置在最上方的矩形上，這里需要參考線來輔助將其對齊。

STEP 08

用同樣的方式安排其他地方出現(xiàn)的圓孔，但是注意這里不同的位置。

STEP 09

接下繪制凸出的圓形按鈕，這時我不建議這里再使用3D工具來實現(xiàn)，畢竟其實凸出的按鈕利用兩個橢圓就能實現(xiàn)，如果采用3D工具繪制，最后轉平面時會遇到麻煩（會有非常多形狀會出現(xiàn)，而讓你很難整理）。但是為了保持整個圖形符合等距立體，我在這里利用參考線來做一個按鈕，大家可以參考我的做法。

就復制我們上一步所做出的圓孔，找到同樣方向的圓孔，然后利用參考線對齊再復制一個，讓它們的色彩有點差異。

看懂了嗎？雖然目前兩個橢圓之間有間隙，但是等到最后轉為線體時，彼此只需要兩個小線條就能連成一個立體凸出的按鈕。

轉為線體

一旦焦點積木的部分完成，我們就可以直接轉為線體，剩下的圖形都用線條來實現(xiàn)。所見即所得。

STEP 10

首先將所有的立體形狀都轉為平面，這個說法并不是指他們又回到之前的平面形狀，而是將立體以擴展的方式轉化成可編輯的對象。

選中每個對象，然后進入【對象>擴展外觀】，然后將這些對象一一進行取消編組的操作，有些形狀需要取消兩次，總之要達到你任意點擊某個形狀時，都能立刻看到它的填色。這是AI中一個形狀是否「健康」的指標。

STEP 11

然后把每一個形狀填充關閉，開啟描邊。描邊的大小可以暫時設置為2，因為之后我們還會有變化。描邊色彩為 #0d6ffc

STEP 12

運用【形狀生成器】工具，按住鍵盤上的ALT鍵，清除掉圖形中彼此遮擋的部分線條。這個可以參考我們的草圖。

然后把我們在STEP 09中提到的給按鈕增加線條的方式來完成立體形態(tài)。為了讓圖形表現(xiàn)更好，按鈕的形狀可以稍微調(diào)大。

繪制平面設備

這里大家會發(fā)現(xiàn)周邊的設備是平面的，在繪制上不比之前的立體圖案，因此相對難度降低了很多。所以基本這里就是按照草圖分步驟來畫出。

STEP 13

這里從圓孔處有線條延伸，這些線條既有裝飾作用，又有鏈接設備的作用。這里參考了其他的線體插畫的Idea，這是一個不錯的集中視線的做法。

我們首先來完成這部分的線條。用鋼筆工具來繪制，鋼筆工具在繪制直角的邊線時很有優(yōu)勢，畫好下圖左邊的樣式后，選中直角的部分，利用拖動的方式就能將直角變?yōu)閳A角。

STEP 14

補齊一些細節(jié)，比如連接設備的矩形接頭，包括積木頂部的圓孔的陰影描繪線條。

STEP 15

繼續(xù)繪制左上的兩部手機的造型。記得這時利用圓角矩形工具和線條工具進行繪制。其實這個過程創(chuàng)作非常自由，你也可以安排其他的圖案，只要兼顧到整體的協(xié)調(diào)性即可，這是很多UI設計師常常畫的線稿圖，由于操作簡單，我們這里就不一一講解。

STEP 16

接下繪制右邊的平板的樣式，其中我用了一個統(tǒng)計圖表來作為圖案，文字采用了斷線的方式展示。

STEP 17

最后下方的筆記本電腦樣式，這里用了我們Pbuilder的界面。如果你是做其他的虛擬產(chǎn)品，這里就可以繪制這個產(chǎn)品的界面。

STEP 18

到這一步大家會發(fā)現(xiàn)我們用的是等線，所謂等線就是相同大小的線條，但是實際上在比較復雜、對象比較多的情況下需要將線條分出層次才能讓造型看起來更立體。所以，這里我們可以改變線條的大小，在物體的外邊框加粗，然后把一些更細節(jié)的線條調(diào)細。

于是，我們從之前只用2pt的線，變?yōu)槿N線條：1pt、2pt、3pt

3pt的線用來加粗對象的邊框輪廓，增加體積感。或者是焦點區(qū)域。

2pt的線用來做普通的描繪。

1pt的線用在比較細節(jié)的小的部分。

完善背景細節(jié)

STEP 19

背景的細節(jié)是一些零散的圖案，大部分是圓形、三角等幾何形，相比而言，它們的繪制是最簡單的，因此我們也直接就給它安排好位置。

STEP 20

在草圖的部分，我們還準備了三個正立方體，但在這里，我們不準備采用3D工具來繪制。而是采用的是六邊形+線條的方式。

所以我們可以選擇繪制一個等邊的六邊形，然后旋轉30度，讓它的底部為其中一個角。然后按照下圖所示，制作一個立方體。這里我們用這個方式的原因，下一步我們會講到。

STEP 21

將上面繪制好的三個立方體，放置在相應的位置。然后給整個圖形增加一個淺藍色的背景。在這里我們用到的配色是同色系的配色。

優(yōu)化細節(jié)

到這一步其實就完成了繪制，但是細節(jié)的部分還需要我們進一步優(yōu)化。主要體現(xiàn)是在細節(jié)的位置，比如中間積木的線條交接的位置就不夠干凈，有很多不需要的小邊角，這在線條的狀態(tài)是沒辦法完善的，需要進一步擴展外觀之后才能修飾。

STEP 22

我們首先將整個線條圖案都進行擴展外觀，進入【對象>擴展外觀】，其他的部分基本都沒什么問題，就是用3D工具繪制的立體形狀細節(jié)需要優(yōu)化，這也是為什么我們最后增加三個小的立方體的時候用平面線條來解決。

當然，中間的積木其實也可以用平面線條繪制，但是因為它的造型相對復雜，所以很難把握它的比例，我們才借助3D工具的這個能力。

大家可以看到這里有很多的不完美的接角：

STEP 23

經(jīng)過擴展后，我們就可以利用直接選擇工具來調(diào)整這些邊角，這時大家要兼顧到整個線條的粗細，因為我們已經(jīng)不是按照線條的對象來編輯圖形了。

處理后的圖形已臻完美：

STEP 24

最后利用生成器工具將部分的塊面填充藍色調(diào)（#D7ECF9、#C7E8F9），增加的這兩個顏色略比主色深一點，以表現(xiàn)陰影的部分，或增加視覺重量的作用。更深的那個色調(diào)用在比較小的區(qū)域。

添加文字

文字的部分，我們采用了相同的線條描繪的方式來設計，然后增加文案。最后的效果如下：

最后：動手的力量

線條是扁平化風格的一種，如果大家平時練習了圖標的畫法（不是在需要用圖標的時候拿現(xiàn)成的網(wǎng)上的資源），那么你對線條的掌控能力就能日益增進。最好的學習就是自己動手做，因為有太多不可說的技巧，是必須自己體會過才理解的。

如果覺得這個教程比較復雜，那么你可以從一些基礎的幾何圖形、小物件開始練習，所以這是非常適合初學者夯實基礎的。如果覺得這個教程過于簡單，我也建議大家多嘗試一些新的畫法，比如可以把對象改為別的物體，自己創(chuàng)作不一樣的場景。也可以換成別的色彩，還可以增加紋理。把木紋、水紋等等增加到平面中，會出現(xiàn)非常特別的效果。

Via: ifeiwu

1，畫出頭部和臉部

第1步

我們首先從頭部開始。 利用橢圓工具（L），首先畫一個橢圓并用下圖所示的顏色填充。 然后畫一個小橢圓作為眼睛，并向左旋轉一點點。 現(xiàn)在，畫一個小圓作為眼眸。

之后，制作一個對稱用來創(chuàng)建右眼。 為了制作對稱，你將需要選擇整個眼睛并且按住Alt鍵使用鏡像工具（O），點擊頭的中間部位。 然后點擊垂直方向并按下復制鍵。 確保眼睛在頭部的中間。 這就是它現(xiàn)在的樣子。

第2步

讓我們創(chuàng)建嘴巴。 首先用一個長橢圓。 保持它被選擇的狀態(tài)，使用錨點轉換工具（Shift-C），點擊右邊和左邊的錨點使它變尖。 繼續(xù)保持它們被選中并添加效果>變形>弧。 在新的對話窗口中，輸入你在下圖看到的選項：

第3步

將嘴放到合適的位置。

第4步

制作一個嘴的拷貝并調(diào)整彎曲選項——這將會形成鼻子。 將鼻子放在它的位置上。

第5步

畫一個橢圓作為紅紅的臉蛋。 將它相應旋轉一點，然后制作這個左邊臉頰的對稱創(chuàng)建出右邊臉頰。

第6步

使用同樣的填充色，在鼻子周圍畫少許小圓——這些是雀斑。

第7步

創(chuàng)建鼻子的拷貝，擴展形狀（對象 >擴展外觀） 并使用吸管工具（I），吸取眼睛中心的顏色——這將成為眉毛。 在創(chuàng)建左邊眉毛之后，將它向左旋轉。 然后制作一個垂直對稱從而創(chuàng)建右邊的眉毛。

第8步

用和臉相同的顏色的2個橢圓添加為耳朵，完成臉部的制作。

2，畫頭發(fā)

第1步

為了畫出頭發(fā)，首先讓我們創(chuàng)建一個如下圖所示的底子。 使用吸管工具（I），選取眼睛中間的顏色填充。

第2步

在我們開始畫頭發(fā)之前，我們需要創(chuàng)建一個特殊畫筆。 畫一個狹長的橢圓（R=53 G=61 B=51)。 將其拉到筆刷面板中創(chuàng)建新筆刷，設置著色方法為淺色調(diào)并按下確定。

第3步

現(xiàn)在，讓我們用這個畫筆畫頭發(fā)。 你可以增加或減少描邊寬度，只要適合是最好的。

第4步

減少描邊寬度，使描邊顏色更淺（R=83 G=83 B=72），并畫出更多的頭發(fā)。

第5步

再一次減少描邊寬度，使描邊顏色(R=16 G=17 B=16)更深，再次畫出更多頭發(fā)。

3，創(chuàng)建花環(huán)

第1步

移除描邊顏色并設置填充顏色為R=239 G=236 B=230。 用圓角矩形工具畫幾條直線——兩到三條就夠了。

第2步

現(xiàn)在是花了。 設置填充色為 R=247 G=245 B=240并畫一個橢圓。 點擊旋轉工具（R）并按住Alt鍵，在你的橢圓下面的畫板按下它。

在新的旋轉窗口中，輸入角度72度并按下復制。 按下 Control-D以重復你的上一步操作，直到你完成這個花為止。 放置一個的黃色(R=255 G=229 B=130) 的圓放在整個花的中間就完成這個花的制作。

第3步

制作不同尺寸的花，并在整個頭部散步這些花。

第4步

當你有了一個橢圓后，用 R=115 G=145 B=80的顏色填充。 選擇轉換錨點工具（Shift-C）并使錨點變尖。 你將會得到一個簡單的葉子形狀。

第5步

創(chuàng)建葉子的多個拷貝，使它們有不同的尺寸，并將它們放置在花的下面。

4，創(chuàng)建櫻桃

第1步

如下圖所示放置3個不同的圓組成櫻桃。

第2步

將兩個櫻桃貼近女孩的耳朵。 用吸管工具（I），從葉子中選取顏色，使它作為描邊色。 使用鉛筆工具（N），畫出連接著櫻桃的莖。

第3步

創(chuàng)建櫻桃的垂直對稱作為另一邊。

5，創(chuàng)建西瓜

第1步

畫兩個彼此疊加的紅色橢圓。 上面的橢圓必須超過這個圓。 在路徑查找器面板（窗口>路徑查找器），按下減去頂層你將得到西瓜的基本形狀。

第2步

為了創(chuàng)建西瓜被咬過的效果，畫一些小圓在之前創(chuàng)建的形狀上。 并在路徑查找器中再一次按下減去頂層。

第3步

為了制作西瓜的果皮，創(chuàng)建之前創(chuàng)建形狀的拷貝并將其放置原始形狀的后面 (Control-C, Control-B)。 改變填充顏色為 R=215 G=234 B=195并向下延伸一點點。 我們將上一步驟重復一次，但這次，將顏色改為R=115 G=145 B=80。 不要忘記向下延伸。

第4步

為了西瓜的種子，我們將使它們像水滴一樣。 設置填充色為R=53 G=61 B=51。 畫一個橢圓。 用錨點轉換工具(Shift-C)使頂部的錨點變尖。 然后將左邊和右邊的錨點向下移動。

第5步

將種子散布到西瓜上。

第6步

然后將它給這個女孩。

6，創(chuàng)建手部

第1步

我們首先將用一個橢圓和圓創(chuàng)建手指。 選擇整個手指并將其向右移動。 如你之前制作花的方法一樣，多次按下Control-D。

第2步

旋轉她的右手并將其放在西瓜上。 對稱右手用來創(chuàng)建她的左手。

第3步

現(xiàn)在是袖套。 在橢圓上，將右邊和左邊的錨點向下移動。

第4步

將其向右旋轉并放在手的下面。 然后創(chuàng)建它的垂直對稱以創(chuàng)建另一個袖套。

第5步

為了制作身體，簡單地制作其中一個袖套的拷貝，并使它更寬。 將其放在所有元素下面（Control-X, Control-B），然后完成女孩的身體。

第6步

我們也可以用一點海軍藍 (R=76 G=84 B=107) 的條紋來裝飾女孩的上衣。 在身體前制作更多的拷貝，并保持其被選中，選擇這些條紋。 按下路徑查找器中的切除。 不要釋放這個選擇，然后轉到對象>路徑>清理。確保所有的小方塊被被選中并點擊確定。

7，創(chuàng)建背景

第1步

創(chuàng)建一個高度和寬度為600 px灰色的方形在所有元素的后面(Control-X, Control-B)。 在里面畫一個更深的圓。

第2步

將這個女孩放在圓的中間。 試著將頭部放在圓的里面；身體與圓有一點點的疊加。

第3步

創(chuàng)建背景圓的拷貝(Control-C, Control-F)，并保持被選中的狀態(tài)下，選擇整個女孩。 或者你可以選擇全部(Control-A) ，然后解除方形背景的選中狀態(tài)。 然后轉到對象>剪切蒙板>建立。 現(xiàn)在這個女孩應該在圓的里面了。

我們完成了。

原文地址：design.tutsplus

　　對於使用Illustrator從事創(chuàng)作的人來說，經(jīng)常會使用色票面版來簡化填色的工作。 但是過多的色票卻是會減慢列印輸出的速度，因此當您在儲存檔案或者在列印之前 最好先將一些沒有用到的色票或筆刷刪除，以增快速度。刪除的方法是：點選色票 面版或筆刷面板右上角箭頭，然後在彈出式選單中選取「Select All Unused」， 然後再選擇刪除即可。 　　

　　2 快速產(chǎn)生背景圖層 　

　　當您利用Illustrator制作好圖案儲存起來以後，若以Photoshop 4開啟時，往往圖 案是在透明圖層上，而沒有背景底層。若想要制作出背景底層，一般都是新增一圖 層，然後執(zhí)行merge down或flatten，以產(chǎn)生背景底層?，F(xiàn)在介紹您一個快速方 法：只要在圖層面版上按下右上角的箭頭，選擇新增圖層，然後在模式中選取「背 景底層」，即可迅速產(chǎn)生。不過，在Photoshop 5以後這些動作就合并成一個指 令，選擇功能表上的「圖層←新增←背景底層」即可完成。 　

　　3 刪除過多的樣布 　　

　　當你打開版本7中的文件時，Illustrator會引入以前的Illustrator版本創(chuàng)建的文件時不需要的廢棄段式。 為了清除這些不需要的段式，在Swatches調(diào)色板上單擊All Swatches圖標，然后在彈出菜單中選擇Select All Unused，并且在 Trash圖標上單擊以移去無關的樣布。你有時必須重復選擇和刪除過程以確保清除調(diào)色板。 注意，復雜的文件將花費比較長的時間做清除，并且屏幕上將不會顯示進程或者滑竿或者手表，因此不要驚慌-覺得你可能已死機。 更容易編輯節(jié)點 使用Illustrator 8的朋友不知道是不是經(jīng)常會碰到這樣的問題，當您用箭頭選取工 具選取物件上的節(jié)點時，往往無法順利的選取到您要的節(jié)點，這時候只要將Snap to Point關掉（Command+Option+　^，就可以順利地選到您要的節(jié)點進行編輯。 　　

　　4 轉換成RGB， 　　

　　失去了樣布關聯(lián) 在Illustrator中轉化CMYK為RGB的過程是很容易的；只要使用Save As來拷貝文件，并且在所有的層和物件未被鎖定，可見和被選擇 時，選擇Filter，Colors，Convert CMYK to RGB 。但是請了解從CMYK到RGB的轉化會讓你失去任何與存儲的樣布的聯(lián)系。這意味 著物件不能再被存儲的樣布所填色，因此你再也不能全面積地更新它們。 　　

　　5 存儲漸變 　　

　　因為在Illustrator7中的漸變不能自動地被存儲，所以你必須采取措施來保證不會漫不經(jīng)心地丟失你制作的漸變：當你為一個物件設 計漸變的時候，你可以看到漸變只能在此物件內(nèi)使用。為了存儲它以備將來使用或能夠讓另一個物件使用它，把Gradient調(diào)色板中的 漸變方塊拖拉到Swatches調(diào)色板。 雖然你可以拖拉你愿意拖拉的漸變到Swatches調(diào)色板中去，但是你也可使用Option-(Alt)來拖拉樣布到被存儲的漸變中來更新它。

    　6 為多個層設置打印功能選擇 　　

　　在Illustrator中你不必訪問每一個單獨的層的Print Options來設定你的輸出需要。選擇若干個層，雙擊任何一個被選擇的層來訪 問它們所有的Layer Options?；钴S的被選擇的檢查盒子意味著打印功能選擇已被運用于所有層；暗淡的被選擇的檢查盒子意味打印 功能選擇只被運用于其中一個層(以及當這單獨的層被選擇時，它可以被設置。)；沒有被選擇的檢查盒子意味打印功能選擇沒有被運 用于任何層。 　　

　　7 把漸變重新設置到默認值 　　

　　在你用Illustrator的Gradient工具作調(diào)整之后，使用同樣漸變或其他漸變填色的其他物件將會有一個改變的角度。把漸變角度”重 設為零度”，通過按（/）鍵全部不選和以None來填色。這樣，當你下一次選擇漸變時，它將是默認的角度設置。對于線性的漸變， 你也可以在創(chuàng)鍵新的漸變之前，在Gradient調(diào)色板中的Angle域中鍵入零?！　?

　　8 光柵化物件來創(chuàng)建陰影 　　

　　在Illustrator中你可以采用光柵化來創(chuàng)建一個巨大的自定義陰影。首先創(chuàng)建一個物件，然后復制它并且偏移它。在選擇Object， Rasterize之前，先為背景物件(陰影)設置顏色；從Filter菜單中選擇Photoshop效果，如Pixelate，Pointillize等。 如要在Macromedia FreeHand 8中做同樣的事情，你可以復制物件并且在Modify菜單中選擇Rasterize，然后選擇Edit，External Editor來激活Photoshop和運用效果。如要在CorelDraw中獲得同樣的或者類似的效果，可以使用Bitmap，Convert to Bitmap命 令，然后從Bitmaps菜單中選擇效果，但在CorelDraw 8中新的Interactive Drop Shadow工具內(nèi)置有

　　9 恢復舊的Illustrator過濾器 　　

　　許多Mac Illustrator用戶相信版本6中的Ink Pen過濾器比版本7中的容易使用；另一些用戶可能會因失去Add Anchor Points過濾 器和用Command-Option-E重復它的功能而悲痛。Adobe不認可這一點，但是Mac用戶可方便的通過拖拉這些舊的過濾器到 Illustrator 7 Plug-ins文件夾內(nèi)的Filter文件夾來恢復它們(如果他們?nèi)匀挥邪姹?的話) 　　

　　10 首選使用CMYK　　

　　正因為Illustrator7可以讓你以CMYK，RGB和HSB (色調(diào)，飽和，明亮)色彩模式建立顏色，所以你要小心，你的創(chuàng)作稿中可能現(xiàn)在會 包含用這些模式的結合創(chuàng)建的物件。當你做輸出時，可能有各式各樣的無法預料的情況會發(fā)生。印刷輸出文件應該使用CMYK；僅當你 在屏幕顯示稿件時才使用RGB。如果你的創(chuàng)作稿將同時被用作印刷和屏幕顯示，首先用CMYK創(chuàng)建印刷輸出文件，然后使用Save As命令 來拷貝它，并且把拷貝件修改到適當?shù)纳誓Ｊ健?/P>

    用Photoshop可以制作各種各樣漂亮的按鈕，其實它的姊妹軟件Illustrator擁有強大的漸變和透明功能，也可以制作漂亮的按鈕。

　　下面我介紹用Illustrator10制作有蘋果網(wǎng)站風格的按鈕。

　　主要用到漸變、色彩、圖層模式、陰影濾鏡等工具。