WordPress Header Design 101
One thing that I love doing is searching on Twitter, for people asking for help. Recently I saw two Tweets that had been asking for help in customizing their WordPress header.
Those tweets became the inspiration for this tutorial.
I wanted to make this tutorial as easy as possible, and completely using FREE tools.
Let’s Get Started
I created a WordPress site on WordPress.com, but this tutorial can also be exactly replicated on a self-hosted WordPress site.
This tutorial works for any WordPress theme you can upload a custom header.
Finding A Royalty Free Image
You can use an image that you already own if you like, but I used Stock.XCHNG to find a free image to use as my background.
Stock.XCNG is great… it’s a community of photographers that share their photos for free!
If you don’t find a photo that you like, they also include photos from iStockPhoto that you can buy.
I decided on a photo called Rocky Valley.
I loved the photo and it was 3000 x 2000 pixels. Perfect, since I needed an image at least 1000 pixels wide.
To use a header in Twenty Eleven, you need an image that is 1000 x 288 pixels.
Free Web-Based Photo Editing
I got my image, let’s edit it.
I used pixlr, they have 2 tools that we are going to use. The Retro Vintage Effects tool and Photo Editor.
I first used Retro Vintage Effects to quickly add some effects to my Rocky Valley photo.
Retro Vintage Effects is very easy to use… in 3 steps you can completely get a very cool, customized image.
Literally, I uploaded my photo and picked the effects that I wanted to use in about 2 minutes.
My next step was to save the new image to my computer, and then head back to Pixlr.
This time I opened the Photo Editor, and uploaded the new Rocky Valley image that I had just created.
Photo Editor is somewhat of a web-based Photoshop alternative. It’s not at all a Photoshop replacement… but it’s very powerful, fast and stable.
Stable being important here, as a professional photographer I’ve had to use online tools when Photoshop just wasn’t available… and it’s very frustrating when the photo editing software keeps crashing.
Pixlr has never crashed for me.
Preparing Your Header for WordPress
I now need to resize this image to fit the dimensions in my WordPress theme, which is 1000 x 288 pixels.
I went to Image, Image Size, and changed the width to 1000. I couldn’t change the height of my image here, because my proportion will not be right.
To change the height to 288, I had to go to Image, Canvas Size, pick the center box as my anchor point and clicked ok.
Now I needed to add some text to my header.
Just click on the Type Tool and Photo Editor will create a new text layer for you. I typed in my sites name, which is WordPress Header Image.
You can easily pick the font and size that you want to use. In this case I wanted something modern looking, to go along with the look of my header. I used TITILLIUM TEXT, a free font that I installed on my computer. I was very impressed that Pixlr was able to use it, straight from my computer.
Uploading to WordPress
Once I saved my new WordPress header image to my computer, it was time to upload it to WordPress.
I went to Appearance, Header. Here I just simply uploaded the file and saved it. Notice that I kept the option to “Display Text”. I did this for SEO purposes… search engines can’t read text in images, that’s why it’s important to fill out your image alt tags and descriptions.
However, headers don’t have these options… so I kept the option to display the text version of the sites name for the search engines.
This entire process took me less than 10 minutes, and I feel that my header is not bad looking at all. It has a completely customized look and feel to it, and best of all I used free online tools.
I hope that I’ve opened up your mind with the possibilities of creating your own customized WordPress Header. Most importantly don’t let something as little as a header stop you from becoming a pro blogger.
I see many people that say things like… “Oh, if I had this, then my website could be that”.
Just start blogging, you can always change the look and feel of your site later on.
You can use the Retro Vintage Effects tools on your finished photo again. You’ll be able to stack effects and really create a header that will standout.
What do you think?
Does creating your own header seem too difficult now?
Share this article on Facebook and Twitter, and with anyone who is starting to blog.