当前位置:首页>软件教程>AI教程>教程内容

AI教程,利用AI设计进度条图片(3)

来源:ifeiwu 作者:ifeiwu 学习:9567人次

AI教程,利用AI设计进度条图片_www.16xx8.com

STEP 08

重新选中STEP06中绘制的对象,拷贝两次,将最顶部的拷贝层往上移动1个像素。再选中位于它下一层的拷贝层。运用路径查找器,点选减去顶层的图标。然后把减去顶层后对象设置为黑色,透明度降低为20%。

AI教程,利用AI设计进度条图片_www.16xx8.com

STEP 09

再次选中STEP06中绘制的对象,进入【效果>风格化>投影】,分别应用上以下两个投影效果。

AI教程,利用AI设计进度条图片_www.16xx8.com

这里运用多次投影的目的是为了增加阴影中的层次感。

四、文字和其他元素

STEP 10

你可以为每个圆形按钮配上数字,或者一些相应的文字。再为此运用投影效果,保持整体的元素风格协调。

AI教程,利用AI设计进度条图片_www.16xx8.com

STEP 11

还可以增加一些小元素,例如画上一个勾,这个图标是为了标记用户已完成的步骤。先用矩形工具画上外形,再进入【效果>风格化>圆角】,将圆角半径设置为1px。接下为这个对象设置描边。一定记得设置完描边后要选中对象进行扩展。扩展后的对象再运用投影效果。投影的参数设置如下。

AI教程,利用AI设计进度条图片_www.16xx8.com

AI教程,利用AI设计进度条图片_www.16xx8.com

五、总结

进度条最终效果图:

AI教程,利用AI设计进度条图片_www.16xx8.com

你还可以运用同样的原理设计出一整套同风格的UI KIT。

AI教程,利用AI设计进度条图片_www.16xx8.com

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序

关注大神微博加入>>

网友求助,请回答!