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

Una pregunta típica que recibimos mucho es sobre cómo crear un texto con fondo transparente.

Vista la demanda que hay de este tema hemos publicado 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).

Si necesitas un hosting para tu web o tienda online, ¡actúa!

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos días.

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

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 WindowsMac 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:

¿Te gustaría leer más sobre esta temática? Busca aquí:

Acerca del autor: Berto López

Soy autor y fundador de este blog, e Ingeniero en Informática de formación con amplia experiencia: he trabajado como empleado, empresario, incluso funcionario. Vamos, que he probado de todo 😄

De todo ello, lo que me apasiona de verdad, es el emprendimiento, combinado con la tecnología, algo que he podido retomar con mi proyecto web actual al cual pertenece, entre otras, esa web.

Aparte de mi propia experiencia emprendedora, mi contacto profesional con pymes y pequeños emprendedores me ha generado un gran interés en el marketing online.

Emprendí muy joven y eso hizo que todo el desarrollo inicial de las redes sociales, WordPress, SEO, etc. ya lo viví con esa experiencia. Me fascinó cómo cambió las reglas del juego para bien, sobre todo, para los pequeños emprendedores.

Esto me parece algo tan importante, de tanto calado social, que este blog nace con la vocación de ser un sitio de divulgación de este conocimiento y con la intención de motivar sus lectores para que aprovechen al máximo el potencial de estas disciplinas.


7 comentarios en «Cómo crear textos con tipos de letra bonitos convertidos a imágenes con un fondo transparente»

  1. Hola, Berto.
    Tengo una pregunta, espero no ser muy intrusiva :/.
    ¿Cuál es la fuente que usa el blog (no importa si debo descargarla de algún lugar)?
    He dejado en el tintero muchísimos blogs sencillamente porque el tipo de letra me causaba muchas dificultades a la hora de leer.
    Estoy a punto de empezar mi propio proyecto y la fuente es una de las cuestiones que más me preocupan. Casualmente, la de este blog me encanta y he visto similares (no sé si será la misma) en los de algunos colegas que también sigo. La lectura se me hace muy ágil y para nada cansa la vista.
    Ojalá puedas orientarme.

    Saludos 🙂

    Responder
    • Hola Celeste,

      Es Open Sans de Google Fonts. Pero no es sólo el tipo de letra, tienes que tener en cuenta la regla CSS entera si quieres un aspecto idéntico:

      font-family: Open Sans, sans-serif;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: -0.2px;

      Y un truco: con Ctrl+F12 puedes ver tú misma desde el navegador (con Firefox y Chrome, por ejemplo) estas reglas y qué fuentes usa una web en cada parte.

      ¡Un saludo!
      Berto

      Responder
  2. Excelente artículo, no cuesta mucho esfuerzo ponerlo en práctica, pero sí que da muchos beneficios para la utilización de imágenes en PNG.
    Y gracias Berto por hacerlo con una herramienta libre como Inkscape (no la tenía en mi lista :-)) pero sí que me será útil.

    Responder
    • Hola Andrés,

      Lo bueno de estos tiempo que vivimos es que para prácticamente cualquier cosa que necesites existe alguna herramienta excelente de software libre y simplemente gratuita. Es una gozada 🙂

      ¡Un saludo!
      Berto

      Responder
    • Hola Jack,

      Me alegro de que te haya gustado, la portada de Facebook tiene un ancho de 851 pixeles si no recuerdo mal. Así que ése es el tamaño con el que puedes jugar.

      Yo lo que suelo hacer es utilizar los textos con un tamaño bastante grande (para obtener mucha calidad en origen) y una vez convertido a imagen, reducirlo con una herramienta como Pixlr o Photoshop a lo que necesito.

      Saludos,
      Berto

      Responder

Deja un comentario

⚠️ Importante: por respeto a esta comunidad, sigue estas pautas al dejar tu comentario:

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

Al rellenar el formulario estás dando el consentimiento expreso al tratamiento de tus datos (guardar tu comentario y datos del formulario en el blog) conforme al Reglamento General de Protección de Datos (RGPD).

El responsable de este sitio es Wenova Online S.L.. La finalidad de este formulario es la divulgación en marketing online y emprendimiento, legitimado con tu consentimiento expreso.

El destinatario de tus datos es Webempresa (el hosting de este blog, ubicado en España) y podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos (ver la política de privacidad).