Posts Tagged ‘ImageMagicK’

Script to produce iPhone app icons at different sizes

Tuesday, May 29th, 2012

The tools for writing iPhone software are really easy to use, and allow you to concentrate on the coding rather than on obscure configuration problems. But one area of iOS development that I found a little tedious whilst writing my Solar Balls game was producing Apple’s mandatory and optional icons, which need to be in a variety of sizes.

The application icons need to be generated at different sizes for the old screen resolutions, retina display resolution and for iPhone/iPad screen types. There are also other sizes you can produce for Spotlight and Settings.

The different icon sizes are described on Apple’s developer website here and here.

If you work for a big company and have access to an art department they may well manually produce optimised version of each icon. I don’t have an art department and don’t have time (or the interest!) to optimise each icon so I just wrote a very simple script to do the resizing for me.

It takes a source image and then resizes it into 8 different icons. It gives them names that fit in with Apple’s old recommended icon naming conventions.

solar balls lite icons

Icon list

57x57 Icon.png
114x114 [email protected]
72x72 Icon-72.png
144x144 [email protected]
29x29 Icon-Small.png
58x58 [email protected]
50x50 Icon-Small-50.png
100x100 Icon-Small-100.png

Usage

generateIcons.bat sourceicon [tag]
e.g.
generateIcons.bat iTunesArtwork
generateIcons.bat iTunesArtwork Lite

Or you can just drag the source image over the batch file.

If the first example the icons will be generated from your iTunesArtwork image with the names previously listed.

In the second example a tag is inserted into the name. So if the tag is ‘Lite’ then instead of Icon.png, you get IconLite.png. This can be very useful if you are using one XCode project to produce both a full and a lite version of your app.

You’ll need to have ImageMagick installed and on your path for this to work – ‘convert’ is a binary from ImageMagick.

This is a Windows batch file but you could easily convert it to a Mac OS shell script. I just happened to be using Windows at the time I was doing the icons for Solar Balls.

iPhone icon resizing script

goto :skip_functions
:makeAppIcons
	:: iPhone icon generator
	:: Details at http://www.reviewmylife.co.uk/blog/2012/05/29/script-to-produce-iphone-app-icons-at-different-sizes/
	set filename=%1
	set tag=%2
	:: icon sizes from
	:: http://developer.apple.com/library/ios/#qa/qa1686/_index.html
	:: http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW1
	:: App icons
	convert %filename% -thumbnail 57x57 Icon%tag%.png
	convert %filename% -thumbnail 114x114 Icon%tag%@2x.png
	convert %filename% -thumbnail 72x72 Icon%tag%-72.png
	convert %filename% -thumbnail 144x144 Icon%tag%[email protected]
	:: Spotlight search result icons
	convert %filename% -thumbnail 29x29 Icon%tag%-Small.png
	convert %filename% -thumbnail 58x58 Icon%tag%[email protected]
	convert %filename% -thumbnail 50x50 Icon%tag%-Small-50.png
	convert %filename% -thumbnail 100x100 Icon%tag%-Small-100.png
goto :EOF
:skip_functions
call :makeAppIcons %1 %2
:end

It should be very obvious how to generate any additional sizes that you might need. And you could of course use a very similar script for resizing other app images that you might need for the standard/retina/iPhone/iPad screen resolutions.

Joining photos together with ImageMagick

Tuesday, June 29th, 2010

In my posts I often have a need to stitch multiple photos together in a rectangular block. I prefer to have the photos stitched together rather than uploading them as individual images as this removes the need to lay them out (using divs, tables, etc). Plus the stitched together image size is smaller than the size of uploading individual images. This is the kind of image montage I’m talking about.

flowers stitched together with imagemagick

I always like to have them in a single row, sized to the correct width, with a small white space between the images. Previously I was doing this manually with Paint Shop Pro. Doing it manually takes a while (even when you know all the keyboard shortcuts), is error prone, and is boring to do.

And things get even more difficult if you have a mixture of portrait and landscape images as I’d have to resort to a calculator to work out what sizes each sub-image should be.

portrait and landscape joined with imagemagick

I’m no expert with ImageMagick but I managed to put together a script that can do the job automatically. This does it in three steps (three convert commands), but I’ve do doubt that someone who knows ImageMagick well could do it in one much more efficiently – please leave a comment if you know how. This is what it does:

  • Resizes the images to a maximum height of 768 pixels (this does assume that the height of all your images is over 768 pixels. If not you can adjust this value). This step sorts out the problem of images being in portrait or landscape. The images are then appended together with whitespace between them.
  • I chop off the extra bit of whitespace on the very right of the montage.
  • I resize the image to have a width of 450 pixels and save it back out into the same directory as the first image, ready for including on my blog.

I save the intermediate images as PNGs so that the result isn’t being JPEG compressed too many times!

Here’s the DOS batch file code. Some of the code is based on that from a recent post of mine on extracting the directory name from a file path.

goto :skip_functions

:setDir
if not %imgdir% == "" goto :EOF
set imgdir=%1
goto :EOF

:getDirectory
del %TEMP%resize.tmp
dir %1 > %TEMP%resize.tmp
for /f "skip=3 tokens=3" %%i in (%temp%resize.tmp) do call :setDir %%i
goto :EOF

:skip_functions

set imgdir=""
call :getDirectory %1

cd %imgdir%
del prout*.*
convert %9 %8 %7 %6 %5 %4 %3 %2 %1 -resize "x768" -background White -gravity east -splice 20x0 +append prout.png
convert prout.png -gravity east -chop 20x0 prout2.png
convert prout2.png -strip -resize 450 -compress JPEG -quality 85 %RANDOM%.jpg
del prout.png
del prout2.png

I’ve put a shortcut to this script in my Send To menu (type %APPDATA%MicrosoftWindowsSendTo into the Windows Explorer address bar to get to the folder containing the shortcuts).

I can then right click on whatever images I want to stitch together, choose the photoResize.bat option from the SendTo menu, and the stitching is automatically done for me, and the resulting JPEG left in the same directory as the images.

photo stitching context menu

There are some limitations which you could fix if you really needed to.

  • The script assumes that all the images have a height greater than 768.
  • It is always outputting to JPEG. It could be changed so that if all the images are in the same format, it outputs that that same format. E.g. stitching together 3 PNGs would output to a PNG.
  • I’m using three convert commands which I’m sure is very inefficient. I’ve no doubt this operation could be done with one command.
  • The order that the images are stitched together is not defined when using the Send To shortcut.


Batch processing photos with DOS and ImageMagick

Thursday, August 7th, 2008

For my recent walking project I knew I was going to be taking lots of photos. I wanted a DOS script which would batch process the JPEG photos from my camera into the ‘full sized images’ (which are much smaller than the raw camera images), and the poloroid-like thumbnails.

The excellent ImageMagick tool provides a way to generate poloroid-like thumbnails automatically. I also wanted the thumbnails to be rotated at random angles which ImageMagick can do as well.

However the ImageMagick instructions were missing a few things 1) they seem to be aimed at people using Unix / Linux scripts whereas I’m using DOS scripts and 2) they show how to do this processing on single images rather than on a whole directory of them.

Poloroid rotation with ImageMagick Poloroid rotation with ImageMagick

It is quite easy to generate a random rotation angle with a simple bit of perl. The below line will generate a random floating point number between -7 and +7. I want both negative and positive numbers so that some of the poloroids will be tilted to the left, and others to the right.

perl -e "print rand() * 14 - 7"

I wanted to do all the processing through a DOS batch file so the next problem was how to get the random number into a DOS environmental variable. The answer is to use the ‘for /f‘ command to assign the output of a command into a variable:

for /f %%i in ('perl -e "print rand() * 14 - 7"') do set ANGLE=%%i

At the time when I wrote this script generating a poloroid involved a whole sequence of commands. Something like below!

-bordercolor white -border 6 -bordercolor grey60 -border 1 -background none -rotate %ANGLE% -background black ( +clone -shadow 60x4+4+4 ) +swap -background white -flatten

My script still uses this long poloroid command, but you might want to use the new one word ‘poloroid‘ command which is built straight into the latest versions of ImageMagick instead.

As well as generating the poloroid thumbnails it will also generate the full size website friendly images which are tagged with the website URL.

Prerequisites:
Your JPEG images are in an ‘images’ directory.

Usage:
ProcessPhotos.bat [path of directory that contains ‘images’ directory]

Output:
A new directory called ‘generated’ in the input directory containing a full size image (which has been tagged with the website URL), and a poloroid thumbnail.

Notes:
In order to use this script you will have to customise 1) the location of the ImageMagick executable 2) the reference to the drive – it is assuming a ‘f:’ drive here and 3) the website URL.

setlocal
pushd .
goto :skip_functions
:makeThumb
	echo %1
	set jpg=%1
	set jpg=%jpg:~0,-4%
	echo %jpg%
	for /f %%i in ('perl -e "print rand() * 14 - 7"') do set ANGLE=%%i
	set ANNOTATE=-gravity south -stroke "#000C" -strokewidth 2 -annotate +0+20 "www.advancedhtml.co.uk" -stroke none -fill white -annotate +0+20 "www.advancedhtml.co.uk"
	set POLOROID=-bordercolor white -border 6 -bordercolor grey60 -border 1 -background none -rotate %ANGLE% -background black ( +clone -shadow 60x4+4+4 ) +swap -background white -flatten
	D:appsImageMagick-6.3.6-Q16convert %1 ( +clone -resize 600x -auto-orient %ANNOTATE% -compress JPEG -quality 70 -write %jpg%_full.jpg +delete ) -resize 180x -auto-orient %POLOROID% -compress JPEG -quality 80 -sampling-factor 2x1 -strip %jpg%_th.jpg
goto :EOF
:skip_functions
f:
cd %1images
for /f %%i in ('dir /b *.jpg') do call :makeThumb %%i
md %1generated
move *_full.jpg ..generated
move *_th.jpg ..generated
popd
endlocal