Dina Amin的新的CSS-Tricks视频介绍

您知道我们制作视频教程吧？虽然不是特别频繁，但我已经做了很久了，仍然很喜欢，并且计划继续做下去。我会把它们发布在这里，您也可以在YouTube上订阅。

多年来，我使用过几种不同的定制视频片头动画，这些动画都是由比我更擅长这方面的人制作的。今年5月，我四处打听，得到了一些不错的建议，但没有比Matthias推荐Marc，然后Marc帮我联系dina Amin更好的了。

dina的作品一看就让人眼前一亮：太棒了！她擅长定格动画和许多突破性的东西：

我们来回讨论，规划项目。她说：

我与Assem Kamal合作，为CSS-Tricks YouTube频道制作了一个新的片头动画。我们想制作一个非常短小精悍但又有趣的动画，这样YouTube上的观众就不会跳过片头，或者如果他们连续观看几个CSS-Tricks视频也不会感到厌烦。

她做了很多研究，并提出了一系列问题。我喜欢她非常清楚像这样的片头在视频中，尤其是在教程中的作用。不能太长，不能以任何方式令人讨厌。它必须有足够的细节，以至于反复观看也几乎是件乐事。

旧的视频片头以键盘开始：

我们从苹果键盘开始，因为我们想保留原片头中Chris的观众可以产生共鸣的东西，最重要的是因为我想把键盘拆开！

“我们把键盘拆了吗？！”是的，我们拆了。很容易找到很多坏掉的苹果键盘，这是一个设计非常精良的产品，所有部件组合在一起非常漂亮，部件最少，但只有苹果才能修理这个产品。你不能拿出你的螺丝刀套装，打开它，修理一个有缺陷的按钮连接。所以很多这样的键盘都被扔掉了，因为在埃及这样的国家修理它太贵了。我们弄到了三个键盘，我们在制作动画时拆了一个，并使用了另外两个键盘的不同按键来制作拉伸的按键。

在她的Instagram Stories中看到一些幕后花絮很有趣：

另一个与原片头的联系是网站作为组件和构建布局的想法。这在原片头中只用一些背景草图进行了参考，现在在这个版本中以纸质原型的方式栩栩如生。

我们想到了以非常抽象的步骤展示“如何制作网站”的过程，其中每个步骤都快速过渡并转换为另一个步骤。从键盘点击变成代码，然后是构成网站的设计模块，滚动显示CSS-Tricks徽标。

这一切都是用定格动画完成的！用手移动部件，拍照，然后制作成视频。

一旦我们获得了概念批准并准备好道具，我们就花了数小时移动小部件来制作所有这些神奇的效果。

看看创作过程的延时摄影吧！

最终，我得到了不同纵横比和尺寸的多个版本，这很棒，因为我可以随意切换并使用在不同场景中可能更合适的版本。这是主要版本！

我已经开始将这些放在像这样的视频的开头和结尾了。

感谢dina和Assam！

以上是Dina Amin的新的CSS-Tricks视频介绍的详细内容。更多信息请关注PHP中文网其他相关文章！