Comunitat DSTSC

En una aplicació mòbil el splash és la imatge que surt en el lapse de temps entre que l'usuari clica la icona de l'app i es carrega l'aplicació. Aquesta imatge pot no arribar a sortir mai, pot estar uns pocs mil·lisegons o varis segons segons l'aplicació.

Per a una correcte visualització en tots els dispositius cal generar varies imatges segons la mida, proporcions i resolució de cada dispositiu.

1. Mides segons SO

1.1. Android

• screen-hdpi-landscape.png: 800x480 píxels
• screen-hdpi-portrait.png: 480x800 píxels
• screen-ldpi-landscape.png: 320x200 píxels
• screen-ldpi-portrait.png: 200x320 píxels
• screen-mdpi-landscape.png: 480x320 píxels
• screen-mdpi-portrait.png: 320x480 píxels
• screen-xhdpi-landscape.png: 1280x720 píxels
• screen-xhdpi-portrait.png: 720x1280 píxels

1.2. iOS

• screen-ipad-landscape-2x.png: 2008x1536 píxels
• screen-ipad-landscape_1024x768.png: 1024x768 píxels
• screen-ipad-portrait-2x.png: 1523x2008 píxels
• screen-ipad-portrait_768x1024.png: 768x1024 píxels
• screen-iphone-landscape-2x.png: 960x640 píxels
• screen-iphone-landscape.png: 480x320 píxels
• screen-iphone-portrait-2x.png: 640x960 píxels
• screen-iphone-portrait-568h-2x.png: 640x1136 píxels
• screen-iphone-portrait.png: 320x480 píxels
• screen-ipad-landscape_2048x1536.png: 2048x1536 píxels
• screen-ipad-portrait_1536x2048.png: 1536x2048 píxels

2. Imatge 9-patch

Aquesta és una solució específica per a la gran varietat de dispositius Android que consisteix en crear una imatge central i després permetre estirar el marge de la imatge sense deformar la part central per adaptant-se a diferents proporcions de pantalla sense deformar la imatge central.

Per generar una imatge ajustable 9-path cal deixar una vora transparent de 1px i després marcar amb 4 píxels negres (#000000) els punts d'expansió. El sistema ajustarà automàticament la imatge expandint i deformant la zona que defineixen els quatre punts negres i mantindrà intacte i sense deformació la zona central.

Per tant, una imatge de 100x100px expandible en realitat ocuparà 102x102px i tindrà un marc transparent de 1px pels quatre cantons amb quatre píxels negres que marcaran els límits de la zona d'expansió.

Exemple:

3. Entregables

• Fitxer o fitxers de treball amb capes .psd o vectorial .ai
• 8 PNGs 24 bits (no alpha) amb les mides per a Android.
• 8 PNGs 24 bits (no alpha) amb les mides per a Android versió 9-patch.
• 9 PNGS 24 bits (no alpha) amb les mides per a iOS.