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
Diseñe el icono en el tamaño más grande (a menudo 1024 × 1024) utilizando vectores y efectos generados, como estilos de capa.
Duplique y reduzca el tamaño del documento para crear los tamaños más pequeños.
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
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.
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.
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
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.
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.
Duplique y reduzca el tamaño del documento para todos los tamaños más pequeños.
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.
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.
fuente
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.
fuente