Favourite Posts
Most Commented Posts
Wordpress Theme Tutorial - Part 1
Welcome to my latest tutorial. The tutorial is probably going to be pretty large so I going to do it part by part. Each part will hopefully have a video and written content to follow. In this part I will show you how to design the header for our wordpress theme. The design is going to be for a resolution of 800×600 therefore our header is going to be 800px wide. It will also be for people using adobe photoshop - the number one designing software if you ask me.
First off I am a designer who just does what comes to me at the time. I swap things around a lot and play around until things look right. That makes writing tutorials quite difficult but here I go nonetheless. Below is the video of the tutorial along with a demo of what you will create:
The Video: Wordpress Header Video
The finished header can be viewed: Wordpress theme header
Okay, on with the written tutorial:
Step One - Setting it up
Start a new document with width 800px and height 120px. Create a new layer and fill it with #153B51 or a colour of your choice. This will be the base for the header. To give it the gradient feel I made a dark overlay on the top and a light overlay on the bottom of the header. You can do this by selecting the gradient tool. First create a new layer then select colour white in the colour pallette and hold shit at the bottom of the header and drag up about 20 px. This should create something along the lines of: Preview. Then go to blending options and make the layer style overlay. If it still looks quite harsh then lower the opacity. Do the same as above on the top of the header but using black instead of white.
Step Two - The Stripes
This step we will create the striped overlay on the upper half of the header. Create a new layer and using the rectangle marquee tool select the upper half of the header and fill with a colour. Go to blending options and make fill opacity 0 (fill opacity not opacity). Next go to patter overlay in blending options and select black and white stripes. Also make the opacity of the pattern about 30% and overlay. You should have something along the lines off: Preview. At the moment the stripes will look very severe. To make them fade out you will have to use a gradient in the layer options for the stripe layer. Do the following settings making sure both ends of the gradient are the exact colour of the header background. Setting to use.
Step Three - The Text
The text is really quite simple. In the example I had a two word title for the header - “Web Banner”. Make the first word white and the second word #9BEF17. Make the font Trebuchet MS, size 36pt and anti aliasing sharp. We will also apply a trick often used these days. Go to window then character and set the character spacing to -50. This will push the letters closer together and make it look a little nicer. To get the gloss on the green word create a new layer, open up the layers panel and holding ctrl left click your text layer (make sure your new layer is above text layer). The should have an outline around the text. To deselect the top section open up the marquee tool and hold alt. Drag a rectangle over the upper half of the green text and then another one of the whole of the white text. Then fill the selection with black. You should have something like: Preview. Next go to layer blending options, make it overlay and adjust the opacity until it looks right. You can then do the same steps but to highlight the top 5 pixels of the text and with colour white.
You should have a pretty nice looking header already but you can also add some extra touches which I like to do. The can be a little long winded to explain so its best you watch the video to get a true understanding. I will quickly run through the steps.
The Inset Look
Use the rounded rectangle shape tool and use it to create a new layer just above the header background and behind the text. It should have reasonable spacing above, below and to the sides of the text. Next go to layer gradient blending options and make it so it goes from black 100% to the background colour 0% opacity. Then make the blending options overlay. In the shadow is at the bottom simply go back to the gradient options and click reverse.
The Light Line with Under Shadow
Create a new layer and use the pencil tool with 1 px selected to create a white line under the text. Then go to blending options and make the gradient overlay reflected. Make sure the white is in the middle and the background colour is to the outside and with opacity 0%. Then make the layer options overlay and lower the opacity. If you wish you can also apply a drop shadow under the line to make it look a little better.
It takes a very long time to explain for people new to photoshop so I may miss out some details. If you need help with any one of the steps or points please ask and I will try to help you out. The next tutorial will be for a nice simple navigation for the theme so stay tuned.
10 Responses
Wow, this is just the kind of thing I’m looking for. I’d love to put together my own theme for Wordpress, but I’m still waiting for the cash for CS3.
Thanks for taking the time to show us how to do it, you just got another subscriber! I look forward to reading your next installment.
I am going to copy and paste this into a document. One day I will actually do this and make my own…LOL
Wow, great quality Tutorial! I’m too lazy to do this; I got a friend to do my Wordpress theme!!
Word press is a pain in the ass like dotnetnuke, they are all good until you get to the point where you want to build your own styled layout so this should be interesting, I am bookmarking it as I type.
Nice tutorial, that would have even great if you have posted images in the tutorial as well.
- Michael- August 16th, 2007 at 12:32 pm
Thanks for the tip. I will do that next time. Its better to break the content up a little.
its really a nice tutorial…. thanks a lot….!!!
Wow, that’s a really nice header, it would have looked great on this site.
I created a new wordpress site and I don’t have a good design yet. But I hope your tutorial will help me a bit, but it looks complicated for a beginner like me.
Leave a Reply
I will first go through different parts of designing in photoshop, then coding into XHTML and CSS and then coding into wordpress.