How to Create a Basic web layout in Photoshop Step by Step

Step1: Open a new file in Photoshop by clicking on File/New and enter a width of 960pixels and height of 600pixels.

Step2: Open Color the background with Black by choosing black in the foreground color #f2f2f2 and fill the color on the canvas. Your background will now light gray color.

Step3: Add a new layer by clicking on the Add Layer icon in the Layers panel. If your Layers panel is not open then go to Window/Layers. Name the new layer header. Select Rectangle Marquee Tool and drag to on main canvas on banner with a width of 960px height 120 pixels. Color this banner with color #2e4a79.

Step4: Now Create a logo ( NSWD ) on banner at the left side. Now clicking on the horizontal type tool in the tool pallet and type NWSD fill the color #ffffff, Set the font family “Arial”, set the font style “Bold” and set the font style 50px, now duplicate the layer rename NSWD to Nowstartwebdesign fill the color #d2d2d2. Set the Font size 12px.

Step5: Now create the navigation bar. Add a new layer by clicking on the Add Layer icon in the Layers panel. Name the new layer Navigation Bar. Select Rectangle Marquee Tool and drag to on main canvas on after banner with a width of 960px height 120 pixels. Fill the color #cdcdcd.
Type navigation names (HOME \ ABOUT US \ PORTFOLIO \ DEMOS \ DOWNLOADS / CONTACT )like below screenshot

Step6: Now create the Body area. Add a new layer by clicking on the Add Layer icon in the Layers panel. Name the new layer Body area. Select Rectangle Marquee Tool and drag to on main canvas on after navigation bar with a width of 700px height 470 pixels. Fill the color #eaeaea And go to blending option and select strok like below screen

Step7: Than create an image with content on Body Area like below Screen

Step8: Duplicate the Image, Title and Description layers. Create a horizontal line below 1st Content and 2nd Content

Step9: Than create a sidebar Add a new layer by clicking on the Add Layer icon in the Layers panel. Name the new layer Sidebar. Select Rectangle Marquee Tool and drag to on main canvas on rightside Bodyarea with a width of 238px height 470 pixels. Fill the color #397ea1.

And create categories on sidebar like below screen.

This is Final Step

Step10:Add a new layer by clicking on the Add Layer icon in the Layers panel. Name the new layer Footer. Select Rectangle Marquee Tool and drag to on main canvas on banner with a width of 960px height 45 pixels. Color this banner with color # 8799b8. And type copyrights text (© Nowstartwebdesign.com.2014. All Rights reserved. ) center of the document.