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.
Select Paint Bucket Tool, and on the top of your screen be sure you select the pattern we just created a few seconds ago.
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
Select Rectangle Tool, and create a shape on the top of the wordpress theme
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.
I will change the opacity value to 30 % for this layer
I will select Line Tool, and I will set the line weight to 1 pixel
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 %
Right above the header of our wordpress theme I will create another shape with Rectangle Tool.
I will add the following layer styles
This is my result
I will select Rounded Rectangle Tool, and I will create a shape on the middle of this template
For this layer I will add the following layer styles
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.
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
This is my result
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.
I will select Line Tool, and I will create some thin lines
For the vertical line I will add the following layer style
This is my result
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
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.
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.
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 .
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
This is my result
I will cut another layer from the previous one with the same technique. I will show you the remaining layer with another color
For this layer I will add the following layer styles
I will select Pen Tool, and I will create an arrow on the slideshow
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.
I will write down some text over these buttons, and this is my result.
I will create 2 thin lines with Line Tool. The top one will be Grey and the bottom one will be Black
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.
I will add more text on this layout, and this is my final result.
0 Comments::
Post a Comment