Workflow: iOS Webapp startup/icon image generator

A probléma Designer véna híján kitaláljuk, hogy csinálunk egy darab szép nagy image-et, amiből mondjuk középre rendezve n féle méretet kellene legyártani, hogy a webalkalmazásunk mindenféle iOS eszközt kiszolgáljon ikonnal, illetve startup screen grafikával.

A megoldás

Először is előkotrunk a neten egy HOWTO-t, ami elmagyarázza, hogy mi is kell mindehhez webalkalmazásunk HTML head szekciójába:
<!-- iOS webapp icons -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<!-- iOS webapp startup images -->
<!-- iPhone -->
<link rel="apple-touch-startup-image"
		 media="(device-width: 320px)"
		 href="/startup.png">
<!-- iPhone (Retina) -->
<link rel="apple-touch-startup-image"
			media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"
			href="apple-touch-startup-image-640x920.png">
<!-- iPad (portrait) -->
<link rel="apple-touch-startup-image"
      media="(device-width: 768px)
         and (orientation: portrait)"
      href="apple-touch-startup-image-768x1004.png">
<!-- iPad (landscape) -->
<link rel="apple-touch-startup-image"
      media="(device-width: 768px)
         and (orientation: landscape)"
      href="apple-touch-startup-image-748x1024.png">
<!-- iPad (Retina, portrait) -->
<link rel="apple-touch-startup-image"
      media="(device-width: 768px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 2)"
      href="apple-touch-startup-image-1536x2008.png">
<!-- iPad (Retina, landscape) -->
<link rel="apple-touch-startup-image"
      media="(device-width: 768px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 2)"
      href="apple-touch-startup-image-1496x2048.png">
Ha ez megvan, csak elő kell állítani a sokféle méretű képet – ehhez vadásszunk le egy ImageMagick-et innen. Az ImageMagick felmegy MacPortsból is, de felpakolhatjuk kézzel is – ez utóbbi korrektül le van írva az előbb említett linken, de gyors kiteszem ide is: Csomagoljuk ki és csináljunk egy symlinket az általa létrehozott folderre:
mkdir ~/bin
cd ~/bin
tar xzvf ~/Downloads/ImageMagick-x86_64-apple-darwin11.3.0.tar.gz
ln -s ~/bin/ImageMagick-6.7.5 ~/bin/ImageMagick
Tegyük bele ezeket a ~/.bash_profile scriptünkbe:
# <imageMagick>
export MAGICK_HOME="$HOME/ImageMagick"
export PATH="$MAGICK_HOME/bin:$PATH"
export DYLD_LIBRARY_PATH="$MAGICK_HOME/lib/"
# </imageMagick>
Élesítsük is mindjárt:
source ~/.bash_profile
Majd írjuk meg a kép konvertálásához szükséges ImageMagickot molesztáló scriptünket (jól bekommenteztem, hátha valaha jól jön még mintának, ha Bash-ban kívánnál tömbökkel szívni):
#!/bin/sh
# createiOSWebappImages.sh by fns@fns.hu
# created 2012.06.03
# lmdate 2012.06.03
function createImages() {
	ext=".png" # default source & target extension
	args=( "$@" ) # all the paameters in an array
	ac=${#args[@]} # parameter array length
	p=${args[0]} # basePath: 1st parameter
	bf=$p/${args[1]}$ext # baseFile: 2nd parameter
	f=${args[2]} # iconFile: 3rd parameter
	for (( i=3; i<$ac; i++ )) # first 3 parameters were not the member of our resizer array so start from 3rd one
	do
		str=${args[$i]} #get array element
		len=${#str} #get length of string
		xpos=`echo "$str" | sed -n "s/[x].*//p" | wc -c` # get "x" pos within string
		w=${str:0:(xpos-1)} #substr
		h=${str:(xpos):(len-xpos)} #substr
		f2="$p/$f$str".png
		echo "Resizing image; source = $bf new_size = $str target = $f2"
		convert $bf -resize $str -gravity center -extent $str $f2
	done
} # createImages()
basePath="." # location of source & target files
baseFile="ios-webapp-baseimage" # source file
iconFile="apple-touch-icon" # target file prefix
iconSizes=( 57x57 72x72 114x114 144x144 ) # target file sizes in an array
startupFile="apple-touch-startup-image" # target file prefix
startupSizes=( 320x460 640x920 768x1004 768x1024 1536x2008 1496x2048 ) # target file sizes in an array
createImages $basePath $baseFile $iconFile "${iconSizes[@]}"
createImages $basePath $baseFile $startupFile "${startupSizes[@]}"
Végül futtassuk le és a generált képeket fogyasszuk egészséggel!]]>

4 thoughts on “Workflow: iOS Webapp startup/icon image generator

    1. eFi Post author

      OK, kimaradt a multiplatform kulcsszó.
      Btw kíváncsi lennék ugyanerre Automatorral: loop mintha lenne benne, de nem tudom, hogy kezelne az tömböket.

      Reply

Leave a Reply to eFi Cancel reply

Your email address will not be published. Required fields are marked *