1h1g2fdhg2fd12016-05-04

前言

程序條是UI設計中的常見元素，通常我們在引導使用者進行操作步驟指導時會用上，而打造一個精緻的程序條對於增強使用者體驗方面發揮不可小視的作用。

今天我們要學習用AI來打造程序條，接下來我們主要學會掌握AI裡對於高光和陰影的製作技巧。

一、製作背景

STEP 01

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

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

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

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

STEP 02

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

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

然後進入【效果>藝術效果>膠片顆粒】，在設定面板中設定如下引數。顆粒效果帶給整體感覺以典雅精緻的感覺。下次你的專案裡可以試試製作這樣的背景。

二、繪製進度條外形

STEP 03

首先，你可以將上一部分製作的背景鎖定（ctrl+2），這樣就不會在你接下來操作中影響到背景。

分別利用矩形工具和橢圓工具畫上一條矩形和五個正圓。然後關閉“對齊網格”，進入【編輯>首選項>常規】，把鍵盤增量的引數設定為1px。

STEP 04

選中上一步所繪製的物件，開啟路徑查詢器，點選形狀模式中的聯集模式。