Kool Web Design Layout

Learn how to create a dark colorfull web design layout with some nice glow effects. (tutorial by hv-designs)

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.
Next find a cool abstract image or a good photoshoped image of yourself, im going to use a wallpaper found . 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.

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.