Crear un gif animado con vídeo, Photoshop CS

11 de mayo de 2011
Valoración del artículo:
En este tutorial aprenderemos a crear un banner con un gif animado y un vídeo incrustado, todo ello, con ayuda de Photoshop CS.
Atención: Contenido exclusivo de DesarrolloMultimedia.es. No reproducir. Copyright.

Las posibilidades para crear un banner con Photoshop CS ya no están tan limitadas, es decir, ya se pueden crear transiciones de imágenes que vayan suaves sin que ocupen una barbaridad y se puede manejar cada elemento como si fuera una capa más, en una línea de tiempo.

Además de tener la posibilidad de integrar vídeo con todas las herramientas que ofrece Photoshop CS; opciones de fusión, transformación, filtros, etc...

En este artículo veremos cómo integrar un vídeo, transformarlo, aplicar algún filtro y crear un texto con canales alfa.

Lo primero que debemos hacer que crear un nuevo documento con el tamaño que queramos para nuestro banner, para ello, Menú/Archivo/Nuevo y le damos las proporciones deseadas.



En caso de que no esté abierta, pinchamos en la ventana de animación, con la que trabajaremos más adelante, Menú/Ventana/Animación.

A continuación abrimos con Photosho CS el vídeo que vamos a incrustar en nuestro banner, Menú/Archivo/Abrir y pinchamos donde tengamos el vídeo dentro de nuestro disco duro.



Seguidamente arrastramos el vídeo dentro del documento que hemos creado para la realización del banner.



Seguimos situados en la capa del vídeo dentro del documento del banner, para transformarlo a continuación, podemos darle el tamaño que queramos, sesgarlo, voltearlo, etc...

Nos saldrá un mensaje diciendo si queremos convertirlo en capa inteligente, hacemos nuestra transformación si es necesario y decimos que si.



A continuación diseñamos el banner a nuestro gusto, nosotros, hemos añadido una capa con un ordenador, para dejar el vídeo dentro, una capa con el color de fondo y otra capa con el logotipo de Desarrollo Multimedia.



Volvemos a situarnos en la capa del vídeo y le aplicamos un filtro de bodes añadido, para que de un aspecto de dibujo o ilustración, (vosotros, en caso de que lo deseéis, podéis aplicar el filtro que queráis).

Para ello Menú/Archivo/Filtro/Artístico/Bordes añadidos.

Una vez seleccionado, se abrirá otra ventana, donde podemos dar los valores que deseemos.



Por último vamos a añadir una capa de texto, escribimos lo que deseemos y a continuación miramos en la ventana de animación y la línea de tiempo.

Lo que vamos a realizar, son fotogramas claves, a lo largo de la línea de tiempo, (con la misma duración que la capa del vídeo), para ello, situamos la agua al principio del todo, y pinchamos en el centro de las dos flechas para crear un nuevo fotograma clave dentro de la categoría de opacidad.

Una vez insertado el fotograma clave, ya podemos variar la opacidad en la ventana de capas, (porque sólo afectará desde ese fotograma al siguiente que añadamos).



A continuación desplazamos la aguja en la línea de tiempo y añadimos otro fotograma clave, esta vez para bajar la opacidad en la ventana de capas.

Podemos crear tantos fotogramas claves como deseemos y el efecto que conseguiremos es que vaya de modo suave la transición de opacidad de un fotograma a otro.



Ya tendríamos realizado nuestro banner, simplemente tenemos que guardarlo, para ello, Menú/Archivo/Guardar para Web y dispositivos.

Aquí hay que tener en cuenta que el gráfico que exportemos sea un gif, (ya que con otro formato eliminaríamos la animación), y que esté activada la casilla infinito, para que haga un bucle y se repita constantemente.



Tan sólo comentar, que luego saldrá otra ventana que permite guardar HTML, Imágenes o HTML e Imágenes, por lo que podéis seleccionar lo que más os convenga.

A continuación os dejamos un ejemplo de nuestro banner con vídeo incrustado ya finalizado.

Comentarios

Los comentarios de los visitantes son para ampliar la
información del artículo. Cualquiera puede participar.

Añadir un comentario al artículo Publicar un comentario del artículo

Mostrando 3 comentarios revisados

 formatos para photoshop
30/10/11 

Comentario de andy:

no puedo cargar el video me sale errror que formatos puedo utilizar

Desarrollo Multimedia

En el ejemplo hemos utilizado un .mp4.

Saludos.


 Excelente Tutorial
23/7/11 

Comentario de CAMBINDO:

Saludos y Felicitaciones, así se explica super entendible, sigan así. Cambindo


 y el audio?
28/2/12 

Comentario de Claudia:

Tengo 2 preguntas: el audio se escuchará bien??.. y el vídeo pasa en loop o tiene los botones para parar y avanzar dentro del vídeo?. Mil gracias y muy bueno el tuto!!




El autor
Manuales
Categorías

Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...