Illustrator繪制精致的網頁進度條效果圖

進度條是UI設計中的常見元素，通常我們在引導用戶進行操作步驟時會用上，而一個精致的進度條在增強用戶體驗方面發揮著不可小視的作用。今天我們要學習用AI來打造進度條，主要是AI里對于高光和陰影的制作技巧，動手開練吧。

先看看效果圖

一、制作背景

STEP 01

是誰說過，越簡單越困難。這句話其實一點不矛盾。這個進度條看似非常簡單，卻需要我們在比例上嚴格把控，才會讓它看上去盡顯精致。這就需要我們運用好網格線。

打開AI新建一個寬600px高200px的文檔，去掉“使新建對象與像素網格對齊”的選項，去掉這個選項就會讓你在繪圖的時候落筆更自由。其他參數請參見下圖。

新建成功后，進入到【編輯>首選項>參考線和網格】，將網格線間隔設置為1px，次分割線設置為1。這里參數設置的意思就是讓1個像素作為一個網格，這樣組成網格線。

在繪圖之前設置好網格有助于繪圖中對于精確比例的把握，就像你有把精準的尺。這時，如果你還沒有設置“顯示網格”和“對齊網格”，那要盡快去視圖中勾選這兩項。

STEP 02

利用矩形工具，繪制一個和畫板同等大小的矩形，填充淺灰色。然后再打開外觀面板，在原有填色的基礎上新增一個填色。新填色設置為漸變填充。漸變為徑向漸變，漸變色的設置可以參考我的設置。

接下來要為背景增添一點顆粒感。保持背景矩形仍被選中，增加第三個填色，這次填色為黑色，然后把黑色填色層的透明度降為4%，混合模式設置為正片疊底。

然后進入【效果>藝術效果>膠片顆�！�，在設置面板中設置如下參數。顆粒效果帶給整體感覺以典雅精致的感覺。下次你的項目里可以試試制作這樣的背景。