您知道我們制作視頻教程吧？雖然不是特別頻繁，但我已經(jīng)做了很久了，仍然很喜歡，并且計(jì)劃繼續(xù)做下去。我會(huì)把它們發(fā)布在這里，您也可以在YouTube上訂閱。

多年來(lái)，我使用過(guò)幾種不同的定制視頻片頭動(dòng)畫(huà)，這些動(dòng)畫(huà)都是由比我更擅長(zhǎng)這方面的人制作的。今年5月，我四處打聽(tīng)，得到了一些不錯(cuò)的建議，但沒(méi)有比Matthias推薦Marc，然后Marc幫我聯(lián)系dina Amin更好的了。

dina的作品一看就讓人眼前一亮：太棒了！她擅長(zhǎng)定格動(dòng)畫(huà)和許多突破性的東西：

我們來(lái)回討論，規(guī)劃項(xiàng)目。她說(shuō)：

我與Assem Kamal合作，為CSS-Tricks YouTube頻道制作了一個(gè)新的片頭動(dòng)畫(huà)。我們想制作一個(gè)非常短小精悍但又有趣的動(dòng)畫(huà)，這樣YouTube上的觀眾就不會(huì)跳過(guò)片頭，或者如果他們連續(xù)觀看幾個(gè)CSS-Tricks視頻也不會(huì)感到厭煩。

她做了很多研究，并提出了一系列問(wèn)題。我喜歡她非常清楚像這樣的片頭在視頻中，尤其是在教程中的作用。不能太長(zhǎng)，不能以任何方式令人討厭。它必須有足夠的細(xì)節(jié)，以至于反復(fù)觀看也幾乎是件樂(lè)事。

舊的視頻片頭以鍵盤(pán)開(kāi)始：

我們從蘋(píng)果鍵盤(pán)開(kāi)始，因?yàn)槲覀兿氡Ａ粼^中Chris的觀眾可以產(chǎn)生共鳴的東西，最重要的是因?yàn)槲蚁氚焰I盤(pán)拆開(kāi)！

“我們把鍵盤(pán)拆了嗎？！”是的，我們拆了。很容易找到很多壞掉的蘋(píng)果鍵盤(pán)，這是一個(gè)設(shè)計(jì)非常精良的產(chǎn)品，所有部件組合在一起非常漂亮，部件最少，但只有蘋(píng)果才能修理這個(gè)產(chǎn)品。你不能拿出你的螺絲刀套裝，打開(kāi)它，修理一個(gè)有缺陷的按鈕連接。所以很多這樣的鍵盤(pán)都被扔掉了，因?yàn)樵诎＜斑@樣的國(guó)家修理它太貴了。我們弄到了三個(gè)鍵盤(pán)，我們?cè)谥谱鲃?dòng)畫(huà)時(shí)拆了一個(gè)，并使用了另外兩個(gè)鍵盤(pán)的不同按鍵來(lái)制作拉伸的按鍵。

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

另一個(gè)與原片頭的聯(lián)系是網(wǎng)站作為組件和構(gòu)建布局的想法。這在原片頭中只用一些背景草圖進(jìn)行了參考，現(xiàn)在在這個(gè)版本中以紙質(zhì)原型的方式栩栩如生。

我們想到了以非常抽象的步驟展示“如何制作網(wǎng)站”的過(guò)程，其中每個(gè)步驟都快速過(guò)渡并轉(zhuǎn)換為另一個(gè)步驟。從鍵盤(pán)點(diǎn)擊變成代碼，然后是構(gòu)成網(wǎng)站的設(shè)計(jì)模塊，滾動(dòng)顯示CSS-Tricks徽標(biāo)。

這一切都是用定格動(dòng)畫(huà)完成的！用手移動(dòng)部件，拍照，然后制作成視頻。

一旦我們獲得了概念批準(zhǔn)并準(zhǔn)備好道具，我們就花了數(shù)小時(shí)移動(dòng)小部件來(lái)制作所有這些神奇的效果。

看看創(chuàng)作過(guò)程的延時(shí)攝影吧！

最終，我得到了不同縱橫比和尺寸的多個(gè)版本，這很棒，因?yàn)槲铱梢噪S意切換并使用在不同場(chǎng)景中可能更合適的版本。這是主要版本！

我已經(jīng)開(kāi)始將這些放在像這樣的視頻的開(kāi)頭和結(jié)尾了。

感謝dina和Assam！

以上是Dina Amin的新的CSS-Tricks視頻介紹的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！