(Programas necesarios: Adobe Photoshop y Paint)

Bueno, os voy a intentar explicar como hacer una firma 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...

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.lycos.es/ffotherside/TutorialF&A-001.jpeg

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 Guia 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.lycos.es/ffotherside/TutorialF&A-011.jpeg
http://usuarios.lycos.es/ffotherside/TutorialF&A-012.jpeg

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.lycos.es/ffotherside/TutorialF&A-002.jpeg
http://usuarios.lycos.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.lycos.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.lycos.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.lycos.es/ffotherside/TutorialF&A-008.jpeg
http://usuarios.lycos.es/ffotherside/TutorialF&A-007.jpeg
http://usuarios.lycos.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.lycos.es/ffotherside/TutorialF&A-010.jpeg

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.lycos.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.lycos.es/ffotherside/TutorialF&A-014.jpeg

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.

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.lycos.es/ffotherside/TutorialF&A-015.jpeg
http://usuarios.lycos.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:



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.

Moderador
He movido el tutorial al apartado al que corresponde ;)

Gracias por el tutorial, para la gente que empieza estos tutoriales esta muy bien :)