Cómo crear títulos para Unsleepable

Títulos para Unsleepable, con bordes suaves y cambiando de color Por lo visto, a más de alguno le ha gustado Unsleepable, el theme para WordPress que traduje al español —se los agradezco. Para ustedes, un tutorial para crear el título del theme, tal como lo pueden ver en la página del autor original o en este mismo sitio, es decir, con la posibilidad de cambiar el color del fondo al pasar por encima y con los bordes de las letras suavizados.

Para esto, utilizaremos Photoshop, pero creo que, con ligeras variaciones, se puede conseguir lo mismo con GIMP.

Manos a la obra

  1. El color de fondo debe ser #333333En Photoshop, crearemos una nueva imagen. Pero antes, nos aseguraremos de seleccionar el color de fondo correcto, que en nuestro caso será #333333
  2. Luego, crearemos la nueva imagen: File > New (o Ctrl + N). Fijaremos las siguientes opciones: Width [Ancho]: 250 pixels; Height [Alto]: 50 pixels y en Contents: seleccionar "Background Color" [Color de fondo], con lo que crearemos una imagen con el fondo de color que habíamos seleccionado anteriormente
    Nueva imagen
  3. Luego, habrá que crear el texto. La fuente, el tamaño y el color que quieran, por supuesto. Lo único importante es mantener el color de fondo —por otra parte, les recomiendo no utilizar drop shadows (sombras) en el texto, ya que eso complicaría la posibilidad de que al pasar el puntero sobre la imagen el fondo cambie de color correctamente.
  4. Una vez que ya tenemos listo nuestro título, debemos dirigirnos a File > Save For Web [Guardar para el Web] (o Alt+Shift+Ctrl+S). Una vez allí, elegimos GIF como formato de salida, para de esta manera sobreescribir luego la imagen de título antigua y no tener que editar luego la hoja de estilos. Luego, debemos seguir los siguientes pasos:
    1. Opciones para Guardar para el WebCon el Eyedropper Tool, seleccionar el colo de fondo de nuestra imagen. Teniéndolo seleccionado, marcamos la opción Maps selected colors to Transparent [mapear los colores seleccionados como transparentes], con lo que se hará transparente, quedando la imagen como se ve en el cuadrado superior derecho de la imagen, con el texto y los cuadros grises y blancos que indican la transparencia
    2. Luego, en la sección de Settings [opciones], seleccionar Matte > Eyedropper color, con lo que le indicaremos al programa que los pixeles que queden con medias transparencias deben asumir que el fondo donde pondremos la imagen es del color que habíamos seleccionado previamente… o sea, preparamos la imagen para ser puesta contra un fondo color #333333
    3. Bajo Transparency [transparencia], seleccionamos "No transparency dither"
    4. Luego, seleccionen las opciones de calidad de acuerdo a lo que les otorgue los mejores resultados y listo (Done): a sobreescribir el archivo anterior, lo encuentran en la carpeta Images bajo el nombre title.gif

¡Suerte!