Si te gusta, compártelo :)Tweet about this on Twitter89Share on Facebook77Share on Google+15Share on LinkedIn11Pin on Pinterest0Email this to someone

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.

¿Te gusta lo que estás leyendo?

¡Pues únete a una comunidad de +7.500 suscriptores!

Recibirás contenidos exclusivos para suscriptores + una copia gratis de este eBook de técnicas y trucos para hacer tus contenidos irresistibles.

×
¡Buenas! ¿Me dices tu nombre?

Un placer conocerte :-)

Apuntáte aquí y recibirás gratis una copia del eBook.

Además, (sólo si lo deseas) podrás configurar tu suscripción para: recibir también trucos & consejos exclusivos, avisos de nuevos posts, invitaciones a webinars gratuitos y avisos de nuevos cursos.

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

http://youtu.be/4JBDBNHcXQc

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:

http://youtu.be/dFncI8jVfmw

Si te gusta, compártelo :)Tweet about this on Twitter89Share on Facebook77Share on Google+15Share on LinkedIn11Pin on Pinterest0Email this to someone
Berto López

Berto López

Soy autor y cofundador de este blog, actividad que realizo como hobby ya que las nuevas tecnologías siempre me han atraído mucho. Ahora trabajo por cuenta ajena, pero he sido empresario durante casi una década trabajando en la implantación de proyectos tecnológicos en sectores con carencias en conocimiento de las nuevas tecnologías, como Retail y Pymes. De hecho, esta experiencia ha sido la inspiración para el blog: ayudar a profesionales y pequeños empresarios a conocer y aprovechar el potencial de las nuevas tecnologías y la web 2.0.
Berto López
Berto López
Etiquetado como →  

¿Te ha gustado esta lectura?

¡Pues únete a una comunidad de +7.500 suscriptores!

Recibirás contenidos exclusivos para suscriptores + una copia gratis de este eBook de técnicas y trucos para hacer tus contenidos irresistibles.

×
¡Buenas! ¿Me dices tu nombre?

Un placer conocerte :-)

Apuntáte aquí y recibirás gratis una copia del eBook.

Además, (sólo si lo deseas) podrás configurar tu suscripción para: recibir también trucos & consejos exclusivos, avisos de nuevos posts, invitaciones a webinars gratuitos y avisos de nuevos cursos.

La gente agradece los buenos contenidos, comparte este post con tus amigos:

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

  1. 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.

    • Berto López dice:

      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

  2. JackSL dice:

    Buenísimo articulo. Por cierto, una pregunta, para que quepan bien en la portada de facebook, que tamaño debe de tener el texto?
    Gracias.

    • Berto López dice:

      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

1 Referencia a esta entrada

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Importante: Usa como nombre tu nombre personal, no el de tu web o tu empresa. Si quieres promocionar tu web, dispones del campo de sitio web para ello.

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Current ye@r *

 

Cláusula de privacidad:

En cumplimiento de lo establecido en la Ley Orgánica 15/1999, el 13 de diciembre, de Protección de Datos de Carácter Personal, te informamos que mediante la cumplimentación del presente formulario estás dando el consentimiento expreso a que sus datos personales queden incorporados y sean tratados en un fichero de Ciudadano 2.0 con la finalidad de poder gestionar tu solicitud. El fichero será gestionado por el responsable de fichero que se indica en nuestro documento de aviso legal y política de privacidad.

Asimismo, salvo que manifiestes expresamente lo contrario, se podrán utilizar tus datos personales para mantenerte informado de noticias y novedades relacionadas con nuestros servicios.

Te garantizamos que bajo ningún concepto, estos datos serán compartidos o cedidos a terceros y te informamos de la posibilidad de que ejerzas los derechos de acceso, rectificación, cancelación y oposición a la recogida de tus datos de carácter personal mediante correo electrónico o bien directamente mediante los enlaces de baja automática contenidos en todas las comunicaciones enviadas por Ciudadano 2.0, o bien, mediante el formulario de contacto de nuestra web.

Estadísticas de tráfico de Ciudadano 2.0