Algo muy importante en las aplicaciones que realizamos para Windows es el tema de los iconos. Dependiendo del uso el icono se escalará para acoplarlo en el marco de visualización que se encuentre, es decir, no es lo mismo el icono de nuestra aplicación que se muestra en el escritorio que el icono que se muestra cuando anclamos un programa en la barra de tareas en Windows 7. Los tamaños son diferentes, por eso es interesante saber el tamaño real de los iconos para diseñar un icono para cada situación.
En el siguiente esquema se muestran las medidas de diferentes iconos que se muestran en Windows XP, Windows 7. Todas las medidas se dan en píxeles.
- Windows XP
- Explorador
- Detalles / Lista: 16 x 16
- Icono: 32 x 32
- Tiles / Thumbnails: 48 x 48
- Botón-derecho -> Propiedades / Cambiar icono: 32 x 32
- Accesos directos de la barra de tareas: 16 x 16
- Escritorio: 32 x 32
- Explorador
- Windows 7
- Explorador
- Detalles / Lista / Iconos pequeños: 16 x 16
- El resto de opciones: 256 x 256
- Botón-derecho -> Propiedades / Cambiar icono: 32 x 32
- Anclado a la barra de tareas: 32 x 32
- Botón-decheo-menu: 16 x 16
- Escritorio
- Iconos pequeños: 16 x 16
- Iconos medianos: 48 x 48
- Iconos grandes: 256 x 256
- Haciendo zoom con Ctrl+Rueda ratón: 16 x 16, 32 x 32, 48 x 48, 256 x 256
- Explorador
Bueno, como podéis comprobar hay multitud de tamaños según su uso y sistema operativo. A continuación os dejo un resumen de todos los tamaños posibles de nuestro icono.
- 16 x 16
- 32 x 32
- 48 x 48
- 256 x 256
Por lo tanto, lo primero es tener nuestro icono en estos tamaños. Supongamos que tenemos un archivo .png. Creamos los 4 iconos a los tamaños indicados. Con estos cuatro iconos vamos a crear un icono .icon con multi-resolución. Esto quiere decir que dentro de un mismo archivo .ico vamos a meter los cuatro iconos con las cuatro resoluciones. Cuando Windows acceda a la información del icono, mostrará el icono que corresponda según su tamaño. Es una solución fácil y sencilla que nos permite dar un aspecto profesional a nuestras aplicaciones de escritorio. De otra manera, si solo tenemos un icono a una resolución más baja de la que se muestra, el icono se distorsionaría.
La manera más fácil y económica de generar el .ico multi-resolución es a través de GIMP (GNU Image Manipulation Program), que como su propio nombre indica es un software para el tratamiento de imágenes digitales gratuito. Si no lo conocéis descargarlo y probar, realmente merece la pena.
Una vez que tenemos instalado el GIMP estos son los pasos a seguir para crear nuestro maravilloso icono multi-resolución.
- Abrimos el GIMP y abrimos la imagen que queremos utilizar como icono.
Si la imagen no es cuadrada, puedes hacer un escalado desde Imagen -> Escalado de imagen… y luego recortar para que sea totalmente cuadrada desde Imagen -> Tamaño del lienzo… Recuerda que nuestro tamaño máximo será de 256 x 256 así que este el tamaño que tiene que tener nuestra primera imagen para escalar a los diferentes tamaños. Una vez tenemos la imagen preparada a 256 x 256 la guardamos como icono256.png . Cuando la tenemos guardada volvemos a escalar la imagen a 48 x 48 y guardamos la imagen como icono48.png y así sucesivamente con 32 x 32 y 16 x 16.
Ya tenemos preparado nuestro set de iconos con los diferentes tamaños, solo nos fata crear nuestro icono multi-resolución para nuestra aplicación. Abrimos en el GIMP el archivo con mayor resolución icono256.png. Una vez abierto vamos a la opción Archivo -> Abrir como capas… y seleccionamos todos los archivos menos el icono256.png. Esto nos abrirá dentro del archivo icono256.png el resto de imágenes separadas por capas.
Por último solo debemos exportar la imagen resultante, la que contiene una capa por resolución, como un archivo .ico y ya tendríamos nuestro icono multi-resolución. GIMP nos muestra un resumen de como queda el archivo con las diferentes imágenes a diferentes resoluciones.
Pues así de fácil y sencillo es dar una apariencia profesional a nuestras aplicaciones.
