Wednesday, 28 May 2014

PicMonkey Blog Banner tutorial (picture heavy post)

Whilst my nails are nubbins, I thought I would write a couple of technical layout / blogger related posts.  This is the second one....

Following on from my last post about my blog layout, I mentioned I would also do a header post.  As with my last post, for an experienced blogger this may be teaching you how to suck eggs, but for newer bloggers it may be of interest.

When I first started out with making the banners, it was a whole Sunday afternoon wasted messing about and swearing, then starting over.  Now I have it down to a relatively fine art.  In my last post about page layouts I referred to noting down colours and saving the document to refer to later.  Saving this info really helps to cut down the time taken to make a banner as you already know your widths and font colours!

I use PicMonkey free edition for any collages and also banner making.  The first few steps look a little fiddly but if you do what I do, you only need to do this part once.

On the PicMonkey homepage, click edit.  Choose any old photo from the PC, or better still if it lets you open one of the PicMonkey template ones then choose that.

I uploaded an old photo of Lurch, taken last summer when he had been fighting.  If PicMonkey shows you an question about file size then choose what is best for you, I go for KingKong to ensure no issues with quality.

You can see above that on the left hand column of PicMonkey there are little symbols, each taking you into various edit options.  The butterfly is for Overlays.  Click that.  

From Overlays select Geometric and choose the square.  It appears as shown below, although a little smaller.  

The pop up shown on the right will allow you edit the overlay including choosing the colour.  I use the same as my overall background, which is noted as #ffffff, if you click where 000000 is shown it highlights in grey and you can paste your colour code here, then press enter to get the colour you want.

Now we need basic edits, which is the top symbol on the left had column, the sort of square shape.  In here we get the basic edit options (surprise!) for things like cropping etc.

Select Crop.  Crop the picture so only the white square is visible, it's bye picture of Lurch-y.  In the picture below I have selected my square, but not yet cropped.

Having pressed apply I now click on the symbol highlighted below which kind of looks like two sheets of paper with a down arrow symbol.  This merges the two images and means I can't somehow move the square and suddenly see Lurch's face peeking through at me.

Now I have my white square I need to resize it.  Resize is also in basic edits.  My page width is 1260px so to get a banner to fit neatly I want it slightly smaller.  Through trial and error I have found that 1180 wide is perfect and 400 tall means I can fit my blog name and any pictures in there.   Play with the widths based about 80 points narrower than your blog width otherwise the banner won't fit the page and goes off the edge (I have had this happen!)  

In "Resize" there is automatically a tick in keep proportions, I unticked this and then entered my width and height.  Press apply.

After applying this I have now been left with an unblemished perfect canvas.  I now save it to ensure if I bugger it up I can skip all this fiddly stuff above.  When you click save (top of page, in the centre) you get the screen below. Please change the file name otherwise you risk losing your original photo!  Name it something like blank banner, save as jpg file and choose your quality (I tend to go with Sean which is the biggest file size.)

Now the masterpiece is saved it will return to edit screens.  I have clicked on the Tt icon on the left to go into text editing.  This screen is where you will start to feel the pinch for using free membership, I go through the fonts and think "Wow! That's perfect!" then see a little crown meaning you have to be a member.

Once you have found the perfect font for your blog name select add text.  I use Emily's Candy as it adds a heart over the i!!  Simple things.... However for this tutorial I will use Flavors, which is on the list below.  This is how it looks when you click add text.

Again, the colour defaults to 000000, I copy and paste my main font colour, the same one I used for the text which appears at the top saying "My name's Emma and I'm a nail polish addict...." which I wrote on my notes as #009ba1.   Paste in your chosen colour and press enter, now any text you write will be in your chosen font and colour.

Now to resize the text and place it where desired.  I prefer my text centred.  I find it easiest to use those double lines on the left and right sides to change the width of the text box, making it the same width as the banner.  Then I use the centre text option and the slider on the size to make it as large as it appropriate.

If you only want a text header, position your text to suit, save and you're done!

If you want images too, still save the image: I keep a file like this saved as "banner template" and each time I want to update my banner I just add the newest pictures and save it with a different name to ensure that I don't lose the original file!

That's the worst of the fiddly bit done.  Now, photos.  I have mine added in a simple line, you can do photos in a random placement using PicMonkey, but keeping in with my simple look, a single row of photos works best for me.

To do this, we go back to PicMonkey homepage.  Click on collage.  

PicMonkey asks where you want to import your photos from, I chose computer as I have 8 images to use saved there.  You can click on the first one, press shift and click on the last one to upload them all at once.  After uploading your photos you are taken to this page.

The four icons on the left each take you into a different type of edit.  To continue, click the second one down with the 3 blocks.  This takes you into layouts.  Whilst in Layouts, again beware of the crown icon on the name of the layout, some of these are premium member only.  For my layout, I use "Ducks in a Row."

The maximum default offer of Ducks in a Row is five pictures, but don't worry, you can drag and drop extra pictures in there.

Now add the photos, do this by clicking back into the top icon on the left column, the picture which usually indicates landscape.  You can drag and drop your pictures in to the desired box, on the picture below you can see I have added five images and am dropping a sixth one into the gap between two photos, PicMonkey creates a sixth box.

I chose seven photos from recent blog posts and added the images into PicMonkey.  If you hover over each image you get the option to move it around until the picture sits within the frame in a position you like.  You also get some edit options to zoom.

Now the pictures are lined up, I make the little tweaks needed to get the finished look.  The paint palette symbol gives you edit options.

I use the options to reduce spacing to zero, round the corners to 20% and tick transparent background.  At this point I also go into the box at the bottom centre and make the collage the same width as my banner, 1180.  The box is locked to stay at proportions and by default PicMonkey makes it 236 high.  As my banner background I already made is 1180x400, this will easily fit and leave room.

Next, save this image.  I tend to let it save as a PNG file because if I change it to JPEG I have to select a background and I don't want one.

With this image is saved, I go back to PicMonkey home page and select edit, like I did right back at the beginning.

Load the image created earlier with the text on it.

Click on the butterfly symbol which is for "Overlays." When this opens there is an option to use "Your Own." Click on this and locate / upload the collage saved a couple of steps ago. It will load as shown below.

All that is left now is to resize and position the picture where you want it to be, save and the banner is completed!!

You are now ready to upload this to Blogger. 

To upload the image to Blogger, go into the Blogger homepage, select "Layout" shown on the left.  Click into Header and in the pop up box you can upload an image.  Upload the banner created and this will be shown on your blog. 

I know this was a picture heavy post, but hope this may be of use!  My next post covers how to adapt this image to fit perfectly on your Facebook page!

If you have any questions please feel free to ask, I'm not an expert on this subject, but I have wasted enough hours swearing at PicMonkey to be pretty familiar with it!


  1. Blimey, that seems very comprehensive! I think I need a new hearder, I'll have to have a play when I get back from holiday I think. Thanks for posting this.

  2. Hi! Brenda from the PicMonkey Team here. Nice tutorial. I've got a tip for you that might save you lots of time. For your first bit, to get the white image for your text, instead of opening a photo, adding a square, cropping, etc. instead, on the homepage, hover over "Design" and then choose "Custom", enter your size 1180x400, then press "Make it!" Voila! A blank image the size you want. You can then change the background color or even make it transparent. No need to cover up poor kitty Lurch again. :) Hope that helps!

    1. Oooh that's good to know, thank you Brenda! It's only through trial and error I figured out the above :)

    2. Glad to help! I wonder if you've seen our PicMonkey Blog with lots of tutorials and how-to's. Here's one that shows what I've described. Keep havin' fun!


Comments are welcome, I have approval on so I do read and appreciate all comments left.