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

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:

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

 

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

 

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/[email protected]

convert -thumbnail 60 ico.png /tmp/[email protected]

convert -thumbnail 120 ico.png /tmp/[email protected]

convert -thumbnail 120 ico.png /tmp/[email protected]

convert -thumbnail 180 ico.png /tmp/[email protected]

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

convert -thumbnail 40 ico.png /tmp/[email protected]

convert -thumbnail 60 ico.png /tmp/[email protected]

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

convert -thumbnail 58 ico.png /tmp/[email protected]

convert -thumbnail 87 ico.png /tmp/[email protected]

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

convert -thumbnail 80 ico.png /tmp/[email protected]

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

convert -thumbnail 100 ico.png /tmp/[email protected]

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

convert -thumbnail 144 ico.png /tmp/[email protected]

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

convert -thumbnail 152 ico.png /tmp/[email protected]

convert -thumbnail 167 ico.png /tmp/[email protected]

# watch

convert -thumbnail 48 ico.png /tmp/[email protected]

convert -thumbnail 55 ico.png /tmp/[email protected]

convert -thumbnail 58 ico.png /tmp/[email protected]

convert -thumbnail 87 ico.png /tmp/[email protected]

convert -thumbnail 80 ico.png /tmp/[email protected]

convert -thumbnail 88 ico.png /tmp/[email protected]

convert -thumbnail 172 ico.png /tmp/[email protected]

convert -thumbnail 196 ico.png /tmp/[email protected]

#

# 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.

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

+ 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

cuentame