优艾设计网

UI教程,螺旋桨式风扇主题UI图标教程

优艾设计网 https://www.uibq.com 2020-09-14 00:00 出处:网络 作者:楊洋
下面是我这次做的效果图,这是我第一次做教程,主要是之前在逛instntshift的时候看到的一张图,但是苦于没有教程,就尝试着把它临摹下来,做完以后,觉得还不错,所以就尝试做出个教程,和大家分享一下。如果有什么

UI教程,螺旋桨式风扇主题UI图标教程

现在我们根据光线,给扇叶大致推导出扇叶的一个光影效果,用钢笔工具钩出阴影。

UI教程,螺旋桨式风扇主题UI图标教程

UI教程,螺旋桨式风扇主题UI图标教程

扇叶阴影2主要分为上面四个部分。我们图层命名为扇叶阴影1~4,颜色任意填充。

UI教程,螺旋桨式风扇主题UI图标教程

效果:

UI教程,螺旋桨式风扇主题UI图标教程

把所有扇叶部分的图层组成一个群组,并在该群组上面添加一个蒙版,把下方多余部分的投影给盖掉。

UI教程,螺旋桨式风扇主题UI图标教程

接下来,我们把机身部分的那个大的圆形扇框复制两层,放到最顶层,图层填充0%,用来给扇框加两层内部投影。

UI教程,螺旋桨式风扇主题UI图标教程

UI教程,螺旋桨式风扇主题UI图标教程

UI教程,螺旋桨式风扇主题UI图标教程

效果:

UI教程,螺旋桨式风扇主题UI图标教程

最后给整个图层用渐变工具加一层深色,然后添加一个蒙版,用柔边圆画笔擦掉中间部分。从而做出四周暗中间亮的效果。

UI教程,螺旋桨式风扇主题UI图标教程

UI教程,螺旋桨式风扇主题UI图标教程

最后的最后,给整个风扇添加一个放射性的投影和电线。使得整体细节方面更细致,更逼真。

UI教程,螺旋桨式风扇主题UI图标教程

图层样式参数:

UI教程,螺旋桨式风扇主题UI图标教程

UI教程,螺旋桨式风扇主题UI图标教程

UI教程,螺旋桨式风扇主题UI图标教程

UI教程,螺旋桨式风扇主题UI图标教程

最后的投影我就不说那么详细啦,大家自己琢磨吧。^^

提示:键盘也能翻页,试试"← →"键
0

精彩评论

暂无评论...
验证码 换一张
取 消