webDotWiz talks Windows Live

A daily list of links to interesting sites

Create a collage-type header image for your WordPress site

Here’s how you can create a header image for your WordPress site using some of your photos joined into a single collage-type image. Have a look at JBMurchTravel as an example. You could achieve a similar result using Microsoft AutoCollage or Paint.NET but it’s a very simple, straightforward task when you use Microsoft Word 2007 or Microsoft Word 2010 and Microsoft Publisher 2007 or Microsoft Publisher 2010.

We’ll use Word’s wide range of picture editing tools to soften the edges of our photos and then Publisher’s ability to move pictures to a specific location and save the result as a single file in JPG format.

So firstly browse through some photos in Live Photo Gallery. Tag each photo you want to use or possibly use with a tag such as WP header image. When you’ve found a number of photos, bring up the group using Find – Tags. It’s helpful if you change Live Photo Gallery’s View to Folders so you know where each photo is when it comes to using Insert Picture in Word.

Setting up Publisher


Start Publisher, click File and choose New. Select the Blank A4 (Landscape) template to give plenty of room to work and fit together your photos.


Secondly, on Publisher’s File menu, choose Options – Advanced and under Display, choose Show measurements in units of pixel.

Using Word

As mentioned, Word 2007 and Word 2010 have a range of picture editing tools. We’re only going to use on of them in this task, namely Picture Effects on the Picture Tools – Format ribbon.


To start, choose Insert – Picture from the ribbon and load your first photo (click to Live Photo Gallery to find the folder name if you need to).

The picture loads and will be selected (if it’s not selected, click anywhere on the picture). Now you’ll need to click Format under Picture Tools on the ribbon.




Now click Picture Effects (it’s alongside Picture Styles) and from the drop down list, choose Soft Edges. Hover over each choice to see which is best for your photo, probably 25 point. webDotWiz used 10 point for his screenshot images each of which has a light background. JBMurch Travel’s header image uses photos with 25 point soft edges.

After viewing the effect of different sizes, click the one you think suits best.




Now (with the picture still selected) we copy and paste it over to Publisher so it’s CTRL-C to copy.

In Publisher

Bring up Publisher and do CTRL-V to paste.

We don’t need the photo in full size. In fact, if you’re using WordPress’ Ten Twenty theme, you’re limited to a height of 200 pixels. So right-click your photo, choose Format and change it’s size so it’s height is about 200 pixels. For each subsequent photo you insert, you can simply drag a corner to reduce the size down to that of this first photo.

Move the image up and away from the centre of the page because that’s where each new pasted image will be placed.

Make sure you unselect the image by clicking anywhere on the Publisher page so all is in readiness for the next image to be pasted.


Now return to Word. Do a couple of ENTERs to create some space and insert the next picture. Repeat the steps above to soften this photo’s edges and copy it with CTRL-C. Bring up Publisher and paste the image with CTRL-V. Remember to unselect this image before returning to Word.

The final step in Publisher

You can now arrange your soft-edged photos in the order you prefer by dragging them into position. Note that Publisher will help you out to either align by the top or bottom (a pink line appears as you drag in Publisher 2010).

You’ll see that you get a good effect if the colours at the edge of a photo roughly match the colours of the adjoining photo so you may want to swap them around for best effect. You can overlap your photos, too, so give this a try.


Use PowerPoint’s Select All to group all your photos. Select Align and make a choice to line them up either by top or bottom.

At this stage it’s a good idea to save your Publisher document.

With all the pictures selected, we now want to save our collection as a JPG image.


So go to File, Save As, choose a folder in Pictures (create a new one if you want to), click on Publisher Files to change the Save as type and scroll down to JPEG Interchange File Format and click this option. Now click Save to store your creation.




Crop in Live Photo Gallery


When you look at your header image in Live Photo Gallery you’ll find there’s a tonne of white space because Publisher saves the complete page as a JPG so you’ll need to crop out this white space. So double click the image to bring up Live Photo Gallery’s Edit menu, choose Crop and adjust the cropping tool to only select your photo collection. Click Crop – Apply crop to finish off.


Check the information pane to see the final dimensions of your header image (webDotWiz’s image measured 1600 x 340 pixels and that worked ok once uploaded to WordPress).

Upload your new header image in WordPress

Now load your WordPress site in Internet Explorer, log in, go to the Dashboard – Appearance and change your header image to your new one.

Other uses for Word’s picture tools

Your brain should be ticking over now and you’ve probably come up with other uses for Word’s picture tools. As well as Picture Effects, there’s a whole range of styles you can apply, and a range of different borders to apply.

Other options

You could spend some time learning some new tricks with Paint.NET to create a collage-style image using layers. Alternatively you could use AutoCollage as long as you have more than seven pictures and crop the final collage to create a new header image.

However the Word + Publisher combination is easy to use and produces the desired result without any head-scratching.

Follow webDotWiz on Twitter @webdotwiz

webDotWiz Online www.webdotwiz.com

webDotWiz on Facebook www.facebook.com/webdotwiz

Posted using Windows Live Writer 2011.

One response to “Create a collage-type header image for your WordPress site

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: