Wednesday 11 April 2012

Graphics Part 3

This is the image at the end of the last post.
As I mentioned before, I have been optimising the images for the Blog to reduce load time, so the image above is a 256 colour downscale, which is why in places the colours look a bit flat.

This is the actual work image I have been using.
Presented here so you can save it to your project.

The next step is to reduce the size of this image to fit into the the icon sheet.  But first we have to re-save it with transparency.

When you save an image in Irfanview, you are given a panel with a number of options.
The image here shows the default options, which have been used so far.  To save an image with transparency, we tick the indicated box Save Transparent Color.

After you put in the file name - which this time is going to be ToolBox Source 2 Trans.png, you are given a screen with the image on and asked to click a colour to be transparent.
Here you click on any of the magenta areas and in the saved image, these will be transparent.  There will no longer be any Magenta in the picture.
The image above is the Full colour Transparent Image (for saving in your project)

The reason we re-save it this way is because when an image is reduced in size, Irfanview will resample it and antialias the result.

Anti-Aliasing ( http://en.wikipedia.org/wiki/Anti-aliasing ) is when a stark difference between two pixels is softened by using an intermediate colour.  It creates the illusion that an image is more detailed than it is by removing jagged edges.

If we reduce an image with a Magenta background, the edge of the image will be anti-aliased to the magenta colour, so even though the magenta will eventually be transparent, the image will still have a purple edge (left).
When Irfanview loads a transparent image, it assigns a mid range grey to the transparent area.  This produces a less noticeable edge on reduced images (right).

This Blog makes it look worse than it is by showing it on a black background.

We will do some final touch up on the reduced image to eliminate really bad parts.

No comments:

Post a Comment