lunes, marzo 11, 2013

Publicar mi App Mobile: Imágenes, iconos y tamaños a tener en cuenta


Ya sea desarrolladores, agencias, grandes empresas o individuos tratando de realizar el lanzamiento de su aplicación mobile, todos se encuentran con el mismo problema: la inmensa cantidad y variedad de tamaños de imágenes a iconos que se deben generar - y en diferentes formatos - para poder cerrar la aplicación y publicarla.

He aquí entonces un resumen acerca de todos los elementos a tener en cuenta a la hora de adentrarse en el mundo de la publicación de aplicaciones móviles.

iOS (Apple)

Apple App Store
El caso de Apple es "relativamente" sencillo, no por la cantidad de imágenes que se deben generar, sino porque las mismas se insertan directamente en el proyecto por medio de la interface de desarrollo (Xcode) y son pocas las imágenes que debemos tener a mano a la hora de publicar la aplicación a parte de los los print-screen o pantallas promocionales que hayamos confeccionado. Aún así la variedad de imágenes es grande dependiendo si la aplicación será compatible con iPhone, iPad, retina display y iPhone 5. Respecto del iPad mini, no es necesario tener consideraciones especiales ya que usa los tamaños del iPad 1 y 2.

iPhone App

App Icon: 57 x 57
App HD: 114 x 114

Launch Images:
320 x 480
640 x 960
640 x 1136 (iPhone 5)

iPad App

App Icon: 72 x 72
App Icon HD: 144 x 144

Launch Images (Portrait)
768 x 1004
1536 x 2008

Launch Images (Landscape)
1024 x 748
2048 x 1496

Pero como comenté al principio, todas estas imágenes se agregan con un simple "drag & drop" dentro del Xcode. Ahora bien, cuando estoy en el proceso de publicación, aparecen una serie de nuevas imágenes a tener en cuenta (información tomada directamente del formulario de publicación).

Large App Icon
A large version of your app icon that will be used on the App Store. It must be at least 72 DPI, in the RGB color space, and 1024 x 1024 pixels (it cannot be scaled up). The file type must be .jpeg, .jpg, .tif, .tiff, or .png. It must be flat artwork without rounded corners.

3.5-Inch Retina Display Screenshots
Screenshots for 3.5-inch iPhone and iPod touch Retina display must be 960x640, 960x600, 640x960 or 640x920 pixels, at least 72 DPI, in the RGB color space, and in the JPG or PNG format.

4-Inch Retina Display Screenshots
Screenshots for 4-inch iPhone 5 and iPod touch (5th generation) Retina display must be 1136x640, 1136x600, 640x1136 or 640x1096 pixels, at least 72 DPI, in the RGB color space, and in the JPG or PNG format.

iPad Screenshots
iPad Screenshots must be .jpeg, .jpg, .tif, .tiff, or .png file that is 1024x768, 1024x748, 768x1024, 768x1004, 2048x1536, 2048x1496, 1536x2048 or 1536x2008 pixels, at least 72 DPI, and in the RGB color space.

Routing App Coverage File (Optional)
Routing app coverage files are .geojson files which specify the geographic regions supported by your app. The file can have only one MultiPolygon element. MultiPolygon elements consist of at least one Polygon. Polygons contain at least four coordinate points. Polygon start and end coordinate points must be the same.

Android

Google Android Play Store
Es el caso inverso de iOS, en Android la plataforma solo nos pide el icono de la aplicación en diferentes densidades. ¿para qué esto? Como sabrán el universo de Android es basto y plagado de diferentes equipos de diferentes marcas que inclusive han hecho uso de las diferentes versiones del sistema operativo del robot verde. Según el tamaño de pantalla y resolución, todas las imágenes deben estar en diferentes densidades: ldpi (low dpi), mdpi (middle dpi), hdpi (high dpi) y xhdpi (x-high dpi). Como este punto no es el foco de nuestro tópico les dejo un link para que puedan indagar mas sobre el tema.


icon drawable-hdpi: 72 x 72
icon drawable-ldpi: 36 x 36
icon drawable-mdpi: 48 x 48
icon drawable-xhdpi: 96 x 96

Lo cierto es que a la hora de subir la aplicación nos encontramos con que el Market de Android nos pide varias imágenes de las cuales muchas son mandatorias.

Screenshots: 320 x 480, 480 x 800, 480 x 854, 1280 x 720, 1280 x 800 24 bit PNG or JPEG (no alpha) Full bleed, no border in art.

High Resolution Application Icon: 512 x 512 32 bit PNG or JPEG Maximum: 1024 KB

Promo Graphic (opcional): 180w x 120h 24 bit PNG or JPEG (no alpha) No border in art

Feature Graphic (opcional): 1024 x 500 24 bit PNG or JPEG (no alpha) Will be downsized to mini or micro

Windows Phone

Microsoft Windows Phone Market Place
La nueva plataforma de Microsoft tiene un "mix" interesante sobre las dos anteriores. A la hora de construir la aplicación el Visual Studio nos deja 3 imágenes a modo de ejemplo que luego hay que reemplazar:

Application Icon: 62 x 62 px
Slash Image: 480 x 800 px
Background (tile): 173 x 173 px

Estas imágenes ya vienen con la estructura base del proyecto, nosotros solamente debemos reemplazarlas con las finales y diseñadas para nuestra aplicación (obviamente respetando los tamaños). Adicionalmente, cuando se sube la aplicación el marketplace de Microsoft nos pide algunas imágenes y realiza varias validaciones a tener en cuenta:

Tile Icon 300 x 300 px (obligatorio)
Background Image 1000 x 800 px (opcional)
Screens 480 x 800 px

Específicamente Microsoft pide que las pantallas de la aplicación sean capturas realizadas con el emulador y NO imágenes armadas o diseñadas. Otro detalle, es que si la aplicación se encuentra en varios idiomas las capturas también se deben realizar en cada idioma y esto es mandatorio. Un punto muy diferente a cualquiera de los anteriores. Esto se valida en el proceso de publicación y es razón suficiente para no dejar pasar la aplicación al store.


A continuación les dejo un link que compartió conmigo Lucas Veliz, Diseñador gráfico especializado en temas de mobile (@lucasveliz84) el cuál permite en forma automática generar todas las imágenes necesarias para iOS y Android partiendo de una inicial, para usarlo necesitan Photoshop e Illustrator.