Graphics

Im working on a studio design for the place that I live.

It’ll be for hire for many purposes if we build it.

I’m slowly but surely adding features to the build page, (see the change log).

A couple of days ago I found an app’ I had forgotten the name of and couldn’t therefore find – ‘BookletImposer’. This lovely little app’ helps when publishing books as it can rearrange the pages in order that you can print without having to manually shuffle the pages in order that they print in the correct order for binding. This app’ compliments Scribus nicely!

Today, I have added a repo’ that will provide the latest stable version of Inkscape. There are some nice new tools in the latest version which we just don’t get to see for many months in the standard repo’s 🙁

GIMP has just released a shiny new version too, but as of now I can’t find a repo’ for the latest version. I will keep an eye on launchpad! 🙂

I often have to manipulate images for a few reasons, mainly for uploading to websites. But also for sending via e-mail and for my own collection of photography.

What follows is what has become my usual process for optimizing images quite quickly, using GIMP (GNU Image Manipulation Program) a free and Open Source application available for all platforms.

Crop and scale

If I am processing for my collection, or some other form of archive, I might crop, but I wouldn’t scale. I’d want the highest resolution image in the archive.

However, for uploading to a website I would at least re-size.

To what size depends on a few things and is always a compromise between size (both pixel and file size) and quality, so there is no ‘one size fits all’ in the way of settings.

Given the current size and more importantly resolution of screens, I tend to go for between 1200px and 2000px wide (constraining proportion and accepting whatever height that yields) and a file size of no more than 500Kb if possible. I also like to have a D.P.I. of between 70 and 150.
As you can see , there are a few things to juggle!

Crop first, as you can then scale to the final size, rather than scaling first and then finding your cropping makes the final dimensions too small.

Cropping and scaling before anything else also means you work your computer less, which may be a help on lower powered computers.

Levels

This is where the magic really happens, where a dull image can come to life! This may be the only process you do.

In the fist image below you can see the photo we will be editing. It looks somewhat washed out and dull. The next image is after we have processed it.

In GIMP, select ‘Colours’ and then ‘Levels’. This will bring up a dialogue with a histogram which will show us where we can make improvements.

In the next image you can see the levels dialogue open (It helps to enlarge the dialogue by left clicking one of the corners and dragging).

The histogram shows you how many pixels there are at any given brightness from black (no colours) through to pure white (all colours). I like to position this dialogue box to one side, in order that I can see the image, or at least a good part of it, whilst I change the ‘Level’ settings.

You can see nice gentle curves except for a few tall lines towards the right. These will probably be the right hand goose, as you can see from the image the goose is bright white (though not pure white) and quite over exposed.

As well as the gentle curves you will see that there are two areas either side of the curves, (see the two arrows) these are the black and white ends of the spectrum and have no data in this image (a well taken and well exposed image wouldn’t have these gaps – generally speaking). We need to remove these gaps by moving the little arrows below the histogram, (see the three small circles) in wards towards the curve, (see second picture).

If after adjusting the two outer settings, you find the image a little too light or dark, try moving the center control one way or the other. This is a better way of adjusting the image than using brightness.

You should have seen quite a difference as soon as you moved the first level control and now see a significant improvement.

You could leave it at that, but you may feel it needs a little extra work…

NOTE; If you do leave it at that, make sure you jump to the bottom of this tutorial to see how I save and export – this is an important part of the job!

Saturation

Should you feel the need for more vibrant colours, you can increase the ‘saturation’ a little. Don’t go over the top, as I often do!

Select ‘Colours’ and then ‘Hue-Saturation’.

Other Effects -Sharpen

A final thing you can do (apart from serious post production techniques) is to ‘Sharpen’ the image a little. A bit like saturation, you can over do sharpening quite easily. But on some images, it can make a significant difference. Select an area of the image in the preview window that shows some fine detail in the image and play around with the settings. I find anything over 50 is too much.

Select ‘Filters’ then ‘Enhance’ and last, ‘Sharpen’.

Save – Optimise file size vs quality

This step is an important part of this process as there is little point in just making the image look better if it is then too big (file size) or too low a quality.

As it is a balance of things, this will take a little practice to get right and of course, different situations will call for a different group of settings, but you should get the hang of it after only a few image exports.

The first thing to note, is that to achieve the final image you want, you must ‘Export As’ not ‘Save As’. If you want to keep the GIMP project for further editing later, then use ‘Save As’ (this will give you a file with the extension ‘.xcf’). But in this case, we want the finished image, so we ‘Export As’.

After clicking the ‘File’ button at the top, select ‘Export As’ which will bring up the export dialogue. Give the file a name and make sure you have selected, or checked that it is going to be saved to the location of your choice. Click ‘Export’.

The next dialogue box that pops up gives the options that will need some trial and error to get right.

The upper most control is the ‘Quality’ slider. As we are processing this image for the web, we will want to take the size down a bit by lowering the quality. I tend to go for about 90%. Any lower can look bad, so be careful.

Make sure the ‘Show preview in image window’ check box is checked, as this will show you the final file size. You will want to get the file size low, whilst keeping the image quality up – a balance! For the web, I would say that 500KB is as big as you would want to go, but you can experiment. The file size will effect the page load times and ultimately the S.E.O. quality and the user experience.

You’re done! I hope that helped. If you have any questions or noticed anything I have missed, please contact me.