一、制作背景
STEP 01
是誰說過，越簡單越困難，
用AI打造精致的進(jìn)程條
。這句話其實(shí)一點(diǎn)不矛盾。這個(gè)進(jìn)程條看似非常簡單，卻需要我們在比例上嚴(yán)格把控，才會(huì)讓它看上去盡顯精致。這就需要我們運(yùn)用好網(wǎng)格線。打開AI新建一個(gè)寬600px高200px的文檔，去掉“使新建對象與像素網(wǎng)格對齊”的選項(xiàng)，去掉這個(gè)選項(xiàng)就會(huì)讓你在繪圖的時(shí)候落筆更自由。其他參數(shù)請參見下圖。
STEP 02
利用矩形工具，繪制一個(gè)和畫板同等大小的矩形，填充淺灰色。然后再打開外觀面板，在原有填色的基礎(chǔ)上新增一個(gè)填色。新填色設(shè)置為漸變填充。漸變?yōu)閺较驖u變，漸變色的設(shè)置可以參考我的設(shè)置。
然后進(jìn)入【效果>藝術(shù)效果>膠片顆粒】，在設(shè)置面板中設(shè)置如下參數(shù)。顆粒效果帶給整體感覺以典雅精致的感覺。下次你的項(xiàng)目里可以試試制作這樣的背景。
STEP 03
首先，你可以將上一部分制作的背景鎖定(ctrl+2)，這樣就不會(huì)在你接下來操作中影響到背景。
分別利用矩形工具和橢圓工具畫上一條矩形和五個(gè)正圓。然后關(guān)閉“對齊網(wǎng)格”，進(jìn)入【編輯>首選項(xiàng)>常規(guī)】，把鍵盤增量的參數(shù)設(shè)置為1px。
選中上一步所繪制的對象，打開路徑查找器，點(diǎn)選形狀模式中的聯(lián)集模式。
筆者一直覺得AI里打造陰影并不如PS中來得容易，除了應(yīng)用投影效果，還需要其他的修飾，表達(dá)立體感。
STEP 05
首先讓我們?yōu)槟壳八L制的對象增加一個(gè)凹陷的層次感。先將現(xiàn)有對象復(fù)制兩層放在頂部。然后選中最上一層，利用鍵盤方向鍵，往下移動(dòng)1像素(還記得我們設(shè)置鍵盤增量為1px,道理就在此)，
電腦資料
《用AI打造精致的進(jìn)程條》(http://m.oriental01.com)。選中最頂部的復(fù)制對象和在它下方的復(fù)制對象，然后進(jìn)入到路徑查找器中，點(diǎn)選減去頂層圖標(biāo)。
選中STEP04繪制的對象，然后進(jìn)入【對象>路徑>偏移路徑】，在偏移路徑中設(shè)置位移為-4px。將這個(gè)偏移后的對象填充改為漸變填充，漸變設(shè)置如下圖所示。
你不一定要完全參考我的設(shè)置，但你需要記住一點(diǎn)，就是這時(shí)是為了給這個(gè)對象增添明暗過渡，嚴(yán)格來說我們的全局光是從上打到下，因此，在靠近光源的地方就較為明亮，反之則較為暗淡。有了高光和陰影，畫面就會(huì)呈現(xiàn)立體感。
重新選中STEP04繪制的對象，進(jìn)入【效果>風(fēng)格化>投影】，分三次為它加上三個(gè)投影效果。同樣是為了營造這個(gè)對象外圍的高光和陰影。
重新選中STEP06中繪制的對象，拷貝兩次，將最頂部的拷貝層往上移動(dòng)1個(gè)像素。再選中位于它下一層的拷貝層。運(yùn)用路徑查找器，點(diǎn)選減去頂層的圖標(biāo)。然后把減去頂層后對象設(shè)置為黑色，透明度降低為20%。
再次選中STEP06中繪制的對象，進(jìn)入【效果>風(fēng)格化>投影】，分別應(yīng)用上以下兩個(gè)投影效果。
四、文字和其他元素
STEP 10
你可以為每個(gè)圓形按鈕配上數(shù)字，或者一些相應(yīng)的文字。再為此運(yùn)用投影效果，保持整體的元素風(fēng)格協(xié)調(diào)。
還可以增加一些小元素，例如畫上一個(gè)勾，這個(gè)圖標(biāo)是為了標(biāo)記用戶已完成的步驟。先用矩形工具畫上外形，再進(jìn)入【效果>風(fēng)格化>圓角】，將圓角半徑設(shè)置為1px。接下為這個(gè)對象設(shè)置描邊。一定記得設(shè)置完描邊后要選中對象進(jìn)行擴(kuò)展。擴(kuò)展后的對象再運(yùn)用投影效果。投影的參數(shù)設(shè)置如下。
進(jìn)程條最終效果圖：