大数跨境

在 Adobe Photoshop CC 中制作动画 GIF

在 Adobe Photoshop CC 中制作动画 GIF 电商实践
2016-08-02
0
导读:包括 Pinterest、Twitter 和 Facebook 在内的社交媒体网络引发了一场动态 GIF 的复兴。不少在线零售商正

一些企业正在利用 Web 1.0 时代的动态 GIF 图像在社交媒体上吸引关注。

包括 Pinterest、Twitter 和 Facebook 在内的社交媒体平台引发了动态 GIF 的复兴。不少在线零售商定期发布 GIF 动画,以吸引并互动潜在顾客。

营销人员无需费力寻找动画示例,服装零售商 Boden 就常在社交媒体和电子邮件营销中使用动态产品 GIF。同样地,Nike 作为直接面向消费者的电商平台 Nike Store,也在其 Twitter 账号上使用了动态 GIF 产品展示图片。

Nike Store 在其社交媒体帖子中使用动态 GIF 图像。

本文将介绍如何使用 Adobe Photoshop CC 从图片制作动态 GIF 图像。

用图片构建动态 GIF

本例将创建一个包含产品的简单动态 GIF 图像,素材来自 Rogue Fitness Instagram 页面的五张杠铃片照片。Rogue Fitness 是一家专注于 CrossFit 领域的健身器材供应商。

步骤 1:将图像排列图层

首先裁剪部分图像使其大小一致,然后将它们作为独立图层排列在同一个 Photoshop 文档中。动画中的每张图片都应是独立的图层。

动画中的每张图片都应是 Photoshop 文档中的一个图层。

步骤 2:打开 Photoshop 时间轴

Photoshop 擅长从分层内容创建动画,可使用时间轴制作各种动态图形。要为图片制作动画,请打开“窗口”菜单并选择“时间轴”。

要从 Photoshop 的“窗口”菜单打开时间轴面板,请选择“时间轴”。

当时间轴工具打开时,会显示一个包含两个选项的小下拉菜单,选择“创建帧动画”。

步骤 3:布局时间轴

Photoshop 将创建动画的第一帧,此帧包含所有图层。若在图层菜单中切换眼睛图标,会发现图像发生变化。

Photoshop 将为您创建帧动画的第一帧。

若希望每个图层成为独立的一帧,请在时间轴面板右侧点击汉堡菜单(三条横线图标),选择“从图层新建帧”选项。

你可以让 Photoshop 为每个图层生成一个动画帧。

Photoshop 会自动为每张图片创建一个帧。如果文档中包含白色背景图层,可点击选中该帧后点击垃圾桶图标将其删除。

如果你的动画包含空白背景图层,你可以将其移除。

步骤 4:添加补间

此时点击时间轴面板中的播放按钮即可预览动画,虽然可能较快且卡顿,但已具备动画效果。

为实现帧与帧之间的平滑过渡,需添加 Photoshop 所谓的“补间”(tweens)。这些额外的过渡帧共享所连接两个帧的特征。

补间是旨在实现帧与帧之间平滑过渡的过渡帧。

在第一帧和第二帧之间添加补间的操作如下:(a) 点击第一帧缩略图选中该帧;(b) 点击时间轴面板底部的补间图标;(c) 在补间工具选项中调整设置。

例如,将“补间方式”设置为“下一帧”,并将“要添加的帧数”设置为 3,点击“确定”后,Photoshop 将在时间轴中添加三个过渡帧。

对每一帧重复此步骤。到达最后一帧时,需将其与第一帧进行补间。

注意:GIF 动画中的帧数会对文件大小产生显著影响,添加补间时需谨慎。

步骤 5:设置帧持续时间和循环

可在每个帧底部通过下拉菜单设置显示时长(包括补间帧)。使用键盘 Command/Ctrl 键或 Shift 键可同时选择多个帧进行统一设置。

Photoshop 允许你设置动画中每一帧的显示持续时间。

还可设置动画是仅播放一次还是循环播放。

你可以让动画循环播放,使其反复播放。

步骤 6:保存您的动画

打开 Photoshop “文件”菜单,选择“导出”>“存储为 Web(旧版)”,打开相应对话框。

使用 Photoshop 的旧版“存储为 Web”功能来保存您的动画 GIF 图像。

动画 GIF 文件可能较大,建议调整抖动、有损压缩和网页快照等设置以减少整体文件大小。

尝试不同的 GIF 设置,以在质量和文件大小之间取得平衡。

拥有动画 GIF 即意味着承担责任

掌握 GIF 制作方法的同时也需承担相应责任。GIF 动画作为一种 Web 1.0 技术,近年来得益于社交媒体迎来了复兴。

一些企业正在利用 Web 1.0 时代的动画 GIF 图片在社交媒体上吸引关注。

尽管可以精通压缩技巧,但 GIF 动画通常体积较大且分辨率较低。除非您是 GIF 制作专家,否则建议避免在电子邮件中使用此类动画。

从营销角度看,使用 GIF 动画可能带来性能或质量损失,请做出明智选择,仅在能提升营销效果时使用。

若对 GIF 动画感兴趣,可尝试为社交媒体制作相关内容。与所有营销活动一样,请通过数据测量确保动画实现了既定目标。

【声明】内容源于网络
0
0
电商实践
电商实践
内容 8053
粉丝 0
电商实践 电商实践
总阅读37.4k
粉丝0
内容8.1k