How to Create a Clean Website Layout in

PhotoshopPart 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 10To 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 12Add 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 13Fill these four columns (width of each - 240px) with some "loremipsum" text. It is better to add a different text to every column.

Step 14Create 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 15Add the "Read more" text to our button.

Step 16Now 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 #919392

Copy and paste this element 5 times :) Place these squares with the interval of 20px.

Step 18With 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