Cómo crear textos con tipos de letra bonitos convertidos a imágenes con un fondo transparente

Desde que publicamos el vídeo-tutorial “Cómo crear una portada bonita y original para la biografía de Facebook”, hemos recibido muchas preguntas sobre cómo hemos creado el texto con fondo transparente que se combina en ese tutorial con la imagen de la portada.

Vista la demanda que hay de este tema hemos actualizado aquel artículo con un nuevo vídeo-tutorial que explica cómo crear este tipo de texto y, además, cómo localizar buenos tipos de letra, tanto comerciales como gratuitos, y cómo darle un poco de diseño a estos textos para que queden más atractivos.

Se trata además de un tema da bastante juego y que encaja muy bien con la orientación al “do it yourself” (DIY) de Ciudadano 2.0 porque verás que conociendo las herramientas y con cuatro pautas claves ya se pueden hacer cosas realmente muy vistosas y profesionales.

Así que con el post de hoy completamos el vídeo-tutorial y aprovechamos para hacer algunas consideraciones importantes y proporcionarte las referencias de recursos gratuitos con los que puedes obtener (con un poco de habilidad…) resultados totalmente profesionales.

¿Por qué y cuando utilizar textos convertidos a imágenes?

Hay muchas razones para usar textos convertidos en imágenes Las aplicaciones y las ventajas de hacer esto son las siguientes:

1. La razón más importante es la versatilidad. Las imágenes las puedes usar en prácticamente cualquier sitio: un documento Word, una presentación, un blog… Por tanto evitas las limitaciones de estas herramientas, sobre todo, en cuanto a diseño.
2. De lo anterior ya puedes deducir que las principales aplicaciones se dan cuando el diseño es muy importante. Cualquier herramienta especializada de diseño gráfico te va a permitir guardar el trabajo como una imagen. Por tanto, si el diseño es importante (por ejemplo, si quieres hacer un logotipo), el enfoque bueno para solucionar tu necesidad es el utilizar una herramienta especializada y convertir el resultado en una imagen que puedes usar en prácticamente cualquier parte.
3. La última razón de peso para usar imágenes es que te quitas de problemas. Es decir, cuando usas texto y tipos de letra especiales, en principio, si el usuario texto no tiene instalado ese tipo de letra no va a poder ver el texto bien (hay remedios tanto en Web como para documentos, pero hay que saber cómo hacerlo). Por tanto, este problema es otro problema (y fuente de incidencias) que te quitas de encima si usas imágenes.

Hay una cuestión particular en contra de las imágenes que debes tener en cuenta cuando las quieres usar en una web: usar una imagen en principio penalizaría ligeramente el SEO (Search Engine Optimization).

Es decir, si en vez de usar texto para un título de un post en un blog, usas imágenes, su contenido ya no seria indexable para los buscadores. Dicho de otro modo, las palabras clave del título se pierden porque al ser una imagen el buscador ya no “ve” su texto.

No obstante, para este caso hay un remedio bastante eficaz que es  utilizar la etiqueta “alt” de las imágenes asignándole el título en cuestión ya que así el buscador sí va a reconocer y tener en cuenta el texto. Por tanto, en el caso de sustituir títulos u otros elementos de texto importantes  a nivel SEO conviene hacer un trabajo efectivo con la meta-información definiendo expresamente cuál debe ser el título de la página a nivel de SEO mediante su meta-información. En el caso de usar WordPress (en versión con hosting propio, no WordPress.com) puedes usar un plugin como WordPress SEO con el cual haces esto fácilmente.

De esto modo el impacto SEO sería mínimo y seguramente merezca la pena el “plus” de diseño si gracias a ello consigues un resultado más atractivo para el lector.

Sitios para descargar tipos de letra

Cualquier plataforma de ordenador que uses (PC, Mac, Linux) es capaz de trabajar con tipos de letra (o ‘fuentes’, un anglicismo de ‘tipo de letra’) escalables, los cuales garantizan una calidad óptima con cualquier tamaño de la fuente utilizada.

Los formatos con los que trabaja habitualmente son TrueType, OpenType y PostScript.

Existe un número increíble de tipos de letra (del orden de decenas de miles o más), de los cuales solamente unos pocos vienen instalados por defecto en tu máquina y los cuales aumentan cuando una aplicación trae también tipos de letra que instala en la máquina. Por ese motivo, normalmente los tipos de letra de las diferentes instalaciones de los usuarios no coinciden.

Un usuario puede añadir los tipos de letra que quiera a su máquina. En Windows, por ejemplo, es tan simple como hacer un doble clic en el fichero del tipo de letra en cuestión y pulsar el botón de “Instalar” que aparece en el cuadro de diálogo que se abre tras el doble clic.

Por otra parte, hay una enorme oferta de webs en las que puedes encontrar miles de tipos de letra y además muchísimos de ellos te los puedes usar completamente gratis. En estos sitios puedes ojear su aspecto, hacer búsquedas y filtrar por características (soporta acentos o no, estilo del tipo de letra, gratis o comercial, etc.) y buscando con un poco de esmero es difícil que no encuentres un tipo de letra que se ajuste bien a lo que estabas buscando.

Algunos de los sitios más importantes y que más nos han gustado son éstos:

1. DaFont.com
2. Google Web Fonts
3. FFonts
4. Fonts2U
5. Font Squirrel
6. Fond Reactor

De todas formas, tómate esta lista como un mero punto de partida, un simple aperitivo, porque la cantidad de sitios con fuentes es verdaderamente enorme. Te recomiendo además el truco de hacer en Google una búsqueda con el nombre de una fuente más la palabra “font” (tipo de letra en inglés). Así no podrás localizar no solamente un sitio para una fuente determinada, sino que descubrirás poco a poco más proveedores de tipos de letra interesantes.

Si buscas, por ejemplo, “AR Techni Font” verás la enorme cantidad de sitios que aparecen.

Trabajar con InkScape

Una vez que tengas elegido e instalado tu tipo de letra, necesitas una herramienta para trabajar con el texto y que te dé juego para diseñar. Una de las mejores opciones son las herramientas de diseño gráfico y dibujo vectorial.

La más importante es Adobe Illustrator, pero  es comercial y requiere un desembolso económico que no es precisamente despreciable.

Por suerte, existen alternativas y concretamente una excelente que es InkScape, una herramienta multiplataforma y funciona en Windows, Mac OS X, Linux y otros sistemas derivados de Unix y se mueve también a un nivel en sus prestaciones. Desde luego, para algo relativamente sencillo como el diseño de un texto bonito o un logotipo te resultará más que suficiente.

En la web de la propia InkScape, en YouTube y en otros sitios como blogs de diseño encontrarás además una infinidad de documentación y tutoriales.

Yo, por mi parte, te voy a dejar con nuestro tutorial que te enseña como crear un texto con diseño usando InkScape:

Y, como ejemplo, práctica de aplicación del tutorial anterior, te recomiendo también el video-tutorial sobre la creación de una portada para la biografía de Facebook que mencioné al principio del artículo: