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中文網其他相關文章！