Home
Photoshop
Web Layout
Design an Elegant Wordpress Theme
Level: Beginner Software:
Photoshop
Tools and resources you will need:
- RSS Icon
Have these tools ready and installed because you will be using through-out the tutorial. Lets begin by creating a new document the size of 1000x1300. We start our theme with the header, so grab your rectangular marquee tool and using the image below as your guide, create it to that exact size. Set the background to white.
Once you have created the layer, apply the following gradient settings in the Layer > Layer Style Settings.
Results so far
Now lets add some text to our header, using your newly installed font Helvetica Neue Bold, create a name for your theme and a slogan if you wish. I called mine Moca le fresh blend. The text on the right is Georgia which should be installed by default. There is a drop shadow added as well, take a look at the guide below:
Results so far
Its navigation time, grab your rectangular marquee tool and create a small rectangle right underneath the header. Fill in with this HEX:7e2f10 and then grab your Burn Tool; set the size to 50 and stroke the top of the navigation one time. Exposure should be around 90%. Once you are done with, select a pattern you wish to use or just save mine listed below in the guide:
Pattern (Credit to Squid Fingers)
Results
Add some dummy text to fill up the navigation. I used an Arial font with the size of 14pt and aA set to Sharp.
Alright, now that we are finished with the portion of our layout, lets work on some details. Its always important to see if there is enough detail, coming back to your original steps can be essential. Going back to the Brush Set you installed, lets use the first one. See the guide below to select the right brush and then create one piece of the floral leaf, resize to fit our sidenote to the right handside of the header. Duplicate the floral leaf then go to Edit Transform - Flip Horizontal.
Results (Note: Setting the diameter size smaller will work but it will ruin the quality of the brush therefore resizing would be ideally the best choice)
Alright, now that we added a little bit of detail to our header lets work on the navigation as well. Go to your Custom Shapes and select the shape listed below in the guide. Using the shape rounded tips, create a pattern of the tips and span it horizontally. You may also just duplicate the custom shape creating the same effect:
By adding that not only did we improve our navigation but rather then gave an introduction to our welcome paragraph which is what we are going to work on right now. Type up a brief introduction, notice how i highlight the text that introduces the content and then dim out the text talks about the content. This allows users to understand exactly what they will be reading. If you have a lot of information, it is important to highlight your topic sentence. I used Georgia for the introduction sentence Welcome to Moca… and Arial in the paragraph it self.
Okay, lets go back to our Brushes. In your second Brush set, you will notice a lot of nice ornaments that can be used practically anywhere as paragraph intros/closures. In our design, it will indicate when the about moca will end. Using the specific brush listed below in the guide, create the ornament with the HEX: 6a3e2d and then resize to fit in the center of the topic sentence. Drop the opacity to 26% and then by duplicating the layer and doing a vertical reflection, you will add the bottom of it as well (closure that is).
Now we have to fully seal out the introduction area, lets do that by creating an average size rectangle, fill it with HEX: dadada and then, using the Eraser Tool fade it out so you get a nice drop shadow effect.
Lets go back to the step where we used the custom shape to create our separator for the content, the wavy line. Why wont we duplicate that layer and reflect vertically. Place it on top of the drop shadow, make sure the wavy line is overlaying the shadow. It should look something like this:
This part is where we actually will work on the wordpress part. I mean all other design elements are important in the final production, however the wordpress plug will be located here. Begin by creating the recent entries tittle which by the way will introduce our wordpress content. Using your resourses guide, open the RSS Icon file and bring it over to your document. The font used is Georgia set at the size of 24pt.
Drop Shadow Effect (Used previously in the steps below)
Lets create the base of our post. Simple things always bring out elegance so, grab your text tool and choose Georgia with the size of 24pt, create two dotted line and separate them enough to fill some content of the post. Add an avatar, i used mine from the Touch tutorial. The color used in the dotted line is HEX: e2e2e2. Just a quick hint, if you are planning to use avatars in your post, look up wp_avatar in the plugins section of the Wordpress website.
Lets add the tittle of our post along with the content that will come with it. As discussed before, it is important to highlight the most important aspect of your press which by the way is your topic sentence or your tittle in this case. Sometimes making a larger font size can bring a great deal of a difference. Using a new color also will highlight your title. In this case, i used both methods. The font is Georgia with the size of 24pt and the HEX: cc2b23. I used a different font in the paragraph area, it is Arial in the size of 12pt.
There is various of ways to implement dates and comments into your wordpress. Some add a Calendar and place the date inside that calendar or even use a bubble to display the amount of comments. In our case, we will go with the simple rectangular box. So create two rectangular boxes with a darkish background and place the wordpress functions of date/comments inside.
And there you have it, duplicate the post as many times as you wish and throw in a footer. I used a very simplistic footer consisting of Credits to wordpress and the usage of Creative Commons which protects some of your rights to the design. You may use the RSS Icon, to create the valid XHTML/CSS Format.
I hope you enjoyed this tutorial and grasped at least some of the concepts you can use while creating a wordpress theme or any design in general.
More Photoshop: Most Popular Materials | Fresh Materials
| TutorialKit New Photoshop Tutorials