This Photoshop tutorial will guide you through the process of designing a stunning, clean, and professional website layout. The layout presented here is versatile, suitable for both personal and corporate websites, and offers an intuitive user experience, enhancing your site’s reputation. Update: This is the initial part of a two-part series. The series will continue with a focus on converting the Photoshop layout into a standards-compliant (X)HTML web design.
Part 1: Designing a Clean and Professional Web Layout in Photoshop
Part 2: Coding a Clean and Professional Web Design
Preview the layout we will be creating in this tutorial. You can view the final image below or click here for a full-size version. 
Begin by creating a new document in Photoshop (Ctrl/Cmd + N) with the settings displayed in the following image. 
Ensure you are working in pixel units, the standard unit for web design.Configure your Rulers in the Preferences dialog (Ctrl/Cmd + K); select Units & Rulers and verify the settings match the image below. 
Enable Photoshop Rulers from View > Rulers.Toggle ruler visibility with “Ctrl/Cmd + R”.Open the Info panel from Window > Info (shortcut: F8) for tool-specific information.Use the Rectangular Marquee Tool (M) to create a 120px wide box from the canvas’s left corner, adjusting size with the Info panel.Drag a guide from the left ruler to the right of the marquee selection, then move the selection to the right edge of the canvas and add a guide to the left side.Your canvas should now resemble the image below. 
Next, we will create the website’s logo.The logo will be simple with a color gradient effect. Create a new group (Layer > New > Group) named “logo”.Use the Horizontal Type Tool (T) to type “SMASHING” (or your website’s name) in uppercase.Set the font to Arial, style to Bold, size to 42pt, and color to #101112 in the Character panel. Apply anti-aliasing as Sharp.Open the Layer Style dialog by double-clicking the text layer and select Gradient Overlay. Use the gradient settings shown below. 
Position the “SMASHING” layer 35px from the top and 0px from the left guide, using the Move Tool (V) and arrow keys for accuracy.Duplicate the layer and edit the text to “Dzine”, applying different gradient colors for this word.Use the Horizontal Type Tool (T) to add a tagline under the logo with specific settings.For the logo, the final appearance should be as shown in the image below. To toggle guides, go to View > Show > Grid or use the shortcut Ctrl/Cmd + ; 
Create a new group named “navigation” above the “logo” group.Draw a horizontal line across the canvas using the Rectangle Tool (U) at 150px below the top edge and a color of #e3ab27.Add navigation links 12px high from the line and 20px to the right of the left guide, using the Rounded Rectangle Tool (U) for the boxes.Move the layer below the text links and name it “hover”. Adjust the rounded corners and add gradient colors for the hover effect.Change the “Home” link color to white.Download and place a phone icon on the right, add a phone number and related text using Arial font.Create a header section with a background and a container for the featured project.Within the header, create a featured project section with a rectangle and an image, adjusting the image with transform and blending modes.Create a title and description bar for the featured project image.Within the header, create a “quick quote” section with a rectangle and form fields.Within the “quick quote” section, create a submit button with gradient colors and alignment.Create a content area with a rectangle and text, including a title, description, and link.Within the content area, create a box with a border and a placeholder for an image.Duplicate the “about” group to create “services” and “portfolio” sections, adjusting titles and spacing.Create a footer section with a background, copyright text, footer links, and a subscription section.Within the footer, create a subscription button and email field.The tutorial concludes with the final result, inviting feedback and sharing.Download the PSD file of this tutorial as a ZIP archive.
clean-professional-weblayout (ZIP, 2.4 MB)
Optimize images for reduced load time, suitable for small sites like a golf course due to its simplicity and user-friendliness.
How to Create a Clean Blog Design with Photoshop
Coding a Clean Web 2.0 Style Web Design from Photoshop
Create a Slick and Minimalist Web Layout in Photoshop
Make a 3D Pencil and Paper Icon in Photoshop
Create a Slick Video player UI in Photoshop
