Muchos diseñadores gráficos me pasan sus diseños de sitios web para que les haga la programación, y generalmente surgen preguntas sobre medidas y dpi, sobre todo los que usan illustrator.
Antes que nada, tenemos que recordar que la web se va a ver en monitores de diferentes tamaños y principalmente con diferentes resoluciones.
El tamaño del monitor generalmente se expresa en pulgadas y se mide en diagonal. Osea que un monitor de 17″ no mide 17″ ni de ancho, ni de alto, sino en diagonal desde la esquina inferior de un lado, hacia la esquina superior del lado opuesto. Así que, cuánto mide realmente en centímetros? no tenemos idea, no queremos sacar la cuenta, ni tenemos ganas de medirlo con una regla, así que directamente no nos importa.
Aparte de no saber cuanto mide realmente el monitor de la persona que va a visitar nuestra web, tenemos otro problema: un monitor puede estar configurado en varias resoluciones, independientemente de su tamaño
Qué es la resolución del monitor?
Es la cantidad de píxeles que se muestran en la pantalla. Por suerte se expresan en ancho y altura, y no en diagonal.
Qué es un pixel?
Si no saben que es un pixel no se por qué están leyendo esto, pero por ahí quieren saber cuánto mide un pixel… Un pixel es un puntito, cuadrado, de esos que se ven cuando le hacen mucho zoom a una foto. Y cuánto mide? eso va a depender del tamaño del monitor y la resolución en la que esté configurado.
Mi monitor es de 17″ y lo tengo configurado en una resolución de 1440 x 900 pixeles, es bastante wide, así que debe medir unos 40 cm de ancho, por lo que en este caso, 1440 pixeles medirían 40 centímetros Pero si utilizo una resolución menor, por ejemplo 800×600 en mi misma pantalla, esos mismos píxeles ocupan más espacio (miden más).
Conclusión: Trabajen en píxeles, no en centímetros, milímetros ni pulgadas. Utilicen el área de trabajo con el zoom al 100% (para ver el tamaño real), porque a diferencia de los trabajos impresos, en este caso lo van ver del mismo tamaño en el que va a quedar el producto final.
Color: Saben muy bien que CMYK corresponde a los colores de las tintas de impresión. Esto sugiere que siendo que no vamos a imprimir nada, probablemente no sea el modo de color indicado para nuestra web. Utilicen RGB al diseñar para luego no tener diferencias de color.
Y por último, a la hora de exportar: los famosos DPI.
Qué es un DPI?
Significa «Dots Per Inch» (puntos por pulgada), nuevamente es más aplicable a archivos imprimibles, ya que es una unidad de medida muy utilizada por imprentas e impresoras. Se refiere a la cantidad de puntitos que se realizan en el papel en la medida dentro de una pulgada, mientras mas puntitos haya, mejor es la calidad de impresión. Tenemos que usar la misma que utiliza la configuración predeterminada de todos los monitores: 72 dpi.
Aumentar este valor, en este caso, no resulta en mayor calidad, sino en mayor tamaño y peso de las imágenes.
Recapitulando, para diseñar un sitio web, deben generar un archivo nuevo, con unidad de medida en pixeles, en formato RGB, a 72 dpi, utilizando el zoom al 100%.