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

Your PROject


lets get started firstlt create a new document 900 x 1090 pixels with a black background. Select the rectangular marquee tool and create a box at the top. Fill the box with a radial gradient using the colors #202121 and #000000.

Img

At the very bottom of the rectangle create two 1 pixle lines ontop of each other spanning the width of your canvas.

Img

Add a layer mask to your lines layer. With the gradient tool and a reflected gradient start from the middle and drag towards the edge of the canvas. Make sure forground is white and background color is black. The edges of your lines should blend into the background. You should have something like this.

Img

In the top left hand corner add your website title and slogan. Ive chosen to add a few layer styles to the 2nd word in my title. The layer styles are as follows.

Img

Img

Img

You should have something like this.

Img

On the same level as your website title towards the right hand side add a simple navigation using the rounded rectangle to create a hover state. The color of the blue hover is #0096ff.

Img

Underneath the website title add some featured content text with a title. Next to the title make a simple little icon/bullet point and place it next to the title.

Img

On the right side of the header create a rounded rectangle, just big enough to fit inside the space provided. Make the rectangle over lap the header at the bottom.

Img

Fill your selection with a radial gradient using the same technique as we did for the header background. Once you've filled your selection with the radial gradient add these layer styles.

Img

Img

You should now have something like this.

Img

Ontop of the rounded rectangle make a selection like the image below using either the pen tool or the polygonal lasso tool.

Img

Fill the selection with the color white then set layer opacity to 6%. Next find an image you want to use as your featured image. Im using an image of the acer gemstone blue laptop. Resize your image to fit inside the rounded rectangle leaving a good 10-15px all the way around.

Img

Once you've postioned your image add this inner shadow.

Img

Using the rounded rectangle tool with a radius of 5pixels create two small buttons with arrows facing left and right.

Img

The reason why the arrows are more to the left on the buttons is because the buttons will be tucked underneath our featured image. The layer styles for the buttons are as follow.

Img

Img

Img

Tuck your buttons underneath your featured image.

Img

Using the rectangular marquee tool make a selection from the two 1 pixel lines we created down to the rest of the canvas. Fill the selection in the same way we did our header background image. (radial gradient).

Img

Select the rectangular marquee tool once again and create a selection underneath all the header elements.

Img

Fill the selection with any color then add these layer styles.

Img

Img

Img

Now we have our content box begin to add some dummy content. We'll start off with a simple header in capitals, underneath the header add a simple time/date stamps.

Img

Underneath the header and time/date stamp create those two 1pixel lines on top of each other again. (divider). Stretch the divider lines across the content box leaving about 10-15px either side.

Img

Underneath the divider line begin to add your dummy content/images to your content box. Use the steps above to create more content boxes as needed.

Img

Now for the footer, create a selection spanning the width of your canvas. Fill the selection with a reflected gradient using the colors #202020 and #111110. Duplicate your site title and slogan then move it down towards the left hand side of the footer. Add your copyright info on the right. When you've finished your footer you should have something like this.

Img

Heres the finished result

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: