How to Create a PSD Layout For Beginner

Introduction

This article explains how to create a simple PSD Layout for a web page.

Step 1

Open Adobe Photoshop CS5.1 then click "File" > "New". Set the Width and Height of your PSD.

1.jpg  2s.jpg

Step 2

Open the background image and set it as the background layer.

3.jpg

Step 3

Make a wrapper for the web page layout. Select the Rectangle Tool and draw a rectangle. Then open a layer style of a wrapper layer by double-clicking on the wrapper layer and set the opacity to 55% and select a color Overlay to choose a color.

4.jpg

5.jpg

Step 4

Create a header and navbar layer. Select the Rectangle Tool and draw two rectangles, one for a header and the second for a navbar.

6.jpg

Step 5

Select the Slice Tool and slice the navbar tabs.

7.jpg   8.jpg

Step 6

Create the left_col layer for the category and set an image on right side of the left_col layer.

9c.jpg

Step 7

Select the Rounded Rectangle Tool and create a page_content layer. Select the Custom Shape Tool and draw a shape on the page_content layer.

10.jpg   pagecontent.jpg

Step 8

Select the Rectangle Tool and create a footer layer.

12.jpg

Step 9

Right-click on any shape layer and and click "Rasterize layer". All shape layers should be in the Rasterize layer. You can change the style of a layer by double-clicking on it.

13.jpg

Result

final.jpg