martes, 22 de febrero de 2011

Como crear un banner o Firma animada by xXZ3uZXx

Hola a todas las personas que visitan mi blog este es un Tutorial hecho por mi para enseñarle como hacer esas firmas que comúnmente vemos en los post que son creados en los foros, entre otros.. ok bueno.. unico que vamos a necesitar para esto es Photoshop CS5 en mi caso Creo que a partir de el CS3 se puede realizar pero se los garantizo, y nuestra imaginación...
Acá esta la muestra al finalizar este tuto van a estar en capacidad de crear una Firma, Banner o Separadora asi..




Primero les dejare los pasos por escrito y al final de esta entrada les dejare un videotutorial de como realizar esta imagen.




Bueno para el fondo primero hacemos click en Archivo>Nuevo... y nos aparecerá una ventana pidiéndonos las características del nuevo archivo.
Ahora crearemos un archivo nuevo con las dimensiones de 600 de ancho y 150 de alto.. como se muestra en la imagen



Después clicamos en la herramienta bote de pintura (G) pintamos de negro(puede ser cualquier color) el fondo de la imagen y obtendremos algo así.




Luego crearemos una nueva capa, en la opción crear capa en la esquina inferior derecha de la pantalla. En esta capa le vamos a crear un diseño con el pincel a nuestro fondo.



Después seleccionamos la herramienta pincel (B) y seleccionaremos en la forma del pincel una figura abstracta la cual colocaremos en color Blanco en esta capa.

Luego crearemos una nueva capa en la cual agregaremos los colores, nuevamente con la herramienta pincel (B) vamos a colorear la imagen del color que ustedes deseen (recuerden colocar el pincel en forma de circunferencia) y después cambiaremos el tipo de capa a color. Al realizar esto les quedara algo así.


Bueno con esto ya habremos terminado nuestro fondo. Pasamos ahora a la siguiente etapa.


Esta parte es sencilla solo elegimos la herramienta texto haremos click sobre nuestro fondo y sin soltarlo arrastramos hasta crear un recuadro en el cual colocaremos lo que deseamos. Eligen cualquier tipo de letra y escriben, en este caso colocaremos "dejalonoob.blogspot.com" después nos vamos a la capa que se acaba de crear y le damos click secundario y se nos abrirá una pestaña en la cual haremos click en "Opciones de fusión" se nos abrirá un menú en el cual le daremos efecto al texto que ya hemos escrito. Puede seleccionar el que mas les guste. Acá unas imágenes de el texto que hemos creado antes y después de aplicarle los efectos.


antes de aplicar los efectos


Después de aplicar los efectos


Bueno con esto ya terminamos lo que es el texto. ahora debemos pasar a la siguiente etapa.



Ahora hacemos click secundario a la capa de el texto y la duplicamos tantas veces hasta obtener la cantidad de textos que desean mostrar en su banner o firma en este caso serán dos, así que duplicaremos una sola vez para tener 2 textos con esto tendremos 2 textos que dicen lo mismo solamente hacemos click en la herramienta Texto (T) luego en la capa y después de esto vamos a editar lo que dice uno de los textos en este caso sera "Firma By xXZ3uZXx".
Después de tener todas las capas listas hacemos click en Ventanas>Animación y se nos abrirá una nueva herramienta con una linea del tiempo en la cual decidiremos con que tiempo deseamos que se nos muestre la capa de texto y cuando deseamos que desaparezca duración y todas esas cosas... después de hacer todo eso nos quedara algo asi.



Luego pasamos a editar la linea del tiempo de manera que las capas de texto no se superpongan una con la otra y disminuimos el tiempo de aparición de cada uno.. Podemos ver como quedara la imagen dándole al botón Play en la parte inferior de la barra de herramientas de animación y si nos gusta como nos quedo pasamos a guardarlo.. Para guardar no debemos hacerlo en Guardar normal sino que debemos darle click a la pestaña Archivos>Guardar para web y dispositivos... luego de esto se nos abrirá una nueva ventana donde elegiremos como guardarla, en la parte inferior derecha de este menú que se nos abre colocamos infinito en vez de una vez.. para que la imagen haga este cambio una y otra vez.. nos fijamos en la parte superior derecha que diga GIF y luego guardamos. acá unas imágenes.

Asi colocamos la lineas de tiempo para que los textos no se superpongan


Aca esta el menú de "Guardar para webs y dispositivos"



Si algunas cosas no las entendiste o deseas ver los pasos de forma mas detallada también grabe un videotutorial en el cual se muestra este proceso paso por paso... Lo hice para la comunidad de Taringa y este blog. Acá el vídeo




Bueno ya con esto tendriamos finalizado nuestra Firma, banner o separador y junto a ella mi tutorial.. Espero les sea de mucha ayuda me tomo algo de tiempo pero es para ustedes de parte de xXZ3uZXx cualquier duda deja tu comentario y te ayudare.














No hay comentarios:

Publicar un comentario