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 gray ( #F1F1F1)
Creating A Clean Website Template
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. Change the style in option bar Normal to fixed size. Apply width and Height of selection as per requirement.
Fill it with a white(#FFFFFF). Make sure that your new layer is horizontally center on canvas. Now should it looks like this:
Creating A Clean Website Template
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.
Creating A Clean Website Template
Creating A Clean Website Template
Background of website layout is completed.
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.
Creating A Clean Website Template
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:
Creating A Clean Website Template
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
Creating A Clean Website Template
Step 7: Add logo to header part of the website. Add new layer. Make rectangle 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:
Creating A Clean Website Template
Step 8: Ok, let's create submenu. Add new layer again. Make rectangular selection of 175 X 370 and add light gray color ( # F1F1F1 ). Do not deselect your selection and apply stroke to selection. Edit > Stroke Apply Outside stroke to selection with the color of # D1D1D1.
Creating A Clean Website Template
Creating A Clean Website Template
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. Does it?
Creating A Clean Website Template
Step 10: Now Footer of website layout, Apply new layer to canvas. Make rectangular selection of 728 X 25 and add light gray Color ( # F1F1F1 ).
Creating A Clean Website Template
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
Creating A Clean Website Template
Change color, images and sizes as per your requirement and design new website layouts. It's really easy.
