Tracking in Generated Images

Generating images with PHP is one of my favorite tricks and the ease of doing this in PHP is really a testament the language getting something right. If you’re on the site and not in your RSS aggregator, then you enjoy a generated image on every page on PhotoMatt.net, the titles of each post and the post times graph at the bottom of the page. Combined with image replacement techniques, PHP-generated images can be very useful. This was one of the first blogs I know of to do it, but I’ve seen it on several sites since then and I’ve shared the code with anyone who asks.

However the function I’m using for all of this, imagettftext is rather crude, and doesn’t allow for much control in how the text is presented. After a bit of work I just created a function that simulates tracking in text images that are created by PHP. I’m happy with structure of the code, but the result is much uglier than if the text had been set by any decent program. Imagettftext is supposed to support unicode, so I’ll have to investigate using unicode semi-space characters or perhaps interfacing with Freetype more directly.

Anyway, now the image generator takes a background color (which may be transparent), a text color, and a rollover color. Then it generates a single image with the given text in it once with each color, for use with Pixy’s fast rollovers. This is all in the context of the Unamed CMS that is coming Real Soon(tm).

10 thoughts on “Tracking in Generated Images

  1. I was wondering how you had all those nice looking images for the title of every blog post on this site. That just seems like too much work to go into photoshop every time you wanted to make a new post. Very interesting technique.

  2. Wow — will you be releasing the source to the function you created any time soon (i.e. prior to the CMS release)? This is the one thing that has kept me from using GD image generation. I’m pretty picky when it comes to kerning, and this would make things MUCH easier.

    I’m curious however, are you assigning each letter a kerning based on what letter precedes/follows? It seems like you’d almost have to experiment and write out a custom kerning array for each letter.

  3. Kerning is very, very different than tracking, at least in my understanding. Kerning is custom distance between two particular letters which can be tweaked, like AV. Tracking is general letter spacing, at least in the way I’m using this. This function increases letter spacing, it doesn’t address kerning. Kerning is handled by the Freetype library on the box, support for which can be compiled into PHP (which I do).

  4. PHP’s GD libs are indeed an awesome thing. I’ve used them for everything from on the fly barcode generation for product print-outs, to data graphing, to actual image creation in order to save web paint created images on my server for the gallery.

    I’m very interested to see what you’ve done code-wise to improve upon imagettftext.

SHARE YOUR THOUGHTS