By Neil on January 13, 2014

Creating the website background image

The video quickly shows how the background image used on TurboBikeTrainer.com was created.

Hear about new videos and posts as soon as they happen.

Early on when developing the idea for TurboBikeTrainer.com companies were contacted about advertising media and we were sent through several images, including the one that is currently used as a background on the website.

Editing the image in GIMP

I opened up the image in free open source graphics software GIMP, and did one or two quick edits just to modify the dimensions a little and also to make the background black and white.

Cropping the image

Using the rectangle select tool from the left-hand icon toolset I drew a selection area around the image for the area that I wanted to keep. Initially this took a little bit of trial and error (uploading the image onto the website and seeing how it looked), but ultimately I just removed a little bit of the image on either side. Once the selection rectangle is drawn you choose Image/Crop to Selection from the main menu bar to crop the image.

Making the image black and white

This is very simple. Click Colors/Desaturate from the top menu and then I used the default selected Lightness option from the pop-up window. You now have a black and white image.

Scaling the image to reduce the dimensions and file size

To lower the file size would help load times on the web, so since the original image was fairly high resolution and large in dimensions I used the Scale option in GIMP to reduce these. Click Image/Scale from the main top menu bar and I reduced the width to 1000 (and the height auto-resized proportionally – make sure the link icon is linked to do this), and I reduced the X and Y resolution down to 100. Zooming in on the image still shows it is pretty sharp and good enough for the website.

Exporting the image

If you click save it saves as a GIMP file format, so you need to click File/Export from the main menu. I exported as a .jpg file, and you need to write in the file extension when exporting from GIMP.

Summary

This is a quick and easy way to edit images and I recommend GIMP and use it regularly. It is always a good idea to reduce file sizes to a minimum (of course the end quality still need to look good), and here I wanted a black and white image because I did not want a bright colourful background that took the eye away from the bright colours in the actual website content.