本教程主要使用Illustrator制作細節豐富的網頁404頁面，作者時不時還插播提高效率的小技巧，想練下手的千萬不要放過，下面讓我們一起拉學習吧。

最終效果：

在以下步驟中，您將學會如何利用 Adobe Illustrator創建404頁面

接下來，您將學習如何利用一個簡單的路徑，陰影效果和一些基本的手段來添加時尚的圓角。你將會用到外觀面板創建Search字段以及4個黃色按鈕。

一、創建新文檔然后設置網格

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

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

打開信息面板(窗口–信息)來實時確定你鼠標所在的位置。不要忘了將計量單位選擇為像素(編輯—首選項—單位—常規)，這些都能顯著提高你的工作效率哦。

二、制作主體形狀

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

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

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

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

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

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

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

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

三、劃成三個部分

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

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

啟用像素預覽(視圖>像素預覽)。請確保您的水平路徑仍處于選中狀態，并選擇效果>風格化>陰影。進入如下圖所示的屬性，然后單擊確定。

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