Filed under Photoshop Tutorials - Head Nerd @ November 17th, 2005
| In this tutorial, I am going to show you way to design professional and clean website layout. are you ready? Let’s start. |
| Step: 1 |
| Start Adobe Photoshop. Create a new document (778px x 600px), fill it with light grey ( #F1F1F1) |
 |
| Step: 2 |
| Create a new layer. Apply Rectangular marquee tool to new layer. Select size of selection on new layer is 728px X 600px. Tips for fixed selection for marquee selection tool. |
 |
| Fill it with a white(#FFFFFF). Make sure that your new layer is horizontally center on canvas. Now should it looks like this. |
 |
| Step 3 |
| Apply Blending Option – Outer Glow to white layer (right click on white layer to apply blending option). |
| Blend Mode – Outer Glow Specifications, apply this to your layer. |
 |
 |
| Background of website layout is compeleted. |
| Step 4 |
| Let’s start with header part, It is one of most important part of website layout, because its remain same through out website. Add new layer (ctrl + N – name it whatever you want) to your canvas. Make selection of 728 X 20 by using rectangular marquee selection tool at the top of the canvas.
Add dark green color ( # 494F1C ) to selection area. |
 |
Step 5 Add new layer (ctrl + N – name it whatever you want) to your canvas. Add images with size of 728 X 125 to your canvas. Now should it look like this.
|
 |
| Step 6 Step 6 is same like Step 4. Add new layer to canvas. Make selection of 728 X 25. Fill up with color # B1C144 |
 |
| Step 7 Add logo to header part of the website. Add new layer. Make Rect. Selection of 285 X 85. Add white color to your selection on new layer. Decrease opacity of layer to 50%. Apply outer glow to this layer ( same as like step 2 ). Add your logo on the white layer. Now it should look like this. |
 |
| Step 8 Ok, let’s create submenu. Add new layer again. Make rectangular selection of 175 X 370 and add light grey color ( # F1F1F1 ). Do not deselect your selection and apply stroke to selection. Edit > Stroke Apply Outside stroke to selection with the color of # D1D1D1. |
 |
 |
| Step 9 Repeat step 8 by replacing size 530 X 370. Adjust your new layer as per your requirement. Now, your canvas looks like below image. is it? |
 |
| Step 10 Now Footer of website layout, Apply new layer to canvas. Make rectangular selection of 728 X 25 and add light grey Color ( # F1F1F1 ). |
 |
| Step 11
Apply text to your website layout with any font you like, I used century gothic as a menu font, for text I used Arial. You are done! The final website layout is ready here |
 |
|
Change color, images and sizes as per your requirement and design new website layouts. It’s really easy. Good Luck |
|
|
Leave a Reply
You must be logged in to post a comment.
Copyright 2005-2006 - All Rights Reserved.