|Create an Elegant Photoshop (PSD) Template for Wordpress|
Let' begin! Create a new document : width 900px, height 950 and as a background color use #191919.
Layer Mask Selection:
Now on the header you should see the shape of your texture and at the bottom of template you should see only the background color #191919. This will make your work easier when you will want to integrate this photoshop template in html and then in a wordpress theme.
Let's create the logo and add the top menu. For logo I have used this font: Adobe Garamond Pro, unfortunately this is a commercial font and I don't have the right to share it, but I promise next time when I will write the tutorial I will use only free fonts
To achieve the same effect like I have do with my logo please use the following blending options:
Gradient Overlay: #9e9e9e and #d7d7d7
For slogan I have used only a gradient with the folowing colors: #747171, #585757
Here is my result - logo and slogan:
Top Menu - Using pencil tool draw a line - color #3f3e3e (master diameter 1px). This line has 739px width. It will be more easier for you to create some guides to help you draw this line in a center position.
Here is my result:
Now under this line we will need to create a shadow effect. Using rectangle tool, create a fixed shape - width 739px , height 20px and as color choose # 0a0a0a.
than select gradient tool. Make sure that Linear Gradient is selected and for gradient color choose black-white (default colors).
Drag the gradient from the top of our shape to bottom . To finalize it, on Blending Options set the Opacity to 58% and Fill 52%.
Here is my result - dropshadow:
For Main Menu(Top Menu) - I have followed the same steps followed to create the shadow to separator. I have created a shape using rounded rectangle tool, than I have applied a layer mask and a gradient (to make the shape transparent at the bottom). For blending options I have set Opacity to 54%, Fill 69% and I have used outer glow to emphasize it.
My result - Top Menu:
Let's move to the header now. This is quite simple. For text I have used a Franklin Gothic font and as an image I have used a vector elegant jacket. You can find as many vectors as you want on this website: VectorMix
My result - Header:
Now to enhance this design we will need to add some light spots. This are really easier to create. All you have to do is to draw some circles and then to apply a Gaussian Blur (Filter>Blur> Gaussian Blur ) with a radius of 50.
Here's my result - Header with spot lights:
Now let's move to main content. Here create a new shape using rounded rectangle tool. Mine has the following dimensions: width: 707px, height: 515px. For this shape I have used the following layer styles:
Gradient: #191919, #252525
Stroke: #191919, #302f2f
As you can see the main area is becoming transparent near footer. This effect has been obtained using the same trick like we did to obtain the Main-Menu - by applying a layer mask and then applying a gradient to our layer mask. Please see the exact description above.
My Result - Main Area for this Photoshop Template
Let's create the sidebar. Using rounded rectangle tool, create a new shape with the following dimensions - width: 229px, height: 311px and apply the following layer styles:
Now duplicate this layer, select it (Ctr+T - Windows or Cmd+C - Mac) right click on it and choose Flip Vertical. Align it with the bottom text.You should obtain something like this.
To create the shape where I have write the portfolio you will have to use rectangle tool and to apply a similar layer style.To finish the sidebar, we will need to populate it with some text and images.
My final result for sidebar
The footer is really easy:
I have enjoyed writing this tutorial and if you enjoyed it also I would love to hear from you. You can write your thoughts by leaving a comment here but if you are a shameful person you can use our contact form :)
To download this file you will need to be a Premium Member. For only $8.99 you can become a Premium Member and you will be able to download all of our Premium Files.
Don't want to pay? Usually we release one Premium File per day and it's free for the first 200 downloads. Visit our website daily and you will be able to download all of our files for free....
Here is my final result:
I really like this template and I think soon I will jump for it. Keep up the good work!
Congrats for this great tutorial
That's a shame. I see here 1337 hits and only one comment ? What a people...anyway, thank you for this great tutorial admin and keep them coming!!! I like to design photoshop templates and your designs are A++. I would love to have at least 50% of your skills. Keep up the good work!
Added to www.psaddict.com
This looks great! Very sleek and elegant design, clean and uncluttered layout. I love the texture that you used. Nice job!
How to use psd for wordpress
Thnx for this tutorial. But to be frank I couldnt understand how to use this template for my wordpress powered site :( Is there such tutorial also around?