How to create a blog header (like I did)

Welcome to part 2 of how I created my blog header for free. Now that we have the custom text for our header, we are ready to create the extra elements. This tutorial will show you an easy way to use your own illustrations or clip art, and colour them in the same way we did in part 1. By the end of this post you will have everything you need to build a beautiful blog banner, and be ready for the final step. Happy Creating!

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

Step 1

Choose whether you would like to use your own drawings, or clip art in your header. Both options will work equally good.

1 – Clip art/images: If you’re not a fan of drawing, you can use images from the web. Only select clip art that is coloured black or mostly black, with a white background. A helpful Google search term to use is when looking for images is ‘silhouette’. Remember, only use images you have permission to.

Clip art examples

2 – Drawings: If you’d like to use your own illustrations, you will need a scanner. It’s as simple as drawing on white paper with black ink, then turning them into digital images ready to be fixed and edited.

The choice of pen type and what to draw is entirely up to you. Anything you draw can be digitally cropped, rotated, flipped, enlarged, minimised and duplicated, which means you don’t have to draw everything perfectly. For example If you wanted a pattern effect, you only have to draw one image and duplicate the rest.

For this header I will be using my own illustration of a wing. The right and left side of the header are going to be mirror images of each other, so I only have to draw one half:

My illustrated wings

Step 2

If you’re using clip art, save the image(s) you want then go ahead and skip to Step 5.

If you’re using illustrations, draw your desired image(s) and scan them to create a jpg. The default scan setting should be suitable. The file may be large, but we will reduce its size later.

Here is what my scanned page looks like:

Illustrations

Step 3

Now we’re going to open our scanned jpg in GIMP to crop and fix it.

Open GIMP > ‘file’ > ‘open’ > select your jpeg scanned image and ‘open’.

It will look something like this:

Illustration in GIMP

Now to crop the image:

Select the ‘crop tool’ in the Toolbox panel > click and drag over the section you want > left mouse click/press enter to apply crop

During crop:

During crop in GIMP

After crop:

After cropping

Step 4

Next we will fix the highlights and contrast to make the drawing more black and white.

select ‘colours’ from the top menu > ‘Levels’

The Levels window will open. You may need to move the window aside to view the image and window at the same time.

Under the ‘Input levels’ section, were going to slide the middle (black) and right (white) tab to adjust the image. Adjust your image accordingly. For example:

Before edit & after edit

Sliding the right (white) tab to the left ← brightens the image
Sliding the middle (black) tab to the right → darkens the black

Adjusting colour levels

‘OK’ when done. Your drawing should now look more black and white:

After levels edit

When you’re satisfied with the image, save to move onto next the steps.

Select > ‘file’ > ‘export’ > change file name so not to overwrite original background image, ensure it is a .jpg. > click ‘export’ > in new window, choose quality at 100 and select ‘export’ again to finish.

Step 5

Hooray, now to apply the exact same steps we learnt in Part 1: the colouring.

Choose a digital image, which will be used to colour the illustration or clip art. What we are essentially going to do again is this:

Before and after edit

Remember, you can use anything you want, provided it is a good quality, high-resolution jpeg image (for more ideas on what to use, see part 1). Also, only choose images you have permission to use and modify. This is where using your own images comes in handy, you are free to utilise them however you choose.

I will be using another artsy background I created:

My background

Step 6

You now have everything you need. If you do not have GIMP open, do that now.

Select > ‘File’ > ‘open’ > select your colourful background jpeg image and ‘open’.

It will look something like this:

My background in GIMP

Step 7

We’re now going to copy and paste your clip art or illustration onto the background image.

Open your clip art/illustration > ‘select’ in the top menu > ‘All’ > you will see a dashed line surround your image > ‘edit’ in the top menu > ‘copy’ >

open your coloured background window > ‘edit’ > ‘paste’

moving from one screen to the next

Your clip art/illustration will now be on top of your background image. Do not worry if it fills the entire image or is the wrong size, we will fix that next.

Step 8

Select the ‘scale tool’ in the Toolbox panel > ensure the chain image is linked in the scale window, click it to link/unlink. This will keep your image proportionate as you change it.

With the Scale window open, you can either:

1 – click and drag the image to the left or right to resize, or

2 – manually resize it by clicking up or down on the height/width tabs.

Illustration now copied onto background

Just as we did in the last tutorial with the text, resize the image to fill most of the background. Click ‘scale’ to apply.

If your clip art/illustration is off-centre, use the ‘move tool’ (located directly above the ‘scale tool’) to fix this.

It will now look something like this:

Illustration reduced in size

Step 9

Now that’s done, let’s give the clip art/illustration it’s own layer so we can complete the final steps.

Select ‘layer’ from top menu > ’To New Layer’

Almost done! Now to make the clip art/illustration transparent.

With the new clip art/illustration layer selected > click/select the new merged layer > click ‘Mode: normal’ > select ‘screen’

And now your awesome image will transform into this:

Transformation almost complete!

Step 10

See where I’m going with this? 🙂

All that’s left to do is make some final adjustments and cut off the excess.

Here is your final chance to make everything perfect, so feel free to re-position (‘move tool’) and re-size (‘scale tool’) the image around to where you are satisfied with the colouring.

When that is all done, select the ‘crop tool’ and click and drag over your text > Left mouse click/press enter within image to apply crop

Finished image:

Finished wing

Pat yourself on the back, you have successfully created your awesome image. To save:

Select > ‘file’ > ‘export’ > change file name so not to overwrite original background image, ensure it is a .jpg. > click ‘export’ > in new window, choose quality at 100 and select ‘export’ again to finish.

Finished wings

Finished clip art

Coming next: How to create a blog header (like I did) Part 3 – Finishing your header! 😉

Click for part 3
Click for part 1

PicMonkey Photo editing made of win

6 Comments on How To Create A Blog Header (Like I Did) – Part 2

  1. itin
    January 18, 2013 at 1:43 pm (5 years ago)

    This is so cool. I bookmarked this tutorial for when I have time to change my blog header, I will try your tips esp that my GIMP hasn’t been useful for me these days.

    Reply
    • Beautiful Kayekie
      January 18, 2013 at 2:51 pm (5 years ago)

      Glad you like it! 🙂

      Good luck with making your blog header!

      Reply
  2. vivianmadeline
    January 13, 2014 at 7:06 pm (4 years ago)

    This is great! Just not stumbling upon this. Thanks for sharing these tips!

    Reply
  3. Lapaka K
    September 24, 2014 at 7:08 am (3 years ago)

    Just discovered your blog, I love it and thank you for the tutorial it is very helpful.

    Reply
    • Beautiful Kayekie
      October 2, 2014 at 3:18 am (3 years ago)

      Welcome to BK and thank you! Really glad to know this was helpful 🙂

      Reply

Leave a Reply