Sie wissen, dass wir Video-Screencasts machen, oder? Das ist nicht, wie, super regelmäßig, aber ich mache sie schon lange, mag sie immer noch und plane, sie weiterhin zu machen. Ich veröffentliche sie hier, aber Sie können auch auf YouTube abonnieren.
Ich hatte im Laufe der Jahre ein paar verschiedene benutzerdefinierte Video-Intro-Animationen, die immer von jemandem gemacht wurden, der sich damit viel besser auskennt als ich. Als ich mich im Mai dieses Jahres umhörte, bekam ich einige gute Hinweise, aber keinen besseren als Matthias, der Marc weiterleitete, und dann Marc, der mir mit einer Einführung in Dina Amin half.
Ein Blick auf Dinas Arbeit und es ist offensichtlich: *Ja*! Sie macht Stop-Motion und bricht viele Dinge auf
Wir haben hin und her geredet und das Projekt besprochen. Sie sagt
Ich habe mit Assem Kamal an einem neuen Intro für den CSS-Tricks YouTube-Kanal gearbeitet. Wir wollten etwas sehr Kurzes und doch Interessantes machen, damit die Zuschauer auf YouTube das Intro nicht überspringen oder sich langweilen, wenn sie ein paar CSS-Tricks-Videos hintereinander ansehen.
Sie recherchierte und stellte viele Fragen. Mir gefällt, wie sehr sie sich der Rolle bewusst war, die ein solches Intro in einem Video spielt, insbesondere in Tutorials. Es darf nicht zu lang sein. Es darf auf keinen Fall nerven. Es muss genug Details haben, dass es fast Spaß macht, es mehrmals zu sehen.
Das alte Video begann mit einer Tastatur
Wir begannen mit einer Apple-Tastatur, weil wir etwas vom ursprünglichen Intro behalten wollten, das Chris' Publikum wiedererkennen würde, und vor allem, weil ich die Tastatur auseinandernehmen wollte!
„Haben wir diese Tastatur zerlegt?!“ Ja, das haben wir. Es war zu einfach, mehrere kaputte Apple-Tastaturen zu finden, es ist ein sehr gut konstruiertes Produkt und es fügt sich alles schön mit minimalen Teilen zusammen, aber nur Apple kann dieses Produkt reparieren. Man kann nicht einfach sein Schraubenset herausholen, es öffnen und eine fehlerhafte Tastenverbindung reparieren. Viele dieser Tastaturen werden also weggeworfen, weil es in Ländern wie Ägypten zu teuer ist, sie zu reparieren. Wir haben drei Tastaturen in die Hände bekommen und eine zerlegt, während wir sie animierten, und verschiedene Tastaturtasten von den anderen beiden verwendet, um die Tasten dehnen zu lassen.
Es hat Spaß gemacht, einige Behind-the-Scenes-Aufnahmen in ihren Instagram Stories zu sehen
Und eine weitere Verbindung zum Original ist die Idee von Websites als Komponenten und dem Erstellen von Layouts. Das wurde im Original mit einigen Hintergrundskizzen angedeutet und erwacht in dieser Version nun mit Papierprototypen zum Leben.
Wir haben daran gedacht, den Prozess des „Wie man eine Website erstellt“ in sehr abstrakten Schritten zu zeigen, bei denen jeder Schritt schnell in den nächsten übergeht und sich verwandelt. Beginnt mit Tastenklicks, die sich in Code verwandeln, dann Designblöcke, aus denen eine Website besteht, die dann nach unten scrollt, um das CSS-Tricks-Logo anzuzeigen.
Das alles wird ganz wörtlich mit Stop-Motion gemacht! Hand bewegt Dinge herum, macht Fotos und macht daraus ein Video.
Sobald wir das Konzept genehmigt und unsere Requisiten bereit hatten, haben wir Stunden und Stunden damit verbracht, kleine Teile zu bewegen, um all diese Magie zu vollbringen.
Schauen Sie sich ein Zeitraffer der Entstehung an!
Letztendlich habe ich eine Reihe von Versionen in verschiedenen Seitenverhältnissen und Größen erhalten, was wunderbar ist, da ich sie wechseln und verschiedene verwenden kann, die in unterschiedlichen Szenarien besser geeignet sind. Hier ist die Hauptversion!
Ich habe sie bereits am Anfang und Ende von Videos wie diesem verwendet.
Danke, Dina und Assem!
Tastatur, Code, Layout, alles ist hier. Tolle Arbeit, ich denke, dieses Intro wird eine Weile bleiben.
Gute Arbeit
Sehr cool!
Ich wusste, dass sie Magie wirken würde, Chris. Ich freue mich sehr für alle, dass diese Verbindung geklappt hat. Ganz zu schweigen von dem schönen, niedlichen, passenden kleinen Intro! Gut gemacht, Dina und Asem!