viernes, 11 de junio de 2010

Barra separadora animada personalizada, muy facil

Hoy vamos a hacer una barra separadora animada en pocos pasos, facil y rapida, a ver si mejoran su web o sus anuncios (en caso de quienes venden por internet).

Lo bueno que tiene es que le podes poner el nombre de tu web, tu marca o tu nick para que quede mas personalizado y profesional tu trabajo, y llame la atencion a quien lo este mirando.



Cualquier duda que tengan visitan la entrada anterior de la barra separadora para principiantes que esta mas detallado y si no les sale me preguntan. Para ampliar las imagenes: Control++

http://vctryblogger.blogspot.com/2010/06/barra-separadora-en-photoshop-desde.html

Necesitamos:

-Photoshop portable cualquiera

-OPCIONAL Una imagen a la que le sacaron el fondo (para sacar el fondo a las imagenes si no saben van al post de la barra separadora desde cero, y ahi aprenden), si no lo quieren hacer con imagen pueden hacer una texto directamente en photoshop.

Yo voy a usar esta, que me hice con photoshop tambien (se crea un docu transparente, crean el texto, le aplican estilo, despues colocan una o varias veces una imagen sin fondo, le dan distintas dimensiones y la rotan, y la ponen sobre el texto, basicamente igual que la otra barra que hicimos pero sin el rectangulo)


PASO A PASO

1) Abrimos photoshop y creamos un documento nuevo con las espacificaciones marcadas en rojo.


2) Creamos un rectangulo de borde redondeado (tienen marcado en rojo las herramientas en la captura) y le damos un estilo.

Cuando esta pronto usamos el primer puntero y corremos el cuerpo de la barra hacia arriba o hacia abajo si es necesario para el trayecto de la imagen o texto que le vamos a poner.



3) Vamos a archivo>colocar, ubicamos la imagen donde la queremos, y damos clic derecho, colocar, clic.




4) Vamos a Ventana>animacion y hacemos clic.
Nos va a salir una barra abajo que vamos a usar en el proximo paso.




5) Ahora la vamos a animar.

Hacemos clic en el cuadradito inferior que esta al costado del tachito de basura, y nos va a crear copias de nuestra barra, pueden hacer cuantas quieran o necesitan, a mi con 11 me alcanzo.

El cuadrito a la izq de ese les hace varias copias a la vez, este las hace a una, si quieres muchas copias convendria ese.



Luego hacen clic en cada una de la copias que crearon, y van seleccionando la imagen que quieren animar y la van colocando segun el trayecto que quieran que haga (yo la iba corriendo hacia la derecha).



Donde dice "0 seg" y la flechita para abajo, puede ajustar el intervalo entre imagenes para enlentecerla, y donde dice "infinito" pueden poner para que se reproduzca menos veces si quieren, yo la deje asi, rapida y con reproduccion infinita (un estilo maquina de escribir, por llamarle de alguna manera).

6) Le damos play para ver como quedo, cualquier cosa crean mas copias o borran alguna arrastrandola hasta el tacho de basura.
Tambien le puede ajustar velocidad y reproduccion como les explique en el paso anterior.





7) Vamos a archivo, guardar para paginas web y dispositivos, previsualizar, para que la abra en el navegador




8) Se les abre en el navegador, ahi ya la ven animada.

Hacen clic derecho sobre la barra y ponen "guardar imagen como" le ponen nombre y la guardan.




9) Ahora la subimos a  algun almacemaniento de imagenes que soporte gifs y la colocamos en nuestra web o al foro que queremos, y queda asi:


(obvio que mas grande, pero la puse pequeño para que cargue mas rapido)

Ahora que ya saben como se hace pueden probar y hacer otras mas complicadas, con mas efectos, etc.

No hay comentarios:

Publicar un comentario en la entrada

LinkWithin

Related Posts Plugin for WordPress, Blogger...