La nouvelle intro vidéo CSS-Tricks par Dina Amin

Vous connaissez nos tutoriels vidéo? Bien qu'il ne soit pas particulièrement fréquent, je le fais depuis longtemps et je l'aime toujours et je prévois de continuer à le faire. Je les publierai ici et vous pouvez également vous abonner sur YouTube.

Au fil des ans, j'ai utilisé plusieurs animations de titre vidéo personnalisées différentes, toutes fabriquées par des gens qui sont meilleurs que moi. En mai de cette année, j'ai demandé autour de moi et j'ai obtenu de bonnes suggestions, mais rien de mieux que Matthias recommandant Marc, puis Marc m'a contacté Dina Amin.

Les œuvres de Dina sont accrocheuses: c'est super! Elle est bonne dans l'animation en stop-motion et dans de nombreuses choses révolutionnaires:

Nous discutons et planifions le projet. Elle a dit:

J'ai travaillé avec Asem Kamal pour créer une nouvelle animation d'ouverture pour la chaîne YouTube CSS-Tricks. Nous voulions faire une animation très courte, concise mais amusante, de sorte que les téléspectateurs sur YouTube ne sauteraient pas le générique d'ouverture ou ne s'ennuieraient pas s'ils regardaient plusieurs vidéos CSS-Tricks d'affilée.

Elle a fait beaucoup de recherches et a posé une série de questions. J'aime qu'elle soit très consciente du rôle de crédits d'ouverture comme celui-ci dans la vidéo, en particulier dans le tutoriel. Pas trop longtemps, pas ennuyeux en aucune façon. Il doit être suffisamment détaillé pour que ce soit presque un plaisir de le regarder à plusieurs reprises.

L'ancien titre vidéo commence par le clavier:

Nous avons commencé avec Apple Keyboard parce que nous voulions garder des choses avec lesquelles le public de Chris pourrait résonner dans le titre original, et surtout parce que je voulais séparer le clavier!

"Avons-nous retiré le clavier ?!" Oui, nous le supprimons. Il est facile de trouver beaucoup de claviers Apple cassés, qui est un produit très bien conçu, toutes les pièces sont très joliment combinées avec le moins de pièces, mais seule Apple peut réparer ce produit. Vous ne pouvez pas retirer votre tournevis, l'ouvrir et réparer une connexion de bouton défectueuse. Donc, beaucoup de tels claviers sont jetés parce qu'il est trop cher à réparer dans un pays comme l'Égypte. Nous avons obtenu trois claviers, nous en avons retiré un pendant que nous faisions l'animation et utilisé différentes clés des deux autres claviers pour faire les clés étirées.

Il est intéressant de voir des friandises en coulisses dans ses histoires Instagram:

Une autre connexion au titre d'origine est l'idée du site Web en tant que composant et créant la disposition. Ceci est référencé dans le titre d'origine avec seulement quelques croquis d'arrière-plan, et prend maintenant vie dans cette version sous la forme d'un prototype papier.

Nous avons pensé au processus de montrer le «comment faire un site Web» à des étapes très abstraites, où chaque étape transitions rapidement et se transforme en une autre étape. À partir des clics du clavier vers le code, puis le module de conception qui constitue le site Web en faisant défiler pour afficher le logo CSS-Tricks.

Tout cela se fait avec l'animation en stop-motion! Déplacez les pièces avec vos mains, prenez des photos et faites-les en vidéo.

Une fois que nous avons obtenu l'approbation du concept et que nous avions les accessoires prêts, nous avons passé des heures à déplacer les widgets pour faire tous ces effets incroyables.

Jetez un œil à la photographie en accéléré du processus créatif!

Finalement, j'ai obtenu plusieurs versions de différents rapports d'aspect et tailles, ce qui est génial car je peux changer autant que possible et utiliser la version qui pourrait être plus appropriée dans différents scénarios. Ceci est la version principale!

J'ai commencé à les mettre au début et à la fin d'une vidéo comme celle-ci.

Merci à Dina et Assam!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!