Darío Ferrer - Blog

Antes que nada revisa la primera parte de este manual correspondiente a la programación. Si aún no la has completado de nada te servirá seguir con ésta. Nos enfocaremos en modelar los estilos con la finalidad de darle forma a tu letra capitular. Para tal fin se requiere de un editor de imágenes, un editor de textos, además de un enloquecedor y sádico deseo por aprender.

He dividido este manual en cuatro secciones:

• Capitular con puro texto: Nos concentramos en la clase .capitular y orientamos el CSS para darle un estilo común a todas las letras

Ahora bien, igualmente abordaremos el tema de la sustitución por imágenes. Si ésa es tu preferencia puedes saltar este primer punto y comenzar a partir de los siguientes:

• Procesamiento de imágenes con Photoshop: y me disculpan los amigos fans del Gimp, Paint, Photopaint, MickeyPaint, ChuchuPaint pero Photoshop es el único editor de imágenes que domino. De todas formas también se explica el proceso de forma detallada, por lo cual es posible adaptar el procedimiento.
• Maquetación CSS: Es la parte donde modelamos los estilos de nuestras letras capitulares para implementarlas en la página.
• Descargar archivo de muestra: Un archivo PSD descargable para que puedas observar más de cerca el procedimiento y -si lo prefieres- utilizarlo como base para tu trabajo.

Capitular con puro texto

Como podrás ver hemos asignado dos clases al <span>: .capitular y .letra-[X] (la que toque en el momento). La clase .capitular es única y debe llevar todos los elementos comunes.

La letra capitular debe abarcar algunas líneas e ir rodeada de textos. El siguiente es el estilo CSS de este mismo blog:

Sí, es una clase bien obesa, pero es necesario así porque se ha definido todo lo concerniente al estilo, ya que darioferrer.com utiliza texto puro en sus capitulares. De todas formas démosle un repaso a cada uno:

• font-family: Además de la principal puse opciones alternativas a conveniencia en orden de comportamiento.
• display: block; De forma predeterminada, el span es un elemento inline. Debemos convertirlo en un bloque para que cumpla su función.
• float: left; Es lo que provocará que el bloque sea rodeado con texto.
• padding: El relleno. La tolerancia de espacio desde el borde hacia adentro.
• color / background: Color de la letra y el fondo del cuadro.
• font-size: Tamaño de letra.
• line-height / height: Fíjate que ambas tienen igual valor, y que line-height (el interlineado) es 20px menor que el tamaño de letra. Esto es parte del proceso de fijación de la posición del capitular. A mayor interlineado más abajo rueda la letra con respecto al cuadro.
• overflow: hidden; Éste oculta el sobrante inferior producto del interlineado.

… Pero el HTML tiene asignadas 2 clases ¿Para qué sirve la segunda, no es suficiente con una sola?.

La segunda clase te abre la opción de sustituir la letra deseada por una imagen, aumentando aún más la estética de tu blog. Veamos cómo hacerlo:

Procesamiento de imágenes con Photoshop

1.- Elegir la fuente deseada

Elige el tipo de letra de tu preferencia. Inviértele un buen rato a esta tarea porque -además de complacer tu gusto- tendrás un trabajo muy fastidioso luego. Puedes buscar en tu colección de fuentes, o bien dirigirte a sitios de fuentes gratuitas como Dafont (que por cierto tiene una excelente sección de letras capitulares para escoger a gusto). Asegúrate de que el juego de caracteres esté completo.

2.- Cuadrando y ajustando

Una vez elegida la fuente (o las candidatas) por supuesto debes instalarlas en tu sistema. Luego harás un pequeño cálculo de tamaño. Quizás exista un método matemático y algorítmico para esta pendejada pero te voy a explicar la vía rápida: Vé a tu sitio web, haz una captura de pantalla (quedará en el portapapeles), luego corre a tu Photoshop como alma que lleva el diablo, crea un documento nuevo (se creará con las medidas de lo que tienes en el portapapeles) y pega la captura con Control + V.

¿Qué lograste con esto? Pues tienes una copia “en vivo” de tu página web transformada en imagen y lista para recibir tu texto, meterle líneas guías y tomar las medidas de forma rápida.

Ajusta tu letra para que abarque 3 líneas de alto -y un poquito más- así:

Ahora ajusta las líneas guías a los bordes de la letra:

Ya tienes una medida aproximada. Ahora viene la parte fastidiosa: comienza a escribir todas las letras de la “A” a la “Z”, una por capa (¿te aseguraste que el juego de caracteres tiene el alfabeto completo?). En tu barra superior podrás ver un desplegable llamado “Estilo”, asígnale “Redondeado”.

Según vayas escribiendo los caracteres descubrirás cierto patrón de tamaño, que si bien no lo tienen todas las letras sí lo cumple la mayoría. Ajusta los caracteres según dicho patrón. No caigas en la novatada de alterar el tamaño de las letras. Sólo mueve un poco las que no cumplan con el patrón.

Casi terminas. Dale color al fondo utilizando la herramienta Cuentagotas para copiar los valores del fondo de tu página:

Por último traza un marco de selección a ese cuadro y recorta todo, Menú Imagen > Recortar. Recuerda que no todas las letras tienen distinto ancho, por lo cual deberás recortar según la que más ancho ocupe:

3.- Guardando

Ahora guardarás los archivos de cada letra en un directorio. Para tal fin utilizarás el recurso “Guardar para Web”. Te recomiendo el formato GIF porque en este caso específico las imágenes te resultarán mejor definidas y más livianas. Desde tu Photoshop puedes acceder a través del menú Archivo > Guardar para web y dispositivos, o bien mediante el comando shift + control + alt + S.

El proceso de guardado es muy fácil. Repite el proceso capa por capa, mostrando la que deseas guardar y ocultando el resto.

Es muy importante que ajustes las medidas de cada capa. Las letras no tienen por qué quedar necesariamente con la misma medida, pero sí ajustadas exactamente en los bordes, así que antes de guardar debes hacer ese último ajuste. Luego retrocedes un par de pasos con shift + control + Z y sigues con la siguiente. Luego de la 5ta letra ya te acostumbrarás al proceso.

Maquetación CSS

Lo bueno de esta técnica es que la “Z” sigue siendo “Z”. En otras palabras, la sustitución del texto es sólo cosmética, no de estructura, por lo cual tanto los lectores de pantalla como los buscadores la interpretarán tal cual.

Recordemos que en la Parte I de este tutorial, la función nos debería devolver un HTML como éste:

Nota que la clase es igual a la letra. A letras mayúsculas clases mayúsculas. Letras minúsculas clases minúsculas. ¿Por qué fue configurado así?. Disponer de una clase alterna te permitirá -por ejemplo- sustituir texto por imágenes mediante CSS. Comencemos con nuestro estilo .capitular para definir los estilos comunes para todos estos caracteres:

• text-indent: -5000px; Desplazamos el texto lejos de los límites del monitor.
• display: block; Asignamos formato bloque.
• float: left; Flotamos a la izquierda para rodear con texto.
• overflow: hidden; Escondemos el texto desplazado dentro de los límites de la caja.
• margin: 0 8px 0 0 Margen derecho de 8px y los demás en 0px. Esto se modificará luego con cada carácter.

Ahora vamos con los estilos individuales. Puesto que ya definiste los estilos comunes en .capitular sólo debes ajustar ancho y alto en los estilos .letra-[X]. Tomemos dos ejemplos para explicarnos mejor:

la letra “W” es más ancha, así que:

Si acaso todas las letras tienen la misma altura, puedes definírsela tranquilamente en .capitular

Si casi todas las letras tienen igual altura excepto unas pocas, igual coloca la altura en .capitular y luego personaliza la altura de esas pocas en la segunda clase, es decir, .letra-[X]. El navegador tomará la última declaración como válida y sobrescribirá la anterior.

Hasta aquí la segunda y última parte de crear letras capitulares en Wordpress.

Descargar archivo de muestra

A manera de referencia te dejo este archivo PSD con el trabajo ejecutado, usando cierto tipo de letra [Descargar]. Antes de abrirlo debes -por supuesto- instalar la fuente, la cual puedes descargar directamente desde Dafont.