24/08/2011

Banner en Photoshop

ndic e

Banner en Photoshop
T odo D reamWeaver

Bs ic os T extos D ibujos I nterfac es Retoques E fec tos Botones T exturas V arios

Mediante Photoshop e ImageReady tenemos la WebT aller posibilidad de crear www.zwcad.org/DescargargratisCAD banners animados en P lantillas We b formato GIF. Vamos a ver Construir un Sitio Web como crear un sencillo C ongres o de Dis ea tu Sitio Web Gratis E ditor I nternet banner en 15 sencillos de Web Rpido Fc il y G ratis www.Wix.com/Constructor-Sitios-Web pasos.
Descargar gratis CA D
A C A D c omo, veloc idad rpida potente func in, 3 0 - das gratis

Online A nimation Tutorial

SA E O nline: A nimation C las s es N ext C ours e Starts S oon!
online.sae.edu/animation/

Faq's L inks Fuentes A rtc ulos P rogramas

1. De costumbre para hacer alguna animacion, empiezo a trabajar en Adobe Photoshop o Formas Adobe Illustrator. Sc ripts Pero tambien lo E s tilos podemos hacer en M otivos Image Ready. Asi P inc eles que empezaremos A c c iones a crear un banner D egradados para una empresa, por ejemplo "Mifolta". Imagine que ya Foros tiene una idea de O fertas de T rabajo como lo va hacer y ya tiene los dibujos Galera que van a ser animados.
Bibliotec a

2. Haga un nuevo dibujo con el tamao de 468x60 pix. y traslade las fotos alli. Minimice el "peso" de las fotos!

todo-photoshop.com//banner_photo

1/5

24/08/2011

Banner en Photoshop

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) Tambin 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.

todo-photoshop.com//banner_photo

2/5

24/08/2011

Banner en Photoshop

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". Atencin! Todos las demas capas deben estar sin el "ojo". Son invisibles. Luego elija el "Frame N2" 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 N3" 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.

todo-photoshop.com//banner_photo

3/5

24/08/2011

Banner en Photoshop

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 C opiar "Frame", etc.

13. Atencion! Esta parte es muy importante! Esto quiere decir cual va a ser el "peso". C uanto 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.

todo-photoshop.com//banner_photo

4/5

24/08/2011

Banner en Photoshop

14. C uanto 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 !

todo-photoshop.com//banner_photo

5/5