In this tutorial I will show you how you can create a creative wordpress theme in Photoshop. The layout can be done in less than an hour if you have the right tools on hand. The most important things on this layout are the details. Adding more details will change drastically your layout.
Preview full size layout
Register to download this layered PSD file
I always receive by mail the same question. How long does it take me to create such a tutorial. To be honest a PSD file like this maybe 30-50 minutes.
To write the tutorial it takes me more because I am not a native English speaker.
I need around 2-3 hours ( to make screen shots, explain you all the things )
When I create a tutorial I am using the same tools our VIP members will have access. I am using always the same set of gradients, layer styles, vectors, icons and for me it is very easy to create the PSD layout in a few minutes.
I also recommend you to follow 5 tutorials of mine , and i am sure you will be able to create the 6th one alone without help.
If you are a VIP member please follow my tutorials, and let me know how fast you can complete a tutorial.
Before you will start this tutorial you will need to download the following items:
Open the background pattern, and go to Edit > Define Pattern. Choose a name for this pattern and click OK. You can now close this document because we don’t need it anymore.
Open Photoshop, and create a new document (press on CTRL+N to start a new document). I will use the settings from above because a lot of people use premade Photoshop grid layouts.
![120 120](http://www.grafpedia.com/wp-content/uploads/2009/07/120.jpg)
Select Paint Bucket Tool, and on the top of your screen be sure you select the pattern we just created a few seconds ago.
![218 218](http://www.grafpedia.com/wp-content/uploads/2009/07/218-500x43.jpg)
Click one time inside the layout. Your entire document will be filled with this nice wood texture. When you transform the layout into a CSS? xhtml layout you can use the background image from above. It will fill your entire browser without a problem.
Click on the following image to see the background image
![316 316](http://www.grafpedia.com/wp-content/uploads/2009/07/316-500x468.jpg)
Select Rectangle Tool, and create a shape on the top of the wordpress theme
![413 413](http://www.grafpedia.com/wp-content/uploads/2009/07/413.jpg)
The color I have used for the header is black.
I will create another layer on top of this layer (press CTRL+SHIFT+ALT+N)
With Brush Tool, I will create a single point on the left side of the header. In this place I will add the logo.
![57 57](http://www.grafpedia.com/wp-content/uploads/2009/07/57.jpg)
I will change the opacity value to 30 % for this layer
![67 67](http://www.grafpedia.com/wp-content/uploads/2009/07/67.jpg)
I will select Line Tool, and I will set the line weight to 1 pixel
![77 77](http://www.grafpedia.com/wp-content/uploads/2009/07/77.jpg)
I will change the foreground color to white, and then I will make a horizontal line on the bottom of the header. I will change the opacity value for this layer to 20 %
![87 87](http://www.grafpedia.com/wp-content/uploads/2009/07/87.jpg)
Right above the header of our wordpress theme I will create another shape with Rectangle Tool.
![97 97](http://www.grafpedia.com/wp-content/uploads/2009/07/97.jpg)
I will add the following layer styles
![107 107](http://www.grafpedia.com/wp-content/uploads/2009/07/107.jpg)
![1110 1110](http://www.grafpedia.com/wp-content/uploads/2009/07/1110.jpg)
![125 125](http://www.grafpedia.com/wp-content/uploads/2009/07/125.jpg)
This is my result
![135 135](http://www.grafpedia.com/wp-content/uploads/2009/07/135.jpg)
I will select Rounded Rectangle Tool, and I will create a shape on the middle of this template
![145 145](http://www.grafpedia.com/wp-content/uploads/2009/07/145.jpg)
For this layer I will add the following layer styles
![155 155](http://www.grafpedia.com/wp-content/uploads/2009/07/155.jpg)
![165 165](http://www.grafpedia.com/wp-content/uploads/2009/07/165.jpg)
![175 175](http://www.grafpedia.com/wp-content/uploads/2009/07/175.jpg)
I will right click on the layer in my layer palette, and I will choose Rasterize Layer
I will select Rectangular Marquee Tool, and I will make a selection on the right side of this shape.
![185 185](http://www.grafpedia.com/wp-content/uploads/2009/07/185.jpg)
Be sure you have the big shape selected in your layer palette, then click on CTRL+J. This shortcut will create a new layer via cut. This means a new layer will be available over the original shape.
I will press on CTRL+D to deselect, then I will add the following layer style for this shape
![195 195](http://www.grafpedia.com/wp-content/uploads/2009/07/195.jpg)
![205 205](http://www.grafpedia.com/wp-content/uploads/2009/07/205.jpg)
![219 219](http://www.grafpedia.com/wp-content/uploads/2009/07/219.jpg)
![225 225](http://www.grafpedia.com/wp-content/uploads/2009/07/225.jpg)
This is my result
![234 234](http://www.grafpedia.com/wp-content/uploads/2009/07/234.jpg)
With the same technique I will cut other shapes from this sidebar. I will not explain one more time because are very easy steps, and I am sure you will not have problems.
![244 244](http://www.grafpedia.com/wp-content/uploads/2009/07/244.jpg)
I will select Line Tool, and I will create some thin lines
![253 253](http://www.grafpedia.com/wp-content/uploads/2009/07/253.jpg)
For the vertical line I will add the following layer style
![263 263](http://www.grafpedia.com/wp-content/uploads/2009/07/263.jpg)
This is my result
![273 273](http://www.grafpedia.com/wp-content/uploads/2009/07/273.jpg)
I will add some images and some text in this area. I will use one set if icons you can download from here: Download vector icons
![283 283](http://www.grafpedia.com/wp-content/uploads/2009/07/283.jpg)
On the left side I will add alone some text, and another icons from the same vector icon set. Click on the image to see the full size layout.
![292 292](http://www.grafpedia.com/wp-content/uploads/2009/07/292-500x468.jpg)
Now I will move to the top of the layout. I will create a nice are where you can feature your latest post, or your services… I will use Rounded Rectangle Tool, and I will create a black shape with an opacity value of 80 %. Click on the image to see the full size wordpress theme.
![302 302](http://www.grafpedia.com/wp-content/uploads/2009/07/302-500x468.jpg)
Rasterize the shape again, by right clicking on the layer, inside your layer palette.
Duplicate this layer (press on CTRL+J) and then with Rectangular Marquee Tool, make a selection .
![317 317](http://www.grafpedia.com/wp-content/uploads/2009/07/317.jpg)
Be sure you have the layer selected in your layer palette, then hit the Delete key from your keyboard. Press on CTRL+D to deselect. The remaining shape we will use to create a navigation bar
Select the navigation bar and add the following layer styles
![322 322](http://www.grafpedia.com/wp-content/uploads/2009/07/322.jpg)
![331 331](http://www.grafpedia.com/wp-content/uploads/2009/07/331.jpg)
![341 341](http://www.grafpedia.com/wp-content/uploads/2009/07/341.jpg)
This is my result
![351 351](http://www.grafpedia.com/wp-content/uploads/2009/07/351.jpg)
I will cut another layer from the previous one with the same technique. I will show you the remaining layer with another color
![361 361](http://www.grafpedia.com/wp-content/uploads/2009/07/361.jpg)
For this layer I will add the following layer styles
![371 371](http://www.grafpedia.com/wp-content/uploads/2009/07/371.jpg)
![381 381](http://www.grafpedia.com/wp-content/uploads/2009/07/381.jpg)
I will select Pen Tool, and I will create an arrow on the slideshow
![391 391](http://www.grafpedia.com/wp-content/uploads/2009/07/391.jpg)
If you want to save a lot of time you can apply for a VIP membership, and you can download one of the following sets with layer styles: Download Layer styles
We have a few thousand layer styles ready for you.
If you don’t have a VIP account already then use the following layer styles.
![401 401](http://www.grafpedia.com/wp-content/uploads/2009/07/401.jpg)
![414 414](http://www.grafpedia.com/wp-content/uploads/2009/07/414.jpg)
![422 422](http://www.grafpedia.com/wp-content/uploads/2009/07/422.jpg)
![431 431](http://www.grafpedia.com/wp-content/uploads/2009/07/431.jpg)
I will write down some text over these buttons, and this is my result.
![441 441](http://www.grafpedia.com/wp-content/uploads/2009/07/441.jpg)
I will create 2 thin lines with Line Tool. The top one will be Grey and the bottom one will be Black
![451 451](http://www.grafpedia.com/wp-content/uploads/2009/07/451.jpg)
I will select both lines n my layer palette, then I will pres on CTRL+E (this will merge the layers into a single one). I will grab Eraser Tool, and with a smooth round brush I will delete the extremities of this line.
![461 461](http://www.grafpedia.com/wp-content/uploads/2009/07/461.jpg)
I will add more text on this layout, and this is my final result.
![471 471](http://www.grafpedia.com/wp-content/uploads/2009/07/471-500x468.jpg)
0 Comments::
Post a Comment