Piensa en pixeles

El primer paso para convertirse en un ninja del diseño web ocurre antes de trazar la primera línea. Lo primero que debe ocurrir es un giro completo en la forma de percibir los gráficos.

Los primeros diseñadores web que existieron eran diseñadores gráficos de la vieja escuela que se atrevieron a cruzar este mar infinito sin ninguna garantía. A pesar de que en la actualidad se forman nuevos diseñadores especializados netamente en web, todavía existen muchos profesionales del área que empiezan a inyectarse conocimientos sobre esta disciplina que cada día llega a nuevos rincones de nuestras vidas.

He trabajado con muchos diseñadores gráficos de excelente trayectoria en aquellos proyectos que dan sus primeros pasos en web. El primer problema que encuentro es que la mayoría de los diseñadores gráficos provienen de la industria del print, por lo tanto piensan en centímetros o pulgadas. Esto trae como consecuencia una serie de confusiones:

  • El espacio de trabajo o lienzo es creado muy pequeño o demasiado grande
  • Las imágenes exportadas individualmente no coinciden con el espacio donde se mostrarán en la página
  • La observaciones como “mueve ese logo 2 centímetros hacia arriba” no las podemos interpretar correctamente los desarrolladores

Aquí no hablamos dpi

El primer paso de muchos diseñadores para empezar a trabajar es la creación del espacio de trabajo, para el cual por lo general trabajan con una medida en centímetros y una resolución. En el diseño web es realmente inútil trabajar así. Lo primero que se debe hacer es cambiar la unidad (cm o pulgadas) por pixeles.

Intenta escribir esta resolución en Photoshop.

La resolución no importa. Muchos dicen que para impresiones debe estar fijada en 300 y que para web debe estar en 72. No hay ningún problema en usar 72. El asunto es que el mito de que para web sea esa medida nace en los años 80 cuando los monitores trabajaban con ese valor en su resolución. Lo importantes es que estemos claros de que se trabaje con pixeles como unidad y que la resolución simplemente no afecta el diseño. Para aquellos que crean que estoy errado pueden seguir investigando con este grandioso artículo que muestra de forma detallada la locura del mito de los 72ppi.

¿Cuantos px?

Hace un par de años era fácil responder esa pregunta. Por lo general se trabajaban los sitios web con un ancho máximo de 960px y el lienzo solo debía tener un poco más de espacio para la comodidad del diseñador. Hoy en día para satisfacer a los monitores de mayor resolución (nuestros monitores) en muchos casos se trabaja con un ancho máximo de al menos 1280px. En algunos casos, como por ejemplo Mashable o Smashing Magazine usan el formato full-width o al menos con un ancho máximo de 1440px. Todo depende de la página que se esté diseñando, por lo tanto es bueno tener una referencia y evaluar el ancho que usa para tener una guía.

Mashable fue uno de primeros de los grandes en ponerse en formato gordo.

Exportando como debe ser

Teniendo claras las dimensiones del lienzo es muy sencillo exportar las imágenes para web: simplemente el tamaño en el que las exportes será el tamaño que tendrán dentro de una página. Simplemente olvídate de cualquier medida que no sea en pixeles.

Hablando claro

Una vez que trabajes en pixeles será más fácil la comunicación con el resto del equipo. Hay que recordar que los archivos creados en un programa como Photoshop simplemente serán una guía para crear un documento web basado en HTML. Por lo tanto todos los ajustes que se hagan (siempre hay ajustes por hacer) serán a través de una hoja de estilos en formato CSS en la cual debemos establecer todas las medidas en pixeles. Eliminando esa traducción de medidas se agiliza el trabajo, por eso todos debemos hablar el mismo idioma.

Esta publicación es la primera de la serie Incursionando en el diseño web la cual es una iniciativa para crear una guía útil para los primeros pasos de un diseñador web.

Deja un comentario

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

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