Welcome to part 3 (the final step!) of how I created my blog header for free. If you have made it this far you deserve kudos, by the end of this post you will have your cool new header. I will show you some GIMP basics you’ll need to combine all your elements, then finish our header step by step. I have created a few more examples at the end, to show you just how versatile this method is. The possibilities are endless, happy creating!

Part 1
Part 2

Dont forget: If you get stuck, I’m happy to help. Leave a comment below and we will figure it out!

Step 1:

Before I show you how to complete your header, i’ll re-introduce you to some GIMP basic tools. Most of these you’ve used in part 1 & 2, and this quick refresh will give you something to refer back to. You see, now that you have each part of your header ready, you can use these tools to create other useful things like your blog business cards as well.

Regardless of what design idea you have in mind, you have your blog title and images ready to go! Whether you’re creating a header, a business card, or even a Facebook cover, the final steps are simply a matter of arranging things where you want them to be on the right sized canvas. Yep, it’s that easy.

The Basics

Layers: Most advanced image editors like GIMP (or Photoshop) work with layers. Layers make up and contain everything you see in your image. Think of them as sheets of transparent paper on which you are going to create art, in this case, your header.

Each different layer contains its own part of your ‘masterpiece’, so you can easily change and edit individual parts without changing everything. Layers can have anything from shapes to images, to text, to solid colours and everything in-between.

For example, our ‘This Blog Is Awesome!’ header was made using five layers:

Layer 1 – The white background (this will be the bottom layer)
Layer 2 – The header title
Layer 3 – The left side of the wings
Layer 4 – The right side of the wings
Layer 5 – The text signature beneath the title

There’s so many things to learn about layers, but this basic understanding of how it works should help you on your path to cool photo editing.

Move Tool: Just as you have used in part 1 & 2, the move tool will be your best friend in arranging your header. Remember, for each element you wish to move – title, images,text or other – you must have that specific layer selected.

Rotate Tool: With this tool you have the freedom to rotate anything within its layer. You can use it to angle or straighten text or images.

Scale Tool: To resize something, this is your baby. Remember to click the ‘chain’ icon in the Scale Tool window to ensure your image stays proportionate as you change it. Note, if you want to resize text you do that using the text tool, not with the scale tool.

Flip Tool: You can reverse layers, things within a layer (a ‘selection’) or path (the path tool we havent used yet!) horizontally or vertically.

Text Tool: Add text to your image. You can select size, colour and font, among other options with this handy tool. Selecting the text tool and clicking within your image will automatically create a new text layer, or you can create a new layer before hand.

Undo/Redo: Never mind mistakes, you’ll find these options in the top menu. To select undo/redo go to: edit > undo/redo. Alternatively, the shortcut keys are Ctrl+Z to undo, Ctrl+Y to redo.

Step 2

Find out the dimensions of your header. For example, my blog theme Chateau-Wordpress recommends a minimum of at least 960 pixels (width), and 260 pixels (height).

Open GIMP

To create a new blank image click > file > new > in new window, enter your header size ‘width’ & ‘height’ in ‘px’ pixels > press ‘OK’. (Remember, your width and height may be different to mine, that is OK)

You can zoom in and out of your image at any time by selecting the drop down menu below your image, Eg. view the image at 50% magnification. It should look something like this:

Step 3

Next we are going to open the title we created as a layer.

Select ‘file’ > ‘open as layers’ > select your header title file > ‘open’

Don’t worry if it doesn’t look perfect, you can now use any of the tool options mentioned in Step 1 to edit the title to your liking. Reposition it, resize it, etc, you get the idea.

Here’s what might look like when you are done:

Step 4

Now we can add the other images (illustrations or clip art) we have created.

File > ‘open as layers’ > select your image file(s) > ‘open’

If you have more than one image you can open them all at once, or one at a time, the choice is up to you. Each image you open will have its own layer and will have to be edited individually.

Again, use any of the tool options mentioned in Step 1 to edit the title to your liking.

Step 5 (optional)

This optional step is to explain how I created both sides of the wings with a single image.

Because the left and right side are the same, I only need to create one side (as mentioned in step 4) then duplicate, flip and move the layer into position to make the opposite side. Here’s how:

Right click on the layer you want to copy > select ‘duplicate layer’ OR select the ‘duplicate layer’ button at the bottom of the ‘layers’ panel.

This will now create an exact copy of your layer and its contents. You will see a duplicate layer in the layer menu. Now simply use the ‘Move Tool’ and ‘Flip Tool’ to create the opposite side.

This method is faster than doing each side individually and wasting a lot of time trying to match them.

Step 6 (optional)

For the final touch I added a small text signature to the header.

Simply select the ‘text tool’ > place curser within image > choose font/colour/size and desired attributes > type text.

Move and reposition as needed.

Step 7

We are now finished! Yay! *streamers and balloons*

To save:

Select > ‘file’ > ‘export’ > choose a file name, ensure it is a .jpg. > click ‘export’ > in new window, choose quality at 100 and select ‘export’ again to finish.

And that, ladies and gentlemen, is it. I hope this was helpful and you are now the proud owner of a unique blog header that is perfectly you!

Before I go, here are just a few examples of what you can create using this three-part tutorial. Each design uses just some, or all of the steps combined: