Siempre quise hacer un tutorial

Mi primera confesión en mi blog: siempre quise hacer un tutorial. Es por eso que en este momento estoy efectuando mi primer tutorial, por más que a muy pocos le parezca interesante.

El mismo explicará como hice para modificar el header de mi blog con el photoshop para no utilizar el que venía como predeterminado:

No lo hice porque creyera que no tiene un buen aspecto, sino que lo hice por dos razones:

• La imagen no coincide con el tipo de persona que soy.
• Quería ver si podía.

Lo primero que tuve que hacer es cerciorarme de que pudiese hacerlo, entonces me metí en la sección Plantilla / Edición de HTML. Busqué las referencias a imágenes que había en este lugar y me topé con:

#header {   background:url("http://www.blogblog.com   /rounders4 /bg_hdr_bot.jpg") no-repeat   left bottom;   padding:0 15px 8px; }

Simplemente copié y pegué la url en una ventana nueva del Explorer y me encontré con que si era la imagen del header, por lo que deduje que cambiando el url para que hiciera referencia a otra imagen conseguiría mi cometido.

El próximo paso a seguir fue buscar una imagen que pudiese usar en lugar de la que ya estaba. Después de mucho navegar encontré la que finalmente utilizaría para este propósito.

Lo que necesitaba era que la imagen tuviese 740x73. Así que la abrí con el photoshop, le cambié el ancho a 740 (sin cambiar las proporciones) y utilizando la Herramienta Recortar(C) seleccioné el sector que más me gustó. El próximo paso fue cambiarle el tono para que se adecuara al verde del blog. Lo que hice fue agregar una capa nueva con el verde que yo quería y seleccioné el modo de fusión: tono. Mejoró mucho, pero no lo suficiente. Combiné las capas. Para un cambio más fino utilicé la opción “Imagen – Ajustes – Tono/saturación…” y seleccioné los valores:

• Tono: 6
• Saturación: -18
• Luminosidad: -13

Para que siguiera el formato del blog, tenía que redondear las esquinas de abajo. Esto lo hice a través de una capa de forma de Rectángulo Redondeado con 10px de radio. Esta capa la puse debajo de la anterior y a la anterior la puse como Máscara de Recorte (Ctrl-G). Agregué una capa de fondo con el color de fondo del blog.

¡Al fin, lo logré! No. La imagen me gustaba, pero no se leía del todo bien el título...

Entonces decidí ponerle un borde a las letras. Cabe destacar que las letras blancas son escritas directamente sobre la imagen, lo cual significa que escribirlo directamente sobre la imagen no sirve. Lo que tenía que lograr es armar el borde en la imagen y que luego, cuando se escribe en blanco sobre la imagen, coincida con el borde dibujado en la imagen.
Tras algunas pruebas en photoshop no conseguí que las letras coincidieran exactamente con las del blog (distintos tamaños, espaciados, etc.). Aquí es donde consejos de Vanzen y Rocha fueron decisivos. Lo que hice fue poner una imagen completamente negra de header:

Entonces seguí los siguientes pasos:

• Agregué una capa verde (igual a la que utilicé para ajustar el tono del verde).
• Le agregué una capa de máscara.
• Seleccioné el header negro y lo copié al clipboard (Ctrl-C)
• Alt-Click en la capa de mascara para trabajar sobre ella.
• Pegué del clipboard (Ctrl-V).

El resultado es el siguiente:

Sin embargo con esto no alcanza ya que en blanco sería sobre-escrito lo recientemente incorporado. Por eso para agrandarlo le puse dos efectos:

• Trazo: El mismo verde de antes con 2px de ancho.
• Resplandor exterior: Con el mismo verde, 90% de opacidad, modo de fusión normal, extendido un 10% y de 6px de tamaño.

El efecto trazo es para darle borde y el resplandor exterior para darle un efecto de degradé.

¿El resultado? Miren el header :D

Aclaración: Desafortunadamente después me percate que debido a que los algoritmos de renderización de texto del Internet Explorer y el FireFox son distintos, el header no se ve bien en FireFox. Un problema que veremos en un futuro la manera de resolverlo.