logo
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.
To create a nice effect for header, along with our color #191919 chosen for background I will use an texture also. Please go to: SXC and here look for a concrete texture. Choose one witch you like the most and add it to your canvas.
On Blending Options choose Overlay and set the opacity to 43%. Now go to Layer>Layer Mask>Hide All.
Select gradient tool ( for gradient color choose black-white - default colors).Now select layer mask for our texture (see the screenshot) and drag a gradient from top to bottom.

Layer Mask Selection:

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:

Drop Shodow:

Drop Shadow

Gradient Overlay: #9e9e9e and #d7d7d7

Gradient Overlay

For slogan I have used only a gradient with the folowing colors: #747171, #585757

Here is my result - logo and slogan:

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:

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.
To look like a shadow I will apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a Radius of 20px. To have a nice gradient effect (more darker at the top and transparent at the bottom) we will need to apply a layer mask and then to apply a gradient.
Go to Layer>Layer Mask>Hide All. Select layer mask thumbnail from your layer pallet (see the screenshot)

layer mask

than select gradient tool. Make sure that Linear Gradient is selected and for gradient color choose black-white (default colors).
linear

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:

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.
As final steep I have added some text using the same layer styles used for logo and slogan.

My result - Top Menu:

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:

header preview

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.
On this template I have added 5 light spots: one above the logo, two light spots above Top Menu (or Main Menu) one in the header area and another one on main content.

Here's my result - Header with spot lights:

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

gradient

Stroke: #191919, #302f2f

stroke = photoshop template

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.
Now I will populate this shape with content and the main area has been created

My Result - Main Area for this Photoshop Template

main content for 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:

Inner shadow

inner shadow

Outer Glow

Outer Glow

Inner glow

Inner glow

Color Overlay

Color Overlay

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.

Sidebar

sidebar

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

final result for sidebar


The footer is really easy:
With pencil tool create a line and then duplicate it. On the first line use this color # 010101 on the second one use #3f3e3e. With this 2 lines we have created the separator between main content and footer.Duplicate the logo add a a copy on the footer, write a copywrite text and add rss icon and we're done.
I hope you have had a good read.

Final result:

Elegant Wordpress PSD - Photoshop Template

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 :)

On the next tutorial I will create a photoshop template for Drupal or Joomla. You can see preview for this template on our premium photoshop templates section.


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.

Download Templates

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:

Elegant Wordpress PSD - Photoshop Template

Comments (8)

Nice template...
0
I really like this template and I think soon I will jump for it. Keep up the good work!
danny , March 10, 2009 | url
Congrats for this great tutorial
0
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!
vik , March 11, 2009
...
0
Added to www.psaddict.com
psaddict , March 12, 2009 | url
...
0
Very good tutorial, I'll try doing it this afternoon after work :)
Murray , March 12, 2009 | url
Great Layout
0
I love the black gradient effect - very nicely done
...
0
This looks great! Very sleek and elegant design, clean and uncluttered layout. I love the texture that you used. Nice job!
Brochures , April 01, 2009 | url
How to use psd for wordpress
0
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?
free banners , April 08, 2009 | url
Nice
0
I love this look!
Clay , August 11, 2009 | url

Write comment

smaller | bigger

busy

Latest Tutorials

Previous Next
Create a Business PSD Layout in less than 10 minutes* Create a Business PSD Layout in less than 10 minutes* This is the first tutorial, before I begin I would like to present myself.My name is Stefan, I'm a web designer for more than 5 years and I ... Read more
Create an Elegant Photoshop (PSD) Template for Wordpress Create an Elegant Photoshop (PSD) Template for Wordpress Hello and welcome to PSDTemplate.comToday I will create another Photoshop Template but this time it will be a Wordpress Photoshop (PSD) Temp... Read more
[Tutorial] - Create a Photoshop (PSD) Template for Joomla or Drupal [Tutorial] - Create a Photoshop (PSD) Template for Joomla or Drupal Hello and welcome to another tutorial here at PSDTemplate.comToday I will create another Photoshop Template but this time it will be a funky... Read more
[Tutorial] - Make an Elegant Blog Layout in Photoshop [Tutorial] - Make an Elegant Blog Layout in Photoshop Hello and welcome to another tutorial here at PSDTemplate.comToday I will try to create another psd template (web layout) for Wordpress. Thi... Read more
Company/Business/Software Web layout (PSD Template) Company/Business/Software Web layout (PSD Template) Hello and welcome to another tutorial here at PSDTemplate.comFor today I have prepared a nice layout psd template (web (psd template) which ... Read more
Flower,Ornamental, Agriculture Web Layout (PSD Template) Flower,Ornamental, Agriculture Web Layout (PSD Template) TESTAnother day another tutorial here at PSDTemplate.comToday I have tried to create a simple web layout (psd template) related to nature, ... Read more