TUTORIAL ANIMACIÓN GIF CON PHOTOSHOP CS3

Profesora: Mercedes Cuenca

- Abrimos un archivo: Archivo>Nuevo.

Le damos el tamaño en pixeles que

queramos y el fondo transparente y

aceptamos.

El ejemplo que vamos a realizar es un banner con texto animado. El movimiento

que daremos al texto es aparecer por un lateral y desaparecer por el otro.

DIRECCIÓN DEL MOVIMIENTO

IMPORTANTE: Antes de realizar la animación con

Photoshop es recomendable hacer bocetos previos y un

Story board con el movimiento que va a tener nuestro

banner.

1] Empezamos duplicando la capa que

hemos llamado fondo, y la llamamos “1”.

Capa Nueva

2] Seleccionamos la capa “Fondo” y

con la herramienta de rectángulo

dibujamos la figura para crear un

fondo de color.

Herramienta de rectángulo.

3] Seleccionamos la capa “1” y con la

herramienta de Texto escribimos una

palabra (la que vamos a animar).

Con la herramienta selección, podemos

hacer visibles o invisibles las capas

pinchando en las casillas donde aparece

un ojo.

4] Lo que vamos a hacer ahora es ir duplicando capas y moviendo el texto con las

flechas del teclado. Haremos tantas capas como sea necesario, hasta que el texto

desaparezca:

- Para duplicar la capa pinchamos con la

herramienta selección la capa “1”. Con el

botón derecho del ratón le damos a “duplicar

capa”, y nombramos la siguiente capa “2”.

Hacemos invisible la capa “1”.

- Después seleccionamos la capa “2” y con la

flecha derecha del teclado movemos el texto

(le damos 20 veces).

Esta operación la repetiremos hasta que el texto

desaparezca. Iremos nombrando las capas que

vayamos creando con números

consecutivamente “1”, “2”, “3”...

5] Ahora vamos a llevar a cabo la animación

con la opción de Photoshop. Para ello

seguimos estos pasos:

- Hacemos invisibles todas las capas menos la

de “fondo” y la capa ”1”.

-Vamos a Ventana>Animación. Nos

aparecerá una ventana nueva.

- A partir de aquí trabajaremos con esta

ventana y con la de capas.

La ventana de animación tiene una opción que es la de duplicar cuadro (señalada en rojo).

6] Pulsaremos la opción duplicar

cuadro y a continuación nos

iremos a la ventana de capas.

- Haremos invisible la capa “1” y

visible la capa “2” y volveremos a

pulsar la opción de duplicar

cuadro.

7] Duplicaremos todos los cuadros necesarios para la animación. Siendo la misma

acción para cada capa. (Como hemos explicado en el paso anterior).

8] Una vez tengamos ya todos los cuadros, les damos la velocidad que creamos y

optimizamos la animación.

9] Por último le damos a

Archivo>Guardar para Web y

dispositivos. Y la guardamos en

Formato Gif

TUTORIALES:

-Con Photoshop:

http://subcultura.es/blogs/byAtx/tutorial-hacer-un-gif-animado-en-photoshop-8864/

- Con Gimp:

http://typeinmotionblog.fbarrie.org/2012/01/19/tutorial-gif-animado-con-gimp/