• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

Neil Curtis

Learn how to make money online

  • Home
  • About
  • Start an Online Business
  • Latest Articles
  • My Resources
  • Contact

Creating the website background image

By Neil on January 13, 2014

Creating the website background image

Prerequisites

First download the latest version of GIMP from here: www.gimp.org. It’s 100% FREE.

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

Case-Study-Arrow

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.

LIKE WHAT YOU’VE READ?
I publish new tutorials all the time so it would be great let you know when something is ready for you to check out. I also have lots more to share with you about how to easily customize and style your WordPress website, so why not join my gang.

TELL ME MORE >>

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Copyright © 2021 · NeilCurtis.me · Website powered by the Genesis Framework and uses the Maker Pro Theme

/* ----------------------------------------- */ /* Content Template: Guides Layout - start */ /* ----------------------------------------- */ #ninetypercent { width: 90%; margin: 0 auto; } #profilebox { border: dashed 2px #ccc; background: #E8E8E8; padding: 10px; padding-bottom: 15px; margin-bottom: 20px; } #profileimage { float: left; max-width: 150px; margin-right: 3%; } #profilebio { font-size: 90%; } #stepfont1 { float: left; font-size: 30px; font-weight: bold; padding: 5px; padding-left: 3%; background: #f96e5b; width: 100%; min-width: 280px; color: #FFFFFF; } #arrow { float: left; } #UWBwrap { padding-top: 10px; border-top: solid 3px #ccc; border-bottom: solid 3px #ccc; } /* ----------------------------------------- */ /* Content Template: Guides Layout - end */ /* ----------------------------------------- */