April 14th, 2008 in Photoshop Tutorials by Richard Carpenter
Web Design Layout #5
21 Votes, Rating: 4.19
Loading ...
Create a new document 800×800 pixels with a white background, unlock your background layer and add this gradient overlay.
You should have something like this.
Select the rectangle marquee tool and create two 1 pixel lines.
Stretch the lines across the width the the canvas.
Create a rectangle using the rounded rectangle tool. Add these layer styles. Place above your line that you created in the previous step, Select the rectangle marquee tool and cut off the bottom corners so the bottom half is not rounded. Just make a selection and hit the delete key. Name this layer “navigation”
You should have something similar to this.
Create a new document 4×4 pixels. Select the pencil and draw 4 1 pixel squares like this. Helps if you zoom in to the maxium (1600%).
Make sure the background is transparent, then goto “edit > define pattern” give your pattern a name. Head back over to your layout select your navigation layer whilst holding the CTRL key this will make a selection. Create a new layer above your navigation layer and fill with your pattern. Set layer opacity of the lines to 25% and blending mode to overlay.
Now using the rectangle tool and eclliptical marquee tool create 2 highlights over your navigation.
Add your navigation text and layout title.
Now select the rounded rectangle tool and draw a big rectangle, make sure rectangle is under navigation.
Add these layer styles to your rectangle.
Inside your rectangle create another rectangle.
Add this gradient overlay to your new rectangle.
On the side of your new rectangle and in the middle of your main rectangle. create those two 1 pixel lines that we created in step one.
Now take the time to add some content, i wont go into too much detail at this stage as it is mainly text.
Looking good so far, Now create another rectangle using the rounded rectangle tool underneath your big main rectangle that we previously created.
Add the same layer styles as the main rectangle that we created previously. Take the time to add your own content again.
The arrows in the image above can be found in adobes custom shapes libary. Now duplicated your navigation elements. (x2 shines, actual shape and line pattern) duplicate the layers, flip vertical and place at the bottom of the page. This will be our footer. Add your footer text and your done.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
22 Responses to “Web Design Layout #5”