UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解

时间:2023-03-14
B站视频:av610533378
类别:UI设计
水平:普通
观众:2.7w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

视频第 2 部分:图标动效制作

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

视频第 3 部分:扩展案例

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

教程作者:陈出杰作(授权转载)

交作业:微博搜索话题 #优设每日作业# 进入话题页即可发布作业

文章编辑:@十豆

一、关于教程

微软 Fluent 设计语言引领了毛玻璃风格的潮流,它能创造出一种柔和而精致的视觉效果,深受各大厂的喜爱。本期教程将使用 Sketch + AI + AE 向你展示如何从零开始制作磨砂毛玻璃动态图标的全过程,涵盖设计理念,制作方法,以及如何拓展设计出不同的毛玻璃质感图标。视频总共分为三部分:

  • 第一部分为静态设计,将用 Sketch 演示如何制作,包括图标形状的构造等,工具适用 mac 电脑。
  • 第二部分为动效设计,将用 AE 演示如何制作,包括倾斜角度的变换等,工具适用 mac 和 win 电脑。
  • 第三部分为扩展案例,使用同样的方法制作出不同角度的磨砂毛玻璃图标。

二、教程效果图

UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解

UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解

三、教程简概

详细操作请看文章开头的视频教程演示。

#01 设计静态图标

使用Sketch绘制位置和矩形背景,在中间画上安全框,绘制圆和矩形,用加入贴图或添加纹理的方式增加纹理效果,利用高斯模糊调整投影和光源效果的模糊值,修改颜色、背景和圆角,并加入磨砂和投影效果,最后进行调节和修改。

UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解 UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解 UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解 UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解 UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解

#02 图标动效制作

先进将图层规范化、命名和分组,进行路径合并,避免导入AE出现错误,使用插件将已整理好的画板导入AE中制作动态效果。

UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解 UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解 UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解 UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解 UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解

#03 扩展案例

使用Adobe Illustrator软件可以更加方便地进行修改和调整,通过3D突出与斜角可以实现投影和透视;在投影处理中,可以通过复制圆形和矩形进行蒙版和投影设置,增加层数和调整颜色和透明度。

利用遮罩可以实现透过矩形看到下方圆形的效果;描边可以使用线性渐变来增加细节,翻转可以使用3D翻转或软件中的3D形变;整体打组和适当的旋转可以让图标呈现更好的视觉效果。

UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解 UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解 UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解 UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解 UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解

四、最终效果图

UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解

UI设计教程!磨砂毛玻璃图标,从绘制到动效全过程详解

下方有源文件的链接,请大家自行下载源文件。源文件只能作为个人练习使用,最主要是你能掌握方法,切勿私自商用和贩卖。

想要来「优优自学团」和500位小伙伴一起交流学习进步吗?
添加管理员微信:uisdc5 备注「优优自学团」(无备注不通过哦)

学完这篇教程的人还在学…

附件下载

文件名 文件大小 提取码 下载来源
源文件12.7Myai4 点此复制 登录下载
9 收藏 57

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 已发布 4

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片