Last week I threw together this blog header for Karen at Did You Make That?:
And a couple of people mentioned that it might be a good idea to create a tutorial, so here I am! For the Did You Make That header I used Photoshop a bit but for this tutorial I'm only going to use completely free software. This tutorial is based on headers that utilise photos or illustrations, I've made it super simplified so hopefully it will be suitable for those that are a little shaky with this sort of thing.
The first step is to think about what pictures you want on your header, and how many of them. This is also a good time to find out if you have any size restrictions, it's easier to start with the right size than to adjust it later (I speak from experience here). You might need to take some photos for your header, so go do that and come back when you've got a selection.
If you don't already use Picnik for photo editing then I highly recommend it, it's free to use but you can pay for extra features if you wish. You can also access images from your Picasa, Facebook, Flickr & Photobucket without uploading them again. This whole tutorial will use Picnik.
If you want a single picture header then go the library tab at the top, and either upload the photo from your computer or select the photo storage site that your photo is located in.
Select the photo you want for your header.
Select 'crop' on the left hand side.
Put the header dimensions in the boxes, also ensure the 'scale photo' box is ticked. In the case of the Wordpress header the dimensions required were 940x198.
Move the rectangle around and re-size to include your chosen portion of the photograph. Then click apply! At this stage it's best to save your banner background as it is, it makes it easier if you want to make adjustments in the future. Select the 'save & share' tab at the top of the page and save your background. When saving make sure the dimensions shown match the figures you put in the crop section. Now you can skip the next chunk of instructions and follow on from the adding text header.
If you want a multiple picture banner, select 'collage' on the Picnik home page.
Select any of the three layouts on the far left (the two, the three & the four square landscape layouts).
Adjust the spacing to how you want it, I like it set to zero so there's no space between but headers can look really neat with spaces between the photos, especially if the background colour matches the colour of the whole blog background. You can also adjust the number of columns and rows.
To get the correct proportions (if you have size restrictions) you will need to do a little maths. The width of these layouts is 1024, but if you have the Wordpress restriction of 940x198 or another size you'll need to divide 1024 by the intended width of your header (in this case 940), then multiply the answer by the intended height (in this case 198) - my sum looks like this: 1024/940 = 1.0893617, 1.0893617 x 198 = 215.693617, so the height I need is 216. To get the right height use the 'proportions' slider until the dimensions in the box on the bottom right are correct.
Now to add your photos! Select where you are taking your photos from on the bottom left and drag them from the photo basket to the collage, play around with the order until it looks just right. Play with the kookiness and roundness for different effects if you like.
It's good to save the background at this point, it's easier to return to if you want to make changes in the future! Click 'done' in the top right, then 'save & share', change the dimensions to what they should be (ie in my case 940 width), if you did your maths right then the height should change automatically to the correct number when you change the width. Now on to adding the text...
Go to the library tab and open your header background.
You can either add text straight over the photos, or you can lay a block of colour between the text and the photos, first I'll show you how to add text directly over the top of the photos.
Select the text tab and type your chosen text in the box on the left. Press add.
Now, using the fonts on the left and the little properties box that appears, play around with the font, sizing, colour, fade level (I nearly always fade text over photos, I think it looks great). Also drag your text to wherever you want it.
If you want to add a tag line, click somewhere outside of the text and type your tagline in the now empty text box. Play around with it in the same way you did with the first lot of text, drag it to where you want it and click somewhere outside of the text.
Next, if you want a different look, visit the 'effects' tab, there are lots of lovely effects to play with. I love Orton'ish and 1960's myself.
When you're happy, save it and pop it on your blog!
If you want your text over a layer of colour, read on...
Open your header background in Picnik and select the 'stickers' tab. You want to look for the geometric and basic stickers.
Select the shape you want, in this example I'm just using the rectangle.
Drag it and resize until it's in right place.
Pick your colour and fade it if you like (I always do). Click away from the shape and select the text tab.
Type your text in the text box, drag the text to where you want it and play with the colour, font, size, fade etc.
Top tip: if you click the box on the top right of the text properties box (above where it says 19% in that picture ^), a little dropper icon will appear and you can select a font colour by clicking on anything on your banner, I matched the font colour to my hair in this example. Click away from the text when you're happy. If you want to change the look of your banner then explore the effects tab, it's a great way to make your banner extra special.
When you're happy save your header and pop in on your blog.
And there you have it, a completely free and (hopefully) simple way to update your blog header.
If you have any questions please ask in the comments or e-mail me. And if you make a header using this tutorial please send me a link, I'd love to see.
xo Kirsty
Recent Comments