Íconos de diálogo

Los íconos de diálogo aparecen en los cuadros de diálogo emergentes que solicitan interacción al usuario. Usan un gradiente de luz y una sombra interior para destacarse sobre un fondo oscuro.

Como se describe en Cómo proporcionar conjuntos de íconos específicos de densidad, debes crear conjuntos de íconos separados para pantallas de baja, media y alta densidad. Esto garantiza que tus íconos se muestren correctamente en todos los dispositivos en los que se puede instalar tu aplicación. Consulta la tabla 1 para obtener una lista de los tamaños de íconos terminados recomendados para cada densidad. Además, consulta Sugerencias para diseñadores si quieres obtener sugerencias sobre cómo trabajar con varios conjuntos de íconos.

Tabla 1: Resumen de las dimensiones de los íconos de diálogo terminados para cada una de las tres densidades de pantalla generalizadas

	ldpi (120 dpi) (Pantalla de baja densidad)	mdpi (160 dpi) (Pantalla de densidad media)	hdpi (240 dpi) (Pantalla de alta densidad)	xhdpi (320 dpi) (Pantalla de densidad extraalta)
Tamaño del ícono de diálogo	24 × 24 px	32 × 32 px	48 × 48 px	64 × 64 px

La imagen final debe exportarse como un archivo PNG transparente. No incluyas un color de fondo.

Las plantillas para crear íconos en Adobe Photoshop están disponibles en el Paquete de plantillas de íconos.

Todas las versiones de Android

En los siguientes lineamientos, se describe cómo diseñar íconos de diálogo para todas las versiones de la plataforma de Android.

Estructura

• Los íconos de diálogo tienen un SafeFrame de 1 píxel. La forma de la base debe caber dentro del SafeFrame, pero el suavizado de una forma redonda puede superponerse con él.
• Todas las dimensiones especificadas en esta página se basan en un tamaño de mesa de trabajo de 32 x 32 píxeles en Adobe Photoshop. Mantén 1 píxel de padding alrededor del cuadro delimitador dentro de la plantilla de Photoshop.

Figura 1: SafeFrame y gradiente de relleno para los íconos de diálogo. El tamaño del ícono es de 32 x 32

Luz, efectos y sombras

Los íconos de diálogo son planos y se muestran de frente. Para destacarse contra un fondo oscuro, se crean con un gradiente de luz y una sombra interior.

Figura 2: Luz, efectos y sombras para los íconos de diálogo 1. Parte frontal: superposición de gradiente | ángulo de 90° inferior: r 223 | g 223 | b 223 superior: r 249 | g 249 | b 249 ubicación del color inferior: 0% ubicación del color superior: 75% 2. Sombra interior: negro | opacidad del 25% | ángulo de -90° | distancia de 1 px | tamaño de 0 px

Paso a paso Crea las formas básicas con una herramienta como Adobe Illustrator. Importa la forma a una herramienta como Adobe Photoshop y escálala para que se ajuste a una imagen de 32 x 32 px en un fondo transparente. Agrega los efectos que aparecen en la figura 2 para lograr el filtro adecuado. Exporta el ícono a 32 x 32 como un archivo PNG con transparencia habilitada.