How to create a blog header (like I did)

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.

Layers panel

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)

Enter your width and height

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:

Starting with a blank image

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:

Adding your title

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.

Adding one side of the illustration

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.

Duplicating the other 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.

Adding text

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:

Star title
Colourful titleFloral title

Winged title

Click for part 1
Click for part 2

PicMonkey Photo editing made of win

25 Comments on How To Create A Blog Header (Like I Did) – Part 3

  1. Anna
    January 27, 2013 at 3:43 am (5 years ago)

    This is super helpful Kaye! I’m going to have to try all this myself and play around with Photoshop a bit. Thanks for the guide!

    Reply
    • Beautiful Kayekie
      January 27, 2013 at 5:32 am (5 years ago)

      Your welcome Anna, good luck with Photoshop! The process should definitely be much easier in PS 🙂

      Reply
  2. Stephen Hughes
    January 27, 2013 at 3:32 pm (5 years ago)

    I love the wings! and think you’ve explained this very well!
    The instructions can pretty much be used in most software (Freehand, Photoshop, Illustrator) etc – as you used regular classic tool, copy paste and rotate etc!
    Soon more to follow?

    Reply
    • Beautiful Kayekie
      January 27, 2013 at 3:52 pm (5 years ago)

      Thank you Stephen! I’d never drawn wings before, it was a real learning curve haha. The first few wings looked very sad. 🙂

      I’m really glad you thought it was explained well, it was so important to me that others could understand the steps. Photo editors are so great but can get so confusing. Even I get frustrated at times.

      You are so right, the tools are universal! I’m hoping that by teaching a few of these basics it will help others learn some great overall basic skills. I’ll definitely try to create more tutorials 🙂

      Reply
  3. Holly J
    January 27, 2013 at 3:39 pm (5 years ago)

    Thank you so much for this!!! I’m actually just signed up for a photoshop class to help me do this very same thing. But this is great, because it’s really answering all the questions I have. I’ll make sure to bookmark this. xo

    Reply
    • Beautiful Kayekie
      January 27, 2013 at 3:55 pm (5 years ago)

      Your so welcome Holly! It makes my day to know this is useful, truly! If you happen to have any questions feel free to ask, I’d love to help (if I can).

      There’s so many things I want to include in these posts that would be useful but they would get too long lol! I’ll have to slowly do different things in other posts to spread out the info 🙂

      Reply
  4. live.retridemption
    January 28, 2013 at 7:02 am (5 years ago)

    Absolutely gorgeous blog headers! And it’s just the tutorial I was looking for. I need a few headers for my blogs. Thank you so much for the beautiful inspiration and the know-how. Will be following this blog from now on. Keep up the great work!

    Reply
    • Beautiful Kayekie
      January 29, 2013 at 12:04 am (5 years ago)

      Thanks so much for you kind words, I’m so happy it was useful. I’ll keep the tutorials coming, I love sharing what I’ve learnt to help fellow bloggers get what they want for their sites 🙂

      Feel free to share what you create, I’d love to see!

      Reply
  5. Cody Doll
    October 19, 2013 at 12:13 pm (4 years ago)

    I am having a problem trying to figure out what to use as my header. I can’t seem to figure out what would best represent me. Any ideas?

    Reply
    • Beautiful Kayekie
      October 19, 2013 at 1:20 pm (4 years ago)

      Hi Cody! Great question, I know how you feel. It took me what seems like forever to choose something I liked.

      I’d say the best place to start is with two things, what your blog is about and what you like/means most to you. There’s no rules for what’s right or wrong, but it’s a good beginning point.

      Think of colours and font you like too, sometimes I like to collect images of random things I like, it can be for colour, or font, or just because I like it.

      I ultimately chose my header for a few reasons, the drawing was my own, my daughter has a thing with butterflies and I LOVE bright colours. Remember, your header can be ANYTHING you want it to be, it doesn’t even have to make sense, if you know what I mean? Something from the heart will last longer than a random image that looks ok at the time 🙂

      Let me know if you’d like more ideas, good luck with your search for the perfect header!! xx

      Reply
  6. Neslişah
    January 10, 2014 at 6:06 pm (4 years ago)

    OMG! I did, And It’s totally amazing! Thank you so much 🙂 If youwant to see it you can visit my blog ? Therefore, It’s part of yours 🙂 ( hayalimakyajcantam.blogspot.com )

    Reply
    • Beautiful Kayekie
      August 11, 2014 at 5:51 am (3 years ago)

      Hi Neslişah,

      Your header looks absolutely fantastic. I’m so glad this was helpful for you, I wish you and your blog all the best!

      xx

      Reply
    • Beautiful Kayekie
      February 18, 2014 at 5:21 am (4 years ago)

      THANK YOU so much for the nomination, I am so flattered! 🙂

      Reply
      • beautybyavanti
        February 20, 2014 at 4:22 am (4 years ago)

        You’re welcome! You deserve it! I love your blog 🙂

  7. Anne Louise
    March 30, 2014 at 8:37 am (3 years ago)

    this series was soooo helpful! thank you for so generously sharing the blogging love!

    Reply
    • Beautiful Kayekie
      March 30, 2014 at 10:02 am (3 years ago)

      Wonderful to head Anne! Thanks for the feedback 🙂

      Reply
  8. Kay
    August 5, 2014 at 11:44 am (3 years ago)

    Hiya! I was just wondering if you could tell me which font did you use for the 2nd one from the bottom? The one with the floral background.

    Reply
    • Beautiful Kayekie
      August 11, 2014 at 5:49 am (3 years ago)

      Hi Kay,

      The font you are looking for is called Chanel, and you can find it here: http://www.dafont.com/channel.font

      To get the curve at the end, use the left and right curly braces { } and left and right brackets [ ] to find the one that suits best. There are four different styles/lengths.

      I hope this helps! xx

      Reply
  9. Paullina
    November 5, 2014 at 9:44 pm (3 years ago)

    THANK YOU!!!!!!!!!!! I just created delicious piece 😀

    Reply
  10. franzischoenbach
    February 15, 2015 at 1:15 pm (3 years ago)

    Hey :). I just wanted to thank you sooo much, that was so helpful and I just made my own header thank youuu 🙂

    Reply
  11. The Instaration
    June 22, 2015 at 6:27 am (2 years ago)

    I was just wondering if you could tell me which background did you use for the 3rd one from the top? (The floral one)

    Reply
    • Beautiful Kayekie
      July 29, 2015 at 3:52 pm (2 years ago)

      Hi and thank you for stopping by! My deepest apologies for the extremely delayed response to your question! I believe the image was from a website ‘Free flower images’. I found it on google, and all their images are free to use. They have a great selection as well, and are all grouped into colours for easy browsing. Good luck and I hope this helped xx 🙂

      Reply

Leave a Reply