Colour matching the theme headers

Last time I talked about customising the banner text to display an autosizing transparent logo, instead of the default site title and byline text. In this edition I’ll continue the customisation by replacing the header background images too.

The twentythirteen theme comes with three background images pre-installed. These all use a limited autumnal colour palette, which blend into the default colours of the theme itself.

star circle diamond

In my desire to personalise the theme, but not break the original asthetic, I decided to use a selection of my own photographs which would tweaked to match the colours of the original backgrounds.

After a bit of experimentation with various graphics programs I settled on using Pyrochild’s Color Match plugin for Paint.net – this takes the colour histograms of one image, and applies them to another, as shown in these example images.

original11

For the source image, I built up a swatch based on the original three background images, plus some extra darkened shades so that it doesn’t distort the colours in the source photographs too much. ¬†Also, applying a gaussian blur to the swatch adds a more subtle range of colours, which improves the final result.

_match_

Once I was happy with the swatch, the approach was fairly simple – hunted through my photograph library looking for images that I felt would make suitable banners, then apply the Color Match plugin with my target image to each one, then resize and crop them to the 1600×230 size required by the theme before saving them out as PNGs and uploading though the Headers page in WordPress admin.

One thing I did find is that this extremely wide format lends itself perfectly to the panoramic images my camera can produce. (a Sony compact that’s a couple of years old). So I’ll be making much use of that in the future!

Here are a few of the banner backgrounds I’ve made so far, scaled down so you can see them in their entirety.

beach3 burtonbradstock cabins stives

You’ll notice that the site cycles though these at random, which is a nice feature of the theme – once a selection of images has been uploaded you can pick the “random” option and the theme does the rest.

2 thoughts on “Colour matching the theme headers

Leave a Reply

Your email address will not be published. Required fields are marked *