In this tutorial l will show you step by step how l created this mock layout for a technology website. This layout would work great for a company that develops software, or hardware. Or offers specific internet/customer relations services. If you're ready to get started, we'll begin. Go To Page: [ 1 ·
2 ·
3 ]
Page 2 of 3
Step 7.)
Create a new layer, set your foreground color to: #D9D9E1
Get out the pencil tool and set it to 2 pixels in width. and draw a 2 pixel line along the side of the green box we'd just made like so:
Next set your foreground color to #000000 (black) set the pencil tool to 1 pixel this time, and draw a 1 pixel black line in right beside the line you just created like so:
(close up - draw this line all the way down the image)
Step 8.)
Create a new layer. With the rectangular marquee tool, make a selection like so:
And fill this selection with white (#FFFFFF)
Result:
Step 9.)
Next we'll make a space for our company name, and logo. Create a new layer, and make the following selection with the rectangular marquee tool:
Fill this selection with white (#FFFFFF).
Double click this layer, and add a slight dropshadow to it in the blending options:
Result:
Step 10.)
Now we'll create a section for our navigation/links. Create a new layer, get out that handy rectangular marquee tool, and make a selection like so:
Set your foreground color to #000000 (black), and your background color to white (#FFFFFF)
Get out the gradient fill tool, and set it up like so:
Now fill in this selection with the gradient tool, from black to white:
Change the 'blending option' of this layer to "Overlay", and set the opacity down to around 73 percent
Result:
Step 11.)
Now we'll put some dividers on the navigation box. Go ahead and create a new layer, get out the pencil tool. Set it to 1 pixel, and set your foreground color to: #000000 (black). Now draw 1 pixel lines across the navigation area. Attempt to make the distances between these lines equal.
Result:
Step 12.)
Now set your foreground color to #5B5C5B, and draw another line right bellow each of these lines. This gives us a great looking "bevel effect" on our navigation bar.
