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

Web Design Layout #7


Create a new document 850x1000 pixels, fill your background layer with the color black. Select the rectangular marquee tool and create a rectangle about 760 pixels wide and about 290 pixels high, fill the rectangle with the color black then add this stroke to it.

image 1

Using the rounded rectangle create another rectangle above it about 45 pixels high but the same width as the 1st rectangle, fill with the color black. Place at the top of your 1st rectangle (see image below, ive marked the rectangle as a selection, with it being so dark its hard to see).

image 2

Add these layer styles to your rounded rectangle.

image 3

image 4

You cant actually see alot so theres no screenshot of this step. You'll see more detail as the tutorial goes on. On the rounded rectangle add a rounded shine at the top, and add your navigation text.

image 5

Inbetween your navigation text add two 1 pixel lines next to each other, to create a divider.

image 6

Select the magnify tool and zoom right in on the naviagtion, create a 1 pixel line across the bottom of the navigation bar using the pen tool or the pencil tool in the color #aa4282. Add this outer glow to your line.

image 7

Next add a mask to your line and drag a reflected gradient over the top, dragging from the middle outwards to either the left or the right, you should have something like this.

image 8

Next find a cool abstract image or a good photoshoped image of yourself, im going to use a wallpaper found here. Add your desired image to your square rectangle your created earlier.

image 9

Now add a small description about your site to the right of the image. Once you have done that select the pen tool and create a selection like this.

image 10

Fill with the color white, lower opacity to around 10%, add a layer mask, then drag a linear gradient over the top to blend it in abit. Your final image should look like this.

image 11

With the rounded rectangle tool create a further 2 boxes underneath your square rectangle, Copy/Paste the layer styles from the square rectangle to the two new rounded rectangles.

image 12

Label your content boxes with your content.

image 13

The little pink icons were made using the rounded rectangle tool and just a plus sign on the keyboard in the type tool. The layer styles for the pink box are.

image 14

Add your content to each of your content boxes.

image 15

image 16

In the last little abit of space thats left add your footer, Duplicate the navigation elements apart from the dividers and the navigation text, drag to the bottom of your canvas then add your copyright/footer text.

image 17

Thats it all done.

Web Design Layout #7



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 "Web Design Layout #7"

Captcha