在這篇教程里，我們將學(xué)會(huì)使用Adobe Illustrator中的3D效果創(chuàng)建一組立體網(wǎng)頁(yè)按鈕，制作出來(lái)的按鈕非常漂亮，為什么要用這種方法?原因是這種方法替代了使用不同的筆刷和其他工具來(lái)創(chuàng)建高光和陰影，只需一步就能實(shí)現(xiàn)，充分利用了現(xiàn)成的光線(xiàn)設(shè)置和斜角形狀。教程簡(jiǎn)便實(shí)用，轉(zhuǎn)發(fā)過(guò)來(lái)，希望與腳本之家的朋友一起分享學(xué)習(xí)！

最終效果圖：

Illustrator具體制作步驟：

第一步：按鈕形狀

我們從創(chuàng)建基本的網(wǎng)頁(yè)按鈕形狀開(kāi)始。選擇圓角矩形工具，在畫(huà)板中任意位置點(diǎn)擊一下打開(kāi)圓角矩形窗口。填入如下圖所示的數(shù)字以得到我們需要的形狀。選擇淺灰色作為填充顏色。

第二步：3D設(shè)置

在此矩形選中的狀態(tài)下，選擇效果菜單》3D》凸出和斜角。在下圖的右方你可以看到默認(rèn)設(shè)置，只有”指定繞X軸旋轉(zhuǎn)”的值有所改變。通常情況下我更愿意使用斜角形狀，但有時(shí)不能得到讓人滿(mǎn)意的結(jié)果。在這個(gè)例子中，如果你選擇”長(zhǎng)圓形”作為斜角形狀改變會(huì)更明顯，邊緣會(huì)更圓潤(rùn)，而且之后也不用擔(dān)心高光和陰影的問(wèn)題。

如果你增加高度值，圓形的邊緣就會(huì)變得更厚。

在凸出與斜角選項(xiàng)窗口中，點(diǎn)擊更多選項(xiàng)按鈕打開(kāi)整個(gè)的對(duì)話(huà)框，注意底部的選項(xiàng)。如果你想加亮左上角，將光線(xiàn)移動(dòng)到如下所示的上方，或者你想加亮右下角的話(huà)將其移動(dòng)至下方。

第三步：3D按鈕

下圖是我的設(shè)置值。更改”指定繞X軸旋轉(zhuǎn)”值，在斜角中選擇長(zhǎng)圓形，將高度值從4pt更改為6pt，然后將光線(xiàn)稍微移向左側(cè)。

第四步：給按鈕上色

在3D按鈕已經(jīng)選擇的情況下，選擇對(duì)象》擴(kuò)展外觀命令，現(xiàn)在，使用直接選擇工具(A)選擇內(nèi)部的圓角矩形，給它填充如下圖所示的線(xiàn)性漸變。將角度設(shè)置為90度。在此矩形選中的狀態(tài)下，在外觀面板中雙擊內(nèi)容(原因是這個(gè)形狀是在編組中)，這樣你就能看到已經(jīng)存在的屬性。接下來(lái)，選擇效果》風(fēng)格化》內(nèi)發(fā)光命令，使用如下所示的值。

第五步：添加發(fā)光效果

在外觀面板中選擇已有的填色，點(diǎn)擊下方的”復(fù)制所選項(xiàng)目”圖標(biāo)，你會(huì)得到第二個(gè)填色，將漸變更改為黑白漸變，角度設(shè)置為50度。將混合模式更改為濾色，不透明度降低為75%。

像前面一樣將第二個(gè)填充再?gòu)?fù)制一遍，使用同樣的漸變，角度更改為140%，不透明度調(diào)整到75%至90%之間。

第六步：使用藝術(shù)筆刷

使用直接選擇工具(A)選擇內(nèi)部的矩形，然后從對(duì)象菜單中選擇復(fù)制粘貼到前面命令。在圖層面板中將新矩形拖出按鈕編組，因?yàn)槲覀儾幌胱屗旁谀抢?。移除現(xiàn)有的屬性，給它添加黑色的描邊。在此矩形被選中的狀態(tài)下，使用對(duì)象》路徑》添加錨點(diǎn)命令兩次增加額外的錨點(diǎn)。接下來(lái)，使用剪刀工具(C)在所示的兩個(gè)點(diǎn)上點(diǎn)擊兩次，將形狀剪短，然后刪除底部的部分。

現(xiàn)在，你需要一個(gè)藝術(shù)筆刷。我在這篇文章中的第九步解釋過(guò)如何使用它。唯一不同的是，這次我從100 x 3像素的橢圓開(kāi)始，而不是200 x 5像素。在你拖拽它到筆刷面板保存為新的藝術(shù)筆刷之后，使用它從路徑的頂部描邊，將比重設(shè)置為2pt。

第七步：添加陰影

再一次拷貝粘貼內(nèi)部的矩形，將其拖拽出按鈕編組并放置于編組之前。移除已有的外觀，將其填充為黑色(1)。現(xiàn)在，將黑色矩形拷貝粘貼到前面，更改填色，和黑色矩形區(qū)分開(kāi)來(lái)。按下兩次向上的方向建將紅色矩形向上移動(dòng)(2)。鍵盤(pán)的增加值應(yīng)該設(shè)置為1像素(編輯菜單》首選項(xiàng)》常規(guī))。

選擇兩個(gè)形狀然后從路徑查找器面板選擇減去頂層》擴(kuò)展，剩下的薄的形狀應(yīng)該填充的是黑色。(3)將混合模式更改為正片疊底，降低不透明度至20%。

第八步：光澤

接下來(lái)，使用鋼筆工具(P)如下圖所示在按鈕中間畫(huà)一條路徑。將內(nèi)部矩形再次拷貝粘貼到前面，移除已有的外觀，添加黑色描邊。選擇此矩形和藍(lán)色和路徑，在路徑查找器面板選擇分割。在對(duì)象菜單中選擇取消編組，然后刪除底部部分。

給此形狀填充一個(gè)黑色到白色的線(xiàn)性漸變，角度設(shè)置為負(fù)90度。將混合模式更改為濾色(黑色將變成透明)，不透明度降低到30%。

第九步：文字

我們來(lái)添加文字。使用文字工具鍵入文字”TRY NOW”，使用Anja Eliane字體，35pt大小。你可以在這里下載此字體。在對(duì)象菜單中選擇擴(kuò)展，然后給文字填充如下所示的線(xiàn)性漸變，角度設(shè)置為負(fù)45度。接下來(lái)，選擇效果菜單》風(fēng)格化，應(yīng)用如下所示的投影。

現(xiàn)在，鍵入”30 DAY TRIAL”，使用Arial字體，加粗，15pt大小，然后從對(duì)象菜單中選擇擴(kuò)展，然后給文字填充白色，再次添加如下圖所示的投影效果。

第十步：箭頭

從符號(hào)面板中打開(kāi)符號(hào)庫(kù)菜單并且在箭頭類(lèi)別中找到箭頭24。將其拖拽到你的工作區(qū)中，然后按下面板底部的”斷開(kāi)符號(hào)鏈接”圖標(biāo)。對(duì)其取消編組兩次，然后選擇效果菜單》風(fēng)格化》圓角，應(yīng)用3像素的半徑(1)。給箭頭填充如下所示的線(xiàn)性漸變，然后用如下所示的顏色給其添加0.5pt的描邊(2)。

將箭頭移動(dòng)到按鈕上，選擇效果菜單》風(fēng)格化，應(yīng)用投影效果。

選中此箭頭，在對(duì)象菜單中選擇擴(kuò)展外觀，目的是將應(yīng)用的兩種效果擴(kuò)展，然后選擇對(duì)象菜單》變換》縮放，選擇80%，點(diǎn)擊復(fù)制。這樣你會(huì)得到小一點(diǎn)的箭頭。像下圖所示那樣放置它們，確保它們水平對(duì)其。將它們兩個(gè)都選擇上，然后選擇對(duì)象菜單》變換》反向。選擇垂直然后點(diǎn)擊拷貝，將兩個(gè)新建頭放置在右側(cè)，這樣按鈕就初步成型了。

第十一步：陰影

現(xiàn)在唯一缺少的就是按鈕底部的陰影了。選擇橢圓工具(L)，在底部畫(huà)出一個(gè)扁平的橢圓，填充顏色設(shè)置為黑色(1)。將此橢圓放置在按鈕之后，然后選擇對(duì)象菜單》路徑》偏移路徑，應(yīng)用最少7個(gè)像素的偏移。你會(huì)在中間得到一個(gè)小一點(diǎn)的橢圓(2)。將大橢圓的不透明度設(shè)置為0%，然后將兩個(gè)都選取上，選擇對(duì)象菜單》混合》混合選項(xiàng)，選擇25指定的步數(shù)，然后選擇對(duì)象菜單》混合》建立(3)。將得到的混合編組的不透明度降低為75%，如果你將按鈕放置于特別的背景上，也要將混合模式更改為正片疊底。

這里就是最終的效果。

第十二步：其他顏色

通過(guò)這個(gè)按鈕的創(chuàng)建方法你可以得到其它不同的顏色。你需要做的就是將按鈕拷貝一遍，做一點(diǎn)更改而已。在下面的圖中你可以看到3個(gè)例子：藍(lán)色、綠色和紫色。在下方所示的圖中，所有可見(jiàn)的形狀都沒(méi)有更改，保持了它們的原貌。而那些隱藏的意味著將會(huì)被修改，我們一個(gè)一個(gè)來(lái)。

我們從圓角矩形開(kāi)始。使用直接選擇工具(A)選擇它，并且查看一下外觀面板。將第一個(gè)漸變填充更改為如下所示的新的漸變，其它屬性不做修改。綠色和藍(lán)色按鈕也用同樣的方法。

對(duì)于文字，簡(jiǎn)單的將漸變中間的顏色從淺橙色分別更改為淺藍(lán)色，淺綠色和淺紫色。文字”30 DAY TRIAL”保持原貌。

現(xiàn)在，選擇箭頭，像如下所示改變漸變填充和描邊。效果仍保持不變。

最終，就像你在第十步所做的那樣，選擇擴(kuò)展外觀，然后通過(guò)縮放得到小一點(diǎn)的箭頭，將兩個(gè)箭頭反向就完成了。

最終圖片：

這就是最終的圖片，4個(gè)可以應(yīng)用到網(wǎng)頁(yè)上的按鈕。

以上就是使用Adobe Illustrator中的3D效果創(chuàng)建一組立體網(wǎng)頁(yè)按鈕全過(guò)程，希望大家看完之后，都會(huì)使用這種制作方法！謝謝大家觀看！

最新評(píng)論