为您的作品集制作设计作品的 GIF 动画截图的 3 种方法

完成最新的网页设计项目后，是时候展示它并将其添加到您的作品集中了。 您的网站访问者（和潜在客户！）将希望看到您的出色工作。 出色的图像是关键，在数字空间中，有时您想要说明项目功能。 用动画截图展示它可能是完美的解决方案。

我相信您已经看到了向我们展示应用程序或网站如何工作的酷炫、简单的动画屏幕截图。 屏幕截图的 GIF 让用户更好地了解某些任务是如何执行的，同时还显示了哪些功能可用。 视频当然是一种选择，并且肯定在网络上占有重要地位。 深入的产品视频或案例研究肯定会受益于视频格式。 但是，更简单、更注重文件大小的选择（例如 GIF 动画屏幕截图）可能正是您想要的。

为什么动画截图对您的投资组合很重要

无论您将其发音为“GIF”还是“JIF”，重要的是要记住，GIF 不仅仅是有趣的猫和带有巧妙标语的电影剪辑。 您项目的 GIF 动画应该引人注目并经过精心策划，以展示设计功能。 动画界面元素既是功能性目的又是美学目的，因此 GIF 文件显示了这一点。 演示菜单和您的工作呈现的选项怎么样？ 如何展示滚动的工作原理？ 显示功能有助于用户清楚地了解应用程序或网站如何帮助他们。

制作 GIF 的工具

没有比使用以下用于创建 GIF 的工具之一更好的方式来展示您的辛勤工作。 下面的示例将演示当用户点击选项、查看更多详细信息、然后滚动查看更多内容时的外观。

注意：本教程中不会有任何视觉设计说明； 这些提示假设您的投资组合项目的网站或应用程序设计已经完成。

如何在 Adob​​e Photoshop 中创建动画 GIF 截图

在我看来，Adobe Photoshop 和 Adob​​e After Effects 是完成这项工作的最佳工具。 两者都允许对最终产品进行大量控制。 我个人喜欢用 Photoshop 制作 GIF 屏幕截图（大多数设计师都非常熟悉它），所以下面的示例就是这样构建的。 让我们开始吧！

显示滚动功能

此设计是在 Adob​​e XD 中完成的，但随后使用适当命名的图层导出到 Photoshop。 该示例的列表页面有一个名为“MinTour Locations List”的图层，详细信息页面有一个名为“Sculpture Garden Listing”的图层，超出初始滚动视图的部分称为“Sculpture Garden Listing Overflow”。

第一部分

1.时间线设置和位置列表

时间线功能是我们将用来为最终产品创建不同屏幕的功能。 通过转到Window > Timeline确保 Timeline Panel 已打开。

这是列表页面； 用户从这里开始，点击一个位置，将到达详细信息页面，他们可以在其中滚动查看更多详细信息。

您会看到已经建立了第一个关键帧。 确保显示正确的图层，以便在关键帧中显示正确的视图。

可选：如果您想显示用户点击的位置，有时会显示一个点。 为此，请添加一个带点区域的额外框架。

2. 个别地点详情

分层组织的能力是一个巨大的优势，它将帮助您在创建屏幕捕获 GIF 时保持一切正常。 转到“时间轴”面板中的选项，然后选择“新帧”。 同样的事情——确保正确的图层被隐藏/显示。 对于这个，我需要显示单独的列表，所以位置列表层是隐藏的。

3.个别位置详情滚动内容

雕塑花园的个人列表页面内容较多，因此应向用户显示滚动区域。 这是在一个单独的层上，所以我创建了一个新框架来显示这个溢出内容。

4.选择持续时间

这可能需要一些实验，但选择每一帧的持续时间很重要。 您希望用户有足够的时间查看每一帧，但他们也不应该等待太久才能看到下一帧。

我为每一帧输入了值，整个动画总共五秒。

5. 预览

很高兴看看到目前为止发生了什么。 时间轴面板的底行有一个播放按钮。 尝试一下，看看是否有什么可以改进的。

（可选）补间控件

事情的顺序是正确的，但他们似乎有点紧张。 可以调整屏幕截图动画以使事情看起来更流畅。 在时间轴选项中，有一个“补间”选项。 为了在当前帧和前一帧之间自动制作平滑的动画，可以自动插入更多帧。

从列表到列表溢出，添加了 Tween 使其看起来更像一个滚动动作。 这些新帧被设置为非常短的 0.05 秒（在应用程序中滚动发生的速度相对较快）。

如果您希望它在 Photoshop 中保持循环，请确保选择“永远”。 如果有一定数量的循环，则可以输入该值。

6.保存屏幕截图GIF（仅限屏幕流）

如果您希望将其仅包含为动画屏幕流，则保存将是最后一步。 这时候，截图动画就创建好了，只需要保存为正确的GIF格式即可。 您可能习惯于保存静态图像，但保存一系列图像是不同的。 转到文件 > 保存为 Web以保存此 GIF 文件。

在这里，您将看到 GIF 所需的所有设置。 请记住，您的颜色数量受到限制，因此我们会在导出之前让它们看起来最好。 256 很可能是最佳选择，因为网站和应用程序往往具有大范围的颜色，但如果您的设计允许，您可以简化（这样可以减小文件大小）。

右下角还有一些“动画”设置； 如果您希望它无限循环，您可以选择循环。 如果您愿意，您也可以循环一定次数。 将其保存到所需位置，即可开始使用！

第二部分：设备上的分层屏幕

如果您决定继续，则需要一些额外的步骤来对其进行分层，以便在手机上看起来更逼真。 从“时间轴”面板中选择“将帧拼合为图层”。 每帧将转换为一个平面层，最终为 26 帧（因此有 26 层）。

保存后，需要将手机图像添加到文件中。 为了适应这种情况，必须对图像大小进行一些调整。

1.调整动画截图的画布大小

背景图像为 1300 X 920，因此需要调整画布大小以完全适合它。 转到图像>画布尺寸并输入正确的尺寸。

2. 准备好放置在手机屏幕上的图层

接下来，为背景图像创建一个新图层，以便动画可以叠加在上面。 这就是“全选”框架层将派上用场的地方。

3.双重检查框架

这是确保框架仍然是您计划的方式的好时机。 如果您从“时间轴”面板播放动画，您将看到动画序列。

4.倾斜屏幕

选择所有屏幕图层非常重要，这样它们就可以一次全部倾斜以保持均匀。 编辑 > 变换 > 倾斜是完成此操作的地方。

这将需要一些试验，但要调整角，使它们与屏幕的边界对齐，给它一种屏幕被动画照亮的错觉。

5. 图像调整和保存您的 GIF 屏幕截图

现在是进行任何调整的时候了。 保存前应完成颜色、对比度或任何其他最终修饰。 保存动画与第 1 部分第 6 步中所做的相同。

在此示例中，背景去饱和并增加了对比度以使动画真正脱颖而出。 现在它似乎在一个真实的设备上！

吉菲

如果 Photoshop 不是您的首选工具，那么有一个名为 Giphy 的免费且简单的工具。 （除了专业用途，你也可以制作很多有趣的GIF！）

如果您选择“幻灯片放映”，这是创建动画屏幕截图的好选择。 要使用它，您必须保存屏幕的各个文件。 然后，您将拖放静止图像，该过程将开始。

文件上传后，选择“创建幻灯片”。 完成将图像放在一起后，您可以下载文件。 就这么简单！

记录下来

这个应用程序非常简单； 它记录发生在您计算机屏幕上的操作，并将记录上传到 Recordit.io 网站，并创建一个可共享的链接，并可选择下载 GIF。

在您的计算机上安装 Recordit 后，任务栏中会出现一个图标。 选中后，您可以拖动到并选择要录制的屏幕区域。 当我在 Adob​​e XD 中进入预览模式并能够使用原型进行演示时，这非常完美。

选择要包含的区域后，会出现一个记录按钮。 当您按下“记录”时，Recordit 会记录在您创建的边界内屏幕上发生的所有事情。 完成录制后，只需选择“停止”。

这将需要几秒钟，但在录制停止后，会弹出一个带有链接的链接，该链接将您带到 Recordit.io 网站上托管的录制文件。

屏幕截图的 GIF 动画是展示用户流程和设计项目如何运作的好方法。 视频也有它的位置，但 GIF 可以非常快速地创建并且很容易添加到您的在线投资组合中。

免费工作表：目标受众和客户角色

正在寻找可操作的指南来帮助您保持内容的相关性和吸引力？ 这个三页的交互式 PDF 将帮助您找到您的受众、审核您的内容，并为您的业务发展制定游戏计划。

如果你喜欢这篇文章，你可能也会喜欢这些：

• 如何使用 CSS 创建 SVG 动画
• 如何创建 WordPress 视频库
• 如何使用跳过链接使您的 WordPress 网站更易于访问