Instant Avatars

Avatars are important. They are everywhere and there is virtually no community driven website out there, where you can’t upload an image of yourself or what you want to be associated with. These images help us to immediately recognize our friends without even having to look at their names.

We don’t care too much about what is depicted, but how it looks: the overall color and shapes. Yet, all the default avatars of our beloved Web 2.0 sites look exactly the same. And while Twitter’s default Avatar can at least be considered cute, most others are dull and unimaginative.

Why not create a unique image, based on the users name, on the fly? This avatar could be temporarily used till the user can be bothered with uploading one by himself. This would give even the laziest user a chance to be instantly recognized by his friends.

My InstantAvatar PHP class does exactly this: it generates (more or less) unique avatars on the fly. Here are some examples of what it can do: InstantAvatar Samples

In this demo, the first two characters of a user’s name are used to generate an avatar image in one of 21 different color schemes (most of which borrowed from colourlovers) and four different backgrounds. The font I used, Comfortaa, works great for this purpose. If you look closely, you can also see a subtle glass effect over each of these images.

The shapes in the background are actually drawn with text, too. This was done as cheap workaround of the GD libraries limitations – most of GD’s drawing functions are not anti aliased, but text is. Again, this is just a proof of concept, so there’s a lot of room for improvements.

Download: instantavatar.zip ~ 68kb

Usage

require_once( 'instantavatar.php' );

// fontFace, fontSize, width, height, chars, overlay
$ia = new InstantAvatar( 
    'Comfortaa-Regular.ttf', 18, 
    40, 40, 2, 'glass.png' 
);
$ia->generateRandom( 'ia' );
$ia->writePNG( 'avatar.png' );

Depending on your GD version, you might have to specify the file name for the font without the ttf extension. Have a look at the imageTTFText documentation for a workaround.