如果您喜歡『PS學習網』,請推薦給您身邊的朋友!本站永久域名:www.dcgtza.icu

Illustrator軟件繪制時尚網頁進度條圖片

當前位置 : PS學習網 > 矢量繪圖 > 正文來源:網絡作者:網絡時間:2019-07-23人氣:

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

先看看效果圖:

Illustrator軟件繪制時尚網頁進度條圖片

制作背景

STEP 01

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

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

Illustrator軟件繪制時尚網頁進度條圖片

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

Illustrator軟件繪制時尚網頁進度條圖片

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

STEP 02

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

Illustrator軟件繪制時尚網頁進度條圖片

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

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

Illustrator軟件繪制時尚網頁進度條圖片

 繪制外形

STEP 03

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

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

Illustrator軟件繪制時尚網頁進度條圖片

STEP 04

選中上一步所繪制的對象,打開路徑查找器,點選形狀模式中的聯集模式。

Illustrator軟件繪制時尚網頁進度條圖片

高光和陰影

筆者一直覺得AI里打造陰影并不如PS中來得容易,除了應用投影效果,還需要其他的修飾,表達立體感。

STEP 05

首先讓我們為目前所繪制的對象增加一個凹陷的層次感。先將現有對象復制兩層放在頂部。然后選中最上一層,利用鍵盤方向鍵,往下移動1像素(還記得我們設置鍵盤增量為1px,道理就在此)。

選中最頂部的復制對象和在它下方的復制對象,然后進入到路徑查找器中,點選減去頂層圖標。

Illustrator軟件繪制時尚網頁進度條圖片

將這個減去頂層后的對象設置為黑色,透明度20%,混合模式為正片疊底。

Illustrator軟件繪制時尚網頁進度條圖片

回頂部
中国福利快乐十分查询