diseño gráfico y diseño web. Vigo

Floats en CSS: enlaces interesantes

3 Mayo 2007 en blog, diseño web, recursos | 1 comentario »

Via diseñorama me encuentro un artículo que nos explica varias técnicas para hacer un clear a los float sin añadir código extra.

Este otro artículo de Smashing Magazine no tiene desperdicio:Cosas que deberías saber sobre los “float” en CSS. Una especie de “Todo lo que quisiste aprender y no te atreviste a preguntar”. No es oro todo lo que reluce, pero en general el artículo tiene enlaces interesantes.

Este enlace lo saqué del artículo anterior porque vale la pena destacarlo, ya que es una composición muy deseada: Centrado vertical con CSS.

Ooops, por cierto, todos los enlaces están en inglés. ^_^

Identificar una fuente (I) : What the font?

3 Abril 2007 en blog, recursos, tipografía, tutoriales | Sé el primero en comentar »

logo what the font

Más de una vez nos encontraremos ante la tesitura de tener que vectorizar un logo impreso en cualquier soporte (por ejemplo una servilleta de bar, hecho verídico) cuya tipografía no conocemos, o simlemente modificar un archivo del que no tenemos la fuente con la que se creó.

Sea cual sea el caso, hoy os traigo a aquí una estupenda herramienta que nos ayuda a identificar fuentes: What the font?. Simplemente subes una imagen con el texto en cuestión y siguiendo los pasos te ayudará a identificar la tipografía.

Vamos a ponerlo a prueba, una facilita:

Paso 1: Subir la imagen

Lo primero será escanear nuestra “servilleta de bar” o lo que sea donde tenemos el texto.
What the font admite los formatos de imagen más comunes, por ejemplo GIF, JPG, TIFF o BMP. El tamaño máximo para la las imágenes es de 360 x 275 pixels. Se recomienda que las letras estén horizontalmente alineadas y que no se toquen. Así que después de escanear asegúrate que se cumplen estos requisitos y, si no, modifica un poco la imagen con photoshop para que los cumplan. No es obligatorio pero facilitan el proceso.

Yo me he preparado esta imagen en photoshop. Ya sé que quizá sea un poco fácil, pero para la prueba nos vale.

helvetica


Ahora tenemos dos opciones: subir la imagen desde nuestro ordenador o subirla a otro servidor e indicar la dirección donde la hemos colocado. En nuestro caso la subimos desde nuestro ordenador: hacemos click en examinar. seleccionamos la imagen en nuestro disco duro y pinchamos en “upload image”.

subiendo la imagen a what the font


Paso 2: Identificar caracteres

selecciona caracteres

Ahora What the font ha procesado nuestra imagen y nos pide que le ayudemos a identificar los caracteres rellenando las casillas correspondientes. Por ejemplo, en el caso de la “i” nos identifica por separado el cuerpo de la letra y el punto, dejamos vacía la del punto y en la del cuerpo pondremos i. Con la “e” y su tilde hacemos lo mismo, dejando vacía la casilla del acento, ya que los caracteres “extraños” se le atragantan. Otra opción sería repetir la “i” y la “é” en la dos casillas. Haz pruebas, ya que los resultados pueden variar.

Paso 3: Listo para servir

Una vez identificados los caracteres, hacemos click en “Search” y listo.

fuente identificada con what the font?

Preguntas Frecuentes

Las tipografías de los resultados son de pago
Pues o la compras o le preguntas a Google si existe alguna burda copia de esa fuente.

No me identifica exactamente la misma fuente
Bueno, pero al menos te da pistas sobre su parentela tipográfica, igual es una variante de las familias que te muestra. Ya sabes más que al principio ¿no?

Los resultados no se parecen ni por asomo
Comprueba que cumples bien los requisitos (ver recomendaciones finales) y vuelve a intentarlo, quizá no te salga a la primera. Y si no te funciona, pues pregunta en algún foro especializado como la sección de tipografía de domestika

Recomendaciones finales

En What the font? recomiendan Tiff a 300ppp y en escala de grises. En mi opinión procura que la imagen esté en escala de grises con las letras bien contrastadas respecto al fondo y que no estén torcidas respecto a la linea base. Así todo debería ir bien. ¡Suerte!

Medidas internacionales de papel

28 Marzo 2007 en blog, diseño grafico, recursos | 6 comentarios »

esquema relación medidas ISO Din A4 y A3

¿Sabes cuanto mide una hoja A-0? ¿Y un sobre C-6?

En esta página del computer laboratory de la universidad de Cambridge encontrarás respuesta a todas tus dudas sobre las medidas internacionales de papel. Está en inglés, of course…

Señaléctica y pictogramas

28 Marzo 2007 en blog, diseño grafico, recursos | 1 comentario »

simbolo escalera

Seguramente te habrá pasado (y si no, te pasará) que en un momento dado te falta el símbolo de reciclable para el packaging que tienes que entregar ya y no puedes pararte a trazarlo. Pues tengo una buena noticia para ti, aquí tienes un par de enlaces que te pueden ser de utilidad:

  • En esta página del Ministerio de Educación hay un completo banco de imágenes en formato vectorial sobre señaléctica. Seguro que encuentras el pictograma que necesitas.
  • En la página del American Institute of Graphic Arts (AIGA) también tienes la simbología en formato .EPS sobre movilidad social que establecieron ellos en los años 80.
  • Para símbolos ecológicos te puedes valer de este dingbat que hay en dafont:
    dingbat recycle it
  • Y por último os dejo aquí un set de señales de tráfico que encontré en Galicia Cad

Actualización 6/4/2009: He actualizado la url del banco de imágenes y sonidos del Ministerio de Educación porque la han cambiado de sitio

Noticias y artículos relacionados:

  • No related posts

© Pablo Iglesias Francisco - Public 2005 Diseñador Gráfico y web - Vigo (España)
El blog de Emi