Step #1: Making the Header
I found this really cool website called Picnik it is so easy to use, and the best part is that it is FREE and NO registration required!! I will show you how I made this header, so that you can make one that is 100% Custom for you!
First, head over to Picnik, and click on Get Started!
Second, I am going to click on Make a Collage.
Then select a layout.
I selected this one and used the Proportions slider to change the height a bit.
Down at the bottom, you can upload your images.
I am going to upload from my Computer. After you upload, drag the photo on to your layout.
I wanted a big spot for my Header title, so I am going to leave the left picture empty. and I am going to change the color to a maroon color that matches my background that I made earlier.
After you get the right color, I have used the Roundedness slider to make the image have rounded edges.
Now just Click on Done in the top right-hand corner.
Now I want to work on the text, so I am going to the Text link at the top.
My title is going to be “Messes with the Reynolds”, but I don’t want to type the whole thing in just one box, because I want to lay it out cute, so I am first going to just type “Messes” and click Add.
Then pick a cute font. The little circles on the 4 corners allow you to size the word, and the circle on the top allows you to rotate it.
So after I added a few more Text Boxes, and played with the fonts, this is what I came up with.
Now I would like to add a little embellishment, so I am going to click on Stickers at the top.
I found a cute little family drawing that worked perfectly and just dragged and dropped it on to my Header.
Then I went back to the top and clicked on Frames.
There, I picked Rounded Edges, and adjusted it to match my image.
Now if your background is any other color than white, you will want to select Transparent Corners!
If your header looks the way you want it, just go back to the top and click on the Tab that says: Save & Share.
These are the settings that I used to save my photo. I did 1000px wide, so that it would fit just perfect on my wide 2 column template, and I picked png, so that the corners would be transparent, not white. (JPEG files will not allow you to save transparent).
Now my saved Header looks like this!! So cute!
Now, you can add your header image as you normally would here:
When you upload, make sure that you select Instead of title and description, and do NOT select Shrink to Fit. Then Click Save.
If you are using the Minima Template, follow these next steps to get rid of the border around your header, and center it (if you are using the new 2010 Templates, stop here):
Go to your Edit HTML page, and find your #header-wrapper, and change the border to 0px. So your #header-wrapper should now look like this.
Now go down to your #header, and change the 5px to 0px. Also change the 1px to 0px on your border. So now it should look like this.
Now you’re Done!
Wow! This looks awesome! I've used Picasa for my custom header, but maybe I'll try Picknik! Thanks!
Thank you so much for all of your very clear, step by step tutorials! They are so helpful. I was just wondering how to round the edges on my header and now I know!
THANK YOU for these tutorials! I used to have Photoshop and boy, I miss those days of designing headers. This is the perfect solution.
My only issue is centering my header on my blog. I don’t believe I’m using the Minima template, so I’m not quite sure to adjust it otherwise.
Really, thank you so much for this. Made my day! :)
Thank you so much! I used this tutorial to make a new header that I’m quite fond of :)
I’ve used your tutorial to create my header, however it’s not centering it…its getting really frustrating!!! Ahhh! What am I doing wrong?!?!?!
Have you tried changing your margins? What template are you using?
I am having the same problem as the person above. I can’t get my header to center. It’s driving me crazy! Do you have any suggestions? It’s seems that no matter which template I use the header I am trying to apply will not center.
Help? please????
~Joy
I just posted a tutorial here. Let me know if that solves it.
Thanks so much for this tutorial! I use Picnik and didn’t know I make header on there. Thanks again!
thank you so much for this tutorial! so clear and so easy! i’ve been wanting a new look for my blog and now i have one and love it! so cool-thanks again for taking the time to write this all to help people like me who have no clue!! so, so nice of you!
here’s my new header http://7alltogether.blogspot.com/
Thank you! Thank you! Love your tutorials – just made a header in only a few minutes!
my new blog and header using your toturial –
http://doingit-myway.blogspot.com/
Thank you! Just did my new header! :)
okay, here’s my dilemma. I’m hoping you can help. please?
the margins on my blog are set to 1000 px. my header is 1000px in width. AND YET, when I upload the header, the right end gets cut off by about 150px. I don’t understand why.
do you know of anything I can do to remedy? I’ve temporarily changed the margins on my blog, but this messes up the proportions for everything else, and I just don’t like it.
Thank you. this was so helpful!