mkjones

Last last night I was working on a new logo for a project I have tasked myself. After a few weeks working on and fine tweaking the design I was almost done. All the remained, as ever, was the transition from Photoshop to a usable image format such as PNG, GIF, JPEG.

Problems soon arose. Without going into great detail about the inspiration or even the usage of the logo here it is in all its glory:

The above image is the hi-colour PNG 24bit version. Basically the bees knees of image formats when it comes to web publishing. PNG 24 essentially gives you a carbon copy of the original image. You retain all the colour and even get advanced transparency effects. But this comes at a price.

The above image is around 52k. A beastly size by anyone’s measure. Even in the days of quick broadband and dual-core PCs this is an unacceptable size for a web-based logo. I generally stick to the rule of no larger than 20k for images such as this. 10k is the sweet spot, any lower and it becomes a no-brainier.

So what to do?

First of all I experimented with other formats.

JPEG was no good as this format has no transparency options and is more of a format for photos and larger more colourful images. Regardless, I did experiment with this format and managed to shrink my logo down to 30k without loosing any real quality:

More palatable formats for my logo are GIF and PNG.

Over the years I have become a massive fan of the GIF format, due to its universal compatibility and transparency options, but sadly not this time. I soon disregarded GIF in this instance because as the GIF and PNG formats are so inherently similar there is little advantage in using it over PNG.

Also as PNG was created to improve upon and replace the GIF format [see wikipedia] I have steadily over the past couple of years began using it over its cousin.

So, I have already proved that PNG 24 is the best looking option, but not the most efficient. The other option is PNG 8 which more closely resembles the GIF format as it has less advanced transparency options and allows definition of the colour pallet being used.

Here is the logo in PNG 8 format:

Oh dear. As you can see the gradients look terrible. Also the depth and colours are distorted and shadows appear noisy, basically it looks crap.

The good news was, the image is only 14k. A far more usable size for use on a website. But I couldn’t live with the logo looking so lame. After hours of messing around with the PNG 8 format I worked out that the only way I could gain a balance between design and efficiency was to re-work the image so it uses less colour, shading and depth.

This would mean removing a LOT of the work I had done of the weeks in fine-touching the logo. I was gutted but had no alternative.

After an hour or so removing some of the shading and colours I came up with this:

As you can see, the logo looks very different. Its ‘flatter’ has less tangible depth and colours and because of this it looks more synthetic and dull.

Here is a diagram of the main elements I had to remove/work out in order to reduce the size of the logo:

And, here is a screenshot from Photoshop showing the final PNG 8 settings I used:

Unfortunately, this was the best I could do with the available format. The GOOD news was the image was just under 12k! A MASSIVE reduction in size from the original. So I bit the bullet and gave in, I’m pretty sure after a few days and a fresh pair of eyes I will see that the difference is not ‘too’ bad. The changes may in fact be a good thing.

I even managed to shave off another 1k by removing the stars from the logo:

But I am as yet unsure if this was a good idea and may re-instate them for the final release.

Overall the experience was worthwhile. Culling the image in such a way was hard as it took me a long time to shade some of the areas that I ended up simply throwing away, never to be seen again.

But the general ‘idea’ of the logo remains without these features. Its still a rocket, flying though the blue stratosphere with a streak of flame pluming from its rear.

It still does its ‘job’ as a striking logo which is I suppose all that matters.