¿Como hacer un cinemagraph?
El Cinemagraph, también llamados «fotos vivientes» han regresado un poco últimamente (lo siento, no son nuevos). De hecho, escribí un tutorial sobre cómo hacer esto en el año 2005 en mi libro Cómo ganar por la web de Peachpit press. En realidad, lo llamé «Traer una imagen a la vida». Ahora es el momento de hacerlas en Adobe Photoshop usando videos. Es realmente útil para el encabezado de un sitio web, un anuncio, una publicación de Facebook o un quiosco, ya que puedes hacer un gif y configurarlo para que se repita para siempre y obtener un video de bucle sin fin en un tamaño de archivo bastante pequeño.
Un Cinemagraph es cuando tienes una fotografía, pero partes de ella se están moviendo. Esto se hace enmascarando una foto con un video en bucle debajo. Haremos esto desde un video, este tutorial funciona solo en Photoshop CS6 (extendido) y Photoshop CC. Mira mi video que te muestra paso a paso cómo hacer esto. Tengo algunos consejos adicionales aquí, incluyendo:
- Utilizar guías para obtener una mejor coincidencia para el bucle
- Ver fácilmente lo que estás ocultando en el video.
- Exportar como un gif animado
- Conseguir el gif en facebook
CÓMO HACER UN CINEMAGRAPH CON PHOTOSHOP CS6 Y CC
El modelo aquí fue Tiffany, y filmé esto (Canon 5D MkIII) en Eaves Ranch, Santa Fe, Nuevo México.
Nota: si no tiene Photoshop CS6 Extended (para soporte de video) o Photoshop CC, este tutorial no funcionará para usted, lo siento, pero las características del video antes eran diferentes, pero es posible que pueda adaptar el tutorial para trabajar en versiones anteriores, pero no puedo ofrecer soporte en eso.
Una vez que haya hecho su cinemagraph, puede exportarlo como video o como gif. Use Guardar para web para exportar el gif y asegúrese de configurar el ciclo en «para siempre».
Puedes subir este gif a tu sitio web, ver ejemplo aquí
Aquí hay instrucciones escritas paso a paso, para aquellos que prefieren leer.
HAGA UN CINEMAGRAPH EN PHOTOSHOP TUTORIAL Y HAGA UN GIF
Comience con un video, aquí hay un video que grabé recientemente de Tiffany. El objetivo es encontrar movimientos repetitivos y congelar esto en una fotografía y hacer que su cabello y la borla se muevan, y luego, podemos hacer un bucle, y luego, puedes subirlo a un sitio web como un gif animado o lo que sea , a través de un tamaño de archivo pequeño, y puede hacer un bucle sin fin y crear este movimiento. Es una especie de efecto genial.
Este tutorial funcionará en Photoshop CS 6 o CC. Las versiones anteriores tienen diferentes motores de animación. Ahora, para obtener el video aquí, simplemente selecciona Archivo, Abrir, y luego, solo eliges el video y se abrirá en la línea de tiempo. Abra el video en Photoshop y asegúrese de que la línea de tiempo sea visible. Ventana> Línea de tiempo (esto solo funciona en Photoshop CS6 Extended o CC) Entonces, como pueden ver, tenemos 16 segundos aquí; es demasiado largo
Lo primero, es dividir esto en un bucle corto donde la acción está sucediendo. Así que vamos a agarrar la cabeza de juego aquí y solo tiramos de ella. Esto se conoce como depuración. Entonces, lo que estoy haciendo es mirar el movimiento por aquí en las borlas, y por aquí en el pelo. También notando que está parpadeando una vez por segundo. Lo que estamos buscando es un bucle consistente donde el viento sopla sobre el mismo. Asegúrese de que sus ojos miren en la misma dirección, estamos buscando una transición perfecta para usar como punto de bucle.
Recortamos el video, haciendo clic y arrastrando al final y al principio. Lo hemos reducido a un par de segundos, que es todo lo que necesitamos.
Ahora queremos verificar esto para asegurarnos de que esté funcionando correctamente. Lo primero que podemos hacer es expandir un poco nuestra línea de tiempo. Esto no está cambiando la dirección del video en absoluto. Todo lo que hace es darnos un poco más para jugar aquí en nuestra línea de tiempo.
Ahora, si desea saber más sobre el video, tengo dos tutoriales completos de capacitación sobre cómo trabajar con el video en Photoshop. Tengo uno gratis aquí, tengo un par de cursos más a fondo.
Haga clic en el menú a la derecha de la línea de tiempo y elija Reproducción en bucle. Ahora, al hacer esto, esto nos permitirá mirar nuestro bucle. Así que cuando llegue al final, volverá otra vez, así que asegúrese de que esté encendido. Y luego, cuando pulsamos el Juego, notamos que va a pasar todo el tiempo, y luego, volver a jugar. Así que veamos eso y lo que estamos buscando es cualquier salto repentino.
Este es un buen video de base para usar. Entonces, lo siguiente que queremos hacer es congelar esto en una fotografía y eso es muy fácil. Duplique la capa de video. Así que puedes presionar Ctrl J o Command J en Mac para saltar, o simplemente arrastrar hacia el ícono Nueva capa, y eso duplicará ese video.
Ahora ya no queremos que esto sea un video. Queremos que esta capa superior sea una imagen, así que solo hacemos clic derecho y luego seleccionamos Rasterizar la capa.
Si observa nuestra línea de tiempo, observe que el clip de imagen está justo después del otro en la misma capa. Sin embargo, los queremos uno encima del otro, no uno tras otro. Lo que debes hacer es eliminarlo del grupo de videos. Así que tome esa capa, que es una imagen, arrástrela hacia arriba y vea que aparece una pequeña línea allí. Suelte y note, ahora, está en una capa sobre el video.
Asegúrate de arrastrar la imagen hacia la izquierda para que se alinee al principio.
Ahora, lo que debemos hacer es revelar las áreas en las que queremos tener movimiento y podemos hacerlo utilizando una máscara de capa. Sin embargo, va a ser bastante difícil ver dónde lo hemos ocultado porque ambas capas tienen el mismo aspecto, es bastante difícil saber qué es el video y qué es una imagen. Entonces, lo que vamos a hacer es poner un efecto temporal en este video para que podamos ver claramente dónde lo estamos ocultando.
Ocultar la capa superior
Aplique una capa de Ajuste de tono y saturación justo encima del video. Arrastre el control deslizante de tono para obtener algunos colores locos, que podemos ocultar más adelante, pero ahora, podemos ver dónde nos enmascaramos, porque solo queremos enmascarar alrededor del cabello y las borlas.
Aplicar una máscara de capa a la capa superior (capa de imagen).
Ahora esta máscara de capa está llena de blanco por lo que no tiene ningún efecto. Pinte las partes blancas de la fotografía para permitir que el video se muestre debajo.
Elija negro para el color de primer plano, agarre un pincel, la opacidad se establece en 100 y, en realidad, simplemente voy a desactivar la presión del lápiz. Sólo quiero tener una opacidad sólida.
Pintar alrededor del área del cabello. La pluma definitivamente se moverá un poco, y su cabello aquí definitivamente va a reventar, así que démosle un poco de espacio aquí para que se mueva.
Cuando obtenga una vista previa del video, oculte la Capa de ajuste de tono y saturación.
Puede pasar todo el tiempo que quiera para obtener el enmascaramiento perfecto.
Vamos a poner un poco de movimiento en estas borlas, así que solo voy a activar nuestro Ajuste de Tono y Saturación para poder ver lo que está pasando, me aseguro de seleccionar negro, tal vez haga este pincel un poco más grande. Y solo voy a pintar sobre estas borlas porque quiero ver cómo estas se mueven en el viento. Creo que va a agregar un efecto muy agradable, y está bien.
Así que vamos a ocultar las capas de ajuste de nuevo y reproducir esto. Tenemos un movimiento realmente agradable y creamos nuestro cinemagraph básico.
EXPORTANDO COMO UN GIF ANIMADO
Ahora, te mostraré cómo exportar esto como un gif animado. Elija Exportar y vamos a ir a Guardar para Web.
Cambie el tamaño a 650 de ancho porque, tal vez, quiero ponerlo en un blog de WordPress.
Asegúrate de elegir gif y no jpg.
Asegúrate de no estar debajo de Original, pero estás debajo de Optimizado para ver cómo se verá la imagen. Tenemos 67 cuadros aquí. Podemos presionar el botón Reproducir y, en realidad, podemos previsualizar ese gif directamente en Guardar para web.
Establece el tono en 256 colores, que es el máximo. Tenemos muchas ganas de hacer eso y cualquier configuración que tengas aquí
Mira las opciones de bucle. Queremos cambiar esto a Forever porque quieres que este bucle sin fin.
Y hagamos clic en la vista previa y echemos un vistazo en el navegador y veamos cómo será nuestro gif en realidad.
Así que puedes ver aquí arriba, así es exactamente como se verá. Se va a ver bastante bien. Va a jugar bien.
Solo vamos a golpear Guardar y llamar a este cinemagraph.gif. De acuerdo y ese es nuestro último gif.
PUBLICANDO UN GIF ANIMADO EN FACEBOOK
No puedes subir un gif animado directamente a Facebook. Si desea compartirlo en Facebook, deberá subirlo a su sitio web y pegar la URL de la imagen (conéctelo desde su sitio web). Si no tiene un sitio web, o no quiere publicarlo allí, hay otras soluciones. El más popular es un sitio web gratuito llamado giphy.
Espero que hayas encontrado este tutorial útil. Agrega un comentario y déjame saber qué te gustaría aprender. Yo creo un nuevo tutorial cada semana aquí en PhotoshopCAFE. Puedes ver todos los tutoriales gratuitos de photoshop aquí
