Tutorial para hacer Banners con Photoshop en movimiento.

17 de noviembre de 2010
Valoración del artículo:
En este tutorial vamos a aprender como hacer firmas para alojar en nuestras webs, foros… pero en movimiento y usando Photoshop e ImageReady.
Atención: Contenido exclusivo de DesarrolloMultimedia.es. No reproducir. Copyright.

Tutorial para hacer Banners en movimiento. En este tutorial vamos a aprender como hacer firmas para alojar en nuestras webs, foros… pero en movimiento. 1º Paso:

Abrimos el Photoshop, y creamos un nuevo documento de 480x107 px, color RGB y fondo blanco. Una vez abierto el documento creamos nuestro fondo de firma pero sin texto, en nuestro caso hemos elegido este fondo degradado:





2º Paso:

Colocamos el texto (sin efectos) encima de nuestro fondo. Para que resalte, acordaos de escoger un color frontal que llame la atención. Debe de quedar algo parecido a esto:

3º Paso:

Es hora de empezar a trabajar de verdad, una vez tenemos nuestra firma con nuestro fondo sin efectos, abriremos ImageReady, para abrir este programa, deberemos tener abierto nuestra firma en Photoshop, iremos a archivo y clikaremos sobre Editar en ImageReady, o usaremos el atajo de teclado Shft+Crtl+M. Una vez pinchado se nos abrirá la siguiente imagen, si no nos aparece la ventana que se encuentra en la parte inferior de nuestra imagen deberemos pinchar sobre Ventana > Animación



Una vez abierta la ventana de animación haremos clik sobre la acción “duplicar el cuadro actual” (esta circulado en nuestro ejemplo), una vez dado se nos multiplicará el layer que tenemos en la pantalla. Una vez duplicada la imagen nos mantendremos encima del segundo layer, nos tiene que salir algo asi.





4º Paso:

Una vez duplicada la capa, nos dirigiremos de nuevo a Photoshop, para ello iremos a Archivo > Editar en Photoshop, o usaremos Ctrl+Mayús+M. Acordaos de no cerrar ImageReady. Ya en Photoshop, daremos los efectos que queramos a nuestro texto y/o imágenes, para ello iremos a Capa > Estilo de Capa > Estilos de Fusión, este paso lo haremos situándonos en la capa que queramos añadir el efecto, nosotros hemos escogido dar efecto al texto y a la bombilla.



Podéis jugar con todos los valores que deseéis, en mi caso he usado estos valores, y el resultado es el siguiente:



5º Paso:

Una vez terminado los efectos que hemos elegido, volvemos a ImageReady; acordaos, archivo y clikaremos sobre Editar en ImageReady, o usaremos el atajo de teclado Shft+Crtl+M. Con la firma en ImageReady, clikaremos sobre la opción Intercalar (se encuentra rodeada en rojo en nuestro ejemplo), una vez dado, nos saldrá una nueva ventana, y le daremos a OK.



Una vez aceptada la ventana, nos aparecerán 7 capas nuevas en la ventana de animación; ahora deberemos de añadir una 8 imagen, acordaros, daremos a duplicar imagen, así ya tendremos las capas necesarias.





6º Paso:

Nos colocaremos en la capa 8 y de nuevo enviaremos la imagen a Photoshop, acordaos Ctrl+Mayús+M. Una vez en photoshop, pincharemos sobre la capa que tenemos puesto los efectos, para verlos daremos sobre la flechita (circulada en rojo) y desactivaremos todos los efectos, para ello pincharemos sobre el ojo (circulado en amarillo) que aparece el primero, así conseguimos desactivar todos los efectos.



7º Paso:

Ya hemos desactivado todos los efectos, pues ahora volveremos a ImageReady. Como podemos ver, en la capa 8 ya no aparecen los efectos que tenia nuestra imagen, el siguiente paso es volver a darle a Intercalar, y en la ventana le daremos a OK, de esta manera hemos conseguido que en vez de 8 capas tengamos 13.

8º Paso:

Ya estamos a punto de terminar, el siguiente paso, es darle a reproducir > play, ya podemos ver como quedará nuestra firma, para pararla daremos a stop, el cuadradito que ha aparecido en vez del play. Buenos pues ya es hora de guardarlo, para utilizarlo en formato web desde aquí te aconsejamos que lo guardes en formato gif. Para ello vete a archivo > guardar optimizada como > y ya te sale el formato gif.

br>


Aquí os dejo nuestra firma final, un saludo



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

Se muestra un comentario revisado

 .
24/11/10 

Comentario de Maria:

Me ha servido de gran ayuda, Sara! muchas gracias! :)


Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos
interesantes que se hayan enviado recientemente.


Se han encontrado 3 comentarios sin revisar




El autor
Manuales
Categorías

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