How To Create A Blog Header (Like I Did) – Part 1

How to create a blog header

Welcome to a tutorial on how to create a blog header for free, part 1. There’s a thousand different ways to create that special header just for you, and this is just one step by step guide. It’s designed for beginner to experienced bloggers who are on a budget but still want something unique. Absolutely no Photoshop needed. I was a complete novice when I first created mine after all! I love sharing what I have learned, so I hope this helps you create something you absolutely love. 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 (optional)

1 – You may skip this step if you already have the font you want, installed on your computer.

2 – If you DONT have a cool font but want one, I highly recommend dafont.com. It is a library of free fonts available to download. You can choose one, or as many as you like. Here are but a few good examples:

Font examples

At DaFont you can:

  • Preview what your desired text will look like
  • Choose from a seemingly endless selection
  • Submit samples/images of unknown font, which the community will help you identify and locate. If you’re lucky, it will available right there on DaFont

Instructions on how to install fonts to your computer on Windows & Mac here. It’s easy!

Step 2

Visit Gimp.org and download GIMP, a free graphic editing program, and the arguably best alternative to Photoshop. It is one of my top recommended free photo editors, and I use it regularly (version 2.8.2). Don’t be afraid if the thought of using it is scary, you are not alone. I will give step-by-step instructions to help guide you. It’s worth the effort, trust me. :)

GIMP screen shot

Step 3

Choose a digital image, which will be used to colour the header text. What we are essentially going to do is this:

A + <image> = coloured text

Cool, huh?

You can use anything you want, provided it is a good quality, high resolution jpeg image. You don’t want to start out with poor quality images which can distort and look pixellated later on. Remember, we can always reduce file size when we are finished putting the whole header together if needed. Think:

  • Free stock photos
  • Your own photos, for example, texture and colours like grass, bricks, wood, clouds
  • Your own art and illustrations
  • Single colours, for example grey or orange etc
  • Scans of textures like lace, cardstock or fabric
  • Just about anything you can think of, use your imagination!

* Important: 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 an artsy background I created:

Art background

Step 4

Now you have prepared everything you need for part one, open GIMP.

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

It will look something like this:

GIMP screenshot

Step 5

Now we need to add a new layer by pressing the ‘new layer’ button. In the ‘New Layer’ window make sure ‘white’ is selected, then press ‘OK’. Do not worry about width or height as GIMP will automatically select a size identical to the background image, leave these numbers as they are (note: your’s may be different to mine, that is OK).

Adding a new layer

Your screen will now look like this. Do not worry if you cannot see your background image, it’s all part of the process:

Your new screen will look blank, this is ok

Step 6

Next we will add text.

Select the ‘text tool’ in the Toolbox panel, and click cursor anywhere within the white image. (FYI: This will automatically create a third layer, a ‘text layer’, which you will see appear above your new layer in the layers window)

Now you have placed the cursor, type in your header title. I’m using an imaginary blog titled ‘This Blog Is Awesome!’. Do not worry if the text is small and the incorrect font, we will change that next. Alternatively, you can select your desired font and size before you type.

Ensure your text is coloured black only.

Add text and modify it

Edit your text to fill most of the white space as I have done. Exact positioning isn’t important, we will crop the image when we are done anyway.

Highlight your text to make changes:

More options to modify your text

*help: to edit text you must be in the correct text layer and have the text tool selected. If you cannot make any changes, it may be because these are not selected.

Step 7

Now that you are happy with your text, right click on the ‘text layer’ (the panel to the right of your image) and select ‘merge down’. This will merge your text layer with the white layer:

before:

Merge your layers

after:

Your text and blank layer are now merged

Step 8

What we are going to do next is make your text transparent, to reveal the background image underneath.

Now click/select the new merged layer > click ‘Mode: normal’ > select ‘screen’

Making your text transparent

Your text should now transform into this:

Your text is now coloured!

Optional: you can drag the text around with the ‘move tool’ if needed. Sometimes when editing text in this way, you need to reposition the text to get the best colour. Do not worry about where it is on the page, so long as all your text is still within the image. Remember, we will be cropping it next.

Step 9

Your almost there!

When you are satisfied with how the text is coloured, you can now crop the image to tidy it up.

Select the ‘crop tool’ and click and drag over your text > Left mouse click within image to apply crop

Crop your header

And that’s it! Now you can save your finished image in preparation for the next parts.

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 blog header title:

Ta da! Now you are done with part 1

Congratulations! You are one part closer to your awesome new header :)

63 Comments on How To Create A Blog Header (Like I Did) – Part 1

  1. luchessa
    January 13, 2013 at 2:28 pm (2 years ago)

    Kaye, this is really helpful and makes somethings so simple to understand! :) Thanks for the post.

    Reply
  2. That girl JJ
    January 13, 2013 at 6:48 pm (2 years ago)

    Great post! Thank you so much for the lovely explanation x

    Reply
    • Beautiful Kayekie
      January 14, 2013 at 3:11 am (2 years ago)

      Your very welcome! I loved putting it together, I want to see other bloggers create something they love :)

      Reply
    • Beautiful Kayekie
      January 14, 2013 at 3:06 am (2 years ago)

      Thank you! I hope it helps to create something you love :)

      Reply
  3. Sarah Lee Gretty Zamroa
    January 13, 2013 at 11:27 pm (2 years ago)

    This is great, so often they are for photoshop and I use GIMP too and trying to figure out how to swap it from photoshop instructions to GIMP is mind boggling! :0) This helps a ton! I’ve been meaning to make my own…now maybe I should!

    Reply
    • Beautiful Kayekie
      January 14, 2013 at 3:12 am (2 years ago)

      When I first started out, and even now, I find it so difficult to find good tutorials for free photo editing software. Photoshop is amazing but let’s not forget not everyone wants or is able to use it.

      All the GIMP tutorials I have found are very useful, but it can be difficult to apply that to my blogging needs as there are no real examples. I’ve made a promise to myself that what I know in Photoshop I will do my best to convert into GIMP tutorials. They can essentially do the same things, we just need to figure out the different functions :)

      You should definitely give it a go! You never know what you might create!

      Reply
  4. poundlandprincess
    January 13, 2013 at 11:43 pm (2 years ago)

    Thank you so much for this, I have added the post to favourites so I can do it all in one go when you post the rest.
    Ive got so many ideas for a header but didn’t know how to do it.

    Reply
    • Beautiful Kayekie
      January 14, 2013 at 3:15 am (2 years ago)

      Your most welcome! And I know exactly what you mean, it’s so difficult knowing exactly what you want but not having an idea as to how to translate it into an actual image.
      When I first started blogging I was so lost, but had so many ideas. This is a great tutorial in the sense you can apply it to so many other things :)

      Reply
  5. akirahbabe
    January 14, 2013 at 5:50 am (2 years ago)

    wow! THIS is really helpful! thanks for this lovely kayekie♥ :)

    Reply
  6. justBglam
    January 14, 2013 at 7:47 am (2 years ago)

    This is so cool!

    Reply
    • Beautiful Kayekie
      January 14, 2013 at 8:02 am (2 years ago)

      Aww thanks! Glad you enjoyed it, happy creating :)

      Reply
  7. Mammu
    January 14, 2013 at 8:04 am (2 years ago)

    Thank you for great tips! This is very helpful :)

    Reply
    • Beautiful Kayekie
      January 14, 2013 at 9:07 am (2 years ago)

      Your welcome! More great tips to come soon :)

      Reply
  8. Donah D. Sweetjellybean
    January 14, 2013 at 9:53 am (2 years ago)

    Thanks so much for this! Loving this new found feature I didn’t know in Photoshop heheh. Will post and share your tutorial hun. :-) xx Donah

    Reply
    • Beautiful Kayekie
      January 14, 2013 at 10:54 am (2 years ago)

      Thanks for sharing Donah!

      When I first learnt this feature it went a little crazy, haha! It’s a great tip to know. Once you get the hang of it you’ll be experimenting with everything :)

      Reply
  9. My Lucite Dreams
    January 15, 2013 at 3:32 am (2 years ago)

    Beautiful beautiful Kayekie! What a gorgeous creation! I love your tutorials! I’m going to have to play around a bit on gimp, although I don’t have your eye. I always love seeing your beautiful creations! Do you offer layouts for bloggers, if not you should :-)

    Reply
    • Beautiful Kayekie
      January 15, 2013 at 3:56 am (2 years ago)

      Thank you Taylor! :)

      You know, it’s something I have been seriously contemplating for a long time now but have held back because I don’t know everything (and rationalise that I need to lol). I know I should just go ahead and do it. Maybe when I learn a little more :)

      Reply
      • My Lucite Dreams
        January 15, 2013 at 8:17 pm (2 years ago)

        Absolutely! Offer what you can, you have such a talent!

    • Beautiful Kayekie
      January 16, 2013 at 1:31 am (2 years ago)

      Thank you so much for the nomination! You are too kind! :D

      Reply
  10. tiinster
    January 16, 2013 at 12:59 am (2 years ago)

    great post! extremely useful & since i’m really into making my own graphics too it was right up my alley :)

    Reply
    • Beautiful Kayekie
      January 16, 2013 at 1:30 am (2 years ago)

      That’s awesome! I could probably learn a trick or two from you :D

      Good luck, feel free to share if you create anything, I’d love to see.

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

      Aww thanks so much for sharing, I really love how your post image turned out, the effect on the font looks great! Makes me so happy to see the tutorial worked for you! :)

      Reply
  11. miribt84
    April 14, 2013 at 3:45 pm (2 years ago)

    You have no idea how long it’s taken me to find a tutorial on how to customize my header like this. Thank you :)

    Reply
    • Beautiful Kayekie
      April 14, 2013 at 4:22 pm (2 years ago)

      You’re very welcome! I was hoping to be able to help others do what I struggled with for so long as well. I would have given anything to know how to do it back then, and I just knew I wouldn’t be the only one :)

      Good luck creating!

      Reply
  12. How to make a blog
    April 19, 2013 at 9:41 pm (2 years ago)

    I was excited to discover this web site. I wanted to thank you
    for ones time for this particularly fantastic read!

    ! I definitely really liked every part of it and i
    also have you saved as a favorite to look at new things on your blog.

    Reply
    • Beautiful Kayekie
      April 21, 2013 at 12:55 am (2 years ago)

      Well now I definitely have to thank YOU for having me in your favourites :)

      I truly appreciate the feedback, all the best with your site!

      Reply
  13. Connor Higginson
    May 13, 2013 at 11:01 am (2 years ago)

    Hi. Thank you so much for this post. So helpful. I’ve been struggling to find a photo similar to yours that I could use though. I’ve tried a load of sites and found kind of similar photos but nothing quite like yours which is pretty awesome. Wondering if you had any more ideas of places to look? Once again, Thank you!!!

    Reply
    • Beautiful Kayekie
      May 13, 2013 at 2:20 pm (2 years ago)

      Hi Connor! I love nothing more than to hear you found this helpful :)
      I’m so sorry you weren’t able to find anything suitable, I know the feeling! :) I have had no luck with stock photos (they’re always, meh), so in the end I created my own. The photo I used for the background I created in Photoshop (CS6) with custom watercolour ‘splatter’ brushes. I’ve done a quick tutorial on it here:
      http://beautifulkayekie.com/2013/04/25/how-to-add-digital-watercolours-to-images/
      Do you happen to have access to Photoshop? You can also recreate these images with other photo editors too, such as GIMP. The process is a little slower as you have to create the watercolor splatters yourself, but its definitely do-able!
      Feel free to drop me a line if you need anymore help, I’d be more than happy to :)

      Reply
      • Connor Higginson
        May 13, 2013 at 5:58 pm (2 years ago)

        Thank you for getting back to me. You have some unbelievable photos by the way. I studied photography in college a couple of years back which I loved, I was a lot better at the editing than actually taking the photos though so I have to admit I’m pretty jealous of your awesome skills! I do have Photoshop actually so I’ll download the brush tool. As you recommended I’ve also downloaded GIMP. Once again Thank you so much for your help. :D

      • Beautiful Kayekie
        May 14, 2013 at 10:48 pm (2 years ago)

        You are too kind! Truthfully, I only started ‘real’ photography less than a year ago, but having a good camera (and photoshop lol) does make a big difference :)
        Someone once said to me photoshop is only as good as the person using it so that’s proof your photography is great! I’m a lot like you, I enjoy editing a lot more. The freedom to create anything is exciting.
        How did you go with creating your own background? Because you have photoshop, you might find it easier to do it in there! It’s basically the same, using a coloured background image, with a white layer merged with text layer (black text) with the blending mode changed to ‘screen’. PS and GIMP differ a little in layout but the principal is the same :D
        Good luck, and I’d love to see what you create! xx

  14. Nerline
    June 26, 2013 at 11:54 pm (1 year ago)

    Thank you. Your selflessness saved my blog’s head:-)

    Reply
    • Beautiful Kayekie
      June 28, 2013 at 8:33 am (1 year ago)

      Hehe, so glad I could save your blogs head! All the best with it, I love to see others having success with a little DIY design! :D

      Reply
  15. deborahmackay
    August 15, 2013 at 2:55 pm (1 year ago)

    Just used this technique on my own blog header. Thanks :)

    Reply
  16. Camille L
    August 26, 2013 at 5:24 pm (1 year ago)

    Thank you Kaye – your tutorial is wonderful!
    Thanks to it, I’m able to customize my blog’s header!

    Reply
    • Beautiful Kayekie
      September 1, 2013 at 5:50 am (1 year ago)

      You are VERY VERY welcome Camille, thank you for your comment. I love to hear that others are able to make their perfect blog header :D

      Reply
  17. luciecatherine
    December 20, 2013 at 7:23 pm (1 year ago)

    Thank you so much! This was so useful xx

    Reply
    • Beautiful Kayekie
      December 23, 2013 at 3:50 am (12 months ago)

      No thank you! I’m so happy to hear it was helpful, I really am :)

      Reply
  18. jane
    December 24, 2013 at 10:05 pm (12 months ago)

    Hmm this is not working for me. There is a grey background behind my header. Any idea why this is happening?

    Reply
    • Beautiful Kayekie
      December 25, 2013 at 12:30 am (12 months ago)

      Hmmm very curious! Can you give me a quick run down of the steps you’ve taken? Id love to try figure it out for you :)

      Reply
  19. Joss
    February 10, 2014 at 10:07 am (10 months ago)

    Hi! this is a great tutorial but I also got a grey background once I uploaded the header to Blogger. I followed the exact steps of this tutorial. Any suggestions? Thanks!

    Reply
    • Beautiful Kayekie
      February 10, 2014 at 3:26 pm (10 months ago)

      Hi Joss! Im so sorry to see you had difficulties with it. Im not so familiar with the Blogger platform so my guess is it may be something with it. I’ve had a lot of feedback from others and the grey doesnt seem to be an issue.

      Without knowing more I’d suggest checking the file type (is it JPEG) or Blogger requirements. Im so sorry if this is of no help at all! If you still have trouble let me know and I can look into it closer :)

      Reply
  20. TIEYAKAMAL
    March 13, 2014 at 9:37 am (9 months ago)

    Hi Pretty ! im Tieya Kamal from Malaysia . and i was folow you tutorial but what can i said that i can’t follow that steps because i was hard to follow step 7 because my gimp dont have like you show . i don’t know why . ive done reinstall but still like that . i hope you can help me . because i love your blog so much .

    Reply
  21. TIEYAKAMAL
    March 13, 2014 at 9:38 am (9 months ago)

    Hi Pretty ! im Tieya Kamal from Malaysia . and i was folow you tutorial but what can i said that i can’t follow that steps because i was hard to follow step 7 because my gimp dont have like you show . i don’t know why . ive done reinstall but still like that . i hope you can help me . because i love your blog so much .

    Reply
  22. Ariel
    July 23, 2014 at 4:46 am (5 months ago)

    Thank you for this! It was very helpful :) Do you have any idea how I can center my header on my blog? I know how to do it on gimp via the text tool, and I did it. But when I add it to my blog, to me it looks like it needs to be in the middle more. Perhaps that’s a wordpress html issue? Would love feedback.

    xoxo,
    Ariel

    Reply
  23. Kelsey McFee
    August 13, 2014 at 3:28 am (4 months ago)

    Hey Kaye! I was wondering if you could look at my blog and give me suggestions for a header for my blog? I am stumped on what font I should use. My book blog website is gotbooksreview.blogspot.com I am trying to go through a make over for my blog.

    Reply
    • Beautiful Kayekie
      October 2, 2014 at 3:29 am (3 months ago)

      Hi Kelsey,

      I have to apologise for my extremely late reply, I haven’t forgotten about you! The greatest advice I’ve ever received was from art Professors at Uni, and that is to keep a visual journal (for everything!). I know it sounds so obvious but I can’t even tell you how much it has helped my ideas and pushed my creativity further. Keeping a pinterest board for ideas is also great, but honestly don’t overlook good old pencil and paper. Jot down ideas, scribble drawings, phrases. Anything that comes to mind, relevant to your blog or not. You’ll be surprised how great ideas flow from doing things like this! Let me know how you go, feel free to drop me a line if you wanted to chat more about your blog! :) xx

      Reply
  24. diyameliamhrn
    October 6, 2014 at 10:27 am (3 months ago)

    this is so helpful thank you very much!
    ps : has anyone told you that you look like Naya Rivera?a

    Reply
    • Beautiful Kayekie
      October 8, 2014 at 1:08 am (2 months ago)

      No one has every told me that before, that is a first so thank you! I’m really happy that this was helpful for you, I never get tired of hearing that. So much awesomeness!

      Reply

2Pingbacks & Trackbacks on How To Create A Blog Header (Like I Did) – Part 1

  1. […] with the Bloglovin icon down at the bottom of the post. Isn’t it gorgeous?! She had a 3 part tutorial on how to create a unique/FAB Blog Header & since I’m CLUELESS about web design (& not […]

  2. […] posts from Beautiful Kayekie I finally created this lovely header you see above. Her post on How to Create a Blog Header was so easy to follow and the results are lovely. If you’re looking for a simple way to […]

Leave a Reply