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

splash

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:

splash

Ícono Siglo App

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/AppI[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/[email protected]~iphone.png
convert splash.png -thumbnail 640x1136 -gravity center -extent 640x1136 /tmp/[email protected]~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/[email protected]~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/[email protected]~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.

images.xcassets

Aquí puedes ver las fotos del post

Almacenado en Software, Utils, imagemagick, Xcode

por Jorge Martínez Mauricio :)



¿Algo que comentar?


Suscríbete por correo electrónico, recibirás los nuevos escritos antes que nadie y es gratis 😊

¿Ya conoces los foros de tar?

Relacionadas

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