{Blog Tips} Creating Blog Headers on PicMonkey

March 29, 2012 · 47 comments

Here is my new and shiny updated version of this post. Picnik is now sadly dead but PicMonkey has taken it’s place is my heart so here’s how to make headers on PicMonkey instead.  Sadly they haven’t gotten collages up and working yet, but when they do I’ll add how to make a collage header on here.

But in the meantime here’s how to make a simple blog header on PicMonkey.  Here are some of the looks you can achieve:

Basic with Text

Add a Filter

Add a Frame

The main thing you need to know when you’re creating your header is the size it needs to be. If you make it too big or too small it will just not look right.  So if you’re on Blogger to check your width, go into where you load the header in design and it will tell you how wide you need it to be . With regard to height I’d personally not go any higher than maybe 300-350px high or it takes up the top part of your screen and then you’re readers will have to scroll a lot to see your posts  If you are on WordPress, consult your custom header upload area and it’ll tell you how big you need to make it.

So here’s how:

You have the choice of either making it with one photo or many so here is the one photo option:

1. Go to PicMonkey and upload a photo that’s nice and big (you don’t need to create an account)

2. Once it’s uploaded – click on the Crop button and crop the image so it’s wide and a little narrow (using drag):

Then when you have the bit of the photo you want to use click on ‘ok’ and then it takes you back to the menu screen.  Click then on ‘Resize’

3. You’ll need to resize the image to the correct size.  So at the bottom left of the page there is a box called ‘Resize’ which has the sizes in, you’ll need to change the numbers in it. I’ve made this one to be 980px wide and clicked the ‘Keep Proportions’ so the height pretty much takes care of itself. Click on ‘ok’ when you think it looks right. Remember you can always go back and re crop the image if you don’t think it looks right.

4.  Adding text to the image – Click on the ‘P’ tab which will bring up text and then you can add the text in the colour & font you wish to the image. You can move it around and even add your tag line as well if you have one.

You can also add boarders, shapes, image filters all sorts via that left hand bar.

5. Finally click on the ‘Save’ tab bottom left, make sure the image is the right size, and make sure it’s the right quality 8 is normally ok.  And save it back to your machine – you can decide where, then you can upload it to your blog in the normal way.

You can make badges in the same way.   With images I normally crop it into a square 400px x 400px (big enough so you can see what you’re doing)  and then in the final save I make a few 125px x 125px, 160px x 160px, 180px x 180px and 200px x 200px.  Obviously if you know what size your side bar can take then you can make it that size.

Happy Header Making!

Related Posts Plugin for WordPress, Blogger...

{ 45 comments… read them below or add one }

London City Mum June 28, 2010 at 9:37 am

You are a gem to share this with techno-useless-phobes like yours truly.

Mwah!

LCM x

Reply

Jenny paulin June 28, 2010 at 9:40 am

Ooooh thank you for this!I have been wondering how fellow bloggers had such stunning headers ! You are ruddy marvellous!

Reply

London City Mum June 28, 2010 at 9:51 am

Oh, and I DO have a techie question for you: I have just installed Intense Debate for comments on my blog. After much faffing and to-ing and fro-ing (and following instructions) it appears to be working.
But – and it is a big but – all my past comments in Blogger have DISAPPEARED *sob*, despite ticking all the correct boxes and ‘doing as I was told’ to ensure this would not happen.

So, any ideas a) whether these can be recovered, and b) how to go about it?

Sorry, but you did offer to answer questions!

LCM x

Reply

Liz June 28, 2010 at 9:56 am

No worries – you’ll notice I don’t use either Intense Debate or Disqus mainly because they are such a pain in the ass for doing stuff like you’ve described. But I’ve just had a Google and there is maybe a way of getting them back. Read this http://bit.ly/18ou4 and go down to ‘Import Existing Comments from Blogger’ and follow those instructions and they should come back. If they don’t contact Intense Debate and they’ll be able to help you xx

Reply

London City Mum June 29, 2010 at 1:27 pm

Liz you are a gem.

Are you married? I am solvent and looking for a new techie partner. Fun and games guaranteed although I cannot promise well-behaved children.
(OH has been dispatched to the dog house).

Luv ya!

LCM x

Reply

Liz June 29, 2010 at 2:10 pm

LOL! I can’t be won away from the man that keeps me in iPads & Macbooks ;) Glad it worked xx

Reply

Heather - Notes From Lapland June 28, 2010 at 12:06 pm

This is brilliant Liz, I didn’t know about Piknic, shall go and have a play.

Wanted to add that you can also use GIMP instead of photoshop and it’s free. I love it but it does take a bit of getting used to – like photoshop I guess.

Thank you for this!

Reply

Nickie@Typecast June 28, 2010 at 12:13 pm

Thanks for this LIz – I have done something similar using Picasa recently :) I have created my blog header and cropped an avatar from that too – I like the continuity of all my headers/avatars matching.

Reply

Emily O June 28, 2010 at 12:41 pm

Really usesful post. The design on my blog leaves a lot to be desired, I just don’t have the time to play around with it. Will check out Picnik

Reply

TheMadHouse June 28, 2010 at 12:55 pm

Great post Liz

Reply

MuddynoSugar June 28, 2010 at 12:58 pm

Ta very much. Just tried it and it looks fab!

Reply

Susie June 28, 2010 at 3:38 pm

You are a gem of information in general not just for this. :-)

Reply

ClareFT June 28, 2010 at 4:02 pm

You make it so simple – and use real words – so that the technically challenged (like me) are not reaching for the dictionary every other word. Thanks for this – you are a gem.

Reply

New Mummy June 28, 2010 at 4:34 pm

Fantastic post, I’m going to play now!!

Reply

Sandy Calico June 28, 2010 at 4:35 pm

Thank you so much, Liz. Really generous of you to share your expertise x

Reply

Vegemitevix June 28, 2010 at 5:15 pm

This is great Liz, you really are a sweetie sharing the knowledge!!! Thanks and thanks for the lovely job you did on designing my header on the blog! Mwah!

Reply

Rock N Roll Mummy June 28, 2010 at 9:23 pm

Thank you so much for this post i’ve been wondering for ages how to do this! on picnik how do you do the collage thing you were talking about i just want a banner for my blog with two pictures on it with some writing in the middle and i cant see how to upload more than one at a time

Thanks so much!

Reply

Liz June 29, 2010 at 8:04 am

If you go here http://www.picnik.com/app#/collage/grid and then you can choose a 3 across template and choose a background colour, you can add an image at either end and then put writing in the middle. You should be able to upload an image at a time. Hope that helps?

Reply

Rock and roll mummy June 29, 2010 at 7:21 pm

Brill will check out thank you so much

Reply

Blissful Mum June 28, 2010 at 9:57 pm

Thanks so much for sharing this info – really helpful. I must have spent about 3 hours tinkering with my header when I set up my blog, using a combination of Paint & Powerpoint! Will definitely give Picnik a go as it sounds much easier!

Reply

Liz June 29, 2010 at 8:04 am

That’s how I did it in my first blog and it look hours! Have fun with Picnik :)

Reply

Suzanne June 29, 2010 at 10:51 am

Fab post – really useful. Thanks very much x

Reply

Kelly July 1, 2010 at 7:32 pm

Oh that was so easy and I love it! (have a quick look if you have the time) I can now change it according to the season or time of year. So exciting. I am so glad you decided to do these posts. Thank you so much.

Reply

Liz July 1, 2010 at 7:43 pm

That’s ok – so pleased you found it useful :)

Reply

humdrum mum July 3, 2010 at 8:00 pm

Thank you – now I have a fab pic as my header! – HMx

Reply

notSupermum July 5, 2010 at 7:26 pm

Oooh, aren’t you clever? I love these tutorials – I’m going to try out some of your ideas. Thanks so much x

Reply

emma July 6, 2010 at 7:34 pm

Hi Thanks for this, I have now made a banner but now need to work out if I can add it too my blog, I am using blog.co.uk and can;t work out if I can do it!

Reply

Liz July 7, 2010 at 7:11 am

Hi Emma,

Thanks for stopping by. I’ve not come across blog.co.uk at all before so I have no idea. If there is a FAQ or a help area that should be able to help you out or drop their support an email I’m sure they’ll be able to help you. Good Luck! Cheers Liz

Reply

humdrum mum August 5, 2010 at 7:59 pm

Gosh you’ve been driving me round the bend! I made a splendid (I think) header after seeing your post back in early July. Now I have created a blog for my son and could I remember your blog name? Could I heck! I posted a “Help me” (http://ahumdrumum.blogspot.com/2010/08/help-can-you-remember-who-showed-us-how.html) and London City Mum (http://londoncitymum.blogspot.com) reminded me! THANK YOU!!! -HMx
humdrum mum´s last Post ..The Gallery – PlaytimeMy Profile

Reply

Liz August 5, 2010 at 8:09 pm

Utter pleasure! :)

Reply

Penny October 13, 2010 at 9:14 am

Thank you so much. I really enjoyed having a go at this and while quite wobbly, like my new blog, I kind of like the results.
Penny´s last Post ..Media Monkey – Kids say the funniest thingsMy Profile

Reply

Liz October 13, 2010 at 10:16 am

I’m so pleased it was useful to you. You’re header looks lovely :)

Reply

kate October 13, 2010 at 11:36 am

Wow – thank God for ‘sharers’ like you! I have joined up to follow in thanks and readyness for more tips! (And thank you Penny for directing me here!)
kate´s last Post ..The best things in life are freeMy Profile

Reply

Liz October 13, 2010 at 12:15 pm

Hi Kate, Thanks so much for stopping by and I’m so pleased it was of help. I look forward to seeing your new header :)

Reply

meltdownmum October 26, 2010 at 9:42 pm

Wow – thanks for the brilliant post. So helpful and inspiring :-)
meltdownmum´s last Post ..How to be organised despite yourself 1My Profile

Reply

Liz October 27, 2010 at 8:33 am

That’s so sweet of you thankyou x

Reply

BigDogStudioX March 15, 2011 at 3:20 pm

Great guide! And I like your design. We posted a blog today about website headers as well. Have a read http://www.blog.digital-stationery.co.uk/2011/03/pick-a-fight-with-your-header/

Reply

Aly March 29, 2012 at 9:57 am

Thanks for the redit.I know what I’m doing this Saturday.
Aly´s last Post ..How Physical Contact Helped Me With BreastfeedingMy Profile

Reply

Liz March 29, 2012 at 9:58 am

Brilliant! Glad it helped and have fun playing with it :)
Liz´s last Post ..{Blog Tips} Creating HeadersMy Profile

Reply

Daniel March 30, 2012 at 11:20 am

It’s so pretty! Very Lovely! So glad Lucy approves too! Love the color.

Reply

Jen March 30, 2012 at 12:59 pm

Great post and so helpful. Saw another example of PicMonkey being used just recently and it looks great. Will be giving it a go shortly!
Jen´s last Post ..Perdu Puzzles Competition EndingMy Profile

Reply

Sarah Miles March 30, 2012 at 2:35 pm

Thank you, thank you, thank you! Found you via Older Single Mum on twitter and am in the midst of going self hosting and this is SO helpful and SO clear!!

Sarah x

Reply

Blondewithaphd March 30, 2012 at 6:07 pm

Zillion thanks!! It took me ten minutes to give my blog a whole new look!!
Blondewithaphd´s last Post ..A notícia do dia só podia ser…My Profile

Reply

Carretto's Photography April 5, 2012 at 12:10 pm

Nice tutorial – it’s amazing how much diffeence a decent header can make to a blog or website.

Reply

Ruby Murray April 16, 2012 at 3:09 am

Thank you so much for this, my previous header was woefully old and dusty and needed a serious revamp, just off to pin this wicked tute.

Reply

Leave a Comment

CommentLuv badge

{ 2 trackbacks }

Previous post:

Next post: