Circular pictures (like the one to the right) has become increasingly popular on the web. We have, for example, included circular pictures in RITMO’s annual report, and we therefore also wanted to use circular pictures in a presentation at our upcoming LARGO conference. The question, then, is how to create such circular pictures?
The circular pictures in the annual report are made through a CSS overlay. So if you try to right-click and save one of those, you will get the original rectangular version. It is, of course, possible to add circular thumbnails in the presentation software, using the circular crop function in PowerPoint or add mask function in Keynote. The challenge with these, however, is that you may get into trouble if you move your presentation from one program to another. I often prefer to make presentations in Google Presentation, and there is no such feature there.
The most bullot-proof solution is therefore to create new circular images. This can be done in photo editing programs, such as the circle image function in GIMP. But for a centre of the size of RITMO (50+ people), and with many people coming and leaving all the time, I would rather prefer an automatic solution. I therefore decided to figure out how to do this in the terminal.
It turns out that Imagemagick comes to the rescue once again. Here is a one-liner for creating a circular PNG image from a JPG file:
convert alexander.jpg \( +clone -threshold -1 -negate -fill white -draw "circle 100,100 100,0" \) -alpha off -compose copy_opacity -composite alexander_circle.png
This will take a regular image like this:
and make it into a circular image like this:
Since the original was a 200x200px image, I used the code “circle 100,100 100,0” in the script to ensure that the circle would be in the centre of the image.
The next step was to extend the script to read all the JPG files in a folder and convert them into circular images. This can be done like this (at least on Ubuntu):
#!/bin/bash
for i in *.jpg;
do
name=`echo $i | cut -d'.' -f1`;
convert "$i"
\( +clone -threshold -1 -negate -fill white -draw "circle 100,100 100,0" \)
-alpha off -compose copy_opacity -composite $name.png;
done
Save the script as circle_image.sh (or whatever else you prefer), make it runable (chmod u+x circle_image.sh), and run it (sh circle_image.sh), and you get a bunch of circular images that you can be used in any program around. Scripting is fun!