Fotogramas y Motion Graphics Frames and Motion Graphics
Cuatro términos sobre los “frames”, un par muy conocidos y otro par no tan habituales, para ir familiarizándonos con el glosario del motion graphics.
Four terms about “frames”: a couple that are very well known and a couple that are not so common, to get familiar with the motion graphics glossary.
El glosario en motion graphics es extremadamente amplio. Poco a poco veremos algunos términos para familiarizarnos con esta disciplina del diseño gráfico que, con el auge de las redes sociales y las plataformas de vídeo, demanda cada vez más contenido. Hoy te traigo solamente cuatro tecnicismos sobre los “frames”, un par de ellos muy conocidos y otro par no tan habituales. Por algo se empieza.
The motion graphics glossary is extremely broad. Little by little we will go through some terms to get familiar with this graphic design discipline which, with the rise of social media and video platforms, demands more and more content. Today I’m bringing you just four technical terms about “frames”: a couple of them very well known and a couple not so common. You have to start somewhere.
1 – Frame (fotograma)
1 – Frame
El concepto más básico de todos. Se denomina fotograma (o frame) a cada una de las imágenes que forman parte del clip de vídeo. Nada más sencillo.
The most basic concept of all. A frame is each one of the images that make up a video clip. It couldn’t be simpler.
2 – Keyframe (fotograma clave)
2 – Keyframe
Los fotogramas clave marcan los puntos en los que cambia un valor, como el inicio y el final de cualquier transición, interpolación o movimiento. En ellos se establecen las velocidades de entrada y de salida. En After Effects, cuando establecemos estas velocidades podemos diferenciar entre la velocidad y la influencia de la animación con respecto a lo que le precede y lo que le sucede. Se representan en la línea de tiempo mediante una serie de símbolos que varían en función del tipo de animación que contiene cada uno de ellos. En otro momento veremos estos símbolos.
Keyframes mark the points where a value changes, such as the start and end of any transition, interpolation or movement. They are where the incoming and outgoing speeds are set. In After Effects, when we set these speeds we can tell the speed apart from the influence of the animation with respect to what comes before and after it. They are shown on the timeline as a series of symbols that vary depending on the type of animation each one contains. We will look at these symbols another time.
3 – Smearframe
3 – Smear frame
En animación, los smearframes son fotogramas que crean la ilusión de un desenfoque de movimiento. El desenfoque de movimiento fotográfico no siempre queda bien y se considera que “ensucia” las animaciones de grafismos vectoriales o los dibujos animados, por eso se realizan los smearframes, que suponen un mayor trabajo pero te otorgan un mejor acabado y calidad a la animación.
In animation, smear frames are frames that create the illusion of motion blur. Photographic motion blur doesn’t always look good and is considered to “dirty” animations of vector graphics or cartoons, which is why smear frames are made: they take more work, but give the animation a better finish and quality.
Estos fotogramas son una técnica que se utiliza en animación desde los años 40. Como curiosidad, sabiendo cómo son de cambiantes las modas y las tendencias en diseño, a veces el desenfoque de movimiento vuelve a ponerse de moda y te encuentras grandes proyectos que lo incluyen. Aquí tienes un ejemplo sencillo de desenfoque de movimiento comparado con smearframes.
This technique has been used in animation since the 1940s. As a curiosity, given how changeable fashions and trends in design are, motion blur sometimes comes back into style and you find big projects that include it. Here is a simple example of motion blur compared with smear frames.
Desenfoque de movimiento frente a smearframes.
Motion blur versus smear frames.
4 – Styleframe
4 – Styleframe
Un styleframe es una imagen destinada a darte una idea muy aproximada de cómo se verá el vídeo terminado. Son fotogramas trabajados y a todo color que visualizan cada escena principal y determinan el estilo y la apariencia del vídeo. Es como un storyboard orientado al acabado visual.
A styleframe is an image meant to give you a very close idea of how the finished video will look. They are fully worked, full-color frames that visualize each main scene and set the style and appearance of the video. Think of it as a storyboard aimed at the visual finish.
Los styleframes se deben crear y estudiar antes de comenzar a animar el proyecto. Son muy útiles e importantes para ganar tiempo y adelantar contenido en proyectos comerciales. Representan las escenas principales que se encuentran en el guion del proyecto planteado. Con ellos permitimos que el cliente elija el estilo deseado para la creación del vídeo animado de acuerdo con sus demandas y expectativas.
Styleframes should be created and reviewed before starting to animate the project. They are very useful and important for saving time and getting content approved early in commercial projects. They represent the main scenes found in the script of the proposed project. With them, the client can choose the style they want for the animated video, in line with their demands and expectations.
Ahora ya sabes un poco más sobre aspectos de motion que mucha gente no sabe ni que existen. En el siguiente post vemos cómo llevar animaciones de After Effects a web y apps con Bodymovin y Lottie.
Now you know a little more about aspects of motion that many people don’t even know exist. In the next post we’ll see how to take After Effects animations to the web and apps with Bodymovin and Lottie.