Create a classy web template in Photoshop
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
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)
Step 3 – Creating the navigation
First I will select Rectangle Tool and I will create this shape:
I will apply this layer styles:
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:
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:
Next I will add a button (using Rectangle Tool)
And I will apply this layer styles:
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
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)
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.comblog comments powered by Disqus