Alun Barrett develops and builds Wordpress Websites that Work incorporating SEO based on your Objectives to ensure they are found. Also Web Consultancy for developing existing Wordpress Websites. UK & Europe

Create killer header images for WordPress

Easy to follow Tutorial using online application.

When I wanted to create a header image for a wordpress website I was seriously struggling. I don’t have a fancy graphics programme like photoshop. I didn’t have the ability or knowledge of how to use one even if I did buy it.

Pixlr is a free online image editor. It has a “help” facility and also FAQs. So lets get going!

Let’s say we want to make a killer header for the WordPress Theme 2014. The recommended size being 1260 pixels wide and 240 high. Start by opening Pixlr in another tab or window.

Pixlr Start

The start menu above gives you 4 options. Pick the first one to “Creat a New Image“. Give your image a title and define the Width to 1260 and the Height to 240. If you have a background colour to your site that you want to show through at any point then tick the “transparent” box; otherwise you can leave it blank.

You now have a blank canvas on which to play with images and tools. So let’s have something to aim for…

Ski Header 4

I started with opening an image from a website as a new layer through the “Layer“ menu (top). This allowed me to then move the image around with the “Move Tool” until I had it where I wanted.

Ski Header 1

Click on “Layer” in the top menu to reveal the drop down box and select “Open image URL as a layer“

In the dialogue box which opens paste the following URL “http://www.skibreezy.com/wp-contents/uploads/2014/03/Back-bowls-01.jpg” and hit “OK”

Find the “Move Tool” in the tool box on the left of the screen. Each tool tells you what it is when you hover over it.

With the move tool click the image and move it around inside the boundaries of the banner canvas.

The next image I want to use is too small and the skier is on the wrong side. Here is the URL “http://www.skibreezy.com/wp-contents/uploads/2014/03/Back-bowls-19.jpg“. This one I need to open as a new image; resize it; flip it horizontally and then paste it into a new layer on the banner.

Ski Header 2

Click on “File” in the top menu and then select “New image URL” in the drop down menu

In the dialogue box which opens paste the following URL “http://www.skibreezy.com/wp-contents/uploads/2014/03/Back-bowls-19.jpg” and hit “OK“

Go to “Image” on the top menu and select “Image size…“

In the dialogue box increase the height to 1400 keeping the “Constrain proportions” box ticked

Go to “Image” on the top menu and select “Flip canvas horizontal“

Select all by either using the menu “Edit” and selecting “Select all” OR just pressing <Ctrl> + <A> on the keyboard

Copy the image by either using the menu “Edit” and selecting “Copy” OR just pressing <Ctrl> + <C> on the keyboard

Click on the header image (important) and then create a new layer – Select “Layer” on the menue then “New layer“

Paste the image into this layer using the menu “Edit” and selecting “Paste” OR just pressing <Ctrl> + <V> on the keyboard

Make sure that you have the “Move tool” selected and arrange the image within the layer into the position you want

Next we are going to blur the images. To achieve this you need to select the “Eraser tool” from the tool box on the left. As you select it you will see a new toolbar appear at the top with the Eraser tool at the left hand side. Next to that is the Brush style. Click the image to the right of “Brush” and a new dialogue box comes up with all the difefrent styles available. We want the 150 diameter one in the 1st row down with the fuzzy edges. Make sure you have the layer selected with the skier on the right and you are going to run the Eraser down the left had side of the image. This will reveal the image below and create a fade between the two.

Ski Header 3

Don’t worry if you mess it up. You can undo your attempt and have another go. Either use “Edit” menu and select “Undo” or use the keyboard <Ctrl> + <Z>.

Lastly we wanna add some text. Select the “Type tool” from the toolbox and click the header image where you want text. Type the text into the box, select the font you want, the size, the colour and alignment and hit the OK button. I chose Mistral, 64pt, Regular, black with center alignment.

Once the text is in, go back to the toolbox and select the “Move tool” to allow you to pick up the text and put it where you want it.

Ski Header 4

Finally save the file to your hard disc. On the top menue select “File” and then “Save“. in the dialogue box you can rename it, choose where to save it and which file format you want. Note – if you want some of the background of your site to show through the image select PNGas the file type. There is also a “quality” slider which affects the image quality and file size. A reasonable file size for a header is around 180kb.

Hopefully this has given you enough to create a killer header of your own for your WordPress website.