ae显示绘图未指定错误_AE教程-通过实例教程学习AE蒙版

这篇教程适合初学者,讲解如何使用After Effects(AE)或Principle制作交互动动画。首先,你需要准备Ae或Principle的视频文件及iPhoneX mockup的PSD源文件。然后在AE中导入文件,新建合成,调整大小。使用边角定位效果使视频适应屏幕。通过设置遮罩蒙版实现完美匹配,可以选择Alpha遮罩或路径绘制蒙版。本教程还介绍了蒙版路径变化制作动画的方法,并提供了素材领取方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

关于教程

这是一篇非常非常基础的动画教程,针对刚刚接触交互动画的设计师萌新们(文末附有教程所需素材)

教程效果

fb773c1795c619372f35d08b26a123ed.gif

课前准备

你需要准备一个Ae或者principle制作好的视频文件

需要一个iPhone X mockup的PSD源文件(文末附有教程所需素材)

ab754e6562a14c270a10c353107815a2.png

注意:iPhone X文件需要至少两个图层:一个iPhone X模型层,一个遮罩层(平时我们使用mockup时需要替换我们自己设计稿的那一层),图层格式可转成智能对象

c3cdbee1e9cf9fdd127e77c29fea87ba.png

教程开始

第一步

导入视频文件和iPhone X模型

注意:导入psd时需要选择合成保持大小选项,这样不会合并所以图层

d6b0801b811a141ee531f95f3b6c30da.png

第二步

新建合成,按照自己的需要设置合成的名称、大小、持续时间和背景色

802ef98932633de672245ac0611f8cfc.png

第三步

把课前准备的两个文件拖到新的合成中,并根据需要调整大小

b6dffab503f4d8afe3d7728decd962cd.png

第四步

选中视频图层,使用效果-扭曲-边角定位效果,将四个角与屏幕四个角对齐

d32125c3f97d28ad7cfb07c9e24c69a4.png

小技巧:圆角不好对齐可以将视频的边和遮罩的边平齐

知识点:边角定位是平时我们把动态放到展示模型最常用的一个效果

第五步

方法一

将遮罩层移动到视频层的上方,点击TrkMat栏“Alpha遮罩蒙版”,完美匹配!

2d37559466a5f7d7f994e9f535d2c627.png

小技巧:如果面板栏没有“TrkMat”,请检查左下角“转换控制”按钮是否点亮

知识点:遮罩蒙版-TrkMat

遮罩蒙版-TrkMat类似于ps中的剪切蒙版,这个知识点可以用在:侧边栏划入划出效果、长页面滚动效果等,举一反三ps中的剪切蒙版能做的效果,类似的ae的遮罩蒙版就可以做

简单介绍遮罩蒙版-TrkMat四个选项:

Alpha遮罩:显示上方图层的范围;

Alpha反转遮罩:不显示上方图层显示的范围;

亮度遮罩:显示上方图层的范围,并根据上方图层黑白灰确定显示程度,随着灰度变化而变化,白色完全显示,黑色完全不显示;

亮度反转遮罩:不显示上方图层显示的范围,并根据上方图层黑白灰确定显示程度,随着灰度变化而变化,白色完全不显示,黑色完全显示;

下图四种模式对比:

98d344887334c587f098989fe0333e39.png

方法二(方法不是重点,主要为了讲知识点)

选择视频层-右键-新建预合成-选择“将所有属性移动到新合成”

bf5ffbf9066ca16d03a5fb3aca1aa319.png

为了讲这个知识点,给自己挖了个坑,我发现直接在原始图层中做蒙版效果会出现错误的情况,

所以有了上面这个操作,有知道原因的朋友欢迎留言,教程继续,下图是出现的问题

da3cd9b929bc56f555d63038ddd21609.png

使用钢笔工具对照iPhone x屏幕范围绘制路径,完成蒙版,完美匹配

c88730bafd297d7578b78ee9e9010d61.png

知识点:路径绘制蒙版-mask

对比遮罩蒙版-TrkMat,通过路径绘制蒙版来的更加方便,便于自由操控。

简单介绍路径绘制蒙版的基本参数(绘制蒙版需选中对应图层)

相加:显示路径区域内的图像

相减:不显示路径区域内的图像

交集、变暗、变亮、差值不常用可自己去尝试

反转:类似ps的反向

一些效果:

25ce2b5009f19166e78c2fc3fb7944e7.png

蒙版路径:制作蒙版变化动画

蒙版羽化:虚化边缘,过渡更加自然

蒙版不透明度:调节蒙版的不透明度

蒙版扩展:放大缩小路径的区域

使用蒙版路径变化做的一个侧边栏动画:

2d77431d972c228435418f8d826a3177.gif

AE蒙版教程素材领取方式:

1、关注本头条号【设计大观园】

2、评论+转发

3、复制AE蒙版教程素材几个字私信我即可领取

注:(由于私信人数较多,本篇设置了关键字自动回复,所以私信时一定是要发AE蒙版教程素材才能领取哦,私信其他是不能领取的,感谢您的支持和理解!!!)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值