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

在以下步驟中,您將學(xué)會如何利用 Adobe Illustrator創(chuàng)建404頁面
接下來,您將學(xué)習(xí)如何利用一個簡單的路徑,陰影效果和一些基本的手段來添加時尚的圓角。你將會用到外觀面板創(chuàng)建Search字段以及4個黃色按鈕。
一、創(chuàng)建新文檔然后設(shè)置網(wǎng)格
首先ctrl+n創(chuàng)建新文件,從單位下拉菜單中選擇像素,在寬度框中輸入600,在高度框680,然后單擊高級按鈕,從上至下依次選擇RGB,屏幕(72ppi),并勾選使新建對象與像素網(wǎng)格對齊,然后單擊確定。
啟用網(wǎng)格(視圖–顯示網(wǎng)格)和對齊網(wǎng)格(視圖–對齊網(wǎng)格)。編輯>選項>指南>網(wǎng)格,enter 5 in the Gridline every box and 1 in the Subdivisions box。不要被滿屏的網(wǎng)格嚇到而望而卻步,要學(xué)會用快捷鍵,這將會使你的工作變得容易的多
打開信息面板(窗口–信息)來實時確定你鼠標(biāo)所在的位置。不要忘了將計量單位選擇為像素(編輯—首選項—單位—常規(guī)),這些都能顯著提高你的工作效率哦。

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

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

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

④ 保證你的矩形依然是被選中的,注意看外觀面板,然后用添加新描邊按鈕增加第二個描邊。選擇這個新的描邊,然后設(shè)置其為黑色(R= 0,G =0 B=0),從彈出的描邊面板中使對齊描邊向外側(cè)對齊。
繼續(xù)在該描邊面板中操作,點擊“不透明度”,會彈出透明面板,改變混合模式為柔光,降低不透明度為5%。

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

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

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

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

② 接下來,你需要確保你的水平路徑是完全對齊像素網(wǎng)格。取消選擇它,效果>扭曲和變換>變換。垂直拖動滑塊0.5px,然后單擊確定。
啟用像素預(yù)覽(視圖>像素預(yù)覽)。請確保您的水平路徑仍處于選中狀態(tài),并選擇效果>風(fēng)格化>陰影。進(jìn)入如下圖所示的屬性,然后單擊確定。

③ 選擇編輯>首選項>指南和網(wǎng)格,并在網(wǎng)格線輸入5。使用矩形工具(M),創(chuàng)建一個275 *10px的矩形,確保它沒有設(shè)置描邊顏色,然后選擇填充.
打開漸變面板(窗口>漸變),然后點擊漸變縮略圖默認(rèn)的黑色到白色的線性漸變。保持你的矩形被選中,然后注意看漸變面板。設(shè)置角度為0度,然后選擇黑色的漸變滑塊,然后換上白色(R =255 G =255 B =255)。此時注意漸變條,點擊它來添加一個新的漸變滑塊。選擇這個新的滑塊,設(shè)置它的顏色為黑色,集中在位置框中(從漸變面板),并將其設(shè)置為50%。

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

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

相關(guān)文章
PS繪制一個漂亮創(chuàng)意的扁平插畫風(fēng)格404頁面
這篇教程是向腳本之家的朋友介紹PS繪制一個漂亮創(chuàng)意的扁平插畫風(fēng)格404頁面方法,教程繪制出來的頁面非常的漂亮,而且作者也做了詳細(xì)的制作步驟,很不錯,推薦過來,一起來2015-09-15
DIV+CSS實現(xiàn)的漂亮的藍(lán)天白云404錯誤頁面代碼
是一段實現(xiàn)了漂亮的藍(lán)天白云404錯誤頁面的代碼,此段代碼適用于所有網(wǎng)頁使用,有興趣的朋友們可以前來下載使用2015-01-15網(wǎng)站中404頁面到底有什么用?探討404頁面的作用和如何設(shè)置
建站的時候都會考慮404頁面,但是404頁面對于網(wǎng)站到底有什么用?隨著網(wǎng)站內(nèi)容的增多,還有相應(yīng)內(nèi)鏈的復(fù)雜度增加,都會造成死鏈問題。所以借助于404頁面的提示作用,就能夠2014-11-05
純CSS3實現(xiàn)的精致的占領(lǐng)月球404錯誤頁面效果源碼
純CSS3實現(xiàn)的精致的占領(lǐng)月球404錯誤頁面效果源碼,是一段適應(yīng)于網(wǎng)頁出錯或者找不到網(wǎng)址的情況下顯示的代碼,比較適合娛樂的場合使用。404就是當(dāng)頁面找不到時,顯示的頁面。2014-10-31- 本文主要講訴在做網(wǎng)站優(yōu)化時我們要學(xué)會利用錯誤頁面,例如我們網(wǎng)站可能出現(xiàn)的404錯誤頁面,以及在制作404頁面是需要注意到的問題2014-08-27
404 not found是什么意思?為什么會出現(xiàn)404 not found頁面以及如何解決
我們在瀏覽網(wǎng)頁的時候,有時候頁面中會提示404 not found,那么404 not found是什么意思?導(dǎo)致網(wǎng)頁中會出現(xiàn)404 not found頁面的原因有哪些?針對此問題,本文就為大家進(jìn)行2014-07-30你眼中的404頁面未必返回404狀態(tài)碼 404頁面如何正確設(shè)置
404頁面存在的意義就是告訴瀏覽者和搜索引擎所請求的頁面不存在或是鏈接錯誤,你這檢查只能說明用戶看到的是404頁面,而對于搜索引擎呢?會對這個頁面返回404狀態(tài)碼嗎2014-07-05網(wǎng)站設(shè)計中如何詳細(xì)的自定義404錯誤頁面的制作和設(shè)置
相信網(wǎng)上有很多關(guān)于404頁面的制作帖子了,這里我要總結(jié)的是根據(jù)自己這一次網(wǎng)站被降權(quán)而總結(jié)的404自定義錯誤頁面的制作,絕對超級詳細(xì)2014-01-12- 在SEO學(xué)習(xí)的過程中,404頁面是其中必須要掌握的一個SEO技巧,正確使用404頁面對網(wǎng)站絕對是有益無害的2011-05-13
jquery實現(xiàn)的火箭動畫效果的404錯誤頁面,比較適合娛樂的場合使用。404就是當(dāng)頁面找不到時,顯示的頁面。2010-12-12




