El mejor flujo de trabajo para el diseño de iconos: ¿comenzar en grande o comenzar en pequeño?

Al diseñar iconos que deben entregarse en varios tamaños, ¿comienza en el tamaño más pequeño y luego escala a los tamaños más grandes? ¿O comienzas en grande y reduces?

Hay varias ventajas para ambos. Estoy tratando de refinar mi flujo de trabajo, por lo que la información de otros sería útil. Supongamos que estamos diseñando un icono de Mac o Windows, donde los tamaños se relacionan: en su mayoría son múltiplos exactos.

Para OS X, los tamaños de íconos de aplicaciones estándar son:

• 16 × 16, 32 × 32, 128 × 128, 256 × 256, 512 × 512 y 1024 × 1024.

Para Windows 7, los tamaños de íconos de aplicaciones estándar son:

• 16x16, 32x32, 48x48, 64x64 y 256x256.

Para iOS, los tamaños de íconos de aplicaciones estándar son:

• 29x29, 48x48, 57x57, 58x58, 72x72, 96x96, 114x114, 144x144, 512x512 y 1024x1024.

Para Android, los tamaños de íconos de aplicaciones estándar son:

• 36x36, 48x48, 72x72, 96x96 y 512x512.

Para iOS y Android, los tamaños de los íconos son un poco más aleatorios y las escalas no se relacionan también, por lo que ser inteligente con respecto a la cuadrícula de diseño es menos importante, porque es menos probable que encuentre coordenadas que alcancen los límites de píxeles para múltiples tamaños.

Método 1: reducir

1. Diseñe el icono en el tamaño más grande (a menudo 1024 × 1024) utilizando vectores y efectos generados, como estilos de capa.

2. Duplique y reduzca el tamaño del documento para crear los tamaños más pequeños.

3. Realice los ajustes necesarios y guarde la imagen final.

Eso es genial, pero pierde oportunidades para que los elementos se alineen con una cuadrícula que funciona para varios tamaños. Usar una grilla gruesa para ajustar parece ayudar un poco. Por ejemplo, un documento de 1024 × 1024 con una cuadrícula de 16px significa que los puntos de ajuste le darán bordes ajustados en píxeles hasta el tamaño de 64 × 64. La idea es diseñar con detalle, pero ajustar a las cuadrículas de menor tamaño, para que pueda alcanzar esas posiciones importantes.

Método 2: ampliación

1. Diseñe el ícono en el más pequeño, o uno de los tamaños más pequeños (a menudo 32 × 32 o 64 × 64) utilizando vectores y efectos generados, como los estilos de capa. Por lo general, no hay suficientes detalles en 16 × 16 para usarlo como punto de partida.

2. Duplique y escale el documento hacia arriba para crear los tamaños más grandes, y hacia abajo para los tamaños más pequeños.

3. Realice los ajustes necesarios y guarde la imagen final.

Esto tiende a dar lugar a iconos simples con poco detalle, por lo que no me gusta trabajar así.

Método 3: escalar hacia arriba y luego hacia abajo

1. Cree un diseño aproximado en un tamaño más pequeño (a menudo 32 × 32 o 64 × 64) utilizando vectores y efectos generados, como estilos de capa.

2. Escale el documento hasta el tamaño más grande y agregue detalles. Este es el punto donde se pule el icono y se agrega la mayoría de los detalles.

3. Duplique y reduzca el tamaño del documento para todos los tamaños más pequeños.

4. Realice los ajustes necesarios y guarde la imagen final.

Este parece ser el mejor método, con los pros y los contras de los otros métodos. Como un punto ligeramente relacionado, también significa que típicamente diseño iconos de iOS a 912 × 912, porque eso es exactamente 16 veces el tamaño de icono de Retina del iPhone de 57 × 57.

¿Existe algún método mejor para diseñar íconos que necesiten entregarse en varios tamaños?

El objetivo es lograr el mejor resultado posible, con el menor esfuerzo.

Una ligera corrección a sus suposiciones: si bien Windows y Mac usan múltiplos de 16, no se escalan a la misma velocidad. Los tamaños estándar de Vista / 7 son 16 ² , 32 ² , 48 ² , 256 ² . OS X es 16 ² , 32 ² , 128 ² , 512 ² (+ versiones HiDPI). Para complicar aún más las cosas, los niveles de zoom predeterminados de Windows Vista / 7 parecen ser 16 ² , 48 ² , 96 ² , 256 ² y se ampliarán felizmente en incrementos tan pequeños como 2px. Esto no debería hacer una gran diferencia en su flujo de trabajo, excepto que elimina la necesidad de preocuparse por las cuadrículas de píxeles específicas en todos los niveles de zoom.

Mi flujo de trabajo es diferente al suyo, ya que no cambio mucho el tamaño. Se crea una nueva imagen para cada nivel de tamaño y no intento reciclar exactamente el mismo diseño.

El tamaño con el que comienzo está determinado por la plataforma. Si diseño para Windows, empiezo a 48x48. (No tengo ninguna base científica para esto, pero el nivel de zoom predeterminado de Windows 7 es "Medio", que es 48x48. Los iconos de Vista, OS X, iPhone, iPad y Android también se acercan lo suficiente a este tamaño, por lo que es conveniente y cómodo.)

El ícono completamente terminado se realiza en este tamaño y es la referencia para otros íconos de la familia. Si hago una aplicación de escritorio, haré otras versiones en 16x, 96x y 256x para que coincidan con los niveles predeterminados de Windows (a menos que sea para Mac, naturalmente). El 96x suele ser muy similar al 48x.

La versión 256x será una creación completamente nueva. Mucho más detalle (incluso si se trata de elementos pequeños como texturizar elementos de fondo). Se añaden todos los detalles que no podría encajar en las versiones más pequeñas. Si alguien tiene su pantalla marcada para iconos gigantes, debería estar satisfecho con lo que ve.

La versión 16x también es una nueva creación. Muy poco detalle. Logotipo identificativo o iconografía muy simple con la misma paleta de colores que las versiones más grandes. Con este tamaño no intento hacer nada bello, solo instantáneamente reconocible.

Entonces, al menos para mí, no se trata de escalar hacia arriba o hacia abajo con la esperanza de tener una imagen idéntica o usar el mismo diseño base en todos los tamaños. Pienso en ello como conducir a una ciudad: en la distancia es solo un horizonte pequeño pero identificable. Te acercas y comienzas a elegir edificios. Entonces estás dentro y sientes todos los detalles y dimensiones. Desde cada distancia se ve diferente, pero hay una transición suave de un tamaño a otro para que toda la familia nunca se sienta desunida.

Definitivamente comience en grande y reduzca. Cada vez que los diseñadores diseñan íconos para mi software, prefiero ver cómo se verá el ícono en un tamaño más grande y luego puedo decidir qué características eliminar o enfatizar en tamaños más pequeños. Necesita saber qué hay en el icono antes de eliminar elementos en el pequeño. Los iconos de glyfx tienen algunos buenos ejemplos de cómo interpretar iconos grandes y pequeños del mismo diseño.

Bueno, prefiero hacer todo para la densidad más pequeña y ampliarlo. Si está diseñando todo el diseño para una aplicación, el trabajo con la cuadrícula es mucho más fácil y le ahorra muchos dolores de cabeza, porque está moviendo los objetos en una cuadrícula más pequeña.

Por lo tanto, mi flujo de trabajo se ve así: 1. Realizo un diseño en una escala de ppp más pequeña en Photoshop y sigo haciendo los iconos en Illustrator, porque las imágenes vectoriales no tienen problemas para escalar. 2. Cuando estoy haciendo cada ícono / objeto, etc., creo todas las versiones ampliadas al mismo tiempo (cuando decido que se ve bien en el diseño, por supuesto) y entrego los pngs finales al programador.

Tengo que tener en cuenta que comencé con iOS primero.