El pixel perfect, se trata de un concepto cada vez más usado por diseñadores y maquetadores digitales. Este concepto se trata de diseñar a la perfección, para que cada parte de la página o aplicación trabajen conjuntamente en ofrecer la mejor y la misma experiencia para los usuarios en cualquier tipo de navegador y dispositivo.
Para lograrlo solo debes seguir estas técnicas:
Algunos diseñadores parten de 2x para la realización de sus diseños, pero al exportar los assets a 3x (es decir, multiplicar por 1,5) aumentan las posibilidades de obtener pixeles decimales. Por esta razón se recomienda partir de la resolución 1x.
Lo primero que hay que hacer para detectar si nuestros diseños son precisos es comprobar los valores de posición y tamaño. El inspector es el centro de comandos principal de un documento de Sketch. Para detectar imperfecciones a causa de pixeles decimales solo tenemos que seleccionar cada elemento y revisar el inspector.
Los números decimales provocan el renderizado de sub-píxeles – la principal razón por la que un asset exportado puede tener los bordes poco definidos (o ‘blurry’). Para solucionar este problema, editaremos la posición y el tamaño redondeando a números completos.
Para visualizar los pixeles ‘blurry’ activaremos la vista en píxeles. Para ello seleccionaremos: View > Canvas > Show pixels.
Para ver cómo se visualizará nuestro diseño una vez exportado sin tener que mirar cada píxel uno a uno, utilizaremos el pixel zoom. Para ello comprobaremos que tenemos la pixel grid’ habilitada: View> Canvas >Show pixel grid (Shift+X).
Mostrar la grid de píxeles te permitirá distinguir píxeles borrosos con bajo contraste que de otra forma habrían pasado desapercibidos. Así, si combinamos esta función con ‘Show pixels’, cada borde que no esté bien alineado con la píxel grid será fácilmente detectable.
Se trata de una de las funcionalidades más escondidas de Sketch. ‘Redondear al píxel
más próximo’ soluciona gran parte de las alineaciones imperfectas de píxeles. Una vez hemos detectado un vector con valores de sub-píxel, podemos seleccionar la forma y ejecutar Layer > Round to nearest pixel.
Si la forma no se alinea correctamente, podemos editar los puntos del vector individualmente seleccionando la forma y clicando ‘Edit’ en la toolbar, dónde podremos cambiar entre cuatro tipos de modo de ‘anchor-point’ y adjudicar una preferencia de redondeado de pixel.
Si nos queremos asegurar de que los bordes de nuestras formas son consistentes, podemos habilitar ‘Round to Full Pixels’ (or half). En el caso de que no nos queramos limitar, por ejemplo cuando estamos diseñando iconos muy pequeños, solo tendremos que deshabilitar este modo.
Se trata de una preferencia global que nos proporciona precisión de píxeles desde el inicio: Sketch > preferences… > General tab > Pixel fitting. Ésta función hace que cualquier capa que insertemos o escalemos encaje en un píxel completo a lo largo de todo el proceso de edición del documento ( el Pixel fitting no funciona con la herramienta rotación).
Éste es un plugin de Sketch muy sencillo que te ayudará a encontrar capas que son imperfectos. Te ayudará a mantener tus documentos más limpios y las especificaciones de tu diseño exactas.
