atrapa
Subdirector CTU
Registrado: 21 Feb 2009
Mensajes: 587
Promedio por Día: 0.5
Estado: Desconectado
|
 Publicado: 02 Mar 2009 8:51 pm Título del mensaje: Tutorial para banner o firma animados
|
 |
|
Voy a intentar explicar como hacer el banner de arriba animado. La gracia de esto es que cada uno pueda desarrollar su idea de forma diferente. Y no hacerlo todo calcado...
Para hacer el efecto del banner use Photoshop CS3 Extended pero se puede usar cualquier Photoshop. No varia mucho la explicacion.
Bien, la idea es hacer ese efecto cuando ya tienes un logo hecho, si no pues lo haces, un logo o lo que te pase por los huevos. Yo aprovechare y lo hare con el de mi web, asi me hago propaganda...xd.
Tenemos el siguiente banner:
El efecto lo queremos hacer con el logo, asi que hay que tenerlo en una capa separada, si tenemos la suerte de haberlo hecho nosotros y tenerlo en el formato de photoshop psd que nos respeta la capa, no hay problema porque seguramente ya lo tengamos en una capa separada. Si no lo hemos hecho nosotros y lo tenemos en jpg, pues a hacer el bobo, cojer la herramienta de seleccionar y ir seleccionando todo el logo, si... las letritas, los agujeritos y todo eso. Seleccionando copiando, borrando lo que necesitemos y juntando capas, lo que haga falta para tener el logo entero, sin el fondo en una capa aparte.
La capa del logo, mejor la duplicamos y ocultamos una de las dos. (Esto no sirve para nada, pero si la cagamos en el intento, siempre tendremos el logo como empezamos)
Bien ahora, pensamos el efecto que queremos hacer. Yo hare el mismo del banner de arriba.
Si abrimos en la capa del logo, con el estilo de capa...
Asi observamos el efecto que queremos producir, podemos ir toqueteando cositas, y mirando que podemos hacer. Bien, como lo hacemos? Muy facil, obervamos la barrita de la distancia, vemos el recorrido que tiene (de 1px a 250px) bien, como esto ira por fotogramas, si queremos repartirlo bien, mas o menos... el tema es ir haciendo fotogramas, y en cada uno mover la barrita de la distancia. Para no hacerlo a boleo, miramos 250... pues podemos hacer 25 fotogramas, y en cada uno mover la barrita 10px. Vemos que para que el efecto se produzca de fuera para dentro, primero lo tenemos que tener en 250, y entonces ir restando, 240, 230, 220... y asi asi.
Bien, como hacemos los fotogramas? Aqui depende de la version de photoshop, si tenemos las mas recientes simplemente vamos a Ventana>Animacion, y nos saldra un recuadrito que ahora veremos.
Si tenemos una version antigua, tenemos que pinchar en el botoncito que hay debajo de el cuadrito de las herramientas, para que nos lleve a Image Ready. De una forma u otra nos saldra esto:
Bien, hacemos lo de antes, con el estilo de capa, satinado y tal, lo de siempre, y dejamos la distancia en 250, aceptamos. Le damos al boton de nuevo fotograma, (como al aceptar antes, debajo de la capa ya ha salido "satinado" como que lo hemos puesto esta vez en vez de todo el rollo de seleccionar estilo de capa, simplemente hacemos doble click en satinado y ya nos sale el panel) lo bajamos la distancia a 240, aceptamos. Nuevo fotograma, doble click en satinado, la distancia a 230, aceptamos. Nuevo fotograma.... weno... pues todo eso, hasta que la distancia sea 1 y tengamos 25 fotogramas uno detras de otro. Cuando lleguemos a este paso, lo mejor que podemos hacer es no tocar las capas, ni crear nuevas ni nada, porque puede influir en fotogramas que no esten seleccionados, y se va todo al traste. Bien, vemos el panel:
Cuando le damos a play vemos el efecto que hemos creado. Si se busca un banner, como el efecto pasa a toda ostia y demasiado rato, cambiamos el primer fotograma y en vez de seleccionar 0 segundos, pues le ponemos 2, 3 o 4. Asi hara una pausa y no nos volveremos locos. Las veces que se reproduce lo dejamos en infinito, o en una sola vez, dependiendo de lo que queramos.
Despues de esto, guardamos en formato PSD (por si las moscas) y luego dependiendo de la version de photoshop que tengamos hay que hacer una cosa o otra. En las antiguas era exportar en formato gif, y en las de ahora es Archivo>Guardar para web y dispositivos...
Y asi tendremos nuestro gif animado.
COSAS A TENER EN CUENTA:
-No me seais animales de decir, para que se vea mejor, en vez de crear 25 fotogramas, creo los 250, y voy bajandole. Ni se os ocurra, porque a parte de que podeis terminar como una cabra, el archivo ocuparia un huevo. Y no es lo que se busca para una cabecera, la idea es que cargue rapido.
- Es el primer tutorial que hago y como es normal, puedo pasar cosas por alto, o cosas que yo doy por hechas, vosotros no, y a la hora de hacerlo, no podais. En ese caso preguntad, no os corteis, que esto no es ninguna maravilla de la ingenieria y es superfacil. Todo el mundo puede hacerlo.
Un saludo!
|
|
lo pongo en chincheta para no perderlo 
