Create a classy web template in Photoshop

Apr 6th, 2010View Comments

Hello! In this tutorial I will create a classy template in Photoshop. This web layout can be used to create a personal website, or a commercial one, to showcase you’re product, services, etc

Please note that in this tutorial I will explain only how to design this layout in Photoshop but I will not cover the conversion PSD to XHTML. The tutorial on how to code this layout in XHTML it will be available on our PSD to HTML Section available only to our premium members

Click Here To See The Live Preview (CSS/HTML)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Classy PSD Web Layout Tutorial In Photoshop

Step 1 – Creating the background

Open Photoshop and create a new document (Ctrl + N) and as a background use this color: #eeeddb.

Next from my stock images I will select a nice picture related to nature showing a road. I will place it on my document and I will resize it a little bit using free transform (Ctrl + T) to fit on my document.

Next I will select Rectangular Marque Tool (M) and I will make this selection

Having Rectangular Marque Tool selected, please right click on the area which was selected and here choose Feather

Then for Feather Radius choose 95

Next I will choose  “Select Inverse”  by pressing on my keyboard (Shift + Ctrl + I) or by going to Select > Inverse (on Photoshop Menu)

Once you will done this the selection will be inversed. All you have to do is to press 3-4 times on DELETE button from your keyboard.
Here is my result:

I will proceed in the same way for bottom part of my document

Well the background is finished now.

Step 2 -  Creating the logo

First I will select Eraser Tool (E) and with a smooth brush (50px, I will lower the opacity also 43) I will erase  small partition of the image – top left side (where I would like to place my logo)


Then with type tool I will write “PSD-Coder.com” and I will add a slogan also (“your slogan goes here”)
For PSD I have used “Forte” font with 32px in size and for Coder.com and my slogan I have used Tahoma font
Next I will apply this layer styles (for all of the text)





My result

Step 3 – Creating the navigation

First I will select Rectangle Tool and I will create this shape:

I will apply this layer styles:




With type tool I will add the links for the navigation
My result:

Step 4 – Creating Featured Area

I will select Rectangle Tool and I will make this shape

I will lower the opacity to 40%

and I will apply this layer styles:




My result:

With type tool I will add some text on the left side

Select again rectangle tool and create this shape. Dimensions 338 by 308px as a color I have used # e5e4dc. Once you have created it, lower the opacity to 57%

Having rectangle tool selected, create another shape on the top of the last one. Please see the screenshot:

For this shape I have used this color: # d1d7ce, and it has this dimensions: 322 by 375px
Next select Ellipse Tool and create 2 shapes like mine

For each of this shape apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a radius of 56 – 58px
Next with Type Tool I will a title, than I will apply this layer styles:





Because this is a request form I will add more text and more forms (using Rectangle Tool)

Next I will add a button (using Rectangle Tool)

And I will apply this layer styles:



My result

Now I will select Ellipse Tool and I will create this black shape

For this shape I will apply a Gaussian Blur with a radius of 8.9px
Next I will select Rectangular Marquee tool (M) and I will make this selection

And I will press DELETE button on my keyboard and I will lower the opacity to 27%. I will repeat the same step to create a nice shadow just above our yellow button

Featured Area is almost finished. We have to create only a small detail.
Select Pen Tool and create a similar shape (a black one) and reduce opacity to 52%

My result for Featured Area

Step 5 – Creating the content area

With Rectangle Tool, create this shape (mine has 920 by 273px)

than apply this layer styles and change fill to 0% and opacity to 40%



Next with type tool I will add some content. Those yellow buttons has been created in the same way as it was created the button from Featured Area, so there is nothing to explain.
Here is my result:

Next and the only thing which need to be done here, is to create some shadows on the middle of the content area.
For that I will select Ellipse Tool and I will create this shape.

Then I will apply a Gaussian blur  (Filter>Blur> Gaussian Blur ) with a radios of 12px

I will select Rectangular Marquee Tool (M) and I will make this selection

Hit DELETE key on your keyboard, reduce the opacity to 30% and press Ctrl + D (to deselect your selection)

I will repeat the same step 3 more times (but in different locations)

Click Here To See The Live Preview (CSS/HTML)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Classy PSD Web Layout Tutorial In Photoshop

Want to Download the PSD Source File and CSS/XHTML files?

In order to download the source file you will need to become a Premium Member.

Already a premium member? When you click on the download link please make sure that you are logged in.

Tutorial finished! Stai tuned because more nice tutorial will follow up on trendyTUTS.com

  • http://www.net-kit.com/photoshop-layout-tutorials-mar-2010/ March’s Fresh Photoshop Web Layout Tutorials

    [...] 25. Create a classy web template in Photoshop [...]

  • Tirath

    Awesome tutorial with nice web layout
    Thanks so much for sharing & posting it
    keep up good work
    God bless you :-)

  • Tirath

    Awesome tutorial with nice web layout
    Thanks so much for sharing & posting it
    keep up good work
    God bless you :-)

  • designer

    good work….i’ve made one page like u n it’s luking nice
    too…thnx 4 the tips…

  • designer

    good work….i’ve made one page like u n it’s luking nice
    too…thnx 4 the tips…

  • Willard Witz

    Very Informative & helpful tutorial! ThanksOMuch for Posting. BTW, you should check-out MadMediaMonkey.com

  • Willard Witz

    Very Informative & helpful tutorial! ThanksOMuch for Posting. BTW, you should check-out MadMediaMonkey.com

blog comments powered by Disqus