天天看點

【學UI設計】AI人字拖拟物圖示

作者:衍果視覺

注:此教程為英翻教程,軟體操作不娴熟的小夥伴兒,謹慎嘗試哦。翻譯不足之處或者有錯别字,自行腦補一下哦。

【學UI設計】AI人字拖拟物圖示

1.建立文檔

檔案”>“建立”以打開空白文檔,如圖設定。

【學UI設計】AI人字拖拟物圖示

2.建立圖示的底部

抓住矩形工具(M),然後繪制一個256 x 256像素的正方形。暫時選擇一個黑色筆觸,然後轉到“效果”>“風格化”>“圓角”并應用25px半徑。要擴充此效果,請轉到“對象”>“擴充外觀”,然後取消分組(Shift + Ctrl + G)。

【學UI設計】AI人字拖拟物圖示

3.建立沙子紋理

步驟1

用訓示的顔色填充基本形狀,然後檢視“外觀”面闆。選擇此填充屬性後,按面闆底部的Duplicate Selected Item圖示。結果,您将在上方獲得第二個填充。用可以在Swatch庫>模式>基本圖形>基本Graphics_Textures中找到的名為“ USGS 17A流沙”的模式替換顔色。将此模式的混合模式更改為柔光。

【學UI設計】AI人字拖拟物圖示

步驟2

現在,像在上一步中一樣複制第二個fill屬性。将現有模式替換為“ Stipple Fine ”,您可以在“ Basic Graphics_Textures”類别中找到該模式。将混合模式設定為“顔色減淡”。

【學UI設計】AI人字拖拟物圖示

步驟3

複制第一個填充屬性,然後将裸色替換為棕色。将此屬性拖動到面闆底部,然後轉到“效果”>“扭曲和變形”>“變形”并應用如下所示的設定。您将在底座的右上角得到棕色邊緣。

【學UI設計】AI人字拖拟物圖示

步驟4

在基礎形狀的前面複制并粘貼(Ctrl + F),并删除所有現有外觀。選擇棕色作為填充顔色,然後轉到“效果”>“藝術”>“膠片顆粒”并應用顯示的設定。設定為“混合模式疊加”。

【學UI設計】AI人字拖拟物圖示

步驟5

我們仍在使用上一步中的形狀。選擇一個1pt的白色筆觸,并将其設定為Blending Mode Soft Light。

【學UI設計】AI人字拖拟物圖示

步驟6

現在,轉到外觀面闆,然後從彈出菜單中選擇添加新填充。使用所示的線性漸變并将角度設定為-90度。在第一個填充和筆觸之間移動此填充屬性,然後将“混合模式”設定為“顔色加深”,并将“不透明度”減小為50%。

【學UI設計】AI人字拖拟物圖示

4.将詳細資訊添加到沙底

步驟1

現在,讓我們改善沙灘外觀,使其更逼真。為此,我們将使用Illustrator中提供的一些美術筆刷,并按照它們的順序将它們一一拿下。

抓住鋼筆工具(P),并在底座的左下角繪制一條如下所示的路徑。給它一個2pt的棕色筆觸(1)。另外,使用名為“ Dry Ink 2 ”的美術畫筆在畫筆庫> Artistic> Artistic_Ink(2)中找到該路徑。仍然選擇此路徑,轉到“效果”>“模糊”>“徑向模糊”,然後應用下一張圖像(3)中顯示的設定。将混合模式設定為疊加,并将不透明度降低到40%(4)。

【學UI設計】AI人字拖拟物圖示

在徑向模糊視窗中選擇Spin方法,良好的品質和數量的20。

【學UI設計】AI人字拖拟物圖示

步驟2

使用鋼筆工具(P)繪制第二條路徑,并為其繪制1pt的棕色筆劃(1)。這次使用名為“粉筆”的美術畫筆,您可以在“畫筆庫”>“ Artistic”>“ Artistic_ChalkCharcoalPencil ”中找到該畫筆。輕按兩下“外觀”面闆中應用的畫筆筆觸以打開“筆觸選項”視窗,然後選中“沿對象翻轉”選項,然後單擊“确定”(2)。使用相同的設定(3)再次應用“徑向模糊”效果,然後将其設定為“顔色加深”(4)。

【學UI設計】AI人字拖拟物圖示

步驟3

讓我們繼續第三條路徑,并給它2pt的棕色筆觸(1)。再次使用“粉筆”藝術畫筆對其進行描邊(2),然後轉到“效果”>“模糊”>“徑向模糊”并應用下一張圖像中顯示的設定(3)。設定為混合模式疊加,并将不透明度降低到40%(4)。

【學UI設計】AI人字拖拟物圖示

在徑向模糊視窗中選擇縮放方法,良好的品質和數量的20。

【學UI設計】AI人字拖拟物圖示

步驟4

抓住鋼筆工具(P),然後繪制另一個波浪形路徑,如下所示。給它一個2pt的棕色筆觸(1),然後再次使用“粉筆”美術筆刷對其進行筆觸(2)。使用上面顯示的設定應用“徑向模糊”效果,然後将其設定為“顔色加深”并将不透明度降低到40%(3)。

【學UI設計】AI人字拖拟物圖示

步驟5

在底座的左下角繪制下一條路徑,然後選擇一個1pt的棕色筆觸(1)。這次使用“ Dry Ink 2 ”美術畫筆對其進行描邊(2)。使用此步驟開始時顯示的設定(4.1)應用“徑向模糊”效果,然後将其設定為“顔色加深”(4)。

【學UI設計】AI人字拖拟物圖示

步驟6

您尚未完成。采取鋼筆工具(P)并繪制下一條路徑,然後選擇一個2pt的棕色筆觸(1)。使用“粉筆”美術筆刷對其進行描邊(2),然後應用“徑向模糊”效果(設定-4.1)。設定為混合模式顔色加深,并将此路徑的不透明度降低到75%(3)。

【學UI設計】AI人字拖拟物圖示

步驟7

在底座的左上角繪制另一條路徑,并為其繪制2pt的棕色筆劃。使用“幹墨2 ”美術畫筆對其進行描邊(2),然後應用“徑向模糊”效果(設定-4.1)。設定為混合模式顔色加深(4)。

【學UI設計】AI人字拖拟物圖示

步驟8

最後,在右上角繪制最後一條路徑,并為其繪制1pt的棕色筆劃(1)。使用“粉筆”美術筆刷對其進行描邊(2),然後應用“徑向模糊”效果(設定-4.1)。将其設定為Blending Mode Overlay(4),即可完成此部分。

【學UI設計】AI人字拖拟物圖示

5.清理圖示的邊緣

步驟1

我們希望該圖示的邊緣幹淨,是以我們需要一個遮罩。首先,在基礎形狀的前面複制并粘貼(Control + F),然後删除所有現有外觀(無筆觸,無填充)。通過轉到“對象”>“排列”>“置于最前面”,将此副本置于所有内容的最前面。選擇此副本以及八個描邊路徑後,轉到“對象”>“剪切蒙版”>“制作”(控制+ 7)。

【學UI設計】AI人字拖拟物圖示

步驟2

此時,圖示的底部應如下所示:

【學UI設計】AI人字拖拟物圖示

6.向圖示添加突出顯示

步驟1

再次在基礎形狀中複制并粘貼(Ctrl + F)并删除所有現有外觀。通過轉到“對象”>“排列”>“置于最前面”,将其置于所有内容的前面,并使用任意顔色(1)對其進行1pt筆劃。使用“添加錨點”工具(+),在左右邊緣(2)上添加兩個額外的點。接下來,抓住剪刀工具(C)并單擊訓示的四個點以将路徑切成段(3)。删除不需要的路徑,僅保留下面顯示的兩條路徑(4)。

【學UI設計】AI人字拖拟物圖示

步驟2

使用混合藝術畫筆在上一步中獲得兩條路徑,我已經在我的霓虹藝術畫筆教程中解釋了如何進行建立。隻是這不是200 x 5px,而是尺寸為100 x 3px。将“筆重”設定為0.75 pt,然後将“不透明度”降低到75%。

【學UI設計】AI人字拖拟物圖示

7.在圖示下方添加陰影

抓住橢圓工具(L)并繪制具有所示尺寸的橢圓。将形狀移動到圖示的底部,然後通過轉到“對象”>“排列”>“發送回”将其發送到所有内容的後面。選擇黑色作為填充顔色,然後轉到“效果”>“模糊”>“高斯模糊”并應用10半徑。

【學UI設計】AI人字拖拟物圖示

8.繪制人字拖的形狀

步驟1

使用橢圓工具(L)繪制具有所示尺寸的橢圓。使用直接選擇工具(A)僅選擇頂部和底部點,然後拖動其搖桿以使其更長。接下來,從形狀的中間選擇兩個點,然後拖動搖桿以修改其位置,如圖所示。

【學UI設計】AI人字拖拟物圖示

步驟2

抓住“添加錨點工具”(+),并使用它在鞋底形狀的底部添加兩個額外的點,并在需要時調整搖桿。接下來,使用直接選擇工具(A)選擇最高點,然後如下所示修改控點的位置。使用添加錨點工具(+)在頂部添加其他兩個點,并如下所示移動控點。

【學UI設計】AI人字拖拟物圖示

9.畫出拖鞋的帶子

步驟1

采取鋼筆工具(P)并繪制如下兩條路徑,然後使用“錐形尖”美術畫筆對其進行筆劃,您可以在“畫筆庫”>“ Artistic”>“ Artistic_Ink ”中找到該畫筆。将權重設定為0.3pt。從“對象”>“展開外觀”,然後取消分組(Shift + Ctrl + G)兩次,您将獲得皮帶形狀。

【學UI設計】AI人字拖拟物圖示

步驟2

選擇左綁帶并轉到“對象”>“路徑”>“添加錨點”,然後選擇右綁帶并轉到“對象”>“路徑”>“添加錨點”兩次。您将在每種形狀上獲得一些額外的點。現在,使用直接選擇工具(A)僅選擇以綠色突出顯示的兩個點并将它們向左移動一點。接下來,選擇以藍色突出顯示的三個點并将它們向右移動。

【學UI設計】AI人字拖拟物圖示

步驟3

使用直接選擇工具(A)僅選擇以綠色突出顯示的點并将其向下移動一點,然後對以藍色突出顯示的四個點進行相同的操作。

【學UI設計】AI人字拖拟物圖示

步驟4

抓住直接選擇工具(A)并拖動一個選擇,如下所示,以僅選擇該區域中的點并将其向下移動一點。最後,将兩個點從頂部移到另一個,并準備好皮帶。

【學UI設計】AI人字拖拟物圖示

步驟5

使用鋼筆工具(P)從下方繪制形狀,作為皮帶的内部。

【學UI設計】AI人字拖拟物圖示

10.在鞋底上建立設圖案

步驟1

現在我們已經具備了人字拖的基本形狀,我們需要将其付諸實踐。暫時隐藏皮帶,并專注于鞋底。選擇訓示為填充顔色的粉紅色陰影。接下來,使用鋼筆工具(P)甚至鉛筆工具(N)在鞋底上随機繪制一些波浪形路徑。

【學UI設計】AI人字拖拟物圖示

步驟2

複制并粘貼到鞋底形狀的前面(Ctrl + F),然後轉到“對象”>“排列”>“置于最前面”,将其置于所有内容的前面。組(對照+ G)的所有波狀路徑然後選擇鞋底的副本群組并按鴻溝在探路者面闆。取消分組(Shift + Ctrl + G),然後從頂部和底部删除較大的形狀。用訓示的顔色填充條紋。

【學UI設計】AI人字拖拟物圖示

步驟3

再次複制并粘貼到鞋底形狀的前面(Ctrl + F),然後将其放到前面。用黑色和灰色(40%黑色)所示的線性漸變填充它,并将角度設定為90度。将混合模式更改為疊加,并将不透明度降低到20%。

【學UI設計】AI人字拖拟物圖示

步驟4

接下來,使用鋼筆工具(P)并繪制一個分段的漩渦,如圖所示。當太陽光線在四周畫出短路時。為所有路徑選擇一個1pt淺灰色筆觸,然後按“筆觸”面闆中的“圓帽”選項。

【學UI設計】AI人字拖拟物圖示

11.給人字拖帶子上色

步驟1

首先解開皮帶。用訓示的粉紅色填充右邊的皮帶。轉到“外觀”面闆,并選擇此填充屬性,然後按底部的“複制所選項目”圖示。結果,您将在上方獲得第二個填充。使用從白色到黑色的線性漸變,然後将其設定為“混合模式疊加”,并将不透明度降低到20%。對左皮帶重複相同的操作。

【學UI設計】AI人字拖拟物圖示

步驟2

現在選擇左内皮帶,并用深粉紅色填充它。像以前一樣複制此填充屬性,這次使用從白色到黑色的徑向漸變。将其設定為“混合模式相乘”并将不透明度降低到20%。對右内帶重複相同的操作。

【學UI設計】AI人字拖拟物圖示

步驟3

複制并粘貼在左背帶(Ctrl + B)中,然後删除現有外觀,然後選擇明亮的粉紅色作為填充顔色。僅使用“直接選擇工具”(A)來選擇形狀後面訓示的兩個點,然後通過按一次鍵盤上的向左箭頭鍵将它們向左移動1px。

接下來,在右皮帶上複制并粘貼在背面(Control + B),并更改填充顔色。使用直接選擇工具(A)僅選擇訓示的四個點,并将它們向左移動1px,以在背面顯示一些粉紅色的形狀。

【學UI設計】AI人字拖拟物圖示

步驟4

複制并粘貼右邊的内部背帶(Ctrl + B),删除現有外觀,然後選擇訓示為填充色的粉紅色陰影。使用直接選擇工具(A)僅選擇突出顯示的兩個點,然後通過按一次鍵盤上的向上箭頭鍵将它們向上移動1px。

接下來,複制并粘貼在左内部背帶的背面(Ctrl + B)并更改填充顔色。這一次,通過按一次向右箭頭鍵,将整個内部皮帶(不是副本)向右移動。

【學UI設計】AI人字拖拟物圖示

12.建立腳趾欄

步驟1

抓住橢圓工具(L)并繪制出兩個具有所示尺寸的小圓圈。像下面那樣排列它們,并用所示的徑向漸變填充它們。

【學UI設計】AI人字拖拟物圖示

步驟2

現在,如圖所示,使用鋼筆工具(P)在孔和皮帶之間繪制一條路徑。将“筆劃重量”設定為4.5pt,然後在“筆劃”面闆中按“ Round Cap”選項。從“對象”>“展開并取消分組”,然後用深粉紅色填充生成的形狀。将腳趾移到皮帶的後面。

【學UI設計】AI人字拖拟物圖示

步驟3

複制并粘貼在腳趾欄的前面(Ctrl + F)并将其縮放一點。将填充顔色替換為所示的漸變,然後将其設定為“混合模式”,然後将不透明度降低到75%。

【學UI設計】AI人字拖拟物圖示

步驟4

使用内部皮帶底部的橢圓工具(L)繪制兩個橢圓,并用訓示的顔色填充它們。

【學UI設計】AI人字拖拟物圖示

13.在皮帶上添加亮點

步驟1

抓住鋼筆工具(P),并沿着皮帶的邊緣繪制兩條路徑,如下圖所示。使用先前使用的“混合美術畫筆”描邊這些路徑,然後将權重設定為0.25pt,将“混合模式”設定為“覆寫”。

【學UI設計】AI人字拖拟物圖示

步驟2

沿着皮帶的邊緣繪制其他兩條路徑,并使用相同的“混合美術畫筆”對其進行描邊。将權重設定為0.25pt并将不透明度降低到75%。

【學UI設計】AI人字拖拟物圖示

14.建立光澤外觀

步驟1

如圖所示,以矩形工具(M)并在右皮帶上繪制一個矩形。用所示的線性漸變填充它,然後将其設定為“混合模式”變亮并将不透明度降低到60%。

【學UI設計】AI人字拖拟物圖示

步驟2

在頂部繪制一個較小的矩形,然後選擇白色作為填充顔色。将其設定為“混合模式疊加”,并将不透明度降低到50%。

【學UI設計】AI人字拖拟物圖示

步驟3

将右皮帶複制并粘貼在正面(Ctrl + F)并删除所有現有外觀。通過轉到“對象”>“排列”>“置于最前面”,将其置于所有内容的前面。現在,選擇兩個矩形和皮帶的副本,然後轉到“對象”>“剪貼蒙版”>“制作”。

【學UI設計】AI人字拖拟物圖示

步驟4

左側也會發生類似的情況。首先,繪制矩形并用相同的漸變填充。調整角度,然後将其設定為“混合模式”變亮并将不透明度降低到40%。複制左皮帶,并像之前一樣将其拉到前面。現在,選擇矩形以及皮帶的副本,然後轉到“對象”>“剪貼蒙版”>“制作”。

【學UI設計】AI人字拖拟物圖示

15.添加陰影

步驟1

選擇内部皮帶後面的兩個形狀,然後将它們複制并粘貼到背面(Ctrl + B)中。給他們黑色填充,然後進入效果>模糊>高斯模糊并應用4px半徑。

【學UI設計】AI人字拖拟物圖示

步驟2

我們不希望在某些區域看到模糊,是以我們将使用遮罩修複此問題。首先,複制并粘貼在鞋底形狀的前面(Ctrl + F),然後删除所有現有外觀。選擇應用了模糊處理的兩個形狀以及鞋底的副本(應該在它們的前面),然後轉到“對象”>“剪貼蒙版”>“制作”。

【學UI設計】AI人字拖拟物圖示

步驟3

複制并粘貼左背帶(Ctrl + B),将其填充為黑色,然後向右移動。使用鋼筆工具(P)繪制我們需要的其他兩種形狀,一種在左内皮帶後面,另一種在腳趾杆後面。

【學UI設計】AI人字拖拟物圖示

步驟4

建立鞋底的另一個副本(無筆觸,無填充),然後對第二個和第三個黑色形狀進行分組(Ctrl + G)。選擇該組和鞋底的副本,然後在“路徑查找器”面闆中按“相交” 。您将獲得複合路徑,但轉到“對象”>“複合路徑”,然後選擇“釋出”。現在,您應該具有三個形狀,可以使用這些形狀為内部皮帶,左側皮帶和腳趾杆建立陰影。

【學UI設計】AI人字拖拟物圖示

步驟5

用所示的線性漸變填充這三個形狀,并根據每個形狀的位置調整角度。将它們設定為“混合模式相乘”(白色變為透明)并将不透明度降低到35%。

【學UI設計】AI人字拖拟物圖示

16.建立拖鞋底

步驟1

将鞋底形狀(鞋墊)複制并粘貼到背面(Ctrl + B),并用訓示的顔色填充它。如圖中所示,将此形狀稍微向下和向右移動。這将是外底。

【學UI設計】AI人字拖拟物圖示

步驟2

再次複制并粘貼在鞋墊的背面(Ctrl + B)。選擇一個0.5pt的白色筆觸,删除現有的填充顔色,并将“不透明度”設定為75%。向右下方稍微移動此形狀,直到它位于鞋底中間。接下來,複制并粘貼在前面(Ctrl + F),将外底設定為“ none”,将筆觸設定為“ none”。選擇白色路徑和外底的副本,然後轉到“對象”>“剪貼蒙版”>“制作”。

【學UI設計】AI人字拖拟物圖示

17.組合圖示

步驟1

人字拖現已準備就緒,您可以建立它的一對。第一組(Ctrl + G)組成右人字拖的所有形狀,然後轉到“對象”>“變換”>“反射”。選中“垂直”,然後點選“複制”,您将獲得左人字拖。将沙灘人字拖布置在您建立的用于組成圖示的底座上方。

【學UI設計】AI人字拖拟物圖示

步驟2

選擇合适的外底,然後轉到“效果”>“風格化”>“陰影”。應用顯示的設定,然後單擊“确定”。使用左外底為另一個人字拖做同樣的事情

【學UI設計】AI人字拖拟物圖示

步驟3

此時,海灘圖示已準備就緒。如果需要,可以建立其他尺寸,但首先請確定擴充每個畫筆和應用的效果。

【學UI設計】AI人字拖拟物圖示

18.嘗試不同的設計群組合

步驟1

您可以使用人字拖的副本來建立各種類型的沙灘人字拖。首先更換鞋墊和外底的顔色對于這次的鞋墊設計,我使用了很多彩色圓圈,然後使用鞋底的副本進行遮罩。另外,請使用訓示的綠色陰影為皮帶和腳趾杆重新着色。如果需要更多資訊,可以使用參考插圖檔案。

【學UI設計】AI人字拖拟物圖示

步驟2

完成正确的人字拖操作後,請像以前一樣進行反射。這次,我将左側人字拖的外底移到了右側,以改變外觀。最後應用“陰影”效果。

【學UI設計】AI人字拖拟物圖示

步驟3

這是另一個例子。下面列出了我使用的顔色,但是,當然,您可以随意使用所需的任何顔色。在設計時,我使用了由矩形和橢圓形組成的覆寫區。

【學UI設計】AI人字拖拟物圖示

步驟4

現在,您可以使用任何沙灘拖鞋來組成一個新圖示:

【學UI設計】AI人字拖拟物圖示

至此就完成啦!

【學UI設計】AI人字拖拟物圖示

繼續閱讀