Learn how to create a website layout in Photoshop
Hello and welcome to another tutorial here on trendyTUTS.com. For today I have prepared a modern web layout – photoshop template -and I think this one can be used for a technology website, for a business company, it can be used as well for a hosting website, to showcase your script (software).
Anyway I think it can be used for many niche websites…. and I am sure you will find a way to use this template.
If you’d like to integrate this web layout with one of the must well know CMS platforms such as Joomla, WordPress or Drupal, you will need to code this psd template in CSS/XHTML.
Currently in this tutorial I will teach you how to create a similar web 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
To create this web layout I have used:
- the basics tools in Photoshop (Rectangle Too, Ellipse Tool, etc)
- some free vector icons created by TrendyPacks.com
Let’s start the tutorial!
Open Photoshop and create a new document (Ctrl + N), dimensions: 1020 by 1300 as a background choose “Transparent”
Next select Rectangle Tool and create this 3 shapes
For the first shape (1) I have used this color # 474b4c, dimensions: 1020 by 370px
For the second shape (2) I have used this color # 2e2e2e, dimensions: 1020 by 679px
For the third shape (3) I have used this color # e6e6e6, dimensions: 1020 by 251px
Tip – to create shapes with fixed dimensions, please take a look at this screenshot
Step 1 – Creating the logo and navigation
On the left side I will add my logo (here you should add yours) and on the right side using Rounded Rectangle Tool (with a radius of 15px) I will create this shape , dimensions: 627 by 84px
Then I will apply this layer styles
As you can see the navigation is quite big, but you don’t need to worry because we will fix this when we will create the slideshow area.
To finish the Navigation, I will select Rounded Rectangle Tool and I will create a shape over the Home link. This shape it will serve as a Hover. I will apply also this layer styles
Here is my final result for navigation
Step 2 – Creating the slideshow (featured area)
Select Rectangle Tool and create this shape. Dimensions: 947 by 395px. The color doesn’t matter at this moment because we will apply some layer styles. Also please make sure that on your layer palette you will place this layer above the navigation layer, to cover a small portion of the navigation. Please see the screenshot
Next apply this layer styles:
On the left side I will add an image
Underneath the image, using Ellipse Tool I will create this shape
and I will apply a Gaussian blur (Filter>Blur>Gaussian Blur, with a radius of 10px) to create a nice shadow. Underneath the shadow, using Ellipse Tool I will create the navigation for slideshow (I will add 3 circles)
Next on the right side, using Type Tool I will add some text. For the title I have used Verdana font with 30 px in size, than for the paragraph I have used Tahoma font with 12 px in size, next underneath the paragraph I will create a button using Rounded Rectangle Tool (radius 30px)
Now apply this layer styles for the button
Than with Type Tool add some text on it (I have added “Learn more…”), with Ellipse Tool create a circle (I have used this color # 313139), than with Pen Tool create an arrow. Here is my result for Featured Area
Step 3 – Creating the content area
To create the content area, select Rectangle Tool and create this shape. Dimensions: 947 by 514px and the color doesn’t matter because we will apply a gradient
Once you have something similar, apply this layer styles:
As you can see I have created 3 columns of text, but now I would like to make a separation between them. To do that I will select Line Tool and I will create this separators. Each separator has 2 lines of 1px width.
Please look at the zoomed image to understand better how to create this separators
Next at the bottom of the content area with Ellipse Tool I will add this shape
Then I will apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a radius of 7px and with Rectangular Marque Tool I will make this selection.
Once you have a similar selection hit Delete on your keyboard than press Ctrl + D to deselect.
Next I will select Line Tool and I will add a black line, dimensions 852 by 1px. Please see the screenshot
As you can see I have created a nice shadow at the bottom of the content area as well.
Step 4 – Creating the footer
Well, to create the footer is quite easy. All you have to do is to use Type Tool and to add some text, than with Rectangle Tool I have created the Newsletter forms.
Here is my final result for footer
Want to Download the Source File? CSS/XHTML files included
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.
The tutorial is finished now. No matter if you are a novice or an experienced user in Photoshop, if you have followed all of my steps you should have a similar web layout. Now in order to have a fully functional website you will need to take this psd and to code it in CSS/XHTML .
Once you convert this website in HTML you can upload it on your server or you can integrate the HTML file with one of this powerful CMS’s such as WordPress, Joomla or Drupal.
If you have any questions about this web layout, please ask them in comments! In addition you can follow me on twitter if you’d like to know when we post new tutorials on trendyTUTS.comblog comments powered by Disqus