电子商务视觉设计 课件 6任务4 产品推介动画设计

模块三电商视觉设计技能提升《电商视觉设计》思维导图目录CONTENTS1动态情景化的设计项目六

动态情景化的设计项目背景

在全渠道数字化运营项目中，为了能够吸引更多的用户进行消费，企业不仅要提供具有强大产品力的产品，还需要进行营销推广。在进行营销推广时，除了要选择合适的营销推广渠道，还需对产品或活动进行视觉呈现。为了能够吸引更多用户的眼球，企业在进行视觉设计时，应紧跟时代的潮流，设计一些极具表现力和张力的设计，以此来吸引更多人的关注，为整个项目运营带来流量。

伴随着电商的快速发展，商家与商家之间的竞争愈发激烈，这也致使商家对店铺的视觉设计提出了更高的要求，店铺的视觉设计不能仅停留在普通的平面设计上，而应该积极探索平面设计与三维设计、动画设计的融合，以打造出极具场景化的三维图像或视频，以场景搭建带给用户视觉冲击，引起用户共鸣，以达到店铺营销推广的目的。要设计出动态情景化的图像或视频，首先要掌握三维设计和动画设计的基础知识和相关操作，只有在掌握了三维设计和动画设计的基础知识和相关操作后，才能更好地去完成电商动态情景化的图像或视频的设计与制作。研究内容三维场景搭建与渲染视频动态文字设计图形动画设计产品推介动画设计学习目标1.认识C4D软件及其工作界面；2.了解C4D建模常用的工具及功能；3.认识AE软件及其工作界面；4.熟悉与动画制作的基础知识；5.了解图形动画设计基础知识；6.了解产品推介动画设计的基础知识。知识目标1.能够使用C4D软件搭建出符合营销需求的三维场景并进行渲染；2.能够使用AE软件制作出符合营销需求的动态文字；3.能够使用AE软件进行图形动画的设计与制作；4.能够使用AE软件进行产品推介动画的设计与制作。技能目标1.了解社会主义核心价值观，诚实守信，遵守职业道德；2.具备积极主动的工作态度、较强的视觉审美与设计能力；3.具备较强的团队协作能力、社会责任意识和诚信的品德。素养目标任务四产品推介动画设计预备知识一、3D图层

3D图层又称为三维图层，在将平面图层转化为3D图层之前，该图层为平面图层，其属性只有“位置(z)”、“锚点(z)”、“缩放(z)”、“方向”、“X旋转”、“Y旋转”、“Z旋转”以及“材质选项”属性，“材质选项”属性指定图层与光照和阴影交互的方式。只有3D图层与阴影、光照和摄像机进行交互。在打开图层的三维属性后，图层会向其“位置”、“锚点”和“缩放”属性添加深度(z)值，该图层将获得“方向”、“Y旋转”、“X旋转”以及“材质选项”属性。单个“旋转”属性被重新命名为“Z旋转”。预备知识二、遮罩遮罩也称mask，是指在图像中指定区域内或区域外使用一条闭合路径或轮廓图来遮挡部分图像内容，并显示特定区域的图像内容，是实现视频合成的重要工具。其原理是使用遮罩工具在素材上绘制遮罩来截取需要的区域，被遮罩选中的部分会显示，未被遮罩选中的部分则会被影藏。在AE中遮罩工具的创建方法主要有两种，一种是通过形状工具创建蒙版来实现遮罩效果，另一种是通过路径工具绘制闭合路径来实现遮罩效果。预备知识三、摄像机

在AfterEffects中，常常需要运用一个或多个摄像机来创造空间场景、观看合成空间,摄像机工具不仅可以模拟真实摄像机的光学特性，更能超越真实摄像机在三脚架、重力等条件的制约，在空间中任意移动。其作用包括通过修改摄像机设置，并为其制作动画来配置摄像机，使其与用于记录合成的素材的真实摄像机和设置匹配；模拟真实的摄像机的行为并添加到合成效果和动画中；借助具有“合成摄像机”属性的效果,使用活动合成摄像机或光照从各种角度查看或照亮效果，以模拟更复杂的3D效果。预备知识三、摄像机

创建摄像机的方法是选择菜单“图层”——“新建”——“摄像机“，或者按快捷键Ctrl+Shift+Alt+C，即可打开一个摄像机参数设置对话框。实施准备在进行产品推介动画设计时，不仅需要掌握AE的基础知识和相关操作，还需要了解3D图层、遮罩、摄像机的原理和操作，只有在掌握了与产品推介动画设计相关的知识和技能后，才能更好是使用AE软件制作出符合营销需求的产品推介动画，下面以制作某农产品网店店铺的农产品的展示视频为例进行产品推介动画设计。任务实施与分析

步骤1：打开AdobeAfterEffect2019，新建一个项目，然后单击菜单栏中的“合成”-“新建合成”创建一个1920像素*1280像素、帧速率为20帧/秒、背景色为白色的合成，并将其命名为“产品推介动画”。任务实施与分析

步骤2：单击“文件”-“导入”，导入准备好的产品图素材以及背景图，然后将视频背景拖动到下方的时间线板中，接着在项目面板中全选产品素材图，将产品素材图拖动到时间线面板中视频背景图层的上方，然后调整图片的大小和位置，效果如图所示。任务实施与分析

步骤3：打开各个产品素材图层的三维图层按钮，接着将视图显示切换到顶部视图，如图所示，查看图片位置是否在同一水平位置，如果不在同一水平位置需将图片调整至同一水平位置，此步骤主要是为了后期素材图片播放时图片在同一水平线上。任务实施与分析步骤4：使用快捷键“Ctrl+Shift+Alt+C”，新建摄像机，摄像机创建完成后，将视图显示切换为“摄像机1”，然后将“摄像机1”变换中目标点的第一个数值“1138.0”调整为“-53.0”，最终效果如图所示。任务实施与分析

步骤5：将数值调整完成后，单击目标点前面的时间变化秒表按钮添加关键帧，接着将时间标尺面板中的当前时间指示器移动到19S的位置，然后将目标点的第一个数值从“-53”调整为“2600”，如图所示。任务实施与分析步骤6：通过以上步骤产品图片就可以随着摄像机位置的移动进行移动展示。单击文字工具在合成面板中输入字体为黑体、字号为128像素、颜色为“0006FF”的“农产品展示”，如图所示。任务实施与分析

步骤7：为了能够使文字更好的融入背景，还需要在文字周围添加一些点缀的元素。点击矩形工具，在文字展示的上方绘制一个矩形（颜色为：61DFF2、描边0像素），接着再绘制一个矩形（颜色为：22FF00、描边0像素），效果图如图所示。任务实施与分析

步骤8：创建轨道遮罩。鼠标点击“形状图层1”图层的轨道遮罩选框，在出现的菜单中选择“Alpha反转遮罩“形状图层2”，即可创建轨道遮罩，如左图所示。使用同样的方法在文字的右下角添加装饰，效果图如右图所示。任务实施与分析

步骤9：通过以上步骤一个简单的产品推介动画就制作完成了，使用快捷键“Ctrl+M”进行输出，即可得到一个产品推介视频。拓展知识一、常见的音频格式名称类型压缩率/开发者特征MP3压缩的声音文件1:10甚至更高文件小，质量高，能够被各种视音频软件兼容WMA音频格式1:18文件大小只有相应MP3文件的一半，声音质量却比MP3要好WAV标准数字音频文件微软公司专门为Windows开发记录各种单声道或立体声的声音信息，并能保证声音不失真AIFF声音文件格式苹果公司开发文件格式存储的数字音频，用iTunes播放思政小课堂由于动态情景化设计是以现实生活场景为基础的视觉创作，因此，在进行动态情景化的设计前，需要学会观察身边事物的细微之处，如商场中产品摆放的场景布置（灯光、环境等）、自然界的水流（流速、光波、水纹等），为动态化场景设计与制作奠定基础。另外，动态情景化设计作为广告宣传的一种形式，需要严格遵守国家的相关法律法规，围绕真实产品进行实事求是的创作，不可过度渲染或夸张产品的实际