PSDFan Extra

Design a Dark, Professional Website Layout

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:


About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment

13 Comments:

  1. Lj says:

    Excellent tutorial-results~

  2. The top 500-600 pixels of a site is the first thing that someone is going to see when they look at a site without scrolling, so the darker header and the light coloured content in the center layered on top automatically draws your eye so having a contrast like this really works. A nice tutorial which I will try out in the future.

  3. Great tutorial and easy to follow steps. The dark background with the light content makes it all stand out and the top of the page will catch the visitors eye to draw them in to the website. I will have to try this out when I get a chance. Thanks for sharing.

  4. Vim says:

    Great post simple yet very effective, the top half of the page is very visually appealing, i will definitely be trying this tutorial out for future projects. Thanks Tom

  5. Thanks for the great post as always. We really get some useful tips and advice from your blog on a regular basis. Keep us posted!

  6. Tom says:

    Thanks for the great comments everyone! :) I’m glad that you liked my approach using a dark background, it was fun to create.

  7. Tim Wright says:

    Thanks for sharing the great tutorial post. Nice ideas and the dark background results look ace.

  8. Yeah great post too. How unexpecting was it that I was going to make a logo design tutorial just like yours… =/. O well. Great composition.

  9. simple and short web layout tutorial.

  10. Litmus Web says:

    good tutorial, i was looking for a swirl brush for my web designing work and here i got it. Thanks for sharing url for swirl brush.

  11. Ali says:

    Hi
    Nice Tutorial

Leave a Comment:

Related Posts

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY