Iconos - Icons

Los íconos son representaciones pictóricas de objetos, importantes no solo por razones estéticas como parte de la identidad visual de un programa, sino también por razones utilitarias como taquigrafía para transmitir el 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 pautas relacionadas con los iconos estándar se presentan en un artículo separado.

Conceptos de diseño

Aero es el nombre de la experiencia de usuario de Windows Vista, que representa tanto los valores incorporados en el diseño de la estética como la visión detrás de la interfaz de usuario (UI). Aero significa: auténtico, energético, reflexivo y abierto. Aero tiene como objetivo establecer un diseño que sea a la vez profesional y hermoso. La estética Aero crea una experiencia elegante y de alta calidad que facilita la productividad del usuario e incluso genera 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 del todo fotorrealista. ¡Los iconos son imágenes simbólicas que deberían verse mejor que fotorrealistas!
• Los íconos tienen un tamaño máximo de 256x256 píxeles, lo que los hace adecuados para pantallas de alto dpi (puntos por pulgada). Estos iconos de alta resolución permiten una alta calidad visual en vistas de lista con iconos grandes.
• Siempre que sea práctico, los íconos de documentos fijos se reemplazan por miniaturas del contenido, lo que hace que los documentos sean más fáciles de identificar y encontrar.
• Los iconos de la barra de herramientas tienen menos detalles y no tienen perspectiva, para optimizar tamaños más pequeños y distintivo visual.

Iconos bien diseñados:

• Mejora la comunicación visual de tu programa.
• Impacte fuertemente la impresión general de los usuarios del diseño visual de su programa y aprecie su ajuste y acabado.
• Mejore la facilidad de uso al hacer que los programas, objetos y acciones sean más fáciles de identificar, aprender y encontrar.

Las siguientes imágenes muestran lo que hace que el estilo de iconografía Aero en Windows Vista sea diferente del que se usa en Windows XP.

Los iconos de Windows Vista (el candado y la llave de la izquierda) son auténticos, nítidos y detallados. Se representan en lugar de dibujarse, pero no son completamente fotorrealistas.

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

Estos iconos de Windows Vista muestran el equilibrio óptico y la precisión percibida en perspectiva y detalles. Esto les permite verse grandes o pequeños, de cerca 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, incluido un objeto tridimensional en perspectiva, un icono frontal (plano) y un icono de la barra de herramientas.

Pautas

Perspectiva

• Los íconos en Windows Vista son tridimensionales y se muestran en perspectiva como objetos sólidos u objetos bidimensionales que se muestran directamente. Use íconos planos para archivos y objetos que en realidad son planos, como documentos o pedazos de papel.

  

  Iconos típicos 3D y planos.

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

  

  Este ejemplo muestra la perspectiva y los puntos de fuga típicos de los iconos 3D.

• En los tamaños más pequeños, el mismo icono puede cambiar de perspectiva a directo. Con un tamaño de 16x16 píxeles y más pequeño, los iconos aparecen en línea recta (frente a frente). Para iconos más grandes, usa la perspectiva.

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

  

  Este ejemplo muestra cómo se trata el mismo icono de manera diferente, según el tamaño.

Fuente de luz

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

Oscuridad

General

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

• Use un rango de opacidad del 30-50 por ciento para las sombras. En ocasiones, se debe utilizar un nivel de sombra diferente, según la forma o el color de un icono.

• Rellene o acorte la sombra si es necesario, para evitar que se recorte por el tamaño del cuadro del icono.

• No uses sombras en íconos de tamaños 24x24 o más pequeños.

  

  Icono típico de sombras.

Iconos planos

• Los iconos planos se utilizan generalmente para los iconos de archivo y los objetos planos del mundo real, como un documento o un papel.
• La iluminación del ícono plano proviene de la parte superior izquierda a 130 grados.
• Los iconos más pequeños (por ejemplo, 16x16 y 32x32) se simplifican para facilitar la lectura. Sin embargo, si contienen un reflejo dentro del ícono (a menudo simplificado), pueden tener una sombra pequeña. La sombra paralela varía en opacidad de 30 a 50 por ciento.
• Los efectos de capa se pueden usar para iconos planos, pero se deben comparar con otros iconos planos. Las sombras para los objetos variarán un poco, de acuerdo con lo que se ve mejor y es más consistente dentro del tamaño establecido y con los otros íconos en 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 utilizar una gama sutil de colores para lograr el resultado deseado. Las sombras ayudan a los objetos a sentarse en el espacio. El color impacta el peso percibido de la sombra y puede distorsionar la imagen si es demasiado pesada.

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

Rangos de sombra de iconos planos básicos

Característica	Distancia
Color	Negro
Modo de mezcla	Multiplicar
Opacidad	22-50 por ciento, dependiendo del color del artículo.
Ángulo	120-130 (usa luz global)
Distancia	3 para 256x256, hasta 1 para 32x32
Untado	0
tamaño	7 para 256x256, hasta 2 para 32x32

Iconos tridimensionales

• Cree sombras para los iconos en 3D caso por caso, con un esfuerzo por ajustarse dentro de un rango de distancia de lanzamiento y de forma totalmente transparente. Cree las imágenes en un tamaño un poco más pequeño que lo que exige el tamaño total del icono para dejar espacio para una sombra (para aquellos tamaños que lo requieran). Asegúrese de que la sombra no termine 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 objeto en sí. En ocasiones, la sombra debe estar acolchada o acortada para evitar que sea recortada por el tamaño del cuadro del icono.

Color y saturación.

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

• Usa gradientes para crear una imagen más realista.

• Aunque no hay una paleta de colores específica para los iconos estándar, recuerde que deben funcionar bien juntos en muchos contextos y temas. Prefiere el conjunto estándar de colores; no vuelva a colorear los iconos estándar, como los iconos de advertencia, porque esto altera la capacidad de los usuarios para interpretar el significado. Para más pautas, vea Color .

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

  

  No hay restricción estricta de la paleta de colores. Sólo se evita la saturación completa (arriba a la derecha).

• Niveles de bits: diseño ICO para 32 bits (alfa incluido) + 8 bits + 4 bits (atenuado automáticamente pixel poke, solo el más crítico). Solo se debe incluir una copia de 32 bits de la imagen de 256x256 píxeles, y solo la imagen de 256x256 píxeles debe estar comprimida para mantener el tamaño del archivo hacia abajo. Varias herramientas de iconos ofrecen compresión para Windows Vista.

• Niveles de bits: barras de herramientas 24 bits + alfa (máscara de 1 bit), 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 principales de la aplicación, los iconos de archivos que pueden aparecer en el Explorador de Windows y los iconos que aparecen en el Menú de Inicio o en el escritorio.
  • Iconos de aplicaciones y elementos del Panel de control: el conjunto completo incluye 16x16, 32x32, 48x48 y 256x256 (escalas de código entre 32 y 256). El formato de archivo .ico es obligatorio. Para el modo clásico, el conjunto completo es 16x16, 24x24, 32x32, 48x48 y 64x64.
  • Opciones de iconos de elementos de la lista: usar miniaturas en vivo o iconos de archivos del tipo de archivo (por ejemplo, .doc); juego 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 diálogo y asistente: 32x32 y 48x48.
  • Superposiciones: código del shell Core (por ejemplo, un acceso directo) 10x10 (para 16x16), 16x16 (para 32x32), 24x24 (para 48x48), 128x128 (para 256x256). Tenga en cuenta que algunos de estos son un poco más pequeños pero están cerca de este tamaño, dependiendo de la forma y el balance óptico.
  • Área de inicio rápido: los íconos se reducirán de 48x48 en las superposiciones dinámicas Alt + Tab, pero para una versión más nítida, agregue un archivo de 40x40 a .ico.
  • Iconos de globo: 32x32 y 40x40.
  • Tamaños adicionales: son útiles para tener a mano como recursos para crear otros archivos (por ejemplo, anotaciones, tiras de barra de herramientas, superposiciones, ppp alto y casos especiales): 128x128, 96x96, 64x64, 40x40, 24x24, 22x22, 14x14, 10x10 , y 8x8. Puede usar .ico, .png, .bmp u otros formatos de archivo, según el código en esa área.

Para alta dpi

• Windows Vista apunta a 96 dpi y 120 dpi.

Las siguientes tablas muestran ejemplos de proporciones de escala aplicadas a dos tamaños de iconos comunes. Tenga en cuenta que no todos estos tamaños deben incluirse en el archivo .ico. El código reducirá los más grandes.

ppp	Tamaño de ícono	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 ícono	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 archivos .ico (estándar)

Tamaños de archivos .ico (casos especiales)

Anotaciones y superposiciones.

• Las anotaciones van en la esquina inferior derecha del ícono y deben llenar el 25 por ciento del área del ícono.
  • Excepción: los iconos 16x16 toman 10x10 anotaciones.
• No utilice más de una anotación sobre un icono.
• Las superposiciones van en la esquina inferior izquierda del ícono y deben llenar el 25 por ciento del área del ícono.
  • Excepción: los iconos 16x16 toman superposiciones 10x10.

Nivel de detalle

• El tamaño 16x16 de muchos de estos iconos todavía se usa ampliamente y, por lo tanto, es importante.

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

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

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

  

  En 16x16, el ícono del dispositivo de audio portátil podría confundirse fácilmente con un teléfono celular, por lo que el auricular es un detalle visual clave para mostrar.

• La simple reducción del tamaño de 256x256 no funciona.

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

  

  

Desarrollo de iconos

Diseñando y produciendo iconos.

• Contrata a un diseñador gráfico experimentado. Para grandes gráficos, imágenes, e iconos trabajan con expertos. Se recomienda la experiencia en ilustraciones utilizando arte vectorial o programas 3D.
• Planee hacer series de iteraciones, desde bocetos conceptuales iniciales, hasta maquetas en contexto, hasta la revisión de la producción final y el ajuste y acabado de los iconos en el producto de trabajo.
• La creación de iconos de pensar por adelantado puede ser costosa. Reúna todos los detalles y requisitos existentes, tales como: el conjunto completo de iconos necesarios; La función principal y el significado de cada uno; familias o grupos en el conjunto que desea que sea evidente; requisitos de marca; los nombres de archivo exactos; formatos de imagen utilizados en su código; y requisitos de tamaño. Asegúrese por adelantado de que puede aprovechar al máximo su tiempo con el diseñador.
• Recuerde que el diseñador puede no estar familiarizado con su producto, así que proporcione información funcional, capturas de pantalla y secciones de especificaciones, según corresponda.
• Plan de revisiones geopolíticas y legales según corresponda.
• Haga un mapa de tiempo y tenga una comunicación regular.

Desde el boceto del concepto hasta el producto final.

• Crear bocetos conceptuales.
• Probar el concepto en diferentes tamaños.
• Render en 3D si es necesario.
• Tamaños de prueba en diferentes colores de fondo.
• Evaluar iconos en el contexto de la interfaz de usuario real.
• Produce el archivo .ico final u otros formatos de recursos gráficos.

Herramientas

• Lápiz y papel: Conceptos iniciales, listados y bosquejados.
• 3D Studio Max: renderiza objetos 3D en perspectiva.
• Adobe Photoshop: dibuje e itere, realice una maqueta en contexto y finalice los detalles.
• Adobe Illustrator / Macromedia Freehand: dibuje e itere, finalice los detalles.
• Gamani Gif Movie Gear: Produce un archivo .ico (con compresión si es necesario).
• Axialis Icon Workshop: Produce un archivo .ico (con compresión si es necesario).
• Microsoft Visual Studio no admite los iconos de Windows Vista (no hay soporte para el canal alfa o más de 256 colores).

Producción

Paso 1: Conceptualizar

• Utilice conceptos establecidos cuando sea posible, para garantizar la coherencia de los significados para el icono y su relevancia para otros usos.
• Considere cómo aparecerá el icono en el contexto de la IU y cómo podría funcionar como parte de un conjunto de iconos.
• Si está revisando un ícono existente, considere si la complejidad puede reducirse.
• Considera el impacto cultural de tus gráficos. Evite usar letras, palabras, manos o caras en los íconos. Represente 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 ícono, considere cómo la imagen se escalará a tamaños más pequeños. No utilice más de tres objetos en un icono (se prefieren dos). Para el tamaño 16x16, considere eliminar objetos o simplificar la imagen para mejorar el reconocimiento.
• No utilice la bandera de Windows en los iconos.

Paso 2: ilustrar

• Para ilustrar los iconos de estilo de Windows Aero, use una herramienta vectorial como Macromedia Freehand o Adobe Illustrator. Use la paleta y las características de estilo como se describió anteriormente en este artículo.
• Ilustrar imagen utilizando Freehand o Illustrator. Copia y pega las imágenes vectoriales en Adobe Photoshop.
• Cree y use una capa de plantilla en Photoshop para asegurarse de que el trabajo se realice dentro de las regiones cuadradas de los tamaños regulados.
• Cree las imágenes en un tamaño un poco más pequeño que lo que exige el tamaño total del icono para dejar espacio para una sombra (para aquellos tamaños que lo requieran).
• Coloque las imágenes en la parte inferior de los cuadrados, de modo que todos los íconos de un directorio se coloquen de manera consistente. Evita cortar sombras.
• Si está agregando otro objeto a una imagen o 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 parte inferior izquierda o superior derecha, según el caso.

Paso 3: Crea las imágenes de 24 bits.

• Una vez que haya pegado tamaños en Photoshop, verifique la legibilidad de las imágenes, especialmente en tamaños de 16x16 y más pequeños. Es posible que se requiera el uso de píxeles con porcentajes de colores. También puede ser necesaria la reducción de la transparencia. Es común exagerar aspectos en tamaños más pequeños y también eliminar aspectos para enfocar 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 deban limpiar sus bordes o más porque no hay suavizado (los bordes pueden estar irregular y la imagen puede ser difícil de leer).
• En Photoshop, duplique la capa de imagen de 24 bits y cambie 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 utilizando solo los colores de la paleta de 16 colores. Los contornos hechos de versiones más oscuras o más claras de los colores del objeto suelen ser preferibles a los grises o negros.
• Si está trabajando en un mapa de bits, asegúrese de que el color de fondo no se usa en la imagen en sí, porque ese color será el color transparente. Magenta (R255 G0 B255) se utiliza a menudo como color de transparencia de fondo.

Paso 4: Crea las imágenes de 8 y 4 bits.

• Ahora que las imágenes de 24 bits están listas para convertirse en íconos de 32 bits, es necesario crear versiones de 8 bits.
• Este es un buen momento para probar capturas de pantalla contextuales. Es sorprendente lo que se puede descubrir al ver otros íconos o una familia de íconos en contexto. Este paso puede ahorrar tiempo y dinero. Es mucho mejor detectar problemas antes de que los archivos pasen por la producción y se entreguen.
• Agregue la sombra a sus imágenes en tamaños que las requieran.
• Combine la sombra paralela y las imágenes de 24 bits juntas.
• Crea un nuevo archivo de Photoshop para cada tamaño. Copia y pega la imagen apropiada. Guarde cada archivo como un archivo .psd.
• No fusione la capa de imagen con la capa de fondo. Es útil incluir el tamaño y la profundidad del color en el nombre del archivo mientras se trabaja, pero en última instancia es posible que deba cambiar el nombre del archivo.

Paso 5: Crea el archivo .ico

• Elija la aplicación que mejor se adapte a las necesidades y habilidades de los artistas. Recuerde que los íconos que se utilizarán en un producto de envío deben crearse en una herramienta que haya sido comprada o licenciada. Esto significa que las versiones de prueba no se pueden utilizar.
• Los diseñadores que han producido íconos para Windows Vista han utilizado los dos productos enumerados a continuación, y cada uno ofrece la posibilidad de exportar a Adobe Photoshop CS.
  • Gamani Gif Movie Gear: Produce archivo .ico
  • Axialis Icon Workshop: Produce archivo .ico
• Visual Studio no es compatible con los íconos de Windows Vista (no hay soporte para 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 la alfa de 24 bits.
• Guarde los archivos como un "ícono de Windows (.ico)" sin importar qué programa de creación de íconos elija utilizar.
• Algunos activos iconográficos pueden ser, en realidad, tiras de mapa de bits, que también requieren un canal alfa (por ejemplo, para barras de herramientas), o archivos .png guardados con transparencia. No todos son necesariamente formato .ico; verifique qué formato es compatible con el código.

Paso 6: Evaluar

• Mira todos los tamaños.
• Miren a la familia juntos para evaluar el parecido familiar, el equilibrio óptico y la distinción.
• Mire en contexto para evaluar los pesos relativos y la visibilidad (asegúrese de que uno no domine).
• Tenga en cuenta los casos que no se pueden utilizar ahora, pero podrían estar en un futuro próximo. ¿Podría este icono ser anotado o tener una superposición?
• Mira 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, use miniaturas para archivos que contengan contenido visualmente distinto a pequeña escala, de modo que los usuarios puedan reconocer directamente el archivo que están buscando. (Utilice la interfaz de programación de la aplicación Windows Thumbnailing para esto).

  

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

Nota: para archivos sin contenido visualmente distinto, no use miniaturas. En su lugar, use los iconos de archivos simbólicos tradicionales que muestran la representación de objetos y la aplicación o tipo asociado.

Barras de herramientas

• Los iconos que aparecen en una barra de herramientas deben tener un balance óptico en tamaño, color y complejidad.
• Pruebe los íconos potenciales en una captura de pantalla contextual para evitar dominios o desequilibrios no deseados.
• Probar en capturas de pantalla fácilmente ayuda a evitar costosas iteraciones en el código.
• Revise los iconos en el código también. El movimiento y otros factores pueden afectar el éxito de un icono; en algunos casos pueden ser necesarias otras iteraciones.

En el ejemplo anterior, el balance óptico aún no se ha alcanzado.

Probar iteraciones en contexto.

Vistas de arbol

• El balance óptico es necesario para preservar la jerarquía en un control de vista de árbol.
• Por lo tanto, los íconos que normalmente se usan en este contexto deben ser evaluados allí. A veces, un icono 16x16 en particular debe hacerse más pequeño porque su forma tiene un dominio óptico sobre los demás.
• La compensación por desequilibrios ópticos es una parte importante de la producción de íconos de alta calidad.

 

 

Referencias

Microsoft - Iconos - Icons