UI設(shè)計(jì)師教你做“樂(lè)高”logo

大家好，我是郭郭，著名的樂(lè)高塑料零件為創(chuàng)造各種類型的物體提供了無(wú)限的可能性，本次Illustrator教程將想你展示如何數(shù)字化你的玩具，并為你最喜歡的網(wǎng)站搭建1個(gè)矢量字母logo，不費(fèi)一磚一瓦；

步驟一：設(shè)置網(wǎng)格

1.所謂的等角投影比使用消失點(diǎn)更適合繪制立方體。 普通的樂(lè)高積木高度是比寬度長(zhǎng)的，然而為了方便實(shí)現(xiàn)效果，本教程中使用的角度略有不同。

使用線條工具，在畫(huà)布中單擊，線條參數(shù)如下：

長(zhǎng)度：200mm 角度：35°

2.使用選擇工具（V）或全選（Command + A）選擇線，然后按確認(rèn)鍵打開(kāi)移動(dòng)窗口。 使用這些值：

水平：10mm

垂直：0mm

按復(fù)制按鈕復(fù)制該行。使用快捷鍵Command + D重復(fù)復(fù)制操作約30次。

3.選擇所有行（Command + A）并水平或垂直鏡像（Object> Transform> Mirror）。 確保按下復(fù)制按鈕來(lái)復(fù)制您的行集。                                       

4.選擇全部并將其編組（Command + G）。 將這組線轉(zhuǎn)換為參考線（Command + 5）。 這個(gè)網(wǎng)格將幫助您構(gòu)建樂(lè)高積木并將其安排在您的工作區(qū)中。 確保參考線鎖定（Command + U）。

步驟二：搭建樂(lè)高積木

1.使用鋼筆工具（P）繪制樂(lè)高積木的頂部和兩側(cè)。 由于35°的網(wǎng)格，你的磚將有一個(gè)原始的樂(lè)高磚的高寬比

2.用下列屬性繪制一個(gè)橢圓（L）：

寬度：4,2mm

高度：3,1mm

使用對(duì)齊選項(xiàng)（窗口對(duì)齊），將它居中在磚的頂部。

3.選擇復(fù)制的橢圓，將其復(fù)制（Command + C）并粘貼到現(xiàn)有（Command + F）的前面。 然后切換到路徑視圖（Command + Y），并使用直接選擇工具（A）選擇下部橢圓的上部錨點(diǎn)。，并刪除這個(gè)錨點(diǎn)。

4.選擇上部橢圓（上次創(chuàng)建的那個(gè)）的上部錨點(diǎn)，并將其刪除。

5.選擇下部和上部橢圓的左側(cè)錨點(diǎn)。 連接這兩個(gè)錨點(diǎn)（Command + J），并在右側(cè)重復(fù)此步驟。 這將創(chuàng)建一個(gè)封閉的氣瓶蓋。                              

6.打開(kāi)描邊設(shè)置選項(xiàng)卡，你可以選擇四舍五入的輪廓來(lái)改善它的外觀。

步驟三：為樂(lè)高積木著色

1.著色盡可能靈活，大家可以自由發(fā)揮。 這里，首先創(chuàng)建磚的灰度版本。 使用10％黑色色標(biāo)（標(biāo)記為“K = 10”）來(lái)填充磚的頂部。                      

2使用以下漸變值填充磚的左側(cè)：

類型：線性

角度：235°

左：K = 20

右：K = 30

這會(huì)使底部稍微暗一點(diǎn)。

3.假設(shè)照明安裝在右側(cè)，右側(cè)會(huì)稍微更亮。 調(diào)整填充的漸變：

類型：線性

角度：305°

左：K = 10

右：K = 20

4.用另一個(gè)漸變填充螺栓的頂部：

類型：線性

角度：180°

左：K = 10

右：K = 20

5.最后填寫(xiě)柱頭的一面：

類型：線性

角度：0°

左：K = 10

中間：K = 0，位置= 60°

右：K = 20

6.去掉磚頭的描邊。你可以將之前創(chuàng)建的漸變拖到你的色板庫(kù)方便以后使用；

7.使用鋼筆工具（P）并使用網(wǎng)格繪制與磚的輪廓匹配的形狀。 為填充物選擇一種顏色，沒(méi)有描邊；
 

8.將它放在磚塊上方，設(shè)置其透明度，混合模式選擇正片疊底。 這樣可以快速改變磚頭的顏色。
 

步驟四：搭建不同比例的積木磚

1.用的最多的是比例1:1的磚，但添加2:1的磚可以搭建出更豐富的形狀；

首先創(chuàng)建一個(gè)2:1的磚，保留1:1的基本磚進(jìn)一步使用，并復(fù)制兩次新磚，確保與網(wǎng)格精準(zhǔn)對(duì)齊。

2.新磚已經(jīng)看起來(lái)不錯(cuò)，但我們要?jiǎng)?chuàng)建一個(gè)真正的2×1磚，而不是兩個(gè)1×1磚相鄰放置。 將放置在最上方的色塊與兩個(gè)1:1磚分離開(kāi)；

3.刪除前景磚的頂部和右側(cè)，使用直接選擇工具（A）和網(wǎng)格來(lái)補(bǔ)足刪除的面。

4.使用選擇工具（V）選擇兩個(gè)彩色路徑，在路徑查找器中選擇合集，合并成單獨(dú)路徑
。

5.將合并后的路徑移回原來(lái)的位置。1個(gè)真正的2×1磚就創(chuàng)建好了

6.組裝logo的坡磚（屋頂磚）和倒坡磚使用的是同樣的方法，其中磚的較薄的一端是基本磚的三分之一高度。 用20％灰色填充斜坡路徑（K = 20）。

7.每創(chuàng)建了一個(gè)新的磚塊，你應(yīng)該選擇它的所有部分并將其編組（Command + G），便于移動(dòng)和構(gòu)建更復(fù)雜的結(jié)構(gòu)。

這七個(gè)磚塊在本教程中使用：

1×1磚

2×1磚

3×1磚

2×1坡磚（前視圖）

2×1坡磚（后視圖）

2×1倒坡磚（前視圖）

2×1倒坡磚（后視圖）

步驟五：創(chuàng)建像素風(fēng)格字體

1.我為本教程創(chuàng)建了一個(gè)像素風(fēng)格的logo，可以自由發(fā)揮或直接使用現(xiàn)有的像素字體

2.只需要將你之前創(chuàng)建的不同形狀的磚移動(dòng)到像素字體的對(duì)應(yīng)位置，然后使用快捷鍵（Command +]）-向上移動(dòng)圖層和（Command + [）-向下移動(dòng)圖層，來(lái)快捷跳轉(zhuǎn)磚的前后順序；

3.使用直接選擇工具（A）選中每個(gè)磚頭最上面的顏色路徑修改其顏色，就能快速修改顏色并保證3D效果；

步驟六：添加投影

1.選擇完整的logo并復(fù)制后，使用快捷鍵（Command + Shift + G）取消編組后，選擇所有路徑，在路徑查找器中選擇合集-合并所有形狀組件，顏色填充為合適，并旋轉(zhuǎn)（對(duì)象>變換>旋轉(zhuǎn)）到-35°以使陰影處于水平位置。

2.剪切（對(duì)象>變換>剪切）陰影：角度：-50°，使之水平。再旋轉(zhuǎn)（對(duì)象>變換>旋轉(zhuǎn)）陰影35°使其回到其原始位置。

3.使用套索工具（Q）選擇投影（“VECTOR”）的上面一行并將其放到正確的位置。 對(duì)下行（“DIARY”）做同樣的操作。 使用快捷鍵（Command + [））將陰影調(diào)整至字體后；

步驟七：繪制地面圖案

1.因?yàn)榫G地面積太大，可以先繪制一個(gè)4*4大小的單元，并將其編組。

2.使用矩形工具（M）繪制一個(gè)矩形，確保矩形所框選的部分上下和左右分別能湊成兩個(gè)完整的鞋釘。

3.用直接選擇工具選中4*4區(qū)域和矩形，創(chuàng)建剪切蒙版（Command + 7），并在路徑查找器中選擇“修邊”；
 

4.將所得到的矩形拖拽至色板處成為填充圖案。

5.使用矩形工具繪制與畫(huà)布等同大小的背景，填充選擇之前儲(chǔ)存的圖案，調(diào)整至最底層。此時(shí)可以隱藏參考線，調(diào)整logo陰影的位置以適應(yīng)于背景；

6.最后復(fù)制矩形，將其粘貼在背景圖案前面（Command + F），將其填充為綠色，并將其混合模式調(diào)整為正片疊底。

到此，一個(gè)完整的樂(lè)高風(fēng)格字體logo就完成了?？粗襟E多，但實(shí)際上很簡(jiǎn)單，只有設(shè)置好參考線和繪制出標(biāo)準(zhǔn)積木單元， 耐心的一步步搭建就好了?？靵?lái)創(chuàng)建屬于你自己的樂(lè)高字體logo。

原文地址：https://translate.google.com/translate?hl=zh–tutorial%2F&sandbox=1
相關(guān)文章--《UI大牛告訴你交互動(dòng)效原則》