Get a Free Quote

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:

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:

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

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

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

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

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:

Inner shadow

Outer Glow

Inner glow

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

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

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.

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:

Comments (8)

Nice template...

I really like this template and I think soon I will jump for it. Keep up the good work!

danny , March 10, 2009 | url

• 
• +11
• 
• 

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!

vik , March 11, 2009

• 
• +0
• 
• 

...

Added to www.psaddict.com

psaddict , March 12, 2009 | url

• 
• -1
• 
• 

...

Very good tutorial, I'll try doing it this afternoon after work :)

Murray , March 12, 2009 | url

• 
• -2
• 
• 

Great Layout

I love the black gradient effect - very nicely done

Web Design Stoke on Trent , March 25, 2009 | url

• 
• +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

• 
• +1
• 
• 

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?

free banners , April 08, 2009 | url

• 
• +5
• 
• 

Nice

I love this look!

Clay , August 11, 2009 | url

• 
• +0
• 
• 

Write comment

Name

Email

Website

Title

Comment

smaller | bigger

Subscribe via email (Registered users only)

Add Comment Preview