Iconos (conceptos básicos de diseño)

Nota

Esta guía de diseño se creó para Windows 7 y no se ha actualizado para las versiones más recientes de Windows. Gran parte de las instrucciones todavía se aplican en principio, pero la presentación y los ejemplos no reflejan nuestra guía de diseño actual.

Los iconos son representaciones picttoriales de objetos, importantes no solo por motivos estéticos como parte de la identidad visual de un programa, sino también por razones utilitarias como abreviadas para transmitir significado que los usuarios perciben casi instantáneamente. Windows Vista presenta un nuevo estilo de iconografía que aporta un mayor nivel de detalle y sofisticación a Windows.

Nota: Las directrices relacionadas con los iconos estándar se presentan en un artículo independiente.

Conceptos de diseño

Aero es el nombre de la experiencia del usuario de Windows Vista, que representa los valores incorporados en el diseño de la estética, así como la visión detrás de la interfaz de usuario (UI). Aero significa: auténtico, energético, reflectante y abierto. Aero tiene como objetivo establecer un diseño que sea profesional y hermoso. La estética Aero crea una experiencia de alta calidad y elegante que facilita la productividad del usuario e incluso impulsa una respuesta emocional.

Los iconos de Windows Vista difieren de los iconos de estilo de Windows XP de las siguientes maneras:

• El estilo es más realista que ilustrativo, pero no bastante fotorealista. Los iconos son imágenes simbólicas que deben tener un aspecto mejor que fotorealista.
• Los iconos tienen un tamaño máximo de 256 x 256 píxeles, por lo que son adecuados para pantallas de alto ppp (puntos por pulgada). Estos iconos de alta resolución permiten una alta calidad visual en las vistas de lista con iconos grandes.
• Siempre que sea práctico, los iconos fijos de documento se reemplazan por miniaturas del contenido, lo que facilita la identificación y la búsqueda de documentos.
• Los iconos de la barra de herramientas tienen menos detalles y ninguna perspectiva, para optimizar los tamaños más pequeños y la distinción visual.

Iconos bien diseñados:

• Mejore la comunicación visual del programa.
• Impacta fuertemente la impresión general de los usuarios del diseño visual del programa y apreciación por su ajuste y acabado.
• Mejore la facilidad de uso haciendo que los programas, los objetos y las acciones sean más fáciles de identificar, aprender y encontrar.

En las imágenes siguientes se muestra lo que hace que el estilo Aero de la iconografía en Windows Vista sea diferente del usado en Windows XP.

Los iconos de Windows Vista (el bloqueo y la tecla de la izquierda) son auténticos, nítidos y detallados. Se representan en lugar de dibujar, pero no son completamente fotorealistas.

Los iconos de Windows Vista (los dos a la izquierda) son profesionales y hermosos, con atención a los detalles que mejoran la calidad de producción de iconos.

Estos iconos de Windows Vista muestran equilibrio óptico y precisión percibido en perspectiva y detalles. Esto les permite parecer grandes o pequeños, cercanos o desde una distancia. Además, este estilo de iconografía funciona para pantallas de alta resolución.

Estos ejemplos muestran diferentes tipos de iconos, como un objeto tridimensional en perspectiva, un icono frontal (plano) y un icono de barra de herramientas.

Instrucciones

Perspectiva

• Los iconos de Windows Vista son tridimensionales y se muestran en perspectiva como objetos sólidos o objetos bidimensionales mostrados directamente. Use iconos planos para archivos y para objetos que sean realmente planos, como documentos o fragmentos de papel.

  

  Iconos 3D y planos típicos.

• Los objetos tridimensionales se representan en perspectiva como objetos sólidos, vistos desde una vista de pájaro baja con dos puntos de fuga.

  

  En este ejemplo se muestran puntos de perspectiva y fuga típicos de iconos 3D.

• En los tamaños más pequeños, el mismo icono puede cambiar de perspectiva a directo. En el tamaño de 16 x 16 píxeles y más pequeños, represente iconos directamente en línea (frontal). Para iconos más grandes, use la perspectiva.

  • Excepción: Los iconos de la barra de herramientas siempre están orientados hacia delante, incluso en tamaños más grandes.

  

  En este ejemplo se muestra cómo se trata el mismo icono de forma diferente, en función del tamaño.

Fuente de luz

• La fuente de luz de los objetos dentro de la cuadrícula de perspectiva está por encima, ligeramente delante de y ligeramente a la izquierda del objeto.
• La fuente de luz proyecta sombras ligeramente a la parte trasera y derecha de la base del objeto.
• Todos los rayos de luz son paralelos y golpean el objeto a lo largo del mismo ángulo (como el sol). El objetivo es tener una apariencia uniforme de iluminación en todos los iconos y efectos de foco. Los rayos de luz paralelos producen sombras que tienen la misma longitud y densidad, lo que proporciona una mayor unidad entre varios iconos.

Shadows

General

• Use sombras para levantar objetos visualmente desde el fondo y hacer que los objetos 3D aparezcan en tierra, en lugar de flotar de forma extraña en el espacio.

• Use un intervalo de opacidad de 30-50 por ciento para las sombras. A veces se debe usar un nivel diferente de sombra, dependiendo de la forma o el color de un icono.

• Pluma o acorte la sombra si es necesario, para evitar que sea recortada por el tamaño del cuadro de icono.

• No use sombras en iconos con tamaños de 24 x 24 o más pequeños.

  

  Sombras de icono típicas.

Iconos planos

• Los iconos planos se suelen usar para iconos de archivo y objetos reales planos, como un documento o una pieza de papel.
• La iluminación de iconos planos proviene de la parte superior izquierda a 130 grados.
• Los iconos más pequeños (por ejemplo, 16x16 y 32x32) se simplifican para mejorar la legibilidad. Sin embargo, si contienen un reflejo dentro del icono (a menudo simplificado), es posible que tengan una sombra de caída estrecha. Intervalos de sombras de caída en opacidad del 30 al 50 por ciento.
• Los efectos de la capa se pueden usar para iconos planos, pero deben compararse con otros iconos planos. Las sombras de los objetos variarán un poco, según lo que sea mejor y sea más coherente dentro del conjunto de tamaño y con los demás iconos de Windows Vista. En algunas ocasiones, incluso puede ser necesario modificar las sombras. Esto será especialmente cierto cuando los objetos se colocan sobre otros.
• Se puede usar un intervalo sutil de colores para lograr el resultado deseado. Las sombras ayudan a los objetos a sentarse en el espacio. El color afecta al peso percibido de la sombra y puede distorsionar la imagen si es demasiado pesada.

colocación

La opción Colocar sombra en el cuadro de diálogo Estilo de capa y una sombra típica para un icono plano.

Intervalos de sombras de iconos planos básicos

Característica	Intervalo
Color	Negro
Modo blend	Multiplicar
Opacidad	22-50 por ciento, dependiendo del color del elemento
Ángulo	120-130 (usar luz global)
Distancia	3 para 256 x 256, que van hasta 1 para 32 x 32
Propagación:	0
Size	7 para 256 x 256, que van hasta 2 para 32 x 32

Iconos tridimensionales

• Cree sombras para iconos 3D en mayúsculas y minúsculas, con un esfuerzo para ajustarse dentro de un intervalo de distancia de conversión y plumas a totalmente transparente. Cree las imágenes en un tamaño un poco más pequeño que las demandas de tamaño global del icono para permitir espacio para una sombra paralela (para esos tamaños que requerirán uno). Asegúrese de que la sombra no termina abruptamente en el borde del icono.

Estos ejemplos ayudan a demostrar las variaciones creadas en función de la forma y la posición del propio objeto. La sombra a veces debe ser emplumada o abreviada para evitar que sea recortada por el tamaño del cuadro de icono.

Color y saturación

• Los colores generalmente son menos saturados que los de Windows XP.

• Use degradados para crear una imagen de aspecto más realista.

• Aunque no hay ninguna paleta de colores específica para los iconos estándar, recuerde que necesitan trabajar bien en muchos contextos y temas. Preferir el conjunto estándar de colores; no vuelva a colorear los iconos estándar, como los iconos de advertencia, porque esto interrumpe la capacidad de los usuarios para interpretar el significado. Para obtener más instrucciones, consulte Color.

• Los archivos de icono también requieren versiones de paleta de 8 y 4 bits para admitir la configuración predeterminada en un escritorio remoto. Estos archivos se pueden crear a través de un proceso por lotes, pero deben revisarse, ya que algunos requerirán retoque para mejorar la legibilidad.

  

  No hay ninguna restricción estricta de paleta de colores. Solo se evita la saturación completa (superior derecha).

• Niveles de bits: diseño ICO para 32 bits (alfa incluido) + 8 bits + 4 bits (anclado automáticamente a píxeles solo más crítico). Solo se debe incluir una copia de 32 bits de la imagen de 256 x 256 píxeles y solo se debe comprimir la imagen de 256 x 256 píxeles para reducir el tamaño del archivo. Varias herramientas de icono ofrecen compresión para Windows Vista.

• Niveles de bits: barras de herramientas de 24 bits + alfa (máscara de 1 bits), 8 bits y 4 bits.

• Barras de herramientas o archivos AVI: use magenta (R255 G0 B255) como color de transparencia de fondo.

Requisitos de tamaño

General

• Preste especial atención a los iconos de alta visibilidad, como los iconos de aplicación principales, los iconos de archivo que pueden aparecer en el Explorador de Windows y los iconos que aparecen en el menú Inicio o en el escritorio.
  • Iconos de aplicación y elementos de Panel de control: el conjunto completo incluye 16x16, 32x32, 48x48 y 256x256 (el código se escala entre 32 y 256). Se requiere el formato de archivo .ico. Para el modo clásico, el conjunto completo es 16x16, 24x24, 32x32, 48x48 y 64x64.
  • Opciones de icono de elemento de lista: Use miniaturas dinámicas o iconos de archivo del tipo de archivo (por ejemplo, .doc); conjunto completo.
  • Iconos de la barra de herramientas: 16x16, 24x24, 32x32. Tenga en cuenta que los iconos de la barra de herramientas siempre son planos, no 3D, incluso en el tamaño 32x32.
  • Iconos de cuadro de diálogo y asistente: 32 x 32 y 48 x 48.
  • Superposiciones: Código de shell principal (por ejemplo, un acceso directo) 10x10 (para 16x16), 16x16 (para 32x32), 24x24 (para 48x48), 128x128 (para 256x256). Tenga en cuenta que algunos de ellos son ligeramente más pequeños, pero están cerca de este tamaño, dependiendo de la forma y el equilibrio óptico.
  • Área de inicio rápido: Los iconos se reducirán verticalmente de 48 x 48 en superposiciones dinámicas Alt+Tab, pero para una versión más nítida, agregue un archivo .ico de 40 x 40.
  • Iconos de globo: 32 x 32 y 40 x 40.
  • Tamaños adicionales: Son útiles para tener a mano como recursos para crear otros archivos (por ejemplo, anotaciones, franjas de barras de herramientas, superposiciones, ppp altos y casos especiales): 128x128, 96x96, 64x64, 40x40, 24x24, 22x22, 14x14, 10x10 y 8x8. Puede usar .ico, .png, .bmp u otros formatos de archivo, en función del código de esa área.

Para valores altos de ppp

• Windows Vista tiene como destino 96 ppp y 120 ppp.

En las tablas siguientes se muestran ejemplos de relaciones de escalado aplicadas a dos tamaños de icono comunes. Tenga en cuenta que no todos estos tamaños deben incluirse en el archivo .ico. El código reducirá verticalmente los más grandes.

ppp	Tamaño de icono	Factor de escala
96	16x16	1.0 (100%)
120	20x20	1.25 (125%)
144	24x24	1.5 (150%)
192	32x32	2.0 (200%)

ppp	Tamaño de icono	Factor de escala
96	32x32	1.0 (100%)
120	40x40	1.25 (125%)
144	48x48	1.5 (150%)
192	64x64	2.0 (200%)

Tamaños de archivo .ico (estándar)

Tamaños de archivo .ico (casos especiales)

Anotaciones y superposiciones

• Las anotaciones van en la esquina inferior derecha del icono y deben rellenar el 25 % del área del icono.
  • Excepción: los iconos de 16x16 toman 10 x 10 anotaciones.
• No use más de una anotación sobre un icono.
• Las superposiciones van en la esquina inferior izquierda del icono y deben rellenar el 25 % del área del icono.
  • Excepción: los iconos de 16x16 toman superposiciones de 10 x 10.

Nivel de detalle

• El tamaño de 16x16 de muchos de estos iconos sigue siendo ampliamente utilizado y, por tanto, es importante.

• Los detalles de un icono de este tamaño deben mostrar claramente el punto clave del icono.

• A medida que un icono es más pequeño, la transparencia y algunos detalles especiales que se encuentran en tamaños más grandes deben sacrificarse para simplificar y obtener el punto.

• Los atributos y colores deben exagerarse y usarse para resaltar las formas clave.

  

  En 16x16, el icono del dispositivo de audio portátil podría confundirse fácilmente con un teléfono móvil para que la pieza del oído sea un detalle visual clave para mostrar.

• Simplemente reducir verticalmente del tamaño de 256 x 256 no funciona.

• Todos los tamaños necesitan un nivel de detalle relevante; cuanto más pequeño sea el icono, más debe exagerar los detalles de definición.

  

  

Desarrollo de iconos

Diseño y producción de iconos

• Contrata un diseñador gráfico experimentado. Para que los gráficos, las imágenes y los iconos sean excelentes, trabajen con expertos. Se recomienda la experiencia en ilustraciones mediante el arte vectorial o programas 3D.
• Planee realizar series de iteraciones, desde bocetos de concepto iniciales hasta bocetos en contexto, hasta la revisión final de producción y ajuste y acabado de iconos en el producto de trabajo.
• Pensar en la creación de iconos puede ser costoso. Recopile todos los detalles y requisitos existentes, como: el conjunto completo de iconos necesarios; la función principal y el significado de cada uno; familias o clústeres en el conjunto que desea que sea evidente; requisitos de marca; los nombres de archivo exactos; formatos de imagen usados en el código; y requisitos de tamaño. Asegúrese de que puede aprovechar al máximo su tiempo con el diseñador.
• Recuerde que es posible que el diseñador no esté familiarizado con el producto, así que proporcione información funcional, capturas de pantalla y secciones de especificación, según corresponda.
• Planee revisiones geopolíticas y legales según corresponda.
• Asigne un período de tiempo y tenga comunicación regular.

Desde el boceto conceptual hasta el producto final

• Crear bocetos de concepto.
• Pruebe el concepto en diferentes tamaños.
• Se representa en 3D si es necesario.
• Tamaños de prueba en diferentes colores de fondo.
• Evalúe los iconos en el contexto de la interfaz de usuario real.
• Genere el archivo .ico final u otros formatos de recursos gráficos.

Herramientas

• Lápiz y papel: Ideas iniciales de concepto, enumeradas y croquisadas.
• 3D Studio Max: Representar objetos 3D en perspectiva.
• Adobe Photoshop: Dibujar e iterar, simular en contexto y finalizar los detalles.
• Adobe Illustrator/ Macromedia Freehand: Croquis e iteración, finalice los detalles.
• Gamani Gif Movie Gear: Genere el archivo .ico (con compresión si es necesario).
• Taller de iconos axiales: Genere el archivo .ico (con compresión si es necesario).
• Microsoft Visual Studio no admite iconos de Windows Vista (no hay compatibilidad con el canal alfa o más de 256 colores).

Producción

Sugerencia

Siga estos pasos para crear un único archivo .ico que contenga varios tamaños de imagen y profundidades de color.

Paso 1: Conceptualizar

• Use los conceptos establecidos siempre que sea posible, para garantizar la coherencia de los significados del icono y su relevancia con otros usos.
• Tenga en cuenta cómo aparecerá el icono en el contexto de la interfaz de usuario y cómo podría funcionar como parte de un conjunto de iconos.
• Si revisa un icono existente, considere si se puede reducir la complejidad.
• Tenga en cuenta el impacto cultural de sus gráficos. Evite usar letras, palabras, manos o caras en iconos. Representa las representaciones de personas o usuarios de la forma más genérica posible, si es necesario.
• Si combina varios objetos en una sola imagen en un icono, considere cómo se escalará la imagen a tamaños más pequeños. No use más de tres objetos en un icono (se prefieren dos). Para el tamaño de 16 x 16, considere la posibilidad de quitar objetos o simplificar la imagen para mejorar el reconocimiento.
• No use la marca de Windows en los iconos.

Paso 2: Ilustración

• Para ilustrar iconos de estilo Aero de Windows, use una herramienta vectorial como Macromedia Freehand o Adobe Illustrator. Use las características de paleta y estilo, como se describió anteriormente en este artículo.
• Ilustración de la imagen mediante Freehand o Illustrator. Copie y pegue las imágenes vectoriales en Adobe Photoshop.
• Realice y use una capa de plantilla en Photoshop para asegurarse de que el trabajo se realiza dentro de las regiones cuadradas de los tamaños regulados.
• Cree las imágenes en un tamaño un poco menor que las demandas generales de tamaño de icono para permitir espacio para una sombra paralela (para esos tamaños que requieren uno).
• Coloque imágenes en la parte inferior de los cuadrados, de modo que todos los iconos de un directorio se coloquen de forma coherente. Evite cortar sombras.
• Si va a agregar otro objeto a una imagen o a una serie, mantenga el objeto principal en una posición fija y coloque imágenes planas de tamaño más pequeño en una posición fija, como la inferior izquierda o la esquina superior derecha en función del caso.

Paso 3: Crear las imágenes de 24 bits

• Una vez que haya pegado tamaños en Photoshop, compruebe la legibilidad de las imágenes, especialmente en tamaños de 16 x 16 y más pequeños. Es posible que se requiera el uso de píxeles mediante porcentajes de colores. También puede ser necesaria la reducción de la transparencia. Es habitual exagerar aspectos en tamaños más pequeños y eliminar también aspectos, con el fin de centrarse en el punto clave.
• Los iconos de 8 bits se mostrarán en cualquier modo de color inferior a 32 bits y no tendrán el canal alfa de 8 bits, por lo que es posible que necesiten tener sus bordes o más limpios porque no hay ningún suavizado de contorno (los bordes pueden ser escalonados y la imagen puede ser difícil de leer).
• En Photoshop, duplica la capa de imagen de 24 bits y cambia el nombre de la capa a imágenes de 4 bits. Indexe imágenes de 4 bits a la paleta de colores de Windows 16.
• Limpie las imágenes usando solo los colores de la paleta de colores 16. Los contornos hechos a partir de versiones más oscuras o más claras de los colores del objeto suelen ser preferibles a gris o negro.
• Si trabaja en un mapa de bits, asegúrese de que el color de fondo no se usa en la propia imagen, ya que ese color será el color transparente. Magenta (R255 G0 B255) se usa a menudo como color de transparencia de fondo.

Paso 4: Crear las imágenes de 8 y 4 bits

• Ahora que las imágenes de 24 bits están listas para crearse en iconos de 32 bits, es necesario crear versiones de 8 bits.
• Este es un buen momento para probar capturas de pantalla contextuales. Es increíble lo que se puede descubrir viendo otros iconos o una familia de iconos en contexto. Este paso puede ahorrar tiempo y dinero. Es mucho mejor detectar problemas antes de que los archivos pasen por producción y se entreguen.
• Agregue la sombra de colocación a las imágenes en tamaños que las requieran.
• Combine la sombra de colocación y las imágenes de 24 bits juntas.
• Cree un nuevo archivo de Photoshop para cada tamaño. Copie y pegue la imagen adecuada. Guarde cada archivo como un archivo .psd.
• No combine la capa de imagen con la capa de fondo. Resulta útil incluir el tamaño y la profundidad de color en el nombre de archivo mientras trabaja, pero es posible que el archivo tenga que cambiar el nombre.

Paso 5: Crear el archivo .ico

• Elija la aplicación que mejor se adapte a las necesidades y habilidades de los artistas. Recuerde que los iconos que se van a usar en un producto de envío deben crearse en una herramienta que se haya adquirido o con licencia. Esto significa que no se pueden usar versiones de prueba.
• Los diseñadores que han producido iconos para Windows Vista han utilizado ambos productos que se enumeran a continuación, y cada uno ofrece la posibilidad de exportar a Adobe Photoshop CS.
  • Gamani Gif Movie Gear: Produce el archivo .ico
  • Taller de iconos axiales: Producir archivo .ico
• Visual Studio no admite iconos de Windows Vista (no hay compatibilidad con el canal alfa o más de 256 colores), por lo que no se recomienda su uso.
• Los archivos de icono (formato .ico) deben contener las versiones de 4 y 8 bits, así como el alfa de 24 bits.
• Guarde los archivos como un "icono de Windows (.ico)", independientemente del programa de creación de iconos que elija usar.
• Algunos recursos iconográficos pueden ser en realidad franjas de mapa de bits, que también requieren un canal alfa (por ejemplo, para barras de herramientas) o .png archivos guardados con transparencia. No todos son necesariamente formato .ico; compruebe qué formato se admite en el código.

Paso 6: Evaluar

• Mira todos los tamaños.
• Mira juntos a la familia para evaluar la similitud familiar, el equilibrio óptico y la distinción.
• Examine en contexto para evaluar los pesos relativos y la visibilidad (asegúrese de que uno no domina).
• Tenga en cuenta los casos que no se pueden usar ahora, pero podrían estar en un futuro próximo. ¿Podría anotarse este icono o tener una superposición?
• Mire en el código.

Iconos en el contexto de vistas de lista, barras de herramientas y vistas de árbol

Vistas de lista

• Para Windows Vista, usa miniaturas para archivos que contienen contenido que es visualmente distinto a pequeña escala, de modo que los usuarios puedan reconocer directamente el archivo que están buscando. (Use la interfaz de programación de aplicaciones de miniaturas de Windows para esto).

  

• Las superposiciones de icono de aplicación (no se muestran aquí) en miniaturas ayudan a asociarse con la aplicación para el tipo de archivo, además de mostrar la vista previa del archivo.

Nota: En el caso de los archivos sin contenido visualmente distinto, no use miniaturas. En su lugar, use iconos de archivo simbólico tradicionales que muestren la representación del objeto y la aplicación o el tipo asociados.

Barras de herramientas

• Los iconos que aparecen en una barra de herramientas deben tener un equilibrio óptico en tamaño, color y complejidad.
• Pruebe los posibles iconos en una captura de pantalla contextual para evitar cualquier dominación o desequilibrio no deseados.
• Las pruebas en capturas de pantalla ayudan fácilmente a evitar iteraciones costosas en el código.
• Revise también los iconos en el código. El movimiento y otros factores pueden afectar al éxito de un icono; en algunos casos se pueden necesitar iteraciones adicionales.

En el ejemplo anterior, aún no se ha logrado el equilibrio óptico.

Pruebe las iteraciones en contexto.

Vistas de árbol

• El equilibrio óptico es necesario para conservar la jerarquía en un control de vista de árbol.
• Por lo tanto, los iconos que se usan normalmente en este contexto deben evaluarse allí. A veces, un icono de 16x16 determinado debe ser más pequeño porque su forma tiene una dominación óptica sobre otros.
• La compensación por desequilibrios ópticos es una parte importante de la producción de iconos de alta calidad.