omega

Bueno aquí mi intento de explicar en unos paso cómo hacer un gif animado para hacer nuestras firmas en el foro.
Antes de nada decir, que seguro existen otras maneras de hacerlo, y otros programas.

Este pequeño manual es para usar el Photoshop:

1_ Lo primero de todo es tener una idea general de lo que queremos hacer, para ir a lo sencillo planteamos una firma de 500 pixeles x 200 pixeles.
Y serán dos imágenes que se irán alternando la una a la otra.
La primera:

Y la segunda:


La composición será sencilla, pero manejando los comandos básicos se puede ir complejizar las transiciones.

2_ Abrimos el programa y empezamos un documento nuevo con las dimensiones que queremos. Mediante la gestión de capas podemos activar y desactivar las dos imágenes que queremos usar.
Tenemos que tener activada la ventana de Animacion, que se puede sacar en:
Ventanas> Animacion

Y nos saldría esto:


1_ Ventana de animación

2_ Frames, cuadros o cada una de las secuencias del movimiento del gif.

3_ Comandos de Tiempo, vamos como los de un dvd, play pausa y demás.

4_ Botón de Duplicar cuadros, cuando empezamos sólo tenemos un cuadro con las capas que tengamos activadas en ese momento.

Es decir para hacer nuestro gif, deberíamos tener activadas en el primer cuadro, la primera de las imágenes de la firma.

Al darle al botón de duplicar cuadro, nos aparece un segundo cuadro igual que el anterior ( es un duplicado)

Entonces en el segundo cuadro, cambiamos las capas que queremos que se vean, y dejamos sólo activas las de la segunda imagen de la firma.

Os habréis dado cuanta que debajo de cada cuadro hay marcado un tiempo en segundos.

Ese tiempo, es el tiempo de transición entre, digamos, una diapositiva y la siguiente. Dependiendo del tiempo podemos hacer más o menos brusca la transición.

Esto es con una transición de 0,2 seg entre una y otra:

Y esta con 4 segundos:


5_ Es el botón de eliminar, por si no equivocamos mucho.
Por último sólo nos queda guardar el gif.

Para ello le damos a Archivo>Guardar para web o dispositivos
Y aquí es donde podemos guardar en formato Gif, par así poder mantener el “movimiento”.

Bueno, esto es lo básico, básico. Una vez se controle esto, se puede ir aumentando el número de cuadros, y variar los efectos de las capas en cada uno de los cuadros.

Por ejemplo podemos varias la opacidad de una capa en sucesivos cuadros, para que dé el efecto de desaparición, movimiento etc…
Espero que os sirva de ayuda, y si se os queda pequeño el post, podemos ir ampliándolo poco a poco.

Un saludo.


EFECTO DIFUMINADO


Tenemos las dos imágenes de las cuales partimos. ( Las mismas que el caso anterior)
El proceso cosiste en añadir cuadros de transición modificando la opacidad de las capas.

Así pues llamaremos a cada una de las imágenes ( para entendernos) Imagen 1 e Imagen 2.

Pasos a seguir:


1_ Cuadro 1: Imagen 1 activada con opacidad al 100%. La Imagen 2 queda debajo de la Imagen 1 y por tanto no se vería. Le ponemos el tiempo que queramos que esté activa, normalmente a las más opacas las ponemos durante más tiempo. En el ejemplo son 3 segundos.

2_ Cuadro 2: Imagen 1 al 80 % de opacidad e Imagen 2 al 20%. Tiempo de transición: 0.2 seg
La opacidad la modificamos en la ventanita marcada con el número 7 del ejemplo.

3_ Cuadro 3: Imagen 1 al 60 % de opacidad e Imagen 2 al 40%. Tiempo de transición 0.2 seg.

4_ Cuadro 4: Imagen 1 al 40 % de opacidad e Imagen 2 al 60%. Tiempo de transición 0.2 seg.

5_ Cuadro 5: Imagen 1 al 20 % de opacidad e Imagen 2 al 80%. Tiempo de transición 0.2 seg.

6_ Cuadro 6: Imagen 1 al 0 % de opacidad e Imagen 2 al 100%. Tiempo de transición el mismo que en cuadro 1. (3segundo)

Con lo cual nos quedaría algo así:


Ahora sólo nos falta hacer el paso inverso y volver de la Imagen 2 a la imagen 1:


7_ Cuadro 7: Imagen 1 al 20 % de opacidad e Imagen 2 al 80%. Tiempo de transición: 0.2 seg

8_ Cuadro 8: Imagen 1 al 40 % de opacidad e Imagen 2 al 60%. Tiempo de transición: 0.2 seg

9_ Cuadro 9: Imagen 1 al 60 % de opacidad e Imagen 2 al 40%. Tiempo de transición: 0.2 seg

10_ Cuadro 10: Imagen 1 al 80 % de opacidad e Imagen 2 al 20%. Tiempo de transición: 0.2 seg

11_ Cuadro 11: Imagen 1 al 100% e Imagen 2 al 0%, con lo cual se corresponde con el cuadro número 1. Es decir volvemos al principio. (el cuadro 11 podemos elminarlo)

Nos quedaría algo así:


Podemos variar los tiempos de transición, las opacidades al gusto. Es cuestión de ir probando tiempos y ver cuáles nos gustan más.

__________________

ajoyagua

Vamos a probar a ver si nos salen tan chulas como las tuyas, jejeje. gracias por darnos una breve explicación para todo esto que a mi punto de vista es complicado, jejeje.

__________________

Bi_Manresa_25

Muchas gracias por el tutorial, ahora cualquiera que quiera podrá hacerse su propia firma personalizada de forma más sencilla ^^ ¡Piensas en todo!

__________________

omega

GRacias chicos, de todas formas si alguien quiere explicar tambien aquí, cómo hace las firmas o trucos o efectos, este puede ser un buen lugar no?
Saludos

__________________

ajoyagua

Bueno ya probé y me salieron unas firmas muy monas. ahora te pregunto, como puedo hacer un efecto difuminado o efectos similares cuando cambia de una imagen a otra? en vez de como lo as puesto tu en el ejemplo, que cambia de golpe de una imagen a otra. gracias por darnos clases, jejeje.

__________________

omega

El efecto difuminado como dices ajoyagua, lo puedes hacer insertando unos cuadreos de transición entre las dos "imágenes principales".
Lo que hay que hacer es ir disminuyendo la opacidad de las capas. Con cuatro o cinco cuadros de 0.2 seg, y disminuyendo la opacidad del 100% al 0% queda bien la transición.
Espero que lo hayas entendido, sino lo acabo de postear añadiendo algunas imagenes y explicándolo más despacio.
Creo que así se entiende mejor.
Para cualquier otra duda ya sabeis, que parece que le estoy cogiendo el gustillo a esto de hacer los tutoriales, jejee.

Un saludo y a ver que tal van saliendo esas firmas.

__________________

eloysg

se que es mucho pedir, pero me gustaria un tutorial para CS2 porfis

loboman

Todo esta super sencillo
solo tengo un problema
no tengo el Photoshop
Tengo que comprarlo o hay alguna pagina
donde pueda descargarlo gratis....

__________________

NO SOY PERFECTO SOLO SOY UN HOMBRE

Bi_Manresa_25

No lo compres lokoooooo!TODOS los programas que existen te los puedes descargar desde la red, que para eso está xD

[Solo Usuarios Registrados pueden ver los Links. Click aqui para Registrarte]

Buesca una descarga que funcione y dale!

__________________

ajoyagua

Aquí te dejo yo un photoshop loboman para que no te líes buscando por la red como te a puesto manresa. ademas es portable no se instala, solo tienes que descargar lo sacas y lo ejecutas y listo para usar. es el que uso yo y me va muy bien.

DESCARGA:
[Solo Usuarios Registrados pueden ver los Links. Click aqui para Registrarte]

__________________