Design a Dark, Professional Website Layout

Monday, 06 September 2010 15:57

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Create a new document (1000X1000px) and fill your canvas with DCDCDC.

Step 2

Now create a new layer called ‘header dark’. Select the top of your canvas, and fill your selection with a linear gradient (343434 to 1F1F1F).

Step 3

Now create a new layer called ‘highlight’. Create a white-transparent radial gradient at the top of your canvas. Then change the layer mode to ‘overlay’ and reduce it’s opacity to 35%.

Step 4

Now download this brush set: swirly brush set.

Create a new layer called ‘lines’ and apply the brushes over the top of your canvas:

Then go to filter>sharpen to make the lines cleaner:

Step 5

Reduce the opacity of your ‘lines’ layer to 40% and change it’s blend mode to ‘overlay’. This should give your header area a subtle pattern effect:

Step 6

Create a new layer called ‘white area’. Using your marquee tool and paintbucket (or alternatively your rectangle shapes tool) create a central white rectangle that will act as your primary content area:

Step 7

Write out some text in the top left of your canvas. I used the font ChunkFive (-50 kerning), coloring the bottom part of my logo E93700.

Step 8

Create a layer called ‘menu’ beneath your logo font layer. Create a black rectangle spanning across the top of your canvas and behind your logo.

Then reduce this layer’s opacity to 30%, and use a large, soft eraser to blend the edges of this area into your header background:

Step 9

Now type out some menu text (Arial, 14pt, -50 kerning):

Step 10

Now paste in a screengrab of one of your favorite sites. I went with PSDFAN, as I happen to like it!

Step 11

Now go to blending options for your screengrab layer and apply a drop shadow (settings below):

Step 12

To create a simple content scroller design, simply use your eliptical marquee tool and construct some circles beneath your screengrab. For the rings create a circle, fill it with 1F1F1F and then go to select>modify>contract. Contract by 1px and hit delete.

Step 13

Now type out some content text for the lower part of your design. I used Arial (000000 for the headers, and 5A5A5A for the main text).

Step 14

Create a rounded rectangle layer beneath your content text (5px radius). Call this layer ‘button’. Then go to blending options and apply a gradient overlay, ranging from FF3C00 to C32E00.

Then apply a 1px stroke (781C00) and inner shadow effect. Settings for these blending options can be found below:

Step 15

Now create a new layer called ‘footer’. Create a medium gray (A6A6A6) bar at the bottom of your canvas.

Step 16

Now type out a copyright notice over your gray footer bar:

Step 17

Now create a new layer beneath your white content area called ‘highlight footer’. Create a white-transparent radial gradient at the bottom of your canvas. Then reduce this layer’s opacity to 50% to create a subtle lighting effect at the base of your design:

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome: