Night Website Layout

1. Create a new document with the size 1500 x 1300 pixels and fill the background with black.

2. Download this image ( flickr.com ) and place it in our document. Use Free Transform to make this image bigger, then go to Layer > Layer Mask > Reveal All. Select Gradient Tool and draw a linear black to white gradient to mask the upside part of the image.

3. Create a new layer and make a rectangular selection with the fixed size 800 x 1200 pixels. Fill the selection with white and set the opacity for this layer to 15%. Change the name of the layer to content bkg.

4. Create a new layer and make a rectangular selection with the size 300 x 1200 pixels, fill it with white and set the opacity of the layer to 15%. Change the name of the layer to sidebar bkg.

5. Ctrl + Click on the ‘content bkg’ layer's thumbnail to select it, then go to Select > Modify > Contract and add a value of 7 pixels. Create a new layer, fill the selection with white and set the opacity to 15%.

6. Do the same thing with the ’sidebar bkg’ layer too.

7. Download this Vista wallpaper (flickr.com ). Place the image inside our document, above all the other layers and change its mode to Soft Light. Use Free Transform to make the layer bigger.

8. Create a new layer and use Brush Tool to paint with 3-4 dark colors.

9. Select Type Tool and write the name of your site with white. Press Ctrl + G to place this layer inside a folder, and set the blend mode for the folder to Color Dodge. Right-click on the text layer and select Rasterize Type. Go to Filter > Blur > Gaussian Blur and use the value 1.5 pixels.

10. Ctrl + Click on the text layer's thumbnail to select the text, then click on the layer you created at the step eight (the one with the colors), go to Select > Modify > Expand and use the value 1 pixel. Go to Layer > Layer Mask > Reveal Selection.

11. Select Type Tool and add the pages names. I used the font Futura, the size 30 pixels and the color #ececea.

12. Now we are going to add the content on the page. I used the font Verdana with the white color and the size 15 for the content and 30 for the title.

13. Write the text for the sidebar. I used the same two fonts ( Futura and Verdana) to keep the design as clean as possible. I have drawn some black and white rectangles and I set the opacity of them to 30%.

Click to enlarge