Here is my final result:

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)

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

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

Comments (8)

Write comment

< Prev		Next >