figu120
New Member
- Messages
- 921
- Reaction score
- 0
- Points
- 0
Mediante Photoshop e ImageReady tenemos la posibilidad de crear banners animados en formato GIF. Vamos a ver como crear un sencillo banner en 15 sencillos pasos.
1. De costumbre para hacer alguna animacion, empiezo a trabajar en Adobe Photoshop o Adobe Illustrator. Pero tambien lo podemos hacer en Image Ready. Asi que empezaremos a crear un banner para una empresa, por ejemplo "Mifolta".
Imagine que ya tiene una idea de como lo va hacer y ya tiene los dibujos que van a ser animados.
2. Haga un nuevo dibujo con el tamaño de 468x60 pix. y traslade las fotos alli. Minimice el "peso" de las fotos!
3. Aca les muestro la distribucion de todas las capas. Atencion:
a) Las letras de la palabra "Mifolta" estan en diferentes capas.
b) La frases "Las ves?" tambien estan en diferentes capas porque van a tener distinto lugar en el baner.
c) También tenemos 6 capas con la "chica", 3 fotos normales y 3 modificadas, con Gaussian blur.
4. Escriba "Las ves?" y luego haga una copia de la capa y pongala dos lugares arriba. Haga de vuelta una copia de la capa y de nuevo subela dos lugares arriba. Repita este procedimiento hasta que la frase desaparezca. Haga una capa nueva y escriba alli "Y ahora?"
5. Lo mas importante de la animacion:
1) el "ojo" debe ser invisible, asi que por eso no vemos el dibujo.
2) el "ojo" debe ser visible, esto significa que podemos ver la capa con el texto o el dibujo.
6. Todo ya esta preparado y por eso vaya a Image Ready.
7. En Image Ready apretamos en Animation y luego Tweens Animation Frames.
8. En la ventana Tween elija la cantidad de "frames" que van a ser iguales a la cantidad de capas.
9. Elija "Frame N°1" y abra los "ojos" en las capas: "chica_1_blur", "chica_2_blur", "chica_3_blur".
Atención! Todos las demas capas deben estar sin el "ojo". Son invisibles. Luego elija el "Frame N°2" y hay que tener abierto "con el ojo" las siguientes capas: "chica_1_blur", "chica_2_blur", "chica_3_blur" y " Las ves? copy 6" (debe aparecer un poco arriba).
Luego elija el "Frame N°3" y tenemos capas: "chica_1_blur", "chica_2_blur", "chica_3_blur" y "Las ves? copy 5"
Y asi sucesivamente hasta el ultimo "Frame", elija "Frame" y abra las capas necesarias.
10. Aca elija para cada "Frame" el tiempo, es decir, cuantos segundos van a ser vistos.
11. Aqui eligimos la cantidad de veces que va a mostrarse nuestra animacion, una, dos o infinitas veces.
12. Aqui podemos elijir:
Agregar "Frame" nuevos
Eliminar "Frame"
Eliminar toda la animacion
Copiar "Frame", etc.
13. Atencion! Esta parte es muy importante!
Esto quiere decir cual va a ser el "peso". Cuanto menos peso va a tener el banner, es mejor. Muy a menudo hay que bajar la calidad grafica para bajar el peso. Lo maximo debe ser 15kb. En el dibujo de la derecha puede observar que con el color rojo esta seleccionado lo automatico y con el verde manual.
14. Cuanto menos es la cantidad de colores, menos sera el peso del banner.
15. Ponga en accion la animacion (1), luego pruebelo en el browser (2) y si todo esta perfecto guardelo (3).
Todo esta listo !
by figu120
1. De costumbre para hacer alguna animacion, empiezo a trabajar en Adobe Photoshop o Adobe Illustrator. Pero tambien lo podemos hacer en Image Ready. Asi que empezaremos a crear un banner para una empresa, por ejemplo "Mifolta".
Imagine que ya tiene una idea de como lo va hacer y ya tiene los dibujos que van a ser animados.
2. Haga un nuevo dibujo con el tamaño de 468x60 pix. y traslade las fotos alli. Minimice el "peso" de las fotos!
3. Aca les muestro la distribucion de todas las capas. Atencion:
a) Las letras de la palabra "Mifolta" estan en diferentes capas.
b) La frases "Las ves?" tambien estan en diferentes capas porque van a tener distinto lugar en el baner.
c) También tenemos 6 capas con la "chica", 3 fotos normales y 3 modificadas, con Gaussian blur.
4. Escriba "Las ves?" y luego haga una copia de la capa y pongala dos lugares arriba. Haga de vuelta una copia de la capa y de nuevo subela dos lugares arriba. Repita este procedimiento hasta que la frase desaparezca. Haga una capa nueva y escriba alli "Y ahora?"
5. Lo mas importante de la animacion:
1) el "ojo" debe ser invisible, asi que por eso no vemos el dibujo.
2) el "ojo" debe ser visible, esto significa que podemos ver la capa con el texto o el dibujo.
6. Todo ya esta preparado y por eso vaya a Image Ready.
7. En Image Ready apretamos en Animation y luego Tweens Animation Frames.
8. En la ventana Tween elija la cantidad de "frames" que van a ser iguales a la cantidad de capas.
9. Elija "Frame N°1" y abra los "ojos" en las capas: "chica_1_blur", "chica_2_blur", "chica_3_blur".
Atención! Todos las demas capas deben estar sin el "ojo". Son invisibles. Luego elija el "Frame N°2" y hay que tener abierto "con el ojo" las siguientes capas: "chica_1_blur", "chica_2_blur", "chica_3_blur" y " Las ves? copy 6" (debe aparecer un poco arriba).
Luego elija el "Frame N°3" y tenemos capas: "chica_1_blur", "chica_2_blur", "chica_3_blur" y "Las ves? copy 5"
Y asi sucesivamente hasta el ultimo "Frame", elija "Frame" y abra las capas necesarias.
10. Aca elija para cada "Frame" el tiempo, es decir, cuantos segundos van a ser vistos.
11. Aqui eligimos la cantidad de veces que va a mostrarse nuestra animacion, una, dos o infinitas veces.
12. Aqui podemos elijir:
Agregar "Frame" nuevos
Eliminar "Frame"
Eliminar toda la animacion
Copiar "Frame", etc.
13. Atencion! Esta parte es muy importante!
Esto quiere decir cual va a ser el "peso". Cuanto menos peso va a tener el banner, es mejor. Muy a menudo hay que bajar la calidad grafica para bajar el peso. Lo maximo debe ser 15kb. En el dibujo de la derecha puede observar que con el color rojo esta seleccionado lo automatico y con el verde manual.
14. Cuanto menos es la cantidad de colores, menos sera el peso del banner.
15. Ponga en accion la animacion (1), luego pruebelo en el browser (2) y si todo esta perfecto guardelo (3).
Todo esta listo !
by figu120
Last edited:
