视频第 2 部分:图标动效制作
或前往PC获得最佳体验。
视频第 3 部分:扩展案例
或前往PC获得最佳体验。
交作业:微博搜索话题 #优设每日作业# 进入话题页即可发布作业
文章编辑:@十豆
微软 Fluent 设计语言引领了毛玻璃风格的潮流,它能创造出一种柔和而精致的视觉效果,深受各大厂的喜爱。本期教程将使用 Sketch + AI + AE 向你展示如何从零开始制作磨砂毛玻璃动态图标的全过程,涵盖设计理念,制作方法,以及如何拓展设计出不同的毛玻璃质感图标。视频总共分为三部分:
- 第一部分为静态设计,将用 Sketch 演示如何制作,包括图标形状的构造等,工具适用 mac 电脑。
- 第二部分为动效设计,将用 AE 演示如何制作,包括倾斜角度的变换等,工具适用 mac 和 win 电脑。
- 第三部分为扩展案例,使用同样的方法制作出不同角度的磨砂毛玻璃图标。
详细操作请看文章开头的视频教程演示。
使用Sketch绘制位置和矩形背景,在中间画上安全框,绘制圆和矩形,用加入贴图或添加纹理的方式增加纹理效果,利用高斯模糊调整投影和光源效果的模糊值,修改颜色、背景和圆角,并加入磨砂和投影效果,最后进行调节和修改。
先进将图层规范化、命名和分组,进行路径合并,避免导入AE出现错误,使用插件将已整理好的画板导入AE中制作动态效果。
使用Adobe Illustrator软件可以更加方便地进行修改和调整,通过3D突出与斜角可以实现投影和透视;在投影处理中,可以通过复制圆形和矩形进行蒙版和投影设置,增加层数和调整颜色和透明度。
利用遮罩可以实现透过矩形看到下方圆形的效果;描边可以使用线性渐变来增加细节,翻转可以使用3D翻转或软件中的3D形变;整体打组和适当的旋转可以让图标呈现更好的视觉效果。
下方有源文件的链接,请大家自行下载源文件。源文件只能作为个人练习使用,最主要是你能掌握方法,切勿私自商用和贩卖。
想要来「优优自学团」和500位小伙伴一起交流学习进步吗?
添加管理员微信:uisdc5 备注「优优自学团」(无备注不通过哦)
学完这篇教程的人还在学…
附件下载
文件名 | 文件大小 | 提取码 | 下载来源 |
---|---|---|---|
源文件 | 12.7M | yai4 点此复制 | 登录下载 |
非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。
转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。
发表评论 已发布 2 条