Sep 07

Design a Dark, Professional Website Layout

Tue, 09/07/2010 - 01:57 — julie

psdfanmembersbut Design a Dark, Professional Website Layout

Final Image

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

darkdesign17b Design a Dark, Professional Website Layout

Step 1

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

darkdesign1 Design a Dark, Professional Website Layout

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).

darkdesign2 Design a Dark, Professional Website Layout

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%.

darkdesign3a Design a Dark, Professional Website Layout

darkdesign3b Design a Dark, Professional Website Layout

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:

darkdesign4 Design a Dark, Professional Website Layout

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:

darkdesign5 Design a Dark, Professional Website Layout

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:

darkdesign6 Design a Dark, Professional Website Layout

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.

darkdesign7 Design a Dark, Professional Website Layout

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:

darkdesign8a Design a Dark, Professional Website Layout

darkdesign8b Design a Dark, Professional Website Layout

Step 9

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

darkdesign9 Design a Dark, Professional Website Layout

Step 10

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

darkdesign10 Design a Dark, Professional Website Layout

Step 11

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

darkdesign11a Design a Dark, Professional Website Layout

darkdesign11b Design a Dark, Professional Website Layout

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.

darkdesign12 Design a Dark, Professional Website Layout

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).

darkdesign13 Design a Dark, Professional Website Layout

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:

darkdesign14a Design a Dark, Professional Website Layout

darkdesign14b Design a Dark, Professional Website Layout

Step 15

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

darkdesign15 Design a Dark, Professional Website Layout

Step 16

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

darkdesign16 Design a Dark, Professional Website Layout

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:

darkdesign17a Design a Dark, Professional Website Layout

darkdesign17b Design a Dark, Professional Website Layout

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:

darkdesign17b Design a Dark, Professional Website Layout

psdfanmembersbut Design a Dark, Professional Website Layout

 Design a Dark, Professional Website Layout

Copyright 2009. E-mail Me
Auto Spare Parts