Create a gorgeous simple night style website layout

1. Ok, lets start then. Create a new document with 800 x 800 px, 72 resolution, RGB. Background

color set to #434343.

2. Grab the text tool, type your site name and I use “YourSite” here. I use

moonstar with 48px, white. Place it nicely on the top

left of the page. Press F5 to bring out the brushes setting. Check the Shape Dynamics and

use a 3 px hard brush. Create a new layer above of the text layer and name as line_layer. Grab the pen tools and select path. Draw the

wave as shown below. This is very depend on you and how the shape you like. After draw a line, right click and select stroke path, check the simulate

pressure and stroke with brushes.
W

3. After complete the desired shape or wave, double click text layer or right click and select blending

option. Check Outer Glow,color #009cff,Opacity 80%, Size 6px, Blend Mode Screen. Right click the text layer and

copy the layer style. Paste into the line_layer. CTRL+J to duplicate the

line_layer to make the glow lighter. Create a new group and name it as Logo and copy all layers except the background layer, into

the group.
W

4. For the top navigation bar, I use the simple but nice custom symbol as shown. To match with the theme, here are what I use. For the

activated icon, simply paste the layer style that we had copy just now. I use 11pt Tahoma. Grab the Rounded

Rectangle Tool, with 4px radius, draw a small shape (#2f2f2f)that can cover the icon and text as shown. Bring out the blending

option. Use Stroke, 1px inside white stroke with 45% opacity. Inner Glow, normal blend mode, 45% opacity, 4px size, black. Put all these

layer into a new group named as Nav.
W

5. Grab the Rounded Rectanlge Tool, draw as shown below, about 2/3 of the page. Apply the blending option shown.
W

6. Draw the shape shown below with the rectangle tool using color #2581de. Create a new layer

below the blue layer and use the Polygonal Lasso Tool draw out the shape to make the drop shadow. With the new empty layer

selected, fill it with black, Goto Filter > Blur > Gaussian Blur > 4px. Type the date with

Tahoma, Bold, 30pt. and the month and years with Arial 9pt.
W

7. Grab the Line Tool and draw a line. CTRL+J to duplicate the line. Press the

up button the bring it 1px up. Use the color shown.
W

8. You will get something like this. Put all layers into a new group named Body.
W

9. For the sidebar, It is simple and the technique is excatly same with what we do for the logo. Here is this. For the gallery boxes.

Appy this blending option. 1 inside white stroke 30% opacity. After all done, put all layers into a new group and name it as

SideBar.
W

10. Goto the Nav group and create a new layer, put it at the bottom in the group. Grab

the Rectangle Tool and draw the shape. Apply the blending option shown below.
W

11. Create a new group and name it as Footer. Draw the rectangle with the blending option applied.
W

12. Hurray! DONE!!!
WW

Comments