如何用Adobe Illustrator制作細(xì)節(jié)豐富的網(wǎng)頁(yè)404錯(cuò)誤頁(yè)面 AI設(shè)計(jì)技巧介紹

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