AI教程：教你如何繪制一枚未來科技感電源按鈕

1、AI教程：教你如何繪制一枚未來科技感電源按鈕作者: 一網(wǎng)學(xué)   最后更新時(shí)間：2015-10-26 10:28:35小編：今天這篇AI教程全是細(xì)節(jié)，共分70個(gè)步驟，步驟多但不啰嗦，想學(xué)的耐心看完哦，作為同學(xué)們進(jìn)階練手是再好不過的了。效果圖：1.打開Adobe Illustrator，矩形工具，繪制一個(gè)矩形，寬：100px 高：120px2.建立一條垂直參考線， 用鋼筆工具中的添加錨點(diǎn)工具在矩形的中間增加一個(gè)錨點(diǎn)。3.現(xiàn)在我們選擇新的錨點(diǎn)，用直接選擇工具，將錨移動(dòng)，直到你的形狀如下圖所示。4.操控頂端的錨點(diǎn) ，使其形狀彎曲，如下圖所示。5.現(xiàn)在我們要得到另外兩個(gè)我們

2、所創(chuàng)建的對象，要把三個(gè)對象集中在一個(gè)點(diǎn)。選擇旋轉(zhuǎn)工具，然后單擊底部的一部分。然后，我們會(huì)看到光標(biāo)變成一個(gè)黑色的小箭頭。6.按住ALT，復(fù)制對象（出現(xiàn)黑色箭頭和白色箭頭），打開屬性窗口，使用窗口中的角度大小：120,248°。考慮到這三個(gè)點(diǎn)的對象，要把360°分成三份，我們必須旋轉(zhuǎn)120°，效果如下圖所示。7.Ctrl+D，會(huì)自動(dòng)重復(fù)之前的步驟（也就是會(huì)旋轉(zhuǎn)120°）。8.我們將這些對象整合成一個(gè)。在路徑查找工具里，點(diǎn)擊“聯(lián)集”也就是第一個(gè)，然后點(diǎn)擊擴(kuò)展，將它們轉(zhuǎn)變?yōu)橐粋€(gè)整體。9.現(xiàn)在我們要使三者的交接處圓一些。效果>風(fēng)格化>圓角。10.設(shè)置1

3、0px半徑。11.現(xiàn)在讓我們將圓角化的對象從原有的對象分離開來。對象>擴(kuò)展外觀，得到最后的圖像。12.效果如下圖所示。13.中間的圖像，如外面的形狀制作過程相同。14.重復(fù)1-12的步驟。我們將會(huì)建立這樣的一個(gè)新對象。15.我們先只創(chuàng)建這樣一個(gè)新的對象，它只是一半。16.使用鏡像工具，（在旋轉(zhuǎn)工具里面），按住Shift+Alt，復(fù)制，翻轉(zhuǎn)。得到一個(gè)對稱圖像。17.現(xiàn)在我們使用路徑選擇工具，合并兩個(gè)圖像，你也可以用 刪除錨點(diǎn)工具，將兩個(gè)圖像結(jié)合。18.與之前復(fù)制第一個(gè)對象的步驟相同，第一個(gè)旋轉(zhuǎn)120°，第二個(gè)Ctrl+D。如果遺忘怎么做，回到6-7步驟看一下。19.最后我們建立一

4、個(gè)圓形，這將用作指示燈，將點(diǎn)亮在其懸停狀態(tài)的按鈕。我們將完成在Photoshop中添加蒙版進(jìn)行下一步的處理。20.現(xiàn)在選擇所有的矢量圖形，Ctrl+C，將它們復(fù)制到剪貼板里。21.打開Photoshop。建立一個(gè)1024x768px大小的圖層。22.將背景設(shè)置為黑色，然后選擇背景圖層，在圖層混合模式里，漸變疊加。23.漸變疊加參數(shù)設(shè)置如下：#333333、#000000，徑向漸變，范圍在130-150%之間。你可以拖動(dòng)漸變的中心，直到最后效果是你想要的。24.Ctrl+V或者編輯>粘貼 將圖形粘貼到ps里。25.我們現(xiàn)在只有一個(gè)形狀圖層在ps里，我們必須要將它分成不同的圖層。復(fù)制四個(gè)，減

5、去不必要的形狀，留下組成的部分。26.效果和圖層排序如下圖所示 。別忘了給每個(gè)圖層命名。之后我們將在Photoshop里添加圖層樣式。27.主按鍵（也就是1-12步驟里做出來的圖形）。打開圖層樣式，在“混合選項(xiàng)：默認(rèn)”，為了看到我們的圖層效果，降低透明度為零。首先，漸變疊加，顏色333333（暗灰色）和000000（黑色。徑向漸變，范圍120%。28.內(nèi)陰影，取消全局光。正片疊底，-90°。參數(shù)設(shè)置如下圖所示：29.我們已結(jié)束按鈕編輯過程的第一部分，現(xiàn)在，我們要做它的正面部分，這一個(gè)不透明的表面，我們將在之后添加的光澤度和3D凸出效果。30.現(xiàn)在我們制作按鈕的邊緣。圖層混合模式-描邊

6、-3px 外描邊。顏色參數(shù)如下圖所示：31.通過改變漸變的角度，我們把較亮的區(qū)域放在我們希望放在的位置。在這種情況下，最亮的地方應(yīng)該在邊緣的上部。32.現(xiàn)在我們通過添加高光和陰影來體現(xiàn)更復(fù)雜的鍍鉻金屬效果。斜面和浮雕：描邊浮雕、平滑、100 。大?。?，軟化：2.詳細(xì)的參數(shù)設(shè)置如下圖所示：33.我們添加內(nèi)發(fā)光從而可以顯示出按鈕的3D立體效果。正片疊底，透明度20%，黑色。陰塞：60  大?。?0詳細(xì)的參數(shù)設(shè)置如下圖所示：34.現(xiàn)在，我們需要對按鈕手動(dòng)繪制一些細(xì)節(jié)。第一步是選擇按鈕的形狀層，轉(zhuǎn)到路徑窗口，選擇按鈕層以創(chuàng)建具有相同形狀的路徑。35.現(xiàn)在，我們通過去選擇>修改>

7、收縮 收縮該選區(qū)的大小。比原來的大小減少10個(gè)像素。36.現(xiàn)在我們?nèi)峄x區(qū)。去選擇>修改>羽化或按Alt + Ctrl + D鍵（Windows）中。我們采用1個(gè)像素的羽化，然后按確定。37.Ctrl+H隱藏選區(qū)（螞蟻線）。使用畫筆工具，使用一個(gè)35px的畫筆和10的流量，新建圖層，使用白色畫筆在新圖層里畫一些光線，是按鈕對光線的反射光。因?yàn)楣馐莵碜陨戏降模o按鈕的上部區(qū)域添加更亮的光，所以我們將在對象的暗部增加一點(diǎn)高光。38.再次 Ctrl+H，顯現(xiàn)出選區(qū)（螞蟻線），我們將再減少一些像素，然后再配合畫筆增加一些更復(fù)雜的效果。這次我們減少3px，羽化1px。39.再次隱藏選區(qū)。然

8、后 Delete刪去在上一步多畫出的一些，也就是超出這步所選區(qū)域里的。40.現(xiàn)在我們制作按鈕的中間部分，降低“button bevel”的透明度至0%。41.圖層樣式-內(nèi)陰影：正片疊底，-90°，透明度詳細(xì)參數(shù)如下圖所示：42.描邊。詳細(xì)參數(shù)如下圖所示：,1，外部，正常，顏色。43.投影，濾色，透明度13%。詳細(xì)參數(shù)如下圖所示：44.內(nèi)發(fā)光，濾色，透明度45%，#4A4A4A，柔和，邊緣詳細(xì)參數(shù)如下圖所示：45.下圖是我們做好的主按鈕。46.現(xiàn)在我們制作按鈕icon，字體下載：47.圖層樣式，3px，外部，黑色48.斜面浮雕，描邊浮雕，平滑，100。濾色30%，正片疊底60%。詳細(xì)參

9、數(shù)如下圖所示：49.漸變疊加，詳細(xì)參數(shù)如下圖所示：.對稱，90°，70%50.現(xiàn)在我們在按鈕背后創(chuàng)建3個(gè)LED發(fā)光按鈕，第一步是給形狀圖層添加顏色06B9FB，雙擊它來編輯顏色。（原教程步驟不清楚，小編建議是新建圖層，然后用橢圓工具畫 一個(gè)圓，放置在主按鍵背后，圖片格式化?；蛘邫E圓選區(qū)工具，填充R6，G185，B251）51.現(xiàn)在在路徑處選擇主要按鈕，出現(xiàn)選區(qū)。52.將選區(qū)范圍擴(kuò)大，選擇>修改>展開53.輸入8px，ok。54.選擇>反選，或者Ctrl+Shift+I。55.給其添加蒙版，獲得最后LED光的形狀。56.給LED光的周圍增減一些小的光，也就是個(gè)LED光

10、添加 圖層 樣式，描邊，顏色選取如主按鍵表面的顏色57.斜面浮雕，外描邊。詳細(xì)參數(shù)如下圖所示：58.內(nèi)發(fā)光，正片疊底。詳細(xì)參數(shù)如下圖所示：.59.投影，正片疊底。詳細(xì)參數(shù)如下圖所示：60.效果如圖所示61.復(fù)制LED圖層，然后在LED副本上，填充其為白色 。外發(fā)光，線性減淡（添加）詳細(xì)參數(shù)如下圖所示：62.投影，濾色詳細(xì)參數(shù)如下圖所示：.63.新建圖層，橢圓工具，畫一個(gè)如下大小的圓，羽化20PX。64.在羽化后填充白色。65.圖層樣式里的混合選項(xiàng)，填充不透明度0%。66.漸變疊加：疊加，透明度60%，線性，詳細(xì)參數(shù)如下圖所示：67.現(xiàn)在我們完成了按鈕的所有的細(xì)節(jié)，我們需要給背景添加一些細(xì)節(jié)，用我們之前在 AI里創(chuàng)建的圖形“backgr bevels ”。68.填充0%69.圖層樣式，描邊，1px，35%透明度，正片疊底。70.投影，濾色。詳細(xì)參數(shù)如下圖所示：71.最后我們需要隱藏該圖形的一部分，橢圓工具，畫一個(gè)如下圖大小的圓，羽化20px，然后添加蒙版。完成！最終效果圖：原文地址：design.tutsp