Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

  • Inicio >
  • Blog >
  • Iconos de aplicación e imágenes por defecto en iOS

Iconos de aplicación e imágenes por defecto en iOS

22 Jun 2012 por Cruz

Comentarios: 0

iOS

Vivimos en una época en la que la apariencia es importante, nos guste o no, todo el mundo se hace una opinión a partir de la apariencia y sobre todo de la primera impresión. En el mundo de las aplicaciones no es distinto, si tenemos una aplicación muy buena, pero con una imagen poco cuidada, corremos el riesgo de que algunos usuarios ni se molesten en probarla por pensar que es cutre o que la prueben partiendo de una valoración baja.

Lo primero que verá un posible usuario de nuestras aplicaciones para iPhone/iPad es el icono que aparece en App Store. Para asegurarnos una visualización óptima, es aconsejable utilizar las herramientas que nos ofrece Apple para optimizar los iconos.

De la misma forma, existe la posibilidad de configurar una imagen por defecto que será la que se vea en la aplicación mientras se carga.

En este artículo describiremos los distintos formatos que se deben usar para estas dos imágenes.

Iconos de aplicación

Antes de diseñar los iconos es recomendable leer la guía de Apple en la que encontraremos información tan útil como las zonas de seguridad que se deben dejar en cada borde, que no es necesario redondear las esquinas o que se crea automáticamente el reflejo.

Volviendo a los formatos, Apple nos permite diseñar un icono para cada una de las situaciones en las que se va a mostrar. Los iconos deben ser siempre .png y lo que varía son las dimensiones.

En el Info.plist existe una propiedad CFBundleIcons que nos permite decidir el nombre que usaremos para el fichero. Si modificamos esta propiedad para poner "MiIcono" los ficheros que creemos deberán llamarse "MiIcono.png". Podemos prescindir de modificar el CFBundleIcons y nuestras imágenes deberán llamarse "Icon.png" (así lo haremos en este artículo).

NOTA: Es importante respetar las mayúsculas y minúsculas ya que esta funcionalidad es sensible a mayúsculas.

Para cada icono siempre podemos añadir su versión para dispositivos Retina simplemente añadiendo @2x al final del nombre.

Tabla de dimensiones y nombre de los iconos
TipoNombreDimensionesDispositivo
Icono de aplicaciónIcon.png57x57 píxelesiPhone
Icono de aplicación para RetinaIcon@2x.png114x114 píxelesiPhone
Icono de aplicaciónIcon-72.png72x72 píxelesiPad
Icono de aplicación para RetinaIcon-72@2x.png144x144 píxelesiPad
Configuración y resultados de búsquedaIcon-Small.png29x29 píxelesiPhone/iPad
Configuración y resultados de búsqueda para RetinaIcon-Small@2x.png58x58 píxelesiPhone/iPad
Resultados de búsquedaIcon-Small-50.png50x50 píxelesiPad
Resultados de búsqueda para RetinaIcon-Small-50@2x.png100x100 píxelesiPad

Imágenes por defecto

Es la imagen que se muestra en la pantalla mientras se cargan las configuraciones iniciales. En aplicaciones que carguen muy rápido puede que no llegue a verse, por eso no se debe poner información importante en ella.

En aplicaciones que tarden mucho en cargar es importante crear esta imagen para que el usuario vea algo y no crea que su dispositivo se ha quedado colgado (pantalla en negro).

Al igual que con los iconos de aplicación, en el Info.plist existe una propiedad para cambiar el nombre por defecto de esta imagen: UILaunchImageFile. Si modificamos esta propiedad para poner "ImagenPorDefecto" los ficheros que creemos deberán llamarse "ImagenPorDefecto.png". Podemos prescindir de modificar el UILaunchImageFile y nuestras imágenes deberán llamarse "Default.png" (así lo haremos en este artículo).

NOTA: Es importante respetar las mayúsculas y minúsculas ya que esta funcionalidad es sensible a mayúsculas.

También podremos añadir iconos para dispositivos Retina añadiendo @2x al final del nombre.

El iPhone sólo admite imagen para la orientación por defecto (Portrait), pero en el caso del iPad se permite crear imágenes para las distintas orientaciones.

La nomenclatura que se debe usar para las imágenes es: <Nombre><orientación><escala><dispositivo>.png

  • Nombre: El que se haya puesto en UILaunchImageFile, sino "Default".
  • Orientación (valor opcional): Si no se utiliza será para Portrait. La lista de opciones es:

    • -PortraitUpsideDown
    • -LandscapeLeft
    • -LandscapeRight
    • -Portrait
    • -Landscape
  • Escala (valor opcional): Sin valor para la resolución normal o añadiendo "@2x" para dispositivos Retina
  • Dispositivo: con los valores:

    • ~iPhone
    • ~iPad

En resumen, si sólo creamos "Default.png" será la imagen que se usará para los dos dispositivos, todas las orientaciones y con y sin Retina. Si queremos podemos ir añadiendo las siguientes imágenes específicas:

  • Default@2x.png: para dispositivos con Retina.
  • Default~iPhone.png: para iPhone
  • Default@2x~iPhone.png: para iPhone con Retina.
  • Default-PortraitUpsideDown.png, Default-LandscapeLeft.png, Default-LandscapeRight.png, Default-Portrait.png, Default-Landscape.png: para las distintas orientaciones del iPad.
  • Default-PortraitUpsideDown@2x.png, Default-LandscapeLeft@2x.png, Default-LandscapeRight@2x.png, Default-Portrait@2x.png, Default-Landscape@2x.png: para las distintas orientaciones del iPad Retina.

No es necesario añadir ~iPad puesto que si no lo encuentra cogerá la que no tiene modificador.

Para finalizar os dejo las medidas que deben tener estas imágenes:

Tabla de dimensiones para las imágenes por defecto
DispositivoOrientacionesDimensionesDimensiones Retina
iPhonePortrait320x480 píxeles640x960 píxeles
iPhone 5Portrait640x1136 píxeles
iPadPortrait, PortraitUpsideDown768x1004 píxeles1536x2008 píxeles
iPadLandscape, LandscapeLeft, LandscapeRight1004x768 píxeles2008x1536 píxeles

Comentarios

0 comentarios. Comentar.

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?