Crear íconos e imágenes de Splash para aplicación iOS automáticamente con ImageMagick

En un mundo ideal, cuando tienes un splash (imagen de inicio cuando lanzas una aplicación) debería bastar con añadirlo al proyecto y que el IDE o la misma tienda hiciera todas las versiones que requiera. Pero no, hay que añadir un chorro de imágenes para los íconos, para las diferentes versiones y luego las imágenes de inicio.

Bueno, como es algo tedioso y pensando en que tengas la misma imagen para todas las versiones de dispositivos, aquí va un ejemplo de como hacerlo automáticamente.

Lo primero es que tengo la imagen del ícono de la APP en tamaño de 1024x1024. Además, hice también la imagen de splash cuadrada y que se ajustara a cualquier tamaño, en este caso fue de 2000x2000 pero puede ser más grande, en realidad no importa mientras tenga proporciones adecuadas a los dispositivos. Estas imágenes se acomodarán dependiendo del resultado de la imagen final, guardando las proporciones.

Aquí las imágenes fuente usadas, primero el splash y luego el ícono:

 

 

Ahora el script:

# @ToRo 2018 https://tar.mx

# generador de imagenes, ico.png = original de 1024x1024 pixeles

#apps ico.png 1024x1024

convert -thumbnail 114 ico.png /tmp/icon@2x.png

convert -thumbnail 60 ico.png /tmp/icon-60@2x.png

convert -thumbnail 120 ico.png /tmp/icon-60@3x.png

convert -thumbnail 120 ico.png /tmp/icon-60@2x.png

convert -thumbnail 180 ico.png /tmp/icon-60@3x.png

convert -thumbnail 20 ico.png /tmp/icon-20.png

convert -thumbnail 40 ico.png /tmp/icon-20@2x.png

convert -thumbnail 60 ico.png /tmp/icon-20@3x.png

convert -thumbnail 29 ico.png /tmp/icon-small.png

convert -thumbnail 58 ico.png /tmp/icon-small@2x.png

convert -thumbnail 87 ico.png /tmp/icon-small@3x.png

convert -thumbnail 40 ico.png /tmp/icon-40.png

convert -thumbnail 80 ico.png /tmp/icon-40@2x.png

convert -thumbnail 50 ico.png /tmp/icon-50.png

convert -thumbnail 100 ico.png /tmp/icon-50@2x.png

convert -thumbnail 72 ico.png /tmp/icon-72.png

convert -thumbnail 144 ico.png /tmp/icon-72@2x.png

convert -thumbnail 76 ico.png /tmp/icon-76.png

convert -thumbnail 152 ico.png /tmp/icon-76@2x.png

convert -thumbnail 167 ico.png /tmp/icon-83.5@2x.png

# watch

convert -thumbnail 48 ico.png /tmp/AppIcon24x24@2x.png

convert -thumbnail 55 ico.png /tmp/AppIcon27.5x27.5@2x.png

convert -thumbnail 58 ico.png /tmp/AppIcon29x29@2x.png

convert -thumbnail 87 ico.png /tmp/AppIcon29x29@3x.png

convert -thumbnail 80 ico.png /tmp/AppIcon40x40@2x.png

convert -thumbnail 88 ico.png /tmp/AppIcon44x44@2x.png

convert -thumbnail 172 ico.png /tmp/AppIcon86x86@2x.png

convert -thumbnail 196 ico.png /tmp/AppIcon98x98@2x.png

#

# generador de splash, en mi caso usé una imagen de 2000x2000 en buena calidad

#

# X

convert splash.png -thumbnail 1125x2436 -gravity center -extent 1125x2436 /tmp/Default-2436h.png

convert splash.png -thumbnail 2436x1125 -gravity center -extent 2436x1125 /tmp/Default-Landscape-2436h.png

# iOS 8+

convert splash.png -thumbnail 1242x2208 -gravity center -extent 1242x2208 /tmp/Default-736h.png

convert splash.png -thumbnail 750x1334 -gravity center -extent 750x1334 /tmp/Default-667h.png

convert splash.png -thumbnail 2208x1242 -gravity center -extent 2208x1242 /tmp/Default-Landscape-736h.png

# iOS 7

convert splash.png -thumbnail 640x960 -gravity center -extent 640x960 /tmp/Default@2x~iphone.png

convert splash.png -thumbnail 640x1136 -gravity center -extent 640x1136 /tmp/Default-568h@2x~iphone.png

# iPad

convert splash.png -thumbnail 768x1024 -gravity center -extent 768x1024 /tmp/Default-Portrait~ipad.png

convert splash.png -thumbnail 1536x2048 -gravity center -extent 1536x2048 /tmp/Default-Portrait@2x~ipad.png

convert splash.png -thumbnail 1024x768 -gravity center -extent 1024x768 /tmp/Default-Landscape~ipad.png

convert splash.png -thumbnail 2048x1536 -gravity center -extent 2048x1536 /tmp/Default-Landscape@2x~ipad.png

# iPhone iOS 5,6

convert splash.png -thumbnail 320x480 -gravity center -extent 320x480 /tmp/Default~iphone.png

 

Es todo, bastaría con ejecutarlo y luego copiar las imágenes correspondientes desde /tmp/ a donde deban estar en el proyecto de Xcode.

+ fotos / videos

Almacenado en Software, Utils, imagemagick, Xcode

por Jorge Martínez Mauricio :)

blog / fotos / archivo

Crear íconos e imágenes de Splash para aplicación iOS automáticamente con ImageMagick

tar.mx es un blog sobre fotografía, tecnología y otras chunches

modificado viernes 9 de julio de 2021, 18:44