FIRMA CON ANIMACION !

En este tutorial vamos a aprender a hacer una firma con una animacion, con un marco y un fondo hecho a base de degradados y filtros.
Como en el anterior tutorial voy a usar el Photoshop CS (v. Cool, pero si no tienes esta version tambien puedes seguir bien el tutorial. Al instalar Photoshop CS automaticamente se instala el programa ImageReady, que es el que vamos a usar para incluir la animacion.
Asi que abrimos el ImageReady y hacemos clic en Archivo>Abrir y buscamos la animacion que vayamos a incluir en la firma. Yo voy a usar esta animacion:



Una vez la tengamos abierta hacemos lo siguiente. Nos vamos al cuadro de animacion y nos situamos en el primer fotograma de esta manera:



Cuando
estemos situados en el primer fotogrma nos vamos al cuadro de capas y
lo que tenemos que hacer es enlazar todas las capas para que mas tarde
podamos mover laanimacion toda junta. Para ello nos situamos en la capa uno y vamos haciendo clic
en el cuadrado que hay a la izquierda de las miniaturas de las demas
capas. Cuando lo hagamos nos tiene que salir una especie de simbolo de
los eslabones de una cadena. Tenemos que hacer eso en todas las capas
hasta que esten enlazadas todas:



Una
vez tenemos todas las capas entrelazadas vamos a disminuir un poco el
tamaño del GIF porque ahora mismo es un poco grande para lafirma . Para
ello estando situados sobre el primer fotograma nos vamos a
Imagen>Tamaño de Imagen y fijandonos que este marcada la casilla
“Restringir proporciones” disminuimos unicamente la anchura, pues
la altura se disminuira automaticamente escalando la imagen para que no
se desfigure. El GIF que yo estoy usando tiene un tamaño de 170x120,
asique le voy a poner un ancho de 110 y automaticamente el alto se
cambia a 78.


Ahora
que ya tenemos el tamaño del GIF a nuestro gusto vamos a aumentar el
tamaño del lienzo para tener el espacio sobre el que realizar lafirma. Para hacer esto debemos pensar de que tamaño vamos a hacer la firma. Yo voy a hacerla de 400x120. Asi que nos vamos a Imagen>Tamaño de lienzo y ponemos el tamaño que deseemos para la firma:



Una vez hemos hecho esto ya hemos acabado por ahora con ImageReady, entonces tenemos que transladar el documento a Photoshop. Para ello hacemos clic en el boton de la barra de herramientas
que dice “Editar en Photoshop” (Mayús+Ctrl+M). Si no encuentras el
boton revisa el tutorial de “Firmas Simples” donde explica
detalladamente labarra de herramientas.

Ahora que ya tenemos el documento en Photoshop vamos a comenzar a hacer el fondo y todo lo demas, pero primero vamos a situar la animacion en el lugar donde queremos que vaya a estar. Para ello cogemos la “Herramienta Mover” y movemos la animacion hasta donde queramos. Yo la voy a colocar en la parte izquierda de la firma.



Una vez la tenemos donde queremos vamos a ocultar la animacion para que no nos moleste a la hora de hacer el fondo y las demas cosas. Nos vamos a la ventana de capas y en la capa en la que estamos situados hacemos clic
donde aparece un ojo para quitarlo. Si por alguna casualidad tambien
estubiera visible alguna otra de las capas tambien quitamos el ojo
hasta que no se vea nada en el documento.



Ahora con el documento aparentemente en blanco creamos una nueva capa para hacer el fondo.
Para ello en la ventana de capas presionamos en el icono de “Crear
una nueva capa”, situado en la parte de abajo a la izquierda del cubo
de basura.

Vamos a empezar a hacer el fondo. Primero cogemos el
cubo y el color blanco y pintamos toda la capa de blanco. Acto seguido
presionamos en el icono de la herramienta de cubo con el boton derecho
y nos saldra un menú emergente en el que seleccionaremos la
herramienta “Degradado”.
Seguimos con el color blanco y en la barra de arriba configuramos la herramienta Degradado de la siguiente forma:
-Degradado de Diamante
-Modo: Diferencia
-Opacidad: 100%
-Y las casillas “Tramado” y “Transparencia” marcadas las dos, pero la de “Invertir” no.



Ahora lo que hay que hacer es hacer clic
en el documento, mantener y desplazar el cursor y luego soltarlo. De
esta manera vamos creando una especie de diamantes. Hacemos esto muchas
veces, con trazos cortos. Vamos realizandolo uniformemente por todo el
documento hasta que nos quede algo parecido a esto:



Ahora
duplicamos la capa tres veces presionando Ctrl+j tres veces. Nos
colocamos en la que haya quedado mas arriba y presionamos Ctrl+u.
Entonces nos aparece el menú de Tono/Saturacion, marcamos la casilla
“colorear” y colocamos los siguientes valores:
-Tono: 223
-Saturacion: 74
-Luminosidad: -21



Nos
colocamos en la capa que esta justo debajo de esta, presionamos Ctrl+u,
marcamos la casilla “colorear” y en esta ocasion ponemos los
siguientes valores:
-Tono: 169
-Saturacion: 75
-Luminosidad: -28



Despues
de eso nos colocamos en la capa que esta debajo de la anterior,
volvemos a presionar Ctrl+u y a marcar la casilla “colorear” y
ponemos estos valores:
-Tono: 196
-Saturacion: 37
-Luminosidad: +5



Una vez hecho esto cogemos la capa que nos queda en blanco y negro y la arrastramos en el menú de capas hasta ponerla la primera de todas las capas del fondo, es decir, por encima de las otras tres capas que tenemos coloreadas.
Cuando
la tenemos ahi nos vamos a Filtro>Bosquejar>Cromo y le damos a
Ok. Despues de eso buscamos Filtro>Desenfocar>Desenfoque Radial,
y le colocamos los valores de:
-Cantidad: 50
-Metodo: Zoom
-Calidad: Óptima
Y le damos a Ok. Despues de hacer todo esto en el menú de capas debemos de tener ordenadas de la siguiente manera las capas:



Ahora tenemos que ir a la ventana de capas, y colocar las capas del fondo de el siguiente modo:
-Capa blanco y negro: Luz fuerte y opacidad al 60%
-Capa azul marino: Trama y opacidad al 100%
-Capa verde: Luz suave y opacidad al 60%
-Capa azul claro: Normal y opacidad al 100%
Entonces nos debe de quedar algo asi:



Ahora debemos de agrupar todas estas capas del fondo
para que esten juntas. Para ello nos situamos sobre la capa verde y
presionamos Ctrl+e. Ahora nos ponemos sobre la capa azul y volvemos a
presionar Ctrl+e, y por ultimo nos situamos sobre la capa enblanco y negro
y presionamos Ctrl+e de nuevo. Es muy importante hacerlo en ese orden
porque si no se puede alterar el resultado.Para terminar con elfondo vamos en el menú de capas a la capa del fondo, le presionamos con el boton derecho y le damos a “Propiedades de Capa” y le ponemos de nombre “Fondo” sin comillas. Despues de hacer esto tenemos el fondo en una única capa, asique vamos a proceder a hacer el borde.

Para hacer el borde nos situamos en la capa del fondo y cojemos la herramienta de “Lazo poligonal”. Ahora debemos de ir creando la forma del marco
tal y como queramos. Si queremos realizar trazos rectos lo mejor es
mantener la tecla Mayús mientras realizamos la linea. Es una
herramienta facil de usar, lo único que hay que hacer es hacerclic donde queramos empezar el marco, y luego ir haciendo la forma haciendo clic donde queramos dar un cambio de direccion, hasta que el marco
quede cerrado. Cuando acabemos de hacer la forma tiene que quedar
seleccionado de esta manera (cada cual que haga la forma que quiera):



Una vez este la seleccion hecha cogemos la herramienta de “Marco Rectangular” y hacemos clic
con el boton derecho en el documento y le damos a “Seleccionar
Inverso”. Volvemos a darle con el boton derecho y ahora seleccionamos
“Capa via copiar”.
Entonces se nos crea una nueva capa
únicamente con la seleccion hecha. Le damos con el boton derecho en la
ventana de capas y a “Propiedades de Capa” y de nombre le ponemos
“Marco” sin las comillas. Cuando le cambiemos el nombre cogemos la
capa y la arrastramos hasta ponerla la primera de todas, por encima de
todas las capas de laanimacion.
Cuando la tengamos la primera le
hacemos clic con el boton derecho y le damos a “Opciones de
Fusion”. Aqui vamos a cambiar varios parametros. A la izquierda estan
los diferentes efectos, de los cuales vamos a tocar unos cuantos según
os vaya diciendo:
Sombra paralela: Color (Negro) Distancia (5) Extension (0) Tamaño (5)
Resplandor exterior: Color (Blanco) Extender (0) Tamaño (5)
Resplandor interior:Color (Blanco) Retraer (0) Tamaño (5)
Bisel y Relieve: Estilo (Bisel Interior) Tamaño (2) Suavizar (0)
Trazo: Tamaño (1) Posicion (Fuera) Color (Negro)

Dentro de cada efecto hay varios valores, pero con tocar los que os indico basta.



Despues de aplicarle estos efectos se nos debe de haber quedado algo asi:



Ya
tenemos terminado el marco, ahora lo que vamos a hacer es irnos a la
primera capa de la animacion para que se vea, y con la herramienta de
“Marco rectangular” hacer un cuadrado a su alrededor que sea algo
mas grande, de esta manera:



Entonces
sin quitar la seleccion nos vamos a la capa “Fondo” y presionamos
con el boton derecho en la seleccion y le damos a “Capa via
copiar”. Cuando hayamos hecho esto nos fijamos que la capa
“Fondo” sea la última de todas. Si no es asi la arrastramos hasta
la última, y la capa que acabamos de crear la ponemos la penúltima,
justo por encima del fondo.
Ahora nos vamos a la capa “Marco”,
que debe de estar la primera, y buscamos la opcion Capa>Estilo de
Capa>Copiar estilo de capa.
Despues de esto nos vamos a la capa
que habiamos hecho con la seleccion rectangular y le damos a
Capa>Estilo de Capa>Pegar estilo de capa. Una vez hemos hecho
esto nos debe de quedar algo asi:



Ya
vemos como la firma va tomando forma, asi que ahora vamos a insertar un
personaje en la parte derecha de la firma. Yo voy a usar esta imagen:



Lo
primero que hacemos es copiarla a un nuevo ducumento con el fondo
transparente. Para ello la seleccionamos entera (Ctrl+a) y le damos a
copiar (Ctrl+c). Nos vamos a Archivo>Nuevo, nos fijamos que el color
de fondo sea transparente y le damos a Ok, y luego a Ctrl+v para pegar
la imagen.

Ahora cogemos la barita y seleccionamos todo el fondo
de la imagen, regulando la tolerancia según veamos si el personaje se
destaca mucho del fondo o poco.



Cuando
tengamos todo el fondo de nuestra imagen seleccionado le damos a
Suprimir y borramos el fondo. Ahora vamos a ponerlo mirando para el
otro lado, porque es como queda bien en la firma. Para ello nos vamos a
Edicion>Transformar>Voltear horinzontal. Una vez hecho esto vamos
a cambiarle el tamaño para que entre bien en la firma. Nos vamos a
Imagen>Tamaño de imagen y fijandonos que este marcada la casilla
“Restringir proporciones” le ponemos un alto de 120, al igual que
la firma, y el ancho se pondra automaticamente. Ahora la imagen la
tenemos asi:



Una
vez esta ya la imagen ajustada al tamaño de la firma la arrastramos
hasta el documento de la firma. La capa que contiene la imagen la vamos
a poner la segunda, por debajo de la capa “Marco”. Cuando la
tengamos ahi colocamos la imagen donde quede bien. Ahora le hacemos
clic con el boton derecho a la capa de la imagen y le damos a
“Opciones de Fusion” y le ponemos los siguientes valores:
Sombra paralela: Color (Negro) Distancia (5) Extension (0) Tamaño (5)
Sombra interior: Color (Negro) Distancia (5) Retraer (0) Tamaño (5)
Bisel y Relieve: Estilo (Bisel Interior) Tamaño (2) Suavizar (0)
Satinado: Color (#797FFF) Distancia (11) Tamaño (200)

Cuando
apliquemos esos efectos nos vamos a la ventana de capas y a la capa de
la imagen le ponemos la opacidad al 80%. Despues de hacer todo esto a
mi me ha quedado asi:



Ahora
ya solo nos queda poner el texto. Cogemos la herramienta de texto y
ponemos el texto que queramos con la fuente que queramos:



Cuando
hayamos escrito el texto nos vamos a Edicion>Transformar libre y le
damos al texto el tamaño y la forma que queramos. Luego con la
herramienta “Mover” lo colocamos donde queramos.



Ahora
en la ventana de capas le damos con el boton derecho a la capa del
texto y presionamos en “Opciones de Fusion” de nuevo. Ponemos los
siguiente valores:
Sombra paralela: Color (Negro) Distancia (5) Extension (0) Tamaño (5)
Sombra interior: Color (Negro) Distancia (2) Retraer (0) Tamaño (5)
Superposicion de Degradado: Aqui poneis el degradado que veais que queda mejor.
Trazo: Tamaño (2) Posicion (Fuera) Color (Negro)

Le
dais a Ok y luego en la ventana de capas le poneis a la capa del texto
una opacidad del 85%. Una vez hecho esto a mi me ha quedado asi:



Bueno,
la firma ya esta terminada, ya solo queda guardarla para que se vea el
gif moviendose. Para ello le damos en la barra de herramientas a
“Editar en ImageReady” (Mayús+Ctrl+M).
Una vez la tenemos en
ImageReady le damos a Archivo>Guardar optimizada como..., nos
fijamos que este en Solo imagenes gif (.gif), le ponemos el nombre que
queramos y le damos a guardar.
Ya esta terminada y guardada la firma, y esto es lo que nos ha salido:



Creditos : PES Hero

Gracias Men, Muy Bueno El AportE...


Muerte: Soul Hunter