Tags
beginner, blog header, Blogging Help, Free, GIMP, how to, photoshop, PicMonkey, tutorial
Welcome to a tutorial on how I created my 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:
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. 🙂
Step 3
Choose a digital image, which will be used to colour the header text. What we are essentially going to do is this:
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:
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:
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).
Your screen will now look like this. Do not worry if you cannot see your background image, it’s all part of the process:
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.
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:
*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:
after:
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’
Your text should now transform into this:
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
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:
Congratulations! You are one part closer to your awesome new header 🙂
miribt84 said:
You have no idea how long it’s taken me to find a tutorial on how to customize my header like this. Thank you 🙂
Beautiful Kayekie said:
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!
Pingback: Wisecracking/Wildcard Wednesday:Transportation | Sassy Sweet Style
How to make a blog said:
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.
Beautiful Kayekie said:
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!
Pingback: New & Improved «
Connor Higginson said:
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!!!
Beautiful Kayekie said:
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 🙂
Connor Higginson said:
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. 😀
Beautiful Kayekie said:
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 😀
Good luck, and I’d love to see what you create! xx
Nerline said:
Thank you. Your selflessness saved my blog’s head:-)
Beautiful Kayekie said:
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! 😀
deborahmackay said:
Just used this technique on my own blog header. Thanks 🙂
Camille L said:
Thank you Kaye – your tutorial is wonderful!
Thanks to it, I’m able to customize my blog’s header!
Beautiful Kayekie said:
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 😀
luciecatherine said:
Thank you so much! This was so useful xx
Beautiful Kayekie said:
No thank you! I’m so happy to hear it was helpful, I really am 🙂
jane said:
Hmm this is not working for me. There is a grey background behind my header. Any idea why this is happening?
Beautiful Kayekie said:
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 🙂
Joss said:
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!
Beautiful Kayekie said:
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 🙂
TIEYAKAMAL said:
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 .
TIEYAKAMAL said:
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 .
Beautiful Kayekie said:
Hi Tieya! Send me an email and I’ll do what I can do sort it out for you! beautifulkayekie@gmail.com xx