How to Create a Clean Website Layout in Photoshop Part 2

Step 9 Create a new shape: width 940px, height 372px. Ensure you fill it otherwise next slide will not work As always, add some shadow: And a border: Blending Options-> Stroke (20px, color- #6bafff)

Step 10 To create nice slider, we should add some images to it. With the help of the Ctrl+Alt+G shortcut,create a clipping mask.

Step 11 – add additional icons Add them to our design

Step 12 Add some text. You should use the same font that you used for your menu bar. Set the font size to 30px Play with Blending Options: add a white shadow, colour overlay ( #6aaefd) and an inner shadow.

Copy the styles of this layer and add it to all your icons:

Step 13 Fill these four columns (width of each - 240px) with some "loremipsum" text. It is better to add a different text to every column.

Step 14 Create a Read More button with the help of the tools that we've used before. Blending options-> Inner Shadow, Drop Shadow, Colour Overlay (#919392).

Step 15 Add the "Read more" text to our button.

Step 16 Now we should separate the main content of our future website. Create a 1px line and add styles of your "read more" layout to it.

Step 17 Your next block can be a section entitled "Partners" or you may want to showcase your latest blog posts. Use the Rounded Rectangle tool to create a square (hold down the Shift button). Radius - 3px, width and height - 138px.

Go to Blending options -> Stroke to create a border with the settings below: Size- 20px, colour # Copy and paste this element 5 times :) Place these squares with the interval of 20px.

Step 18 With the help of a clipping mask, insert the image into the square. As you can see, you really can use this block for all sorts of purposes. Result:

Step 19 The footer of the website is as important as the header, if not more so. Ask yourself, "What do you want your visitors to do when they reach the bottom of the page?" The answer you come up with will be a great starting point for designing your website footer. Now it is time to design a cool footer for our cute website layout. Let's make it bright :) Add some gradient, for example #3a8df1 - #6bafff, and inner shadow

Step 20 We'll add three blocks into our footer: Quick links, About Us and Follow Us Use the Arial Regular font for titles (30px) and add styles as on the screenshots below:

Use the Arial Regular font for the text in the About Us section (12px). The text for the Quick Links section - 22px. Put some standard icons into the Follow section - RSS, Google Plus+ and Twitter