Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Design Showcase Layout

Design Showcase Layout


To get started you first need to create a new document 900x1210.

Img

Set the color white as your forground and the color #cdd3d8 as your background. Select the gradient tool with a radial gradient, start from the top middle of the canvas and drag down towards the middle of the canvas.

d

Img

Using the type tool add your website title in the top left hand corner.

Img

Add these layer styles to your website title text.

Img

Img

Img

Select the rounded rectangle tool with a radius of 15 pixels.

Img

Draw out a rectangle 845 pixels wide and 50 pixels in height, fill the rectangle with any color.

Img

Add these layer styles to your rounded rectangle.

Img

Img

Img

You should have something like this.

Img

Add your navigation links to your navigation bar, also add a short navigation at the top of your navigation bar.

Img

Add this drop shadow to all your navigation links.

Img

If theres any space left on on your navigation bar, add a search field using the rounded rectangle tool with a radius of 15 pixels, you could also add a search icon to complete the look. Ive used the search icon from the wefunction free icon pack.

Img

Still with the rounded rectangle tool create a bigger rectangle but keep the width the same as the navigation bar. Dont fill the rectangle with a solid color instead fill it with a radial gradient in the same way you did your background.

Img

Add these layer styles to your big rectangle to complete the effect.

Img

Img

The big rectangle will be our featured area, inside the featured area create a smaller rectangle on the left-hand side. Fill the rectangle with any color.

Img

Once you've created your rectangle add these layer styles.

Img

Img

Img

Img

Inside your smaller rectangle in your featured area add an example featured image with some dummy text on the right.

Img

Underneath your dummy text add two small buttons, create the buttons using the rounded rectangle tool. Fill the rectangles with any color.

Img

Add these layer styles to each button to complete the effect.

Img

Img

Img

Your featured area should look something like this.

Img

Underneath your featured area create a smaller version of your featured image.

Img

Add a title of inspiration above your image, underneath your image add some icons sort of like a rating system, ive chosen to use some hearts.

Img

Repeat the process many times as needed.

Img

Inbetween each peice of inspiration add a seperator, using the rectangular marquee tool create two 1 pixel lines ontop of each other. Fill the line at the bottom with the color #dee4eb and the one ontop #b1b7bc.

Img

Underneath the very last item of inspiration add i sort of pagination then duplicate your navigation bar and drag to the bottom of the canvas.

Img

Add your footer information to your footer.

Img

When you've finished you should have something like this.

Img



Author's URL: Hv-Designs.co.uk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: