La guía del diseñador para la sugerencia de píxeles
Los íconos y la tipografía de píxeles perfectos se destacan entre la multitud en línea. Obviamente todos queremos esforzarnos por un trabajo tan refinado, pero a veces incluso después de intentarlo, terminamos con algo un poco ... menos. Pixel Hinting es una de las habilidades que toma una función automática y mejora sus resultados. A pesar de la resolución ultra alta de las pantallas de hoy en día, al igual que las pantallas retina de Apple, todavía necesitamos "falsificar" curvas suaves para que no terminemos con un desastre pixelado.
Muchos diseñadores y desarrolladores ahora se están moviendo más hacia los enfoques SVG y basados en vectores; con el apoyo solo mejorando día a día. Pero aún así, las soluciones basadas en vectores tienen un largo camino por recorrer antes de que sean lo suficientemente maduras como para usarlas en la producción. SVG es ideal para mostrar formas vectoriales, pero no tanto para cambiar el tamaño de esas formas. Entonces, como todo lo demás, hay un momento y un lugar para cada solución.
¿Qué son los vectores?
Los vectores se representan esencialmente como resultados de la representación matemática de una forma. Cuando ve algo en la pantalla, se debe a que su computadora procesó esos objetos y los vinculó a los píxeles de la pantalla. Al hacerlo, su computadora también ha tomado decisiones sobre lo que debería, y no debería, mostrarse como píxeles completos. Por ejemplo, la letra mayúscula "D" tiene una línea perfectamente recta y una curva.
Como puede ver, sin anti-aliasing, la línea curva en la "D" está bastante pixelada. Por lo tanto, para compensar, cuando se renderizan las formas de los vectores, generalmente son antialias para proporcionar una apariencia más robusta. En lugar de mostrar solo los píxeles que se encuentran dentro del contorno del vector por completo, los píxeles se sombrean gradualmente. Esto engaña a su cerebro para que vea una línea más suave en formas curvas que no se ajustan a la cuadrícula de píxeles perfectamente.
Arriba puede ver cómo se le da a la "D" representada lo que se llama semicinco para ayudar a eliminar la pixelación irregular. Sin embargo, esta misma característica también presenta un problema: las computadoras son terribles para descubrir qué es visualmente atractivo. Entonces, al agregar estos medios pixeles hace que las esquinas redondeadas se vean fantásticas, también hace que la línea interna superior / inferior se vea borrosa. El antialiasing automático que se produce cuando se renderiza una forma de vector termina haciendo que la mayoría de las partes de las formas y la tipografía se vean estupendas, pero deja a otras en una calidad aún peor de lo que comenzó.
Hola, haciendo alusión pixel.
Ahora que tiene un poco de experiencia en formas vectoriales y cómo funcionan, saltemos al trabajo real. La sugerencia de píxeles implica mover los puntos de anclaje del vector para descansar en los bordes de los píxeles de una manera más estéticamente agradable. Haciendo esas líneas rectas más perfectas, mientras que aún deja los semicírculos en las curvas. Más comúnmente, la sugerencia de píxeles se usa en tipografía y formas para imágenes de trama (logotipos, iconos, marcas, etc.). Ahora, lo más importante, para ajustar correctamente su vector debe estar en el tamaño y la forma que desee. Una vez que Pixel insinuó su trabajo, girarlo o cambiar su tamaño podría, y probablemente lo haría, deshacerse de todo ese trabajo volviéndolo a alisar automáticamente. Antes de comenzar, asegúrese de que se ajusten las siguientes configuraciones (usaré Photoshop para esta tarea):
- Encienda su cuadrícula de píxeles (Ver> Mostrar> Cuadrícula, también asegúrese de que Extras esté marcada arriba del menú Mostrar)
- Asegúrese de que su cuadrícula tenga una cuadrícula cada 10 píxeles, con 10 subdivisiones. O algo similar para que haya una línea entre cada píxel.
- Desactivar el ajuste (Ver> desmarcar complemento). No queremos que los puntos de anclaje se ajusten en incrementos de 1px, queremos mover los puntos dentro de los píxeles.
Pixel hinting tipografía
El proceso para hacer formas en comparación con la tipografía es ligeramente diferente, así que los guiaré a través de ambos. Idealmente, con la tipografía, quiere kern su tipo antes o durante su proceso de sugerencias. En cualquier caso, la sugerencia de píxeles debe ser una de las últimas cosas que haces.
En primer lugar, seleccione la tipografía en la que desea hacer una sugerencia de píxeles y haga una copia de la capa, luego transforme esa capa en una forma.
Puede ver que el texto cae torpemente fuera de la cuadrícula, tanto en el eje horizontal como en el vertical. Para solucionar esto, vamos a empujar suavemente los puntos de anclaje de cada letra hasta que se alineen más de cerca con la cuadrícula de píxeles establecida. El objetivo es lograr que las líneas de forma se cierren, si no directamente, en las líneas de la cuadrícula. Acerca el zoom para empujar los puntos de anclaje de manera más precisa. Mientras hace esto, aleje con frecuencia para asegurarse de que sus ajustes se vean bien.
No desea ajustarse con precisión a la cuadrícula, ya que eso le quita las ventajas de anti-aliasing en primer lugar. En su lugar, intente simplemente mantener las cosas consistentes, solo permita que haya medio píxel en un lado de cada eje. Por ejemplo, siempre dejo medio píxel a la derecha y a la parte superior de las letras, mientras fuerzo los bordes izquierdo e inferior al nivel de la cuadrícula.
Como puede ver, el "get in" se ha ajustado aproximadamente, mientras que el "touch" permanece como está. Al igual que el interletraje, la sugerencia de píxeles es mucho más una destreza que una ciencia. Se necesita un buen ojo para observar y discernir si el trabajo se ve mejor o peor después del ajuste. No se desanime si encuentra ásperas insinuaciones de píxel tipográfico, itere y siga trabajando con él. Si su resultado todavía se ve por debajo del nivel, siempre puede eliminar la capa y copiar nuevamente desde el original. Se necesita bastante tiempo para que la tipografía en particular se vea genial, simplemente continúe y, tarde o temprano, su arduo trabajo dará sus frutos.
Pixel haciendo alusión a formas vectoriales
En general, las formas de sugerencia de píxeles están reservadas para iconos o logotipos. Una vez más, debes asegurarte de que tu forma tenga el tamaño y la rotación que deseas antes de comenzar, ya que si la ajustas más tarde podrías descartar todo tu trabajo. Ajustar las formas es mucho más fácil y requiere menos atención para los detalles intrínsecos. Dicho esto, las formas más complejas tardan más y son más difíciles de ajustar, por lo que es mejor comenzar con algo simple.
Arriba, puedes ver que nuestra flecha y nuestro círculo se sientan un poco lejos de donde nos gustaría. Los medios pixeles creados por anti-aliasing están causando que toda la forma parezca borrosa como resultado. Así que vamos a empujar todo para que caiga un poco mejor en la grilla.
¡Aquí vamos! Al ajustar los puntos de anclaje para que se alineen con la cuadrícula, terminamos con un ícono mucho más nítido. Es importante mencionar que dado que este ícono es un círculo, cualquier ajuste en el ancho también se debe reflejar a la altura. Además, no te olvides de asegurarte de que el interior de la forma se ve bien y uniforme también. Si miras la imagen anterior, notarás que los lados interiores del círculo no tienen alias igual.
En conclusión
Con el trabajo anterior, el resultado es una imagen que se ve más nítida y más profesional. Por supuesto, puede aplicar estas técnicas a cosas mucho más importantes que un botón.
Si bien el antialiasing automático realizado por su computadora parece aceptable, podría ser mejor. Entonces, cuando se trata de su logotipo o íconos / tipografías importantes en forma de ráster, la sugerencia de píxeles es más que solo una habilidad de nicho; hasta el día en que todos usemos pantallas de alta densidad de píxeles, es esencial.