亚洲一区亚洲二区亚洲三区,国产成人高清在线,久久久精品成人免费看,999久久久免费精品国产牛牛,青草视频在线观看完整版,狠狠夜色午夜久久综合热91,日韩精品视频在线免费观看

用AI打造精致的進程條 -電腦資料

電腦資料 時間:2019-01-01 我要投稿
【www.ishadingyu.com - 電腦資料】

   

    一、制作背景

    STEP 01

    是誰說過,越簡單越困難,

用AI打造精致的進程條

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

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

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

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

    STEP 02

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

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

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

    二、繪制進度條外形

    STEP 03

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

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

    STEP 04

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

    三、高光和陰影

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

    STEP 05

    首先讓我們?yōu)槟壳八L制的對象增加一個凹陷的層次感。先將現(xiàn)有對象復制兩層放在頂部。然后選中最上一層,利用鍵盤方向鍵,往下移動1像素(還記得我們設置鍵盤增量為1px,道理就在此),

電腦資料

用AI打造精致的進程條》(http://www.ishadingyu.com)。

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

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

    STEP 06

    選中STEP04繪制的對象,然后進入【對象>路徑>偏移路徑】,在偏移路徑中設置位移為-4px。將這個偏移后的對象填充改為漸變填充,漸變設置如下圖所示。

    你不一定要完全參考我的設置,但你需要記住一點,就是這時是為了給這個對象增添明暗過渡,嚴格來說我們的全局光是從上打到下,因此,在靠近光源的地方就較為明亮,反之則較為暗淡。有了高光和陰影,畫面就會呈現(xiàn)立體感。

    STEP 07

    重新選中STEP04繪制的對象,進入【效果>風格化>投影】,分三次為它加上三個投影效果。同樣是為了營造這個對象外圍的高光和陰影。

    選中STEP06中繪制的對象,拷貝兩次。運用STEP05的方式,將最頂部的拷貝層往下移動1個像素。再選中位于它下一層的拷貝層。運用路徑查找器,點選減去頂層的圖標。然后把減去頂層后對象設置為白色。

    STEP 08

    重新選中STEP06中繪制的對象,拷貝兩次,將最頂部的拷貝層往上移動1個像素。再選中位于它下一層的拷貝層。運用路徑查找器,點選減去頂層的圖標。然后把減去頂層后對象設置為黑色,透明度降低為20%。

    STEP 09

    再次選中STEP06中繪制的對象,進入【效果>風格化>投影】,分別應用上以下兩個投影效果。

    這里運用多次投影的目的是為了增加陰影中的層次感。

    四、文字和其他元素

    STEP 10

    你可以為每個圓形按鈕配上數(shù)字,或者一些相應的文字。再為此運用投影效果,保持整體的元素風格協(xié)調。

    STEP 11

    還可以增加一些小元素,例如畫上一個勾,這個圖標是為了標記用戶已完成的步驟。先用矩形工具畫上外形,再進入【效果>風格化>圓角】,將圓角半徑設置為1px。接下為這個對象設置描邊。一定記得設置完描邊后要選中對象進行擴展。擴展后的對象再運用投影效果。投影的參數(shù)設置如下。

    后記

    進程條最終效果圖:

    你還可以運用同樣的原理設計出一整套同風格的UI KIT。

最新文章