September 15th, 2008 in Photoshop Tutorials by Richard Carpenter
Web Design Layout #7
20 Votes, Rating: 4.25
Loading ...
Learn how to create a web design layout, currently the 7th web design layout in our tutorial libary.
Create a new document 850×1000 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.
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).
Add these layer styles to your rounded rectangle.
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.
Inbetween your navigation text add two 1 pixel lines next to each other, to create a divider.
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.
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.
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.
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.
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.
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.
Label your content boxes with your content.
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.
Add your content to each of your content boxes.
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.
Thats it all done.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
24 Responses to “Web Design Layout #7”