¿Cómo cambiar el tamaño de los conjuntos de iconos en Photoshop?

La respuesta se aplica tanto a iconos vectoriales como rasterizados.

Si la calidad importa, no se puede.

• Los iconos grandes contienen más detalles. Esos detalles, que son agradables en un ícono de 128×128, serían perturbadores en un ícono de 32×32; en lugar de ayudar a identificar visualmente el ícono, harán lo contrario. Por ejemplo, un icono grande de un teclado puede contener todas las teclas del teclado. Para un icono de 16×16, cuatro teclas son suficientes: o dibujas cuatro y los usuarios entienden que son teclas, o dibujas más y todo se vuelve plano.

  Probemos a ver que pasa. Tomo el ícono de teclado gráficamente excelente que se usa en Windows 7:

  

  Ahora, compare, uno al lado del otro, el ícono reducido a la izquierda y el ícono que cambié de tamaño en Photoshop del más grande:

  

  El de la izquierda es bastante claro. A la derecha, creo que es una PDA de forma extraña con una pantalla grande, dos botones en la parte inferior de la pantalla y un botón grande en la parte inferior. Veamos qué sucede cuando vamos a una escala aún más pequeña:

  

  El ícono de la izquierda, usado por Windows 7, es bastante claro, a pesar de la baja resolución. El icono de la derecha, la versión redimensionada del grande, no tiene ningún sentido: podría ser una PDA, una caja plateada o cualquier otra cosa. En realidad, se parece a la calculadora PF-19686592 para mí.

Se deben tener en cuenta otros factores además del nivel de detalle del objeto:

• una sombra, por ejemplo, es agradable tener en un ícono de 64×64, pero la misma sombra se verá estúpida en un favicon de 16×16.

• el objeto puede girarse para estar en perspectiva cuando el icono es grande. Cuando sea pequeño, dibújalo plano.

• el número de objetos debe disminuir cuando el tamaño disminuye. Por ejemplo, un ícono grande de un bloc de notas puede presentar un bloc de notas con un lápiz. En un ícono más pequeño, no hay lugar suficiente para dibujar un lápiz de manera que no cubra el bloc de notas y se reconozca como un lápiz al mismo tiempo.

Esas reglas se siguen realmente en los iconos de Windows XP .

Esto significa que si la experiencia de usuario y la calidad del diseño son importantes, no puede simplemente reducir la escala de un ícono y esperar que sea tan claro como el original. Teniendo en cuenta el conjunto de íconos al que se vincula en su pregunta, obviamente no desea mantener un círculo alrededor del ícono para íconos de 24 × 24: elimine el círculo y conserve solo el contenido.

Veamos qué pasa. Esta imagen:

se convierte en:

A la izquierda, eliminé el círculo. A la derecha, acabo de reducir la imagen original. ¿Puedes decirme lo que ves en el lado derecho?

Si la calidad no importa, simplemente cambia el tamaño de la imagen.

Para lograr una mejor calidad, es posible que aún desee:

• Mantener la misma proporción (obviamente),

• Cambie el tamaño dividiendo por múltiplos de dos: de 128 × 128, puede obtener 32 × 32, pero crear un ícono de 41 × 41 puede dar resultados extraños.

• Pruebe con diferentes algoritmos de cambio de tamaño. Espero que los lanczos funcionen mejor, pero tal vez no para todos los íconos. La nitidez también puede aumentar o disminuir la calidad.

Este conjunto en particular se compone de formas y texto, por lo que cambiar el tamaño no afectará la calidad, pero no puede simplemente reducir el tamaño de estos íconos. Un icono es un tipo especial de infografía. Su propósito es comunicar información fácilmente reconocible en cualquier tamaño, por lo que su primer paso, antes de comenzar a escalar cualquier cosa, es identificar qué partes del ícono contienen la información. Estos deben permanecer legibles, el resto es desechable.

En este caso, las formas de los círculos no llevan ninguna información, pero en varios casos sus colores sí, por lo que no puedes eliminarlos. Sin embargo , puedes escalarlos libremente. Los elementos gráficos en los círculos llevan la información vital, por lo que debe tratarlos con más cuidado.

Aquí se explica cómo escalar este conjunto de 48 px a 24 px, trabajando desde el PSD:

• Abra el conjunto de capas para uno de los iconos. Elijamos el icono de Google+.

• Seleccione el círculo y elija Edit > Transform > Scale. Asegúrese de que el punto central en el proxy de control de transformación esté seleccionado y alterne el enlace entre los campos W y H para que su escala sea proporcional.

• Ingrese 50 en el campo W o H y presione Enter/Return.

En este punto, su círculo tiene un diámetro de 24 px, pero la "g" y el "+" son demasiado grandes.

• Seleccione tanto la capa de forma "g" como la capa de texto "+", y elija Edit > Transform > Scalecomo antes, pero esta vez, ingrese 80 en el campo W o H y presione Enter/Return.

• Empuje las capas "g+" para centrarlas en el círculo.

Este ícono reducido aún transmite la misma información claramente, pero tiene el tamaño que necesita y será consistente con el resto del conjunto cuando los haya escalado.

Trate el resto de los iconos de manera similar. Los círculos definen los límites, por lo que todos tienen una escala del 50 %. La cantidad que escalará cada gráfico variará (el ícono de Skype funciona mejor al 75% que al 80%), por lo que tendrá que experimentar un poco. La experiencia te enseñará sobre la marcha.

Diferentes tamaños necesitarán diferentes proporciones y cantidades de escala apropiadas. Lo importante es diferenciar qué es información y qué es decoración. Puedes escalar o tirar la decoración; debe mantener la información legible.

Los "íconos" pictóricos y los íconos que tienen muchos detalles no se pueden escalar simplemente. Deben simplificarse al reducirse de tamaño para que la información quede clara, por lo que deberás crear un ícono diferente para tamaños más pequeños. El mismo principio se sigue en el diseño de logotipos (lo que funciona bien en un póster puede necesitar simplificarse mucho para una tarjeta de presentación) y en el diseño tipográfico.

Siempre hago mis íconos en formato vectorial (usando Illustrator); de esa manera, puedo exportar mi arte en cualquier tamaño deseado y en cualquier formato deseado. Bueno, no es del todo cierto, ya que tengo que ajustar los íconos para la alineación de píxeles. CS5 hace un buen trabajo, pero no cubre todos los problemas...

En Photoshop, dado que está utilizando píxeles, le dará el mejor resultado si desarrolla sus íconos en el formato más grande que necesitará y luego reduce su tamaño. También debe usar "máscara de enfoque" para hacer que las imágenes reducidas sean más nítidas, ya que pierden nitidez en el algoritmo de reducción de tamaño.