本教程向大家介紹了如何使用Illustrator制作細(xì)節(jié)豐富的網(wǎng)頁(yè)404錯(cuò)誤頁(yè)面過(guò)程，講解的非常詳細(xì)，并且作者還介紹了提高效率的技巧，教程非常實(shí)用，是AI學(xué)習(xí)者不可錯(cuò)過(guò)的一個(gè)學(xué)習(xí)機(jī)會(huì)，轉(zhuǎn)發(fā)過(guò)來(lái)，希望大家一起來(lái)學(xué)習(xí)吧。

最終效果：

在以下步驟中，您將學(xué)會(huì)如何利用 Adobe Illustrator創(chuàng)建404頁(yè)面

接下來(lái)，您將學(xué)習(xí)如何利用一個(gè)簡(jiǎn)單的路徑，陰影效果和一些基本的手段來(lái)添加時(shí)尚的圓角。你將會(huì)用到外觀面板創(chuàng)建Search字段以及4個(gè)黃色按鈕。

一、創(chuàng)建新文檔然后設(shè)置網(wǎng)格

首先ctrl+n創(chuàng)建新文件，從單位下拉菜單中選擇像素，在寬度框中輸入600，在高度框680，然后單擊高級(jí)按鈕，從上至下依次選擇RGB，屏幕(72ppi)，并勾選使新建對(duì)象與像素網(wǎng)格對(duì)齊，然后單擊確定。

啟用網(wǎng)格(視圖–顯示網(wǎng)格)和對(duì)齊網(wǎng)格(視圖–對(duì)齊網(wǎng)格)。編輯>選項(xiàng)>指南>網(wǎng)格，enter 5 in the Gridline every box and 1 in the Subdivisions box。不要被滿屏的網(wǎng)格嚇到而望而卻步，要學(xué)會(huì)用快捷鍵，這將會(huì)使你的工作變得容易的多

打開信息面板(窗口–信息)來(lái)實(shí)時(shí)確定你鼠標(biāo)所在的位置。不要忘了將計(jì)量單位選擇為像素(編輯—首選項(xiàng)—單位—常規(guī))，這些都能顯著提高你的工作效率哦。

二、制作主體形狀

① 選擇矩形工具(M)。點(diǎn)擊填色(X)，然后選擇填充并將其顏色設(shè)置在R =252 G =186 B =3，點(diǎn)擊填充后面的描邊并選擇無(wú)。然后創(chuàng)建一個(gè)275 x 400px的矩形。矩形對(duì)齊網(wǎng)格會(huì)方便你的操作。

② 利用直接選擇工具，重新選擇黃色矩形，在上方控制面板中的corner選擇10像素

③ 確保你的圓角矩形保持被選中，注意看外觀面板(窗口—外觀)，選擇描邊，并設(shè)置顏色R=232 G=146 B=0。然后點(diǎn)擊“描邊”文字，彈出菜單，將粗細(xì)設(shè)置為1像素，并檢查對(duì)齊描邊內(nèi)側(cè)按鈕。

④ 保證你的矩形依然是被選中的，注意看外觀面板，然后用添加新描邊按鈕增加第二個(gè)描邊。選擇這個(gè)新的描邊，然后設(shè)置其為黑色(R= 0，G =0 B=0)，從彈出的描邊面板中使對(duì)齊描邊向外側(cè)對(duì)齊。

繼續(xù)在該描邊面板中操作，點(diǎn)擊“不透明度”，會(huì)彈出透明面板，改變混合模式為柔光，降低不透明度為5%。

⑤ 使用矩形工具(M)，創(chuàng)建一個(gè)275px *80px的形狀，設(shè)置填充顏色為黑色，并把它作為第一張圖片。保證新的形狀保持選擇，降低其不透明度為20%，改變混合模式為柔光。切換到直接選擇工具(A)，選擇第一張圖像突出了兩個(gè)錨點(diǎn)，觀察控制面板，在角落框中輸入“10px”。最終顯示應(yīng)該像在第二幅圖像上。

⑥ 使用矩形工具(M)，創(chuàng)建一個(gè)275 *80px的形狀，設(shè)置填充顏色為黑色，并把它作為第一張圖片。確保這種新的矩形保持選中，降低其不透明度為10%，改變混合模式為柔光。

⑦ 使用矩形工具(M)，創(chuàng)建一個(gè)275 X75像素的形狀，設(shè)置填充顏色為黑色，并把它作為第一張圖片。請(qǐng)確保您的新的矩形選擇，降低其不透明度為5%，改變混合模式為柔光。

三、劃成三個(gè)部分

① 選擇編輯>首選項(xiàng)>指南和網(wǎng)格，并在網(wǎng)格線輸入1。使用鋼筆工具(P)創(chuàng)建一個(gè)273像素的水平路徑。將它如下圖所示，并添加1px的描邊然后顏色設(shè)置為R =232 G =146 B =0。

② 接下來(lái)，你需要確保你的水平路徑是完全對(duì)齊像素網(wǎng)格。取消選擇它，效果>扭曲和變換>變換。垂直拖動(dòng)滑塊0.5px，然后單擊確定。

啟用像素預(yù)覽(視圖>像素預(yù)覽)。請(qǐng)確保您的水平路徑仍處于選中狀態(tài)，并選擇效果>風(fēng)格化>陰影。進(jìn)入如下圖所示的屬性，然后單擊確定。

③ 選擇編輯>首選項(xiàng)>指南和網(wǎng)格，并在網(wǎng)格線輸入5。使用矩形工具(M)，創(chuàng)建一個(gè)275 *10px的矩形，確保它沒(méi)有設(shè)置描邊顏色，然后選擇填充.

打開漸變面板(窗口>漸變)，然后點(diǎn)擊漸變縮略圖默認(rèn)的黑色到白色的線性漸變。保持你的矩形被選中，然后注意看漸變面板。設(shè)置角度為0度，然后選擇黑色的漸變滑塊，然后換上白色(R =255 G =255 B =255)。此時(shí)注意漸變條，點(diǎn)擊它來(lái)添加一個(gè)新的漸變滑塊。選擇這個(gè)新的滑塊，設(shè)置它的顏色為黑色，集中在位置框中(從漸變面板)，并將其設(shè)置為50%。

④ 復(fù)制你的蒙版路徑(Ctrl-C>Ctrl-F)，選擇復(fù)制將它向上拖動(dòng)80像素。請(qǐng)確保您的副本保持選中，注意看透明度面板上選擇遮罩，并與如下圖所示的取代現(xiàn)有的線性漸變。請(qǐng)記住，從漸變圖像的白色數(shù)字代表位置百分比。你的新路徑看起來(lái)應(yīng)該如下圖。

⑤ 復(fù)制您的頂部，蒙版路徑(Ctrl-C >Ctrl-F)，選擇復(fù)制將它拖動(dòng)75PX起來(lái)。請(qǐng)確保您的副本保持選中，注重透明度面板上選擇的遮罩，并與如下圖所示的取代現(xiàn)有的線性漸變。最后你的新路徑看起來(lái)應(yīng)該如下圖。

四、創(chuàng)建search字段和四個(gè)按鈕

①使用矩形工具(M)，創(chuàng)建一個(gè)145 x30像素的形狀，設(shè)置填充顏色為R =232 G =146 B =0以及把它作為顯示在下面的圖像。請(qǐng)確保此新的矩形保持選中，集中在外觀面板上，選擇現(xiàn)有的填充和去影響>尺寸>內(nèi)發(fā)光。進(jìn)入如下圖所示的屬性，然后單擊確定。

②請(qǐng)確保在上一步中所做的矩形保持選中。添加1像素的描邊，設(shè)置顏色為黑色，它對(duì)齊到內(nèi)，降低不透明度為20%，并改變其混合模式為柔光。外觀面板上，請(qǐng)確保您的整個(gè)路徑選擇(只需點(diǎn)擊“路徑”文本塊從外觀面板的頂部)，并去效果>風(fēng)格化>圓角。輸入3像素的半徑，單擊確定以及去效果>風(fēng)格化>陰影。進(jìn)入如下圖所示的屬性，然后單擊確定。

③使用矩形工具(M)，創(chuàng)建一個(gè)65 *30像素的矩形，設(shè)置填充顏色為R =253 G =218 B =47，把它作為顯示在下面的圖像。

④保持黃色矩形被選中，外觀面板上，添加使用添加新的填充按鈕(指向的藍(lán)色圓圈如下圖)第二填充。選擇這個(gè)新的填充，其顏色設(shè)置在R =252 G =206 B =23以及去效果>扭曲和變換>變換。進(jìn)入如下圖所示的屬性，點(diǎn)擊OK，去效果>風(fēng)格化>陰影。請(qǐng)?jiān)谧髠?cè)窗口中顯示的屬性(如下圖)，單擊確定，再去效果>風(fēng)格化>陰影。請(qǐng)?jiān)谟覀?cè)窗口中顯示的屬性，然后單擊確定。

⑤重新選擇黃色的矩形，并使用相同的添加新的填充按鈕，添加第三個(gè)填充。選擇這個(gè)新的填充，拖動(dòng)它在外觀面板底部，并添加如下圖所示的線性漸變。請(qǐng)記住，從漸變圖像的黃色零表示不透明度百分比。這只是意味著你需要選擇你的漸變滑塊，然后輸入從漸變面板中的不透明度框“0”。

返回到外觀面板，確保在此步驟中添加的填充仍處于選中狀態(tài)，并轉(zhuǎn)到效果>扭曲和變換>變換。進(jìn)入如下圖所示的屬性，單擊確定，返回到外觀面板。選取整個(gè)路徑，并去影響>風(fēng)格化>圓角。輸入的3像素半徑，然后單擊確定。

⑥使用矩形工具(M)，創(chuàng)建三個(gè)30像素的正方形，并把它們作為顯示在下面的圖像。接下來(lái)，你需要復(fù)制用于黃色矩形的屬性，并將其粘貼到在此步驟中所做的三個(gè)正方形。只要到圖層面板，集中在右側(cè)，你會(huì)發(fā)現(xiàn)，每一個(gè)形狀帶有一個(gè)小的灰色圓圈。這就是所謂的目標(biāo)圖標(biāo)。從你的鍵盤按住Alt鍵，單擊代表您的黃色矩形并拖動(dòng)到該代表的你的三個(gè)廣場(chǎng)之一圈子中的目標(biāo)圖標(biāo)。重復(fù)此方法對(duì)于其他兩個(gè)正方形。最后看起來(lái)應(yīng)該像在第二幅圖像。

五、創(chuàng)建三個(gè)小圖標(biāo)

①編輯>首選項(xiàng)>參考線和網(wǎng)格，并在網(wǎng)格線輸入1。用鋼筆工具(P)創(chuàng)建一個(gè)11像素的水平路徑，確保它保持選中。添加4像素的描邊，設(shè)置顏色為R =232 G =146 B =0，然后打開彈出描邊面板，檢查圓帽按鈕。最后你的路徑應(yīng)該看起來(lái)像下面的圖片。

②用鋼筆工具(P)創(chuàng)建一個(gè)8像素的垂直路徑，如圖放置在第一幅圖像上，并添加相同4PX，用于水平路徑橙色描邊。確保您的垂直路徑被選中，然后對(duì)象>路徑>添加錨點(diǎn)。切換到直接選擇工具(A)，選擇新添加的錨點(diǎn)只需將其加入5像素到左側(cè)所示的第三個(gè)圖像。

③在你的橙色箭頭中選擇兩條路徑，然后轉(zhuǎn)到對(duì)象>路徑>輪廓化描邊。選擇產(chǎn)生的形狀，打開路徑查找器面板，然后單擊單元按鈕。

④選擇矩形工具(M)，創(chuàng)建一個(gè)18 X17px的矩形，并設(shè)置填充顏色為R =232 G =146 B =0。使用直接選擇工具(A)，選擇這個(gè)新矩形，然后在控制面板上的角落框中輸入“3px”。

⑤使用鋼筆工具(P)，創(chuàng)建兩個(gè)簡(jiǎn)單的路徑，如圖中的前兩個(gè)影像。選擇兩條路徑。確保沒(méi)有顏色的填充設(shè)置，然后選擇描邊，在R =253 G =218 B =12，重量其顏色設(shè)置為2px。

選擇在這個(gè)步驟做兩條路徑，然后單擊大綱按鈕，從探路者面板。確保結(jié)果組路徑被選中，只要按Shift鍵控制-G取消組合吧。取消選擇所有的路徑，并再次添加該2px的，黃色的描邊只選擇高亮顯示的微小通道的第四圖像中，并使用刪除按鈕從鍵盤中刪除它。

⑥選擇黃色通道中突出顯示的第一個(gè)圖像，然后轉(zhuǎn)到對(duì)象>路徑>輪廓化描邊。選擇產(chǎn)生的形狀，然后單擊聯(lián)合按鈕，從路徑查找器面板。隨著你的橙色，圓角矩形選擇這個(gè)新創(chuàng)建的形狀，然后單擊減號(hào)前面的按鈕從路徑查找器面板。

選擇結(jié)果組的橙色形狀以及簡(jiǎn)單的按下Control-8把它變成一個(gè)簡(jiǎn)單的復(fù)合路徑。使用直接選擇工具(A)，選擇您的新復(fù)合路徑，在控制面板上在那個(gè)角落框中輸入“0.5px”。

⑦選擇矩形工具(M)，創(chuàng)建一個(gè)12×11像素的矩形，并設(shè)置填充顏色為R =232 G =146 B =0，然后轉(zhuǎn)到對(duì)象>路徑>添加錨點(diǎn)。使用直接選擇工具(A)，在第二個(gè)圖像中選擇突出的錨點(diǎn)，然后將其向上拖動(dòng)5px。

⑧使用鋼筆工具(P)創(chuàng)建一個(gè)簡(jiǎn)單的路徑，在第一幅圖像上顯示，請(qǐng)確保它保持選擇和集中的外觀面板上。從填充刪除的顏色​​，然后選擇行程。將顏色設(shè)置在R =232 G =146 B =0和重量在3px的然后去對(duì)象>路徑>輪廓化描邊。

切換到矩形工具(M)，創(chuàng)建一個(gè)2×形狀加入5px，設(shè)置填充顏色為R =232 G =146 B =0以及如圖放置在第二幅圖像。取消對(duì)三個(gè)橘子的形狀，讓你的小家圖標(biāo)，然后單擊聯(lián)合按鈕，從路徑查找器面板。

⑨使用矩形工具(M)，創(chuàng)建一個(gè)2×5px的矩形，如圖放置第一張圖像。隨著橙色的形狀逐漸占據(jù)讓你的房子圖標(biāo)，選擇這個(gè)新的矩形，然后單擊減號(hào)前面的按鈕從路徑查找器面板。使用直接選擇工具(A)，選擇生成的形狀，在控制面板上在那個(gè)角落框輸入“1px”。

⑩選擇三個(gè)形狀，使你的小圖標(biāo)，將它們作為顯示在下面的圖像，然后選擇效果>風(fēng)格化>陰影。進(jìn)入如下圖所示的屬性，然后單擊確定。

六、添加文本

① 選擇文字工具(T)，打開字符面板(窗口>文字>字符)。只需點(diǎn)擊您的畫板上，添加了“ERROR”一段文字，并設(shè)置其顏色在R =172 G =68 B =0。使用Open Sans字體，使它加粗然后設(shè)置大小為14像素以及軌跡在900px。如圖所示，請(qǐng)確保您的一段文字仍處于選中狀態(tài)。

取消選擇文字工具(T)，添加了“search”和“or”文字片段，將它們放置如下圖所示，并使用窗口中顯示的文本屬性。

② 確保文字工具(T)仍處于活動(dòng)狀態(tài)，如下圖所示增加一些相關(guān)文字。

③ 重新選擇目前所有的已完成的模塊，效果>風(fēng)格化>陰影。進(jìn)入如下圖所示的屬性，然后單擊確定。

④ 使用文字工具(T)，加上“404”并將其顏色設(shè)置在R =252 G =206 B =23。使用相同的字體，使它加粗，設(shè)置大小為90px。

⑤ 請(qǐng)確保您的“404”一段文字仍處于選中狀態(tài)，并添加如下圖所示的三個(gè)陰影效果(效果>風(fēng)格化>陰影)。

七、創(chuàng)建工具提示

①使用矩形工具(M)，創(chuàng)建一個(gè)65 *25PX的矩形，填充顏色為R =60 G =36 B =21以及把它作為顯示在下面的圖像。

②確保您的棕色矩形保持選中，在外觀面板上，選擇現(xiàn)有的填寫以及使用復(fù)制所選項(xiàng)目按鈕(指向的藍(lán)色圓圈如下圖)，復(fù)制它。選擇新的填充，效果>轉(zhuǎn)換為形狀>矩形。進(jìn)入如下圖所示的屬性，單擊確定，然后轉(zhuǎn)到效果>扭曲以及變換>變換。進(jìn)入下圖所示的屬性，然后單擊確定。

③重新選擇你的棕色造型，注意在外觀面板上，確保整個(gè)路徑被選中，選擇效果>風(fēng)格化>陰影。進(jìn)入如下圖所示的屬性，然后單擊確定。

④使用文字工具(T)，添加“Go Back”一段文字，將顏色設(shè)置在R =172 G =68 B =0以及把它作為顯示在下面的圖像。同樣使用OpenSans字體，使其字體設(shè)置為粗體，大小設(shè)置為11像素。重新選擇這個(gè)黃色的文本加棕色形狀，按下Ctrl-G。

⑥ 重復(fù)補(bǔ)齊你的小提示(Ctrl-C> Ctrl -F)，選擇復(fù)制，并把它顯示在第一個(gè)圖像.看黃色部分的文字，用“Go Home”代替現(xiàn)有文本。重復(fù)此步驟，按照下面第二張圖中顯示的添加第三個(gè)提示“Contact Us”，并增加了棕色形狀的寬度75像素。

八、加入背景及一些微妙的陰影

選擇矩形工具(M)和然后點(diǎn)擊您的畫板來(lái)打開矩形窗口。在高度框中輸入610在寬度框中，690，然后單擊確定按鈕。確保生成的形狀保持選中，并設(shè)置其顏色在R =35 G =31 B =32。接下來(lái)，您將需要居中，所以打開對(duì)齊面板(窗口>對(duì)齊)。

設(shè)置對(duì)齊到畫板(打開彈出菜單，進(jìn)入顯示選項(xiàng)，如果你不能看到對(duì)齊到部分，如圖下圖)，請(qǐng)確保你的形狀被選中然后只需單擊水平居中以及垂直居中對(duì)齊按鈕。你的正方形應(yīng)該如下圖所示覆蓋整個(gè)畫板。最后，只需按Shift鍵 – 控制 – 使你的矩形變黑。

②重新選擇主要的黃色矩形，然后在外觀面板上，確保整個(gè)路徑被選中并添加如下圖所示的四個(gè)陰影效果。

最后恭喜你完成該頁(yè)面，以下為應(yīng)該顯示的結(jié)果

以上就是利用Adobe Illustrator制作細(xì)節(jié)豐富的網(wǎng)頁(yè)404錯(cuò)誤頁(yè)面全過(guò)程，雖然內(nèi)容有點(diǎn)多，但介紹非常詳細(xì)，相信只要大家有耐心地看完本篇教程，一定會(huì)學(xué)到很多知識(shí)點(diǎn)！

最新評(píng)論