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.

image 1

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.

image 2

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

image 3

Add these layer styles to your website title text.

image 4

image 5

image 6

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

image 7

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

image 8

Add these layer styles to your rounded rectangle.

image 9

image 10

image 11

You should have something like this.

image 12

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

image 13

Add this drop shadow to all your navigation links.

image 14

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.

image 15

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.

image 16

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

image 17

image 18

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.

image 19

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

image 20

image 21

image 22

image 23

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

image 24

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

image 25

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

image 26

image 27

image 28

Your featured area should look something like this.

image 29

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

image 30

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.

image 31

Repeat the process many times as needed.

image 32

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.

image 33

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.

image 34

Add your footer information to your footer.

image 35

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

Design Showcase Layout



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

No comments yet...
Add comments to "Design Showcase Layout"

Captcha