TUTORIAL PARA HACER FIRMAS Y AVATARES CON TRANSPARENCIAS Y EFECTOS

He encontrado este tutorial en internet, espero que sea lo que estabais buscando y que os sirva para lo que queréis hacer



Tutorial de Firmas y Avatares:
Transparencias y Efectos

(Programas necesarios: Adobe Photoshop y Paint)

Bueno, os voy a intentar explicar como hacer una firma lo mas parecida a la mia, con trasparencias y efectos. Tambien veremos sencillamente como hacerle cortes a nuestros avatares, cosa que podeis aplicar a las firmas de igual modo. A simple vista parece un proceso largo, pero es que cuesta explicarlo paso a paso... :P

Imagen enviada Paso 1:

- Lo primero de todo sera crear una nueva imagen vacia. Archivo, nueva imagen. Para empezar hagamos una de 500 x 150 pixeles (lo máximo permitido por el foro imágenes y texto incluidos), con fondo transparente. Es decir, configurémoslo de tal manera:

http://usuarios.multimania.es/ffotherside/TutorialF&A-001.jpeg

Imagen enviada Paso 2:

- Por ahora olvidaros de lo que habeis hecho. Lo que haremos ahora sera una firma, con el objetivo de después implementarla en la transparencia. Para ello realizamos el mismo paso de antes, pero esta vez una imagen de 400 x 100 pixeles (El fondo es indiferente lo que elijais).

- La firma la podeis hacer a vuestro gusto siguiendo los pasos de la Guía de Mena, pero no olvideis que sea de 400 x 100 pixeles.

- Solo os aconsejo una cosa, que le pongais un borde negro a la firma, para ello, cuando la tengais acabada, con el photoshop la Guardais como extension PNG. Después abrirla con paint y con la herramienta de trazar lineas creais un contorno alrededor. La guardais como PNG de nuevo y ya podeis abrirla con photoshop, cerrando la que teniamos sin borde claro. (Dentro del paint os ayudara pulsar control avpag para agrandar la imagen y control repag para volver a su tamaño original)

http://usuarios.multimania.es/ffotherside/TutorialF&A-011.jpeg
http://usuarios.multimania.es/ffotherside/TutorialF&A-012.jpeg

Imagen enviada Paso 3:

- ¿Teneis ya vuestra firma? Bien. Ahora tenemos que darle un poco de imaginación, con logos, frases, figuras, iconos... lo que mas os guste. Por ejemplo, en la mia e agregado una frase y un logo entrelazada con la firma y el fondo transparente, y mi nick en la propia firma de 400 x 100.

- Dejamos la firma a un lado, y abrimos una nueva imagen, esta vez el tamaño da igual, ya que luego recortaremos lo que nos interesa. Con la herramienta de crear texto creamos una cajetilla y escribimos nuestro texto.

http://usuarios.multimania.es/ffotherside/TutorialF&A-002.jpeg
http://usuarios.multimania.es/ffotherside/TutorialF&A-003.jpeg

- Ahora vamos a “maquear” el texto. Lo primero es elegir una fuente y un color. Para ello usamos la barra de herramientas de texto (Siempre que queramos modificar lo que escribimos, primero debemos seleccionar la herramienta de crear texto y hacer clic en la frase, la seleccionamos entera y ahora podremos modificar su color y demas características).

http://usuarios.multimania.es/ffotherside/TutorialF&A-004.jpeg

- Ya tenemos nuestro texto con la fuente molona y su color (yo lo e puesto blanco, porque luego le pondre un borde negro), ahora vamos a darle un toque mayor. A la derecha (por defecto) tenemos un panel q se llama Layers o Capas. Seleccionamos la unica Capa que tenemos, y hacemos boton derecho y elegimos Bleding Options u Opciones de Fusion.

http://usuarios.multimania.es/ffotherside/TutorialF&A-005.jpeg

- Lo que mas nos interesa es el Outer Glow y el Stroke (perdon que mi versión sea inglesa xD os pongo imagen para que os podais guiar). Añadis los retoques a vuestro gusto y color. Os pongo los datos que e aplicado yo para que quede de algo asi:

http://usuarios.multimania.es/ffotherside/TutorialF&A-008.jpeg
http://usuarios.multimania.es/ffotherside/TutorialF&A-007.jpeg
http://usuarios.multimania.es/ffotherside/TutorialF&A-009.jpeg

- Podeis repetir el paso con mas textos o con imágenes. Como hacer un logo transparente que ya os lo explico Mena:

“Abrimos la imagen y seleccionamos la varita mágica. Pulsamos en el fondo blanco, y se selecciona todo el fondo. A continuación hacemos click con el botón derecho y pulsamos en "Seleccionar inverso" para seleccionar exactamente lo que no temeos seleccionado, el logotipo. Edición, copiar y luego Pegar en otra imagen cualquiera”
By Mena

Varita Magica:

http://usuarios.multimania.es/ffotherside/TutorialF&A-010.jpeg

Imagen enviada Paso 4:

- Ya tenemos todo, ahora vamos a fusionarlo. Lo primero de todo es copiar y pegar la firma de 400 x 100, toda ella. Para ello con la herramienta de seleccionar fácilmente no? La pegamos en la transparente de 500 x 100, nos quedara automáticamente centrada.

http://usuarios.multimania.es/ffotherside/TutorialF&A-013.jpeg

- Ahora recortamos el texto, pero para ello vamos a usar una forma mas rapida y asi no perder los efectos, ya que si copiamos y pegamos sin mas, desaparecen. Solo teneis que darle arriba a CAPAS, y después a Duplicar Capa. En destino desplegais la pestaña y la enviamos a la firma de 500 x 100. De esta manera el texto pasara automáticamente a donde queriamos. La colocamos donde mas nos guste y ya tenemos esto casi acabado. Os pongo como a quedado este ejemplo, e agregado un logo CDH (no-oficial xD):

http://usuarios.multimania.es/ffotherside/TutorialF&A-014.jpeg

Imagen enviada Paso 5:

- Guardar la imagen, pero quietos, que no es tan facil. Al tener transparencias vamos a tener que guardarla como un GIF (visto que en PNG se visualiza mal en Internet Explorer xD Gracias Bernat por la aportación xDDDD). Archivo, Guardar para Web. Arriba a la izquierda nos viene en Optimizado por defecto, pero nosotros pinchamos en Original. A la derecha, le damos a Guardar, le ponemos nombre si no se lo disteis ya, y guardamos.

Imagen enviada Paso 6:

- ¿Ya os olvidabais del avatar o que? El avatar es sencillo, es como hacer una firma pequeña (100 x 100 es lo ideal). Como hacer un avatar no voy a explicar, pero recordad, 100 x 100, implementarle una imagen, un símbolo, letra, lo que sea, si quereis y como no, ponerle un borde negro con el paint como con una firma:

“Solo os aconsejo una cosa, que le pongais un borde negro a la firma (avatar en este caso), para ello, cuando la tengais acabada, con el photoshop la Guardais Como.. PNG. Después abrirla con paint y con la herramienta de trazar lineas, creais un contorno alrededor. La guardais como PNG de nuevo y ya podeis abrirla con photoshop, cerrando la que teniamos sin borde claro. (os ayudara pulsar control avpag para agrandar la imagen y control repag para volver a su tamaño original)”

- Lo que si nos interesa es darle un toque diferente, como recortarle las puntas o crear formas. Para ello, abrimos el avatar.png ya acabado con paint. Cojemos la herramienta de trazar rectas y trazamos DOS lineaa desde un punto a otro asi:
Después, rellenamos el resto de blanco:

http://usuarios.multimania.es/ffotherside/TutorialF&A-015.jpeg
http://usuarios.multimania.es/ffotherside/TutorialF&A-016.jpeg

Creo que a estas alturas ya os imaginais que hacer, jeje, guardamos la imagen en PNG, la abrimos con Photoshop, y con la varita magica hacemos ese hueco blanco transparente. No os preocupeis si veis que el trazado negro que hicimos se queda como gris, luego se ve perfectamente. Para guardarlo, nuevamente, Guardamos para Web, Original y ya esta!!!

Podeis hacer incluso figuras de esta forma, no solo recortar el borde sino hacer algo asi:

http://usuarios.multimania.es/ffotherside/TutorialF&A-018.gif

Recordad, lineas negras (dobles si son cruzadas, unicas si son rectas) para marcar el entorno y rellenar en blanco lo que queramos borrar luego en photoshop.

Y asi tenemos nuestra chapuza de firma y avatar, que podemos subir a la red y ponerla en el foro para que nos aporreen y abucheen xDDDDD

Aver que tal os salen esas transparencias!! Todo es imaginacion ;)

Saludos,
Alexander.

PD: Si algo se os resiste, teneis alguna duda, algo que se pueda cambiar o añadir decirmelo plis :) Y si quereis alguna firma made in me xDD pedirmela por PM diciendome q imagenes quereis que salgan, nicks, frases...no os preocupeis por el tipico "By Fulanito" que yo no lo pondre xD

Ejemplos de mis firmas


Este tema ha sido editado por Alexander: 03 septiembre 2005

Gracias Cris!

De nada jefe

Gracias wapisima,,,

gracias ,el fin de semana intentare hacer alguna ,a ver que tal

Gracias Cris, menuda ayuda nos has dejado intentare a ver que me sale.

De nada chicas, a ver si conseguimos hacer firmas chulas

Estupendo tu aporte cris, muchas gracias.
Ahora... a intentarlo

Gracias estela

ya lo estoy intentando,y con la guia no es tan dificil,ahora a ver si aprendo a que tenga movimiento,como la tuya eres un

por estar pendiente de todo

No tienes nada que agradecerme guapa, esa es una de mis funciones aquí, me alegra mucho que estés consiguiendo hacer la firma que querias, seguro que te quedará chulisima

No me sale!!!
Es que nunca antes usé el photoshop y no hay caso. Además las imagenes del tutorial están todas caidas así que no me guío para nada

Seguiré probando para ver si me aclaro un poco.

ten paciencia ... a mi me pasaba lo mismo hasta que aprendi ... y ahora hago las firmas como churros ... yo uso el FOTOFLEXER y para mi es mucho más facil ... prueba a ver

Me habias asustado Aldreth con eso de las imágines, pero las he comprobado y se ven todas mira a ver si el problema para no verlas es de tu pc o de tu conexión a internet.

Perdón Cris si me expresé mal.

Las imágenes que subiste, las del paint, sí están (se ven muy bien). Pero con eso yo no tengo problemas. Las imágenes que no están son las de la guía de mena. Y ahí es donde se me complica. Pero bueno, ya probaré con el fotoflexer y dejaré el photoshop para más adelante.

Gracias a Sapira y a vos por preocuparse.