當(dāng)前位置:首頁(yè)>軟件教程>AI教程>教程內(nèi)容

AI教程,利用AI設(shè)計(jì)進(jìn)度條圖片(3)

來(lái)源:ifeiwu 作者:ifeiwu 學(xué)習(xí):9567人次

AI教程,利用AI設(shè)計(jì)進(jìn)度條圖片_theoat.com.cn

STEP 08

重新選中STEP06中繪制的對(duì)象,拷貝兩次,將最頂部的拷貝層往上移動(dòng)1個(gè)像素。再選中位于它下一層的拷貝層。運(yùn)用路徑查找器,點(diǎn)選減去頂層的圖標(biāo)。然后把減去頂層后對(duì)象設(shè)置為黑色,透明度降低為20%。

AI教程,利用AI設(shè)計(jì)進(jìn)度條圖片_theoat.com.cn

STEP 09

再次選中STEP06中繪制的對(duì)象,進(jìn)入【效果>風(fēng)格化>投影】,分別應(yīng)用上以下兩個(gè)投影效果。

AI教程,利用AI設(shè)計(jì)進(jìn)度條圖片_theoat.com.cn

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

四、文字和其他元素

STEP 10

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

AI教程,利用AI設(shè)計(jì)進(jìn)度條圖片_theoat.com.cn

STEP 11

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

AI教程,利用AI設(shè)計(jì)進(jìn)度條圖片_theoat.com.cn

AI教程,利用AI設(shè)計(jì)進(jìn)度條圖片_theoat.com.cn

五、總結(jié)

進(jìn)度條最終效果圖:

AI教程,利用AI設(shè)計(jì)進(jìn)度條圖片_theoat.com.cn

你還可以運(yùn)用同樣的原理設(shè)計(jì)出一整套同風(fēng)格的UI KIT。

AI教程,利用AI設(shè)計(jì)進(jìn)度條圖片_theoat.com.cn

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!