La nueva introducción en vídeo de trucos CSS de dina Amin

Sabes que hacemos screencasts en video , ¿verdad? No es muy regular, pero los he hecho durante mucho tiempo, todavía me gusta hacerlo y planeo seguir haciéndolo. Los publico aquí, pero también puedes suscribirte en YouTube .

He tenido un par de animaciones de introducción de video personalizadas diferentes a lo largo de los años, siempre realizadas por alguien mucho más hábil con ese tipo de cosas que yo. Cuando pregunté en mayo de este año, obtuve algunas buenas pistas, pero ninguna mejor que Matthias llamando a Marc y luego Marc ayudándome con una introducción a Dina Amin .

Una mirada al trabajo de Dina y es obvio: ¡sí ! Hace stop-motion y muchas cosas de última hora:

Charlamos de un lado a otro, analizando el proyecto. Ella dice:

Trabajé junto con Assem Kamal en una nueva introducción para el canal de YouTube CSS-Tricks. Queríamos hacer algo muy breve pero interesante para que las audiencias de YouTube no se salten la introducción ni se aburran si ven un par de videos de Trucos CSS seguidos.

Investigó y formuló un montón de preguntas. Me gusta cómo ella era muy consciente del papel que juega una introducción como esta en un vídeo, especialmente en los tutoriales. No puede pasar mucho tiempo. No puede ser molesto de ninguna manera. Tiene que tener suficientes detalles para que sea casi divertido verlo varias veces.

El viejo video comenzaba con un teclado:

Este es el viejo. Me encanta el espíritu, pero le vendría bien un refresco. pic.twitter.com/ZfkDHaFZYI

– Chris Coyier (@chriscoyier) 26 de mayo de 2020

Comenzamos con un teclado Apple porque queríamos conservar algo de la introducción original con el que la audiencia de Chris se identificara y, lo más importante, ¡porque quería desarmar el teclado!

“¿Cortamos ese teclado?” Si lo hicimos. Fue muy fácil encontrar varios teclados Apple rotos, es un producto muy bien diseñado y todo se combina maravillosamente con un mínimo de piezas, pero sólo Apple puede reparar este producto. No puedes simplemente sacar tu kit de tornillos, abrirlo y arreglar una conexión de botón defectuosa. Por eso, muchos de estos teclados se desechan porque su reparación es demasiado costosa en países como Egipto. Conseguimos tres teclados y cortamos uno mientras animamos y usamos botones de teclado diferentes de los otros dos para hacer que los botones se estiren.

Fue divertido ver algunas cosas detrás de escena en sus Historias de Instagram:

Y otra conexión con el original es la idea de los sitios web como componentes y diseños de construcción. A esto se hizo referencia en el original con algunos bocetos de fondo y ahora cobra vida con prototipos en papel en esta versión.

Pensamos en mostrar el proceso de “cómo crear un sitio web” en pasos muy abstractos donde cada paso pasa rápidamente y se transforma en el otro. Comenzando con clics en el teclado que se convierten en código, luego diseña bloques que conforman un sitio web, que se desplaza para revelar el logotipo de CSS-Tricks.

¡Todo está hecho literalmente con stop motion! Mueve piezas a mano, toma fotos y conviértelas en videos.

Una vez que tuvimos el concepto aprobado y nuestros accesorios listos, pasamos horas y horas moviendo pequeñas piezas para hacer toda esta magia.

¡Mira un lapso de tiempo de la creación!

Al final, obtuve varias versiones en diferentes proporciones y tamaños, lo cual es maravilloso ya que puedo cambiarlas y usar otras que podrían ser más apropiadas en diferentes escenarios. ¡Aquí está el principal!

Ya los he estado poniendo al principio y al final de videos como este .

¡Gracias dina y Assam!