19 abril, 2017

Cuadros históricos descargables, gracias a la NGA de USA

La National Gallery of Art, un museo nacional de los Estados Unidos situado en Washington DC, está llevando a cabo una loable iniciativa: digitalizar pinturas y trabajos de la Historia del Arte Universal, de cara a ofrecerlos al público de forma totalmente gratuita y libre.

Es un proyecto denominado NGA Images, que tiene por finalidad “alimentar el conocimiento, erudición e innovación” en el entorno a nivel global.

Con tan admirable objetivo han creado este gran repositorio web de imágenes, las cuales son todas obras de arte históricas digitalizadas en alta resolución. Son por tanto descargables de forma pública y gratuita, a tamaños de hasta 4000 píxeles por su lado mayor. Esto las hace incluso susceptibles de ser usadas en revistas y formato impreso en general, no digamos ya en fondos de pantalla, wallpapers, etc (*Nota: 4000 píxeles son unos 140cm a 72ppp –resolución web-, lo cual es más de medio metro a 200 píxeles/pulgada, y por tanto nos sirve incluso para un póster no excesivamente grande).

Se trata así pues de un recurso utilísimo a nuestra disposición. Un gran banco de imágenes de pinturas históricas, famosas y menos conocidas (también hay esculturas y fotografías, aunque la mayoría son pinturas y dibujos). Lo mejor de todo es que este museo, tratándose como es de una institución oficial de los USA, se asegura mucho de que todas las obras disponibles sean verdaderamente public domain (de dominio público).

Esto quiere decir, ni más ni menos, que podremos usar dichas imágenes en cualquiera de nuestros proyectos, incluso para fines comerciales (camisetas a la venta, tazas, publicidad, diseño gráfico de todo tipo, etc). Una maravilla.

George Caleb Bingham: The Jolly Flatboatmen (detalle, NGA Images)

En este sentido, la NGA informa en su página de Policy Details:

With the launch of NGA Images, the National Gallery of Art implements an open access policy for digital images of works of art that the Gallery believes to be in the public domain. Images of these works are now available free of charge for any use, commercial or non-commercial.

Es decir, que todas las imágenes habilitadas para su descarga (catalogadas como Open Access, “acceso abierto”) son obras que el museo cree que son public domain, ya que sus autores fallecieron hace siglos o por otros motivos (donaciones, fondos propios del museo, etc). Desde luego podemos estar bastante tranquilos en este sentido, pues los estadounidenses se toman estas cosas muy en serio, y además se trata de todo un museo nacional (institución oficial y sitio .gob).

National Gallery of Art Logo

Así pues, las imágenes que allí se ofrecen, además de ser descargables de forma 100% gratuita y sin necesidad de registro, se pueden usar en cualquier trabajo, ya sea comercial o no. ¡Bravo! Ni siquiera es necesario pedir autorización ni mencionar al museo en forma de créditos.

Datos de las obras y ficha técnica.

Además de las imágenes en alta resolución, también puede obtenerse allí una gran cantidad de información sobre las obras originales: dimensiones del cuadro, autor, fecha, etc.

El Greco: San Jerónimo penitente (NGA Images)

Velázquez: Inocencio X (NGA Images)

Aunque en su página web dicen que tienen 45.000 imágenes de obras con “acceso abierto”, la realidad es que actualmente parecen ser muchas menos. Eso sí, siguen siendo muchas, y el trabajo de digitalización continúa cada día.

Concretamente, en el momento de redactar este artículo había un total de casi 4000 imágenes en el catálogo, siendo de “acceso abierto” unas 600 de ellas. En el link anterior puede verse la lista completa actualizada. Las obras están ordenadas por nacionalidad, fecha, temática y tipo.

Así pues se trata de un banco de imágenes de recurso de extraordinaria utilidad, contando en su haber con obras de autores tan importantes como El Greco, Leonardo Da Vinci, Velázquez (y discípulos), Edgar Degas o Vincent Van Gogh, entre otros muchos.

Leonardo Da Vinci: Ginebra de Benci (NGA Images)

Vincent van Gogh: Autorretrato (NGA Images)

Edgar Degas: The dance lesson (NGA Images)

Felicito desde aquí a esta institución norteamericana por su desinteresado trabajo de documentación, pues es una maravillosa iniciativa que contribuirá sin duda a difundir (y enriquecer) la cultura universal a nivel global.

Recuerdo una vez más la dirección de tan admirable web. Para visitarla dirigirse a:

National Gallery of Art | NGA Images

Finalmente, comentar que aquí en La Grafiteca hemos hablado anteriormente de otros proyectos parecidos, que también pueden resultar de utilidad en cuanto a banco de imágenes artísticas de recurso. Se trata de los siguientes artículos:

En ambos casos se trata de repositorios masivos de obras antiguas public domain, solo que más específicos cada uno de su temática. Los dos son también muy interesantes, así pues recomiendo su consulta.

Leer más...

06 abril, 2017

Consejos para dar formato óptimo al texto general

Hacía tiempo que quería realizar una entrada con consejos generales de maquetación para textos largos. En artículos anteriores ya habíamos visto algunas pautas tipográficas para el diseño de logotipos, así como también recomendaciones de cara a titulares y encabezados (ver enlaces anteriores). Por tanto sentía que faltaba por analizar el denominado texto base, también llamado “texto general”. En definitiva, la parte restante y mayoritaria de todo texto, presente siempre en cualquier trabajo de diseño editorial. En esta entrada vamos a centrarnos en ello por fin, y en profundidad.

No es algo precisamente de poca importancia… En obras como libros y manuales, el cuerpo del texto propiamente dicho puede llegar a constituir la práctica totalidad del contenido, siendo por tanto fundamental el dominio a nivel técnico de su adecuado formateo. Esto implica definir características como el ancho de línea, el espacio entre líneas (interlineado), el espacio entre caracteres (y entre palabras), el tipo de letra más adecuado, etc. El objetivo no será meramente que el texto luzca atractivo, sino algo mucho más importante: que sea cómodamente legible.

Así pues, si nos planteamos la pregunta: “¿Cuál es el mejor formato posible para textos largos, como por ejemplo los presentes en libros, manuales, revistas y artículos, así como en páginas web?”, la respuesta será inmediata: el más legible posible. Esto implica que dicha lectura sea fácil, natural y cómoda.

Como veremos, esto puede ser diferente en un libro impreso respecto al entorno web o digital, pero en el fondo las pautas de maquetación a seguir son parecidas. Todo trabajo de diseño editorial que se precie deberá incluir siempre una norma de estilo (o CSS) concreta para el texto base. Es decir, para los párrafos del cuerpo del texto. Al menos si quiere ser medianamente profesional (así como mínimamente legible).

Los consejos de los expertos, comentados.

Es obligado decir que estoy redactando esta entrada gracias –entre otras cosas- a las diferentes guías que previamente han realizado otros autores. Cabe destacar sobre todo a profesionales como Typewolf y Mariana Eguaras. Detrás del apodo está el norteamericano Jeremiah Shoaf, excelente tipógrafo que ha reunido todo su saber en un completo libro electrónico del que hablaremos después. Mariana Eguaras, por su parte, es una gran especialista de origen argentino actualmente residente en España. Citaremos también algunos fragmentos de su blog profesional.

Las guías de estos autores me sirven de excusa para abordar el tema, cosa que realizaré a través de comentarios y aportes personales a lo ya dicho por ellos (también abriré algunos temas nuevos). Volviendo al libro de Jeremiah, alias Typewolf, me ha resultado extraordinariamente interesante, pues está estructurado en forma de lista de 100 puntos o claves a seguir, de cara a formatear correctamente un texto. Así pues es un manual muy bien organizado, titulado “Flawless Typography Checklist” (“Lista de comprobación de tipografía sin defectos”). Typewolf comenta que ha tardado un año entero en prepararlo, comprimiendo cientos de artículos especializados, así como varios manuales sobre tipografía y enseñanzas diversas que él mismo ha aprendido. Todo está en esa única lista de 100 puntos.

Si queremos leerlo por completo tendremos que comprarlo, lógicamente, pero tiene una free preview o vista previa gratuita (ver enlace anterior), en la que el autor nos muestra algunos de los puntos de la lista. Voy a realizar aquí algunos comentarios y aportes sobre dichos puntos, nacidos de mi experiencia personal.

  • *Nota: mi experiencia personal. Sirva para acreditarla otro de mis sitios web, maquetador-online.net. Como puede verse en él soy un diseñador editorial con muchos años de trayectoria ya en este campo (más o menos los mismos que Jeremiah).

Incluiré así mismo las consideraciones de Mariana al respecto de los diferentes temas, pues sin duda también son muy valiosas. Recomiendo en este sentido consultar su artículo “Qué tipografía usar para libros impresos y digitales”. No tiene desperdicio.

Bien, sin más, vamos a adentrarnos en los diferentes puntos –o consejos- a seguir que proponen estos autores:

Typewolf: Mantener la longitud de la línea entre los 45 y los 75 caracteres (66 es ideal)

¿Cuántos caracteres debería haber por renglón? El ancho de línea debe tener entre 45 y 75 caracteres (66 el ideal) incluyendo espacios. Por legibilidad.
  • Es una necesidad especialmente importante en el entorno web, dado que el carácter responsive (adaptable al ancho de la pantalla) de las páginas actuales deviene a menudo en líneas de texto demasiado largas. Esto hace que la vista se pierda y dificulta la lectura.
  • Según este autor, la lectura empieza a degradarse verdaderamente en líneas a partir de los 100 caracteres, no siendo extraño encontrar sitios web con incluso más de 300 (pone de ejemplo la Wikipedia, lo difícil que es pasar de una línea a la siguiente). Los grandes monitores actuales acentúan esta característica, de eso no hay duda.

En mi opinión todo esto es cierto, aunque creo que tampoco pasa nada por superar un poco estas cifras. De hecho, aquí mismo en La Grafiteca los párrafos llegan a los 90 caracteres por línea -como puede verse en este mismo artículo-, y encuentro que se leen bien.

No obstante admito que está bastante al límite, y que el párrafo no debería ser más ancho en ningún caso (al menos sin aumentar el tamaño de la fuente). Así pues coincido en líneas generales con las conclusiones de Jeremiah.

“La línea de 66 caracteres (contando tanto letras como espacios) es ampliamente considerada como la ideal” (Robert Bringhurst, “The Elements of Typographic Style”).

Mariana Eguaras, por su parte, declara en este sentido que “se recomiendan entre 50 y 70 caracteres por renglón”. Así pues esta especialista confirma todo lo dicho (ver su artículo antes citado). El motivo de ello sería el mismo: mientras leemos, una vez llegado al salto de línea, en renglones muy largos hay que hacer demasiado recorrido de vuelta, y se pierde el hilo de la lectura.

Esto sería válido tanto para el entorno web como para el caso de los libros, ya sean impresos o Ebooks.

¿Qué cuerpo o tamaño de letra es mejor usar para el cuerpo del texto? Los expertos dan un rango de entre 12 a 18.

Una vez aclarado que no deberíamos superar nunca los 90-100 caracteres por renglón (y mejor si ponemos menos), viene la siguiente pregunta lógica… ¿A qué tamaño? Ello naturalmente va a depender de la fuente elegida, pues en cada tipografía las letras ocupan un ancho diferente. Así pues tocará probar.

Si la fuente es muy pequeña, 70 caracteres a tamaño 12 pueden ocupar un espacio ridículo. Adicionalmente, si es muy pequeña también sufrirá su legibilidad. Así pues no hay que tener miedo a aumentar el cuerpo.

Para el entorno web, personalmente encuentro muy aconsejable definir los párrafos (etiquetas <p>), con un ancho máximo de entre 500-600 px. Esto para un tamaño de fuente de unos 14-18px -según la letra sea más grande o más pequeña-, nos dará los deseados 60-80 caracteres por línea.

Nótese que esto no tiene por qué chocar con hacer un diseño web fluido y responsive (algo sin duda totalmente recomendable). Sencillamente, estableciendo un max-width en el estilo CSS del párrafo podremos limitar su anchura a un máximo. Si en los mayores monitores esto deja mucho “blanco” a los lados no debemos tener miedo a ello, pues estaremos ganando en legibilidad que es lo más importante (al menos si hay mucho texto).

En el caso de La Grafiteca, como puede verse se usa una Arial de 14px, en un párrafo de 600 píxeles de ancho. Esto da los citados –y tal vez un poco excesivos- 90 caracteres por renglón en que está escrito este texto.

Dejando a un lado el entorno web, para libros impresos Mariana Eguaras comenta que “por lo general, un cuerpo de letra entre 12 y 13 es un tamaño correcto, respetando el interlineado por defecto de la tipografía”. Muy importante también el tema del interlineado.

Tracking, kerning, espacio entre palabras e interlínea, ¿cuáles nos convienen más?

Ejemplos de uso del tracking en un texto

Todos los autores –y yo también- están de acuerdo en que estos aspectos son fundamentales en el adecuado formateo de un texto. El tracking o espacio general entre caracteres no debería tocarse nunca (dejarlo en 0), aunque en prensa y revistas suele ser necesario hacerlo para cuadrar los artículos en la página.

Aquí hablo como experto en maquetación de prensa. Por mucho que necesitemos encajar un titular concreto, o un texto que no terminamos de conseguir cuadrar, no deberíamos pasar de +/- 3 de tracking. Si lo hacemos, que sea con gran remordimiento (de igual forma reducir el porcentaje del ancho de la letra es otra trampa en la que no debemos incurrir, y si lo hacemos nunca pasar del 99-98%). La deformación del texto en caso contrario es demasiado grande, sufriendo mucho la lectura.

Por su parte, el kerning se refiere a la separación entre una letra y la siguiente, dentro de una misma palabra. Se diferencia del tracking en que este último se aplica a todo el texto seleccionado, incluyendo espacios en blanco, mientras que el kerning se detiene en una letra respecto a la siguiente, en pares de dos. Se usa para que no quede demasiado espacio en blanco entre algunas letras determinadas, lo cual es útil a su vez en tipografías concretas, generalmente las cursivas o con remates muy excéntricos.

Ejemplos de kerning métrico y óptico

El kerning es muy necesario para mezclar tipografías. En dicho caso, lo mejor es elegir un kerning de tipo óptico (imagen de abajo), que se fija en la forma de las letras, a diferencia del métrico que es el que viene incluido en la propia fuente por su diseñador (y por tanto el más preferible si tenemos una tipografía de calidad que va a ser usada sola).

  • *Nota2: El kerning o kern, así como el tracking o track, son todas medidas de interletraje. Ver el link anterior para más información sobre estos confusos términos.

En libros esto no suele ser muy necesario (dado que se usa básicamente una única tipografía), y menos aún desde luego en páginas web, teniendo mucha más influencia en ellos la interlínea. Dicha medida es la separación entre líneas, y sin duda es un aspecto fundamental para la legibilidad. Demasiado separadas, tendremos mucho blanco y será más difícil la lectura (recordemos que la vista ha de volver atrás al terminar el renglón). Demasiado juntas, habrá barullo y también sufrirá la legibilidad. Dependerá de la tipografía, pero en líneas generales se suele considerar óptima una interlínea de entre el 110-150% del tamaño de la letra. Es decir, de cuerpo y medio aproximadamente (mejor un poquito menos).

Cuerpo y medio es lo que suele venir por defecto, aunque siempre será bueno ajustar esta medida en función del tipo de letra, buscando un buen equilibrio entre suficiente espacio blanco y buena legibilidad.

  • *Nota3: Hablamos siempre del cuerpo del texto, pues en títulos y encabezados el 150% es sin duda demasiado, como comenta Typewolf en su guía. Llevo años y años diseñando titulares para prensa y estoy totalmente de acuerdo con él; en encabezados con el 110-120% suele ser suficiente, más de eso separa demasiado las líneas.

En diseño web será obligado establecer estilos CSS para las interlíneas, aunque resultará fácil pues también podremos crearlos en forma de porcentaje, respecto al tamaño de la fuente (por ejemplo: line-height: 120%). Sin ir más lejos, aquí mismo en La Grafiteca tengo establecida una interlínea del 150% para los párrafos (recordemos que la fuente es Arial a tamaño 14). Por tanto una vez más estoy en el límite máximo.

Otro aspecto fundamental para el diseño web es el espacio entre párrafos, siendo absolutamente recomendable separarlos mediante padding o margin en el CSS aplicado a la etiqueta <p>. Así se facilita mucho la lectura en los monitores y pantallas (en caso contrario, es decir a la manera de los libros, queda todo demasiado embrollado). En esta web se usa un espacio entre párrafos equivalente al tamaño de la fuente (14px). Puede establecerse en el CSS incluyendo un margen de 1em debajo de cada párrafo (margin-bottom: 1em). Se trata una vez más de una medida relativa al tamaño de la fuente; 1em significa el mismo tamaño, 1.5em cuerpo y medio… y así.

Finalmente, existe un último parámetro que es bastante necesario en libros, prensa y revistas (especialmente en estas últimas). Es el Espacio entre palabras y Opciones de separación. Se trata de ajustes finos dentro de la justificación del texto (que por cierto es otra cosa a elegir, si vamos a justificar el texto, esto es que llene todo el espacio cuadrando los párrafos, o lo dejamos en bandera, alineado a la izquierda, como en este mismo artículo).

Estas opciones determinarán el espacio entre las palabras en cada línea, pues cuando una palabra no cabe en un renglón, una de dos: o bien se corta con un guion tras alguna sílaba, o bien pasa entera a la línea siguiente (podemos elegir una opción u otra). En este último caso, si es muy larga puede quedar mucho espacio entre las palabras de arriba, lo cual es algo bastante feo, y se considera un fallo en el formateo del texto.

Con InDesign o cualquier otro programa de maquetación (así como incluso con Microsoft Word y la mayoría de editores de texto), puede definirse la manera en que se cortará esta última palabra de cada línea, si no cabe. Por ejemplo estableciendo que deje un mínimo de 4 letras arriba, o que no ponga demasiados guiones seguidos (algo que queda feo). Todo ello se determina en las opciones de separación. También se puede definir el espacio máximo -o mínimo- que puede haber entre palabras, antes de que se produzca el corte de la misma con guion y salto de línea (espacio entre palabras).

Es algo un poco complicado que mejor dejaremos sin tocar, siendo sobre todo necesario para textos en columnas muy estrechas, por ejemplo en prensa y revistas. Ahí sí suele ser muy necesario tener en cuenta dichas opciones, para que no haya líneas con excesivo espacio en blanco y muy pocas palabras, o por el contrario líneas muy apretadas o con excesivos guiones seguidos (no se recomiendan más de 3 como mucho).

De igual forma, cortar palabras dejando pocas letras en la línea de arriba (1 o 2 nada más) también está ampliamente considerado como algo “feo”, y un fallo de formateo. Es equiparable a dejar una línea viuda o huérfana (con muy pocas letras y por tanto muy vacías, así como sueltas y separadas de su párrafo, por estar éste en otra columna o página).

En páginas web no deberemos preocuparnos demasiado, pues no suelen partirse las palabras con guiones de salto de línea (debido a que no está muy bien conseguido todavía). No obstante, tendremos que decidir si justificamos el texto o lo dejamos en bandera (como en este mismo artículo). Justificando ganaremos en legibilidad al verse mejor los “renglones”, pero si el párrafo es demasiado estrecho podemos tener líneas con las palabras muy separadas, debido a que un término especialmente largo ha pasado a la línea siguiente. Así que ojo con eso. Hay que llegar a un equilibrio.

¿Qué tipo de fuentes son mejores para el texto general? ¿Remate o no?

Vamos a responder a esta pregunta citando una vez más a Mariana Eguaras, pues estoy bastante de acuerdo con su punto de vista (recuerdo que cité el artículo correspondiente de esta autora al principio, para las personas que lo quieran consultar de primera mano).

Ella divide la cuestión según si es para formato impreso o digital. Recuerdo que Mariana es especialista en libros, pero en líneas generales lo que dice puede ser válido también para el resto de textos. Sus conclusiones, en resumen, son las siguientes:

Las tipografías serif (con remate) aparecen como mejores para el formato impreso, mientras que las de palo seco (sin remate o serif) serán por el contrario las indicadas para el formato digital.

El motivo de esto es que el remate de las letras con serif (Times New Roman, etc) ayuda a mantener la vista en la línea, creando una especie de trazo o renglón imaginario. Por tanto, facilitan la legibilidad.

En el entorno web no funciona demasiado bien esta característica, pues no se aprecian bien los remates (recordemos que la resolución de las páginas web es de 72ppp, lo cual es muy bajo). Más que crear la ilusión de una línea horizontal, lo que hacen los remates aquí es emborronar.

Es por ello que históricamente los libros se han impreso (así como la prensa y revistas) usando mayoritariamente letras rematadas para el cuerpo de los textos, mientras que por el contrario en las páginas web predominan las tipografías de palo seco.

Finalmente, me resultan de gran interés los comentarios de esta autora sobre los eBooks o libros electrónicos. En este caso, dado que el dispositivo puede mostrar solo las fuentes que el fabricante haya incorporado, no tiene mucho sentido que nos preocupemos en exceso sobre esto. Sencillamente, el lector elegirá la tipografía que más le guste, o dejará la que venga por defecto. De igual forma podrá aumentar el tamaño del texto.

Eso sí, en mi opinión haremos bien en realizar de todas formas la composición del párrafo como si se tratara de un libro impreso, a la manera que se describe aquí, y eligiendo además una fuente lo más estándar posible (o Arial o Times New Roman). Aseguraremos así la máxima compatibilidad, pues lo más probable es que la mayoría de lectores dejen las opciones por defecto, y tal vez ello respete la tipografía elegida por nosotros. Adicionalmente, conviene diseñar una jerarquía de tamaños en el texto, que diferencie los títulos del texto general, para facilitar la lectura en este tipo de dispositivos electrónicos.

¿Qué variante de la tipografía es mejor para el texto general? Usar solo Regular, Normal, Book o Medium para el grosor de la fuente en el texto base.

No se recomienda el uso de las negritas o Bold (menos todavía las Black o Ultra, lógicamente) para el cuerpo de los textos. Esto no implica que no puedan emplearse en palabras sueltas, o a la manera de las etiquetas <strong> en artículos web, sino que no deben usarse para el texto al completo. El resultado es demasiado pesado, incluso estridente. Para mí esto es algo obvio, sería como poner todo el texto en mayúsculas.

Lo mismo va para el caso contrario, esto es, elegir grosores muy finos. Ello hace que se resienta mucho la legibilidad. Por ejemplo grosores de entre 100 y 300, disponibles en muchas fuentes web actualmente. Así pues, mejor elegir de 400-500.

Typewolf: cuidado con las fuentes demasiado finas o gruesas, mejor elegir grosor medio, de 400-500

Typewolf pone el ejemplo (muy bien elegido) de la fuente Roboto, que es una de las mejores técnicamente, realmente bonita y muy utilizada en el entorno web. Dice Typewolf: “Roboto de ancho 100 puede parecer muy fina y delicada en tu pantalla, pero aparecerá completamente ilegible en otras máquinas”. Estoy de acuerdo. Por eso elegí Arial para esta web, pues es una fuente disponible en todos los equipos, probablemente la más estándar que hay, y absolutamente testada en cuanto a la legibilidad por la totalidad de navegadores.

Aunque lo cierto es que en realidad cada navegador muestra Arial de forma diferente (comprobado). Eso sí, siempre será de palo seco (sin remate o serif), y absolutamente legible. Esto último está garantizado pues llevo comprobándolo durante años en todo tipo de pantallas. Lo mismo ocurre con el resto de tipografías más comunes.

Volviendo a los consejos de Typewolf, recomienda en este sentido que se compruebe después la fuente elegida en tantos navegadores y dispositivos como sea posible. Sin duda es algo imprescindible.

También es interesante el consejo de usar la variante Book –cuando esté disponible- para el texto general en libros. Al parecer dicho grosor se diseña específicamente para el formato impreso.

No usar las que incluyan en su nombre Display, Headline, Banner, Poster, Big, Titling o Fine, tampoco Caption, y tampoco Script.

Typewolf: no elegir fuentes display para el texto general

  • Las tipografías con Display, Headline, Banner, Poster, Big, Titling o Fine en su nombre no serán nunca apropiadas para el cuerpo del texto (cada una por diversos motivos, que pueden generalizarse en que son más bien para titulares y logotipos, es decir, para tamaño grande). Cuando esté disponible, elegir siempre la variante Text. Estas modalidades de una misma familia de fuentes se suelen denominar variantes ópticas.
  • Las fuentes de tipo Display (como Playfair Display, una de las más famosas, o Freight Display, que puede verse en la imagen) están diseñadas como su propio nombre indica para mostrar o exhibir algo. Así pues están indicadas para grandes tamaños, como encabezados, anuncios publicitarios, logotipos, etc. Nunca para el cuerpo del texto (tampoco para pantallas pequeñas como las de los smartphones). Esto es así debido a que incluyen detalles y adornos que no se perciben a un tamaño pequeño, o peor todavía, que hacen que el texto sea menos legible, pudiendo resultar incluso molestos.
  • En el ejemplo de la imagen con la tipografía Freight, Typewolf comenta que la variante display tiene demasiado contraste para una lectura larga, siendo mejor la variante text para este fin. De igual forma se aprecia que el remate es menos detallado, pues esto no resulta necesario a un menor tamaño, así como más grueso y por tanto más visible. En general, las fuentes display tienen más contraste, adornos más intrincados y espacios más apretados, todo ello bueno para crear emoción y atraer la mirada (lo cual es su finalidad), pero inconveniente para ser leído mucho tiempo.
  • En cuanto a las fuentes Caption (en español podría traducirse como “Subtítulo”), tienen como finalidad ser impresas a tamaño minúsculo, no siendo demasiado útiles para el entorno web, y tampoco muy indicadas para textos largos (en mi opinión).

Por mi parte, nada que añadir a estas consideraciones de Typewolf. Me gusta la cita que incluye en su guía:

“Cuando se buscan buenas opciones para textos largos, debemos admitir que estamos pidiendo a alguien que viva con esa tipografía durante un extenso periodo de tiempo. Cada excentricidad será amplificada página tras página”  (Jason Santa Maria, “On Web Typography”).

Uso correcto de las mayúsculas y versalitas (o small caps).

Seguimos con Typewolf respecto al adecuado uso de las small caps o versalitas en los textos. Todo lo que dice sobre este tema me parece excelente.

Ejemplos de versalitas, imagen de Wikipedia

Las versalitas son pequeñas letras mayúsculas, más o menos del tamaño de la altura X de las minúsculas. Dicha altura X es la que tienen las minúsculas sin el trazo ascendente o descendente. Por ejemplo: esto es small-caps.

Altura X de una letra, imagen de Wikipedia

Estas letras se leen mejor que las mayúsculas normales, fluyendo mejor con el resto del texto. ¿Cuándo usarlas?

  • Son buenas para siglas, acrónimos y similares. Usar mayúsculas normales da demasiado énfasis a estas palabras, destacándolas en demasía en el texto. No obstante, para abreviaturas breves siguen siendo mejores las mayúsculas normales (ejemplo: Washington, DC).
  • También son útiles para subtítulos o antetítulos, así como para epígrafes, emplazamientos típicos de la maquetación de prensa, donde quedan muy bien. Mejor que las mayúsculas normales pues suelen ser más gruesas y legibles.
  • Son buenas para dar estilo a los textos, por ejemplo para destacar las primeras palabras de un párrafo de apertura. También como primera letra del párrafo, a un cuerpo mayor que el resto del texto, o como capitular.
  • No todas las tipografías cuentan con versalitas, generando una pseudo-versalita en su lugar. En este caso lo mejor es evitar su uso, pues no se trata de verdaderas versalitas y su legibilidad puede resentirse.

Typewolf: elegir versalitas antes que mayúsculas para siglas

Por su parte, las mayúsculas normales deben usarse raramente en palabras completas, y solo si se quieren enfatizar mucho. Es algo no demasiado ortodoxo ni correcto. En literatura puede ser un recurso ocasional e incluso útil, mientras que en manuales y textos formales no debería usarse nunca.

Usar leads o párrafos introductorios.

Es otra de las recomendaciones de Typewolf, el uso de un primer párrafo con un estilo especial. No es ninguna novedad, pues dicho primer párrafo especial es algo que se usa desde siempre en prensa, denominándose dicha parte del texto lead o entradilla.

En ese párrafo se realiza un resumen del contenido completo del artículo, aportando la información principal del mismo: ¿De qué trata? ¿Cómo fue, es o será? ¿Cuándo? ¿Dónde? ¿Por qué? Las famosas “5 W” del periodismo (What, When, Where, HoW y Why).

En artículos, posts de blogs, manuales y en general en cualquier texto informativo es algo muy recomendable. Iría bajo el titular y con un estilo diferente, destacado respecto al cuerpo del texto. Para el lector puede ser de gran ayuda, agilizando su comprensión del contenido.

¿Cuáles son las mejores fuentes para el texto general?

Finalmente vamos a ocuparnos de este importante tema, que podría por sí solo ser objeto de un artículo propio.

Ya hemos visto antes que para el formato impreso serían recomendables –en principio- las letras con remates, mientras que para el entorno web mejor usar fuentes de palo seco. Ahora bien, ¿cuáles en concreto?

Vamos a empezar con las recomendaciones de Mariana Eguaras, que es un gran especialista en el diseño editorial para libros. Según cuenta, las tipografías con serif más habituales de encontrar en los libros son Baskerville, Bodoni (esta, igual que Bauer Bodoni, las veo sobre todo buenas para títulos, más que para el texto general), Caslon, Century Old Style, Fournier, Garamond y Sabon, así como la archiconocida Times New Roman (entre muchas otras).

En mi opinión, y dado lo parecidas que son en realidad, lo más sencillo es quedarnos directamente con Times New Roman, y dejarnos de líos, si queremos usar una fuente con remate. Eso sí, pese a estar presente en todos los equipos no significa que podamos usarla en cualquier proyecto público (más adelante comentaré algo sobre eso, creo que bastante importante).

En cuanto a las tipografías sans serif más habituales de encontrar en libros (sobre todo en portadas, según comenta Mariana), están: Arial (lógicamente, al igual que Helvetica que es casi igual pero la presente en los equipos de Apple), Avenir, Century Gothic, Frutiger, Gill Sans, Lucida Sans, Myriad (esta es muy buena y se usa mucho en prensa), Tahoma, Trebuchet, Univers y Verdana, entre tantas otras.

Al igual que en el caso de las fuentes con remate, mi consejo es no complicarnos y elegir directamente Arial (para el cuerpo del texto, para títulos ya es otra historia).

No obstante hay que tener algo muy en cuenta -y vamos ya con el comentario importante que antes dije que tenía que hacer-. Muchas de estas fuentes vienen ya instaladas por defecto en nuestros sistemas operativos (Windows, sin ir más lejos), y esto es debido a que Microsoft llegó a un acuerdo con los propietarios de estas tipografías. No obstante, ello no significa que nosotros tengamos también derecho a usarlas para cualquier finalidad comercial, como por ejemplo para publicar un libro o una revista, y ponerlos a la venta.

Lo explico todo en un artículo que recomiendo bastante leer en este sentido: “¿Son gratis las tipografías pre-instaladas en nuestros equipos?”. Tal y como allí se indica, estas fuentes podemos usarlas en nuestros trabajos personales, pero si las empleamos en alguna publicación de tipo comercial podemos incurrir en problemas legales. Ello es debido a que estas tipografías NO son gratis, sencillamente están presentes en los sistemas operativos (y programas como Microsoft Word, Office, etc).

Para emplearlas en publicaciones a la venta, tocará adquirir una licencia propia nuestra. No obstante, afortunadamente existen alternativas gratuitas (con permiso de uso incluso para fines comerciales), que además tienen una muy buena calidad técnica.

En el artículo que antes he comentado incluí también un listado de alternativas gratuitas para las fuentes pre-instaladas en nuestros equipos, que estoy seguro será de gran utilidad en este sentido. Son como digo conjuntos tipográficos de alta calidad, que no tienen nada que envidiar a las fuentes de pago (recomiendo también echar un vistazo a los artículos que enlacé al principio del todo, pues contienen referencias interesantes sobre esto, pese a estar más bien enfocados a titulares y textos de gran formato).

¿Y para páginas web?

Lo dicho anteriormente sería sobre todo para libros, revistas y formato impreso en general, variando ligeramente el panorama para el entorno web. En dicho formato contamos con fuentes especializadas realmente bonitas, algunas impresionantes. Basta con echar un vistazo a Google Fonts.

Como podemos ver allí, existe una amplia variedad de tipografías gratuitas disponibles para nuestras páginas web, de altísima calidad. Podemos usarlas libremente, incluso en páginas comerciales (ver enlace anterior).

Así pues, ¿cuál elegir? Asumiendo como preferible una tipografía sin remate, además de Arial hay otras opciones muy habituales de ver. Sobre todo la citada Roboto, Open Sans, Lato, Source Sans Pro, Montserrat, Raleway, Droid Sans, Arimo, Arsenal y algunas pocas más.

Las citadas desde luego son excelentes, y en algunos casos realmente elegantes, mucho más que Arial. Y también de alta legibilidad. Eso sí, hay que tener en cuenta de nuevo que en ciertos dispositivos tal vez no se muestren así de bonitas, de forma que con Arial siempre ganaremos en compatibilidad. Ello es lo que finalmente me ha decidido a usarla aquí.

De hecho, en el CSS podemos incluso establecer que se use directamente la fuente de palo seco por defecto en el navegador (font-family: sans-serif). No es para nada una mala decisión. Lo que esto hará será mostrar Arial, Helvetica, o una adaptación similar y comprobada de ellas. Siempre será una letra de la máxima legibilidad, eso desde luego, y supone por tanto una especie de “seguro” en este sentido.

Y aquí termino de momento la presente guía, a la que iré añadiendo más aportes en el futuro. Mi intención es hacer de ella una referencia verdaderamente útil, que contribuya a la difusión de textos cada vez más legibles y bien formateados. Cualquier comentario al respecto será más que bienvenido en cualquiera de mis perfiles sociales.

Leer más...

29 marzo, 2017

Crear sello estampado desgastado, tutorial Photoshop

En este artículo veremos un tutorial de nivel avanzado, que me ha gustado mucho pues nos servirá para varios fines: en primer lugar –lógicamente- para hacernos un sello con efecto grunge o desgastado, que podremos personalizar a nuestro gusto y conservar para el futuro. En segundo lugar, será también una muy buena práctica de cara a estudiantes y personas en formación, especialmente con la herramienta Pincel de Photoshop y en el trabajo con capas.

Si se realiza completo el tutorial se afianzarán mucho estos conceptos, y lo recomiendo incluso para personas veteranas en el uso del programa de Adobe. Personalmente reconozco que he aprendido cosas nuevas al seguirlo, y eso que tengo muchos años de experiencia.

Este tipo de efectos de estampados son muy buenos además para diversos fines, entre los que se cuentan los trabajos de branding o imagen de marca, pues en el sello podremos poner logotipos con excelente resultado. Es algo que queda muy bien (son ideales para firmas de ropa y similares, muy adecuadas para etiquetas de estilo retro-vintage).

Después también podremos usarlo para expresar que algo tiene garantía de calidad, como suelo hacer yo aquí mismo en La Grafiteca con los recursos de los que hablo (siempre compruebo antes que los archivos funcionen verdaderamente, como saben quienes siguen mis artículos semanales). Por cierto, el sello que uso habitualmente para ello es totalmente gratuito, se trata de un recurso del que hablé en la entrada “Efectos estampado de sello formato PSD, alta calidad”. Recomiendo su consulta, también incluí allí un pequeño tutorial.

Bien, en esta ocasión vamos a tratar el mismo tema, pero con un tutorial mucho más detallado, y aportando además nuevos recursos de gran interés, todos ellos 100% gratuitos igualmente. El resultado será algo como esto:

Sello estampado por La Grafiteca

Como puede verse, es muy interesante que en el sello podremos poner no solo un logo, sino incluso una fotografía (de una persona o incluso un paisaje, por qué no). Aplicando ciertos filtros, que luego explicaremos, daremos a la imagen el efecto de estampado que se ve arriba.

Yo he usado exclusivamente Photoshop CS3, y seguramente también podrá hacerse el ejercicio con CS2 o incluso inferior. Casi todo el trabajo lo haremos con pinceles y capas, herramientas presentes desde las versiones más antiguas.

Tutorial paso a paso.

Bien, vamos con el tutorial. Se trata de una guía originalmente realizada por el diseñador John Negoita para EnvatoTuts+, un gran portal especializado en la formación de diseñadores que acostumbra a ofrecer buenos tutoriales (además de cursos, talleres, etc). John es además autor de la web PSD-dude.com (“el chico PSD”, podría traducirse), donde ofrece muchos recursos y guías. Su mujer y él son grandes maestros de la edición gráfica y del uso de Photoshop, eso desde luego. También tienen una tienda online donde ofrecen sus creaciones de pago, que recomiendo así mismo visitar.

El tutorial del que hablaremos aquí es, no obstante, totalmente gratuito, así como los recursos necesarios para realizarlo. El resultado al que ellos han llegado es el siguiente:

Resultado final del tutorial

Las personas que entiendan bien el inglés escrito, pueden dirigirse directamente a la siguiente dirección:

How to Create a Rubber Stamp Effect in Adobe Photoshop | EnvatoTuts+

Allí encontrarán la guía completa, que por cierto es muy detallada y cuenta con abundantes capturas. No obstante también la seguiremos aquí a continuación, resumiéndola y traduciendo los nombres de las herramientas a la versión en español de Photoshop.

De esta forma, básicamente los pasos a seguir son los siguientes:

1. Crear un nuevo documento y descargar la textura del fondo.

Crearemos un nuevo documento de Photoshop de 850x550px. A continuación, iremos a la siguiente dirección para descargar la textura del fondo.

textura

Como puede verse es una especie de pergamino, cuyas manchas darán el efecto grunge que nos interesa.

Es una buena textura. La llevaremos a Photoshop y pondremos en el documento que creamos antes, en una capa nueva. Tendremos que escalarla (reducirla) para ajustarla.

2. Crear un gradiente para la textura del fondo.

Seleccionaremos la capa con la textura, e iremos al menú Capa/Nueva capa de ajuste/Mapa de degradado (también puede hacerse desde el panel o ventana de las capas). Le daremos un nombre cualquiera.

Crear un gradiente para la textura del fondo

Los colores que se sugieren para dicho degradado son #7a6849 y #fffbf7. Si ya los tenemos como color frontal y trasero respectivamente será más fácil. Con esto pasaremos la textura a una escala de tonos de un solo color, de tono marrón (en realidad podremos poner el que queramos, o incluso saltar este paso, aunque para empezar es recomendable respetar el procedimiento básico).

3. Crear los círculos.

A continuación, crearemos diversos círculos con la herramienta Elipse. Este paso sí es fundamental. Para hacer un círculo perfecto mantendremos presionada la tecla Shift (Mayúsculas).

Crear círculos con la herramienta Elipse, captura 1

Duplicaremos varias veces la capa que contiene dicho círculo. En la guía de John se han usado cuatro círculos, aunque yo he usado menos. A gusto de cada uno en realidad. Después los haremos progresivamente más pequeños, haciendo Command/Control-T o a través del menú Edición/Transformar trazado/Escala. El segundo círculo lo reduciremos al 95%, el tercero al 75% y el cuarto al 70%. Con esto tendremos varios círculos concéntricos.

No podrán verse pues estarán tapados, pero en la ventana de Capas, a todos les pondremos “0%” de relleno. Después, en los estilos de capa un trazo de color negro de 4-6 píxeles (6 en el de fuera y 4 en el de dentro).

Crear círculos con la herramienta Elipse, captura 2

El resultado será el siguiente:

Crear círculos con la herramienta Elipse, captura 3

4. Añadiremos una forma.

En la parte más externa vamos a poner una de las formas creadas por John. Nos las facilita gratuitamente en su web Psd-dude (ir a la siguiente entrada, hace falta registro para descargar este archivo y los siguientes).

Añadir una forma para el círculo adornado exterior

Una vez descargadas, para cargarlas en Photoshop podemos hacerlo mediante el menú de la herramienta Forma personalizada (en el mismo grupo que para crear los círculos). O a través del menú Edición/Gestor de ajustes preestablecidos (una vez allí seleccionaremos Formas personalizadas).

Una vez cargadas, con la herramienta Forma personalizada pondremos una de ellas, y le daremos el tamaño adecuado.

5. Añadir el texto.

Acto seguido, con la herramienta Texto horizontal (la que viene por defecto), nos situaremos sobre el tercer círculo y haremos clic, de forma que podremos escribir alrededor del trazado.

Añadir texto rodeando el tercer círculo

Si se quiere usar la misma tipografía, en el tutorial original puede encontrarse el enlace. Lo cierto es que es bastante adecuada (la fuente se llama Intro). O si no, pues usaremos cualquiera que tengamos. Adaptaremos bien el tamaño, eso sí.

6. Añadir la foto y darle el efecto de tampón o sello estampado.

Muy interesante este punto. Podemos poner directamente un logo, pero si queremos poner la foto de una persona, un dibujo o cualquier imagen, lo haremos de la siguiente manera: primero pondremos la foto con el tamaño adecuado y en el sitio correcto.

Añadir una fotografía

Después con Command/Control pulsado haremos clic en la máscara de capa del círculo en cuestión. Esto hará una selección. Añadiremos entonces una máscara de capa a dicha selección, lo que recortará la imagen al círculo.

Acto seguido añadiremos el filtro para dar a la foto el aspecto de sello estampado. Pondremos primero el color frontal en negro y el trasero en blanco.

En CS3, el filtro es Bosquejar/Tampón (puede variar según la versión).

Dar efecto de estampado mediante filtro

El Equilibro de luz y sombra lo pondremos en 4, y el suavizado en 1-3. Esto convertirá cualquier retrato en un dibujo. Es una herramienta realmente útil (no solo para esto, para todo tipo de trabajos en realidad).

7. Eliminaremos el blanco de la foto.

Debo admitir que no conocía que se pudiera hacer el siguiente paso, con lo que quedo muy agradecido al “chico PSD”. Es decir, puede hacerse de muchas formas, pero no conocía ésta en particular. Es muy sencillo de hacer mediante los estilos de capa (doble clic en la misma).

Eliminar el blanco de la foto mediante las opciones de fusión

No hace falta aplicar ningún estilo. Sencillamente, en la primera ventana (Opciones de fusión), deslizaremos el primer manejador de abajo hasta 180 (donde dice “Fusionar si es (Gris) Esta capa).

Y listo. A continuación cogeremos todas las formas y convertiremos las capas en un Objeto inteligente (todo menos el fondo y el mapa de degradado).

8. Añadir desgaste.

Esta parte ya es más artística, pues consiste en dar un aspecto grunge (desgastado) a las formas. Lo haremos con pinceles, añadiendo primero una Máscara de capa al Objeto inteligente que creamos antes.

Añadir desgaste mediante pinceles de manchas y salpicaduras en máscara de capa

El color del pincel ha de ser negro, para que aplique el desgaste. Lo mejor es usar pinceles grunge especialmente creados para ello, como pueden ser los típicos de manchas, salpicaduras de pintura, etc. Aquí en La Grafiteca hemos visto algunos (realizar una búsqueda), y en el tutorial original también se mencionan pinceles de este tipo creados por Psd-dude y gratuitos. Interesa también variarles la opacidad, para que no “borren” por completo el sello. Esto también puede conseguirse con pinceles en escala de grises.

En conjunción con la textura del fondo, conseguiremos el atractivo (y realista) aspecto desgastado que vemos en la imagen. Es un trabajo muy típico de los editores de Photoshop, cuya práctica nos vendrá muy bien. Tener una buena paleta de pinceles grunge es fundamental.

Añadir más pinceles de sellos antiguos y marcas postales

Para añadir las líneas postales de la imagen, descargaremos estos otros pinceles que tiene Psd-dude (igualmente gratuitos). Después tendremos que “borrar” la parte del centro, de nuevo usando pinceles grunge o como queramos. En cuanto a los otros sellos vintage del fondo, podemos descargarlos igualmente de la misma web de John, concretamente aquí.

Finalmente, si se quiere cambiar el color de los estampados, bastará con seleccionar la capa en cuestión, y darle una Superposición de colores en los estilos.

Cambiar el color de los estampados

El resultado al que yo llegué fue el siguiente:

Resultado obtenido por La Grafiteca, siguiendo el tutorial

En definitiva, un buen tutorial que recomiendo realizar. Los recursos que obtendremos tampoco están nada mal. De igual forma, aconsejo también que se consulte la guía original en inglés de EvantoTuts+, pues contiene aún más materiales y es bastante más detallada. Recuerdo el enlace.

Más materiales relacionados.

Para aquellas personas que no quieran -o tengan tiempo de- realizar todos los pasos, es obligado comentar que Psd-dude ofrece adicionalmente un “generador automático” de estos estampados de sellos de caucho. Se trata de una Acción de Photoshop (archivos ATN, ABR y CSH), que realiza todo el proceso con un simple clic. Eso sí, es un recurso de pago.

Para consultarlo dirigirse a la siguiente dirección:

Rubber Stamp Generator Photoshop Action

Es uno de los recursos que John ofrece en su tienda antes mencionada. Y parece que además tiene bastante éxito, lo cual habla de su calidad (yo no lo he probado, así que no puedo opinar, no obstante hay muchos comentarios).

Si se prefiere seguir con materiales 100% gratuitos, recomiendo consultar la entrada de esta misma web que puse también al principio: Efectos estampado de sello formato PSD, alta calidad. Allí pueden encontrarse un buen número de sellos y otras referencias de interés dentro de esta temática.

No obstante, animo a todos a intentar por su cuenta realizar su propio sello siguiendo este tutorial, pues sin duda aprenderán mucho, o reforzarán algunas habilidades de entre las más útiles para el profesional de la edición gráfica con Photoshop.

Leer más...