Muchos dise\u00f1adores gr\u00e1ficos me pasan sus dise\u00f1os de sitios web para que les haga la programaci\u00f3n, y generalmente surgen preguntas sobre medidas y dpi, sobre todo los que usan illustrator.<\/p>\n
Antes que nada, tenemos que recordar que la web se va a ver en monitores de diferentes tama\u00f1os y principalmente con diferentes resoluciones.<\/p>\n
El tama\u00f1o 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\u00ed que, cu\u00e1nto mide realmente en cent\u00edmetros? no tenemos idea, no queremos sacar la cuenta, ni tenemos ganas de medirlo con una regla, as\u00ed que directamente no nos importa.<\/p>\n
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<\/strong>, independientemente de su tama\u00f1o<\/p>\n Qu\u00e9 es la resoluci\u00f3n del monitor?<\/strong><\/p>\n Es la cantidad de p\u00edxeles<\/strong> que se muestran en la pantalla. Por suerte se expresan en ancho y altura, y no en diagonal.<\/p>\n Qu\u00e9 es un pixel?<\/strong><\/p>\n Si no saben que es un pixel no se por qu\u00e9 est\u00e1n leyendo esto, pero por\u00a0ah\u00ed\u00a0quieren saber cu\u00e1nto mide un pixel<\/strong>… Un pixel es un puntito, cuadrado, de esos que se ven cuando le hacen mucho zoom a una foto. Y cu\u00e1nto mide? eso va a depender del tama\u00f1o del monitor y la resoluci\u00f3n en la que est\u00e9 configurado.<\/p>\n Mi monitor es de 17″ y lo tengo configurado en una resoluci\u00f3n de 1440 x 900 pixeles, es bastante wide,\u00a0as\u00ed\u00a0que debe medir unos 40 cm de ancho, por lo que en este caso, 1440 pixeles\u00a0medir\u00edan\u00a040\u00a0cent\u00edmetros\u00a0 Pero si utilizo una resoluci\u00f3n menor, por ejemplo 800×600 en mi misma pantalla, esos mismos p\u00edxeles ocupan m\u00e1s espacio (miden m\u00e1s).<\/p>\n Conclusi\u00f3n: Trabajen en p\u00edxeles, no en cent\u00edmetros, mil\u00edmetros ni pulgadas. Utilicen el \u00e1rea de trabajo con el zoom al 100% (para ver el tama\u00f1o real), porque a diferencia de los trabajos impresos, en este caso lo van ver del mismo tama\u00f1o en el que va a quedar el producto final.<\/p>\n Color<\/strong>: Saben muy bien que CMYK corresponde a los colores de las tintas de impresi\u00f3n. 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\u00f1ar para luego no tener diferencias de color.<\/p>\n Y por \u00faltimo, a la hora de exportar: los famosos DPI.<\/p>\n Qu\u00e9 es un DPI?<\/strong><\/p>\n Significa \u00abDots Per Inch\u00bb (puntos por pulgada), nuevamente es m\u00e1s 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\u00f3n. Tenemos que usar la misma que utiliza la configuraci\u00f3n predeterminada de todos los monitores: 72 dpi.<\/p>\n Aumentar este valor, en este caso, no resulta en mayor calidad, sino en mayor tama\u00f1o y peso de las im\u00e1genes.<\/p>\n Recapitulando, para dise\u00f1ar 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%.<\/p>\n <\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Muchos dise\u00f1adores gr\u00e1ficos me pasan sus dise\u00f1os de sitios web para que les haga la programaci\u00f3n, 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\u00f1os y principalmente con diferentes resoluciones. El tama\u00f1o […]<\/p>\n","protected":false},"author":1,"featured_media":3279,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[2,4],"tags":[9,10,33,35,36,38,47],"class_list":["post-2785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno","category-web-2","tag-cmyk","tag-dpi","tag-pixeles","tag-ppp","tag-resolucion","tag-rgb","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/london-dc.com\/studio\/wp-json\/wp\/v2\/posts\/2785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/london-dc.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/london-dc.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/london-dc.com\/studio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/london-dc.com\/studio\/wp-json\/wp\/v2\/comments?post=2785"}],"version-history":[{"count":0,"href":"https:\/\/london-dc.com\/studio\/wp-json\/wp\/v2\/posts\/2785\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/london-dc.com\/studio\/wp-json\/wp\/v2\/media\/3279"}],"wp:attachment":[{"href":"https:\/\/london-dc.com\/studio\/wp-json\/wp\/v2\/media?parent=2785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/london-dc.com\/studio\/wp-json\/wp\/v2\/categories?post=2785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/london-dc.com\/studio\/wp-json\/wp\/v2\/tags?post=2785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}