Create a Dark Themed Web Design from Scratch

This tutorial covers the key areas to focus on when creating a Web site design. This is a blog-style design, but the techniques and strategies used in this design could be applied elsewhere across the Web as well. Learn how to create a colorful design set against a dark background.

Final Image Preview

Before we get started, let's take a look at the image we'll be creating. click the screenshot below to view the full-size image. As always, the full Photoshop file is available via our PSDTUTS Plus membership.

Areas of Attraction

Let's take a look at the areas of the site that will attract a visitor’s attention the most. If you notice, the area with the most attraction is around the navigation and the first post. This is very important because it will give visitors insight into the sort of content the site contains.

The next main area of attraction is to the top right of the banner. The reason it is located here is that after the visitor sees the sort of content is on the site, they will see the title of the site, along with a small description. There is where important design and branding elements belong. Since most people decide whether they like a site in a matter of seconds, they now have most of the information needed to decide to whether to stay.

The other areas that direct attention are the titles of posts and entries. Whether they are in the sidebar or the footer, these areas will give a quick summary of the rest of the content.

Step 1

Now that we know what we are going to make, and the design decisions behind the layout, let’s move onto the design process.

To begin, create a new document. Mine is 1024px wide x 1200px high. Though the main content will be contained in the center 800px, this document size will show how it looks on larger monitors as well. Next, fill our background with black.

Step 2

Now we want to add a stroke and a gradient to the background to give it more depth. Grab your Single Row Marquee Tool and select a row about 400px below the top of the document. Fill your selection with (#1b1b1b). Then make a gradient underneath the stroke. Set your foreground color to (#0d0d0d). Then make a selection 1024px wide x 20px high. With your Linear Gradient Tool selected, make a Foreground to Transparent gradient. Start at the top and end at the bottom of the selection.

Step 3

Now let’s create the header of the design so we know where to place our graphics. Make a selection 800px wide x 225px high. Fill your selection with black. Then make a 1px border on the inside with the color (#0a0a0a). Make sure your Rulers (Ctrl+R) are showing. Then drag a guide out to 512px on the horizontal ruler. Now drag your black header until the middle of it snaps with your guide. This will center your header.

Let's add an outer glow to our header as well. Set the Blending Mode to Normal, Color to black, Opacity to 50%, Spread to 0%, and Size to 29px. You won't notice this right now, but later when we add graphics behind the header it will cast a shadow on them.

Step 4

We don't need a floating header, so let’s add our body below. Make a selection 800px wide and the rest of the height under the header. Fill the selection with black and add an inside stroke of (#0a0a0a). Nudge our body up 1px so that it overlaps the header.

Be sure that the body layer is above the header layer, since we don't want the header to cast a shadow over the body. Let’s add a 10px Foreground to Transparent gradient with a foreground color of (#0a0a0a) underneath the stroke.

Before we continue, let’s make sure we have our layers grouped and ordered. Place the layers that have your header and body into a group called Body. Then place your background layer, and the layers that have your background stroke and gradient into a group below your Body group called Background.

Step 5

Let’s create a new group called BehindHeader. Place it between the Body and Background groups. Then create a new layer inside this group. Grab your Polygonal Lasso Tool.

Select the triangular areas growing out from the header, and fill them with the color (#151515). The point of this is to create rays of light, so try to picture a focal point behind your header that these are being led to. To make it easier, only do one side of the rays, then duplicate the layer. Then go to Edit>Transform>Flip Horizontal

Now let’s create a Radial Gradient from the center of the ray to the outside. Make it so that it fades into the background. Set your foreground color to white, and your background color to black.

Step 6

To create an effect like the heart logo at the top right of the header, download some splatter brushes. You can find some here.

Let's review the basic process of creating these graphics. Pick a splatter brush and a color that will fit your design, then brush it onto the canvas. Create a new layer above or below your previous one, depending on which color you want on top, and select a new color. Use another splatter brush and brush it onto the layer. You can also draw shapes, like hearts or circles on different layers as well.

You could use opacities or layer effects to enhance the design. Creating brushes or shapes with the same background color will knock out portions of the design, or you can delete portions of shapes or use masks to keep it nondestructive. Repeat this process until you have the effect you desire.

Step 7

Let's take a moment away from designing and examine what we have so far. We have a background with a gradient that adds depth to the design. We also have a body and a header with strokes to separate them from the background and each other. We have a set of graphics that are currently placed behind the header to give our design a unique look.

The things we still need are the inside of the header, the title and description, the navigation, the sidebar design, the content design, and the footer.

Step 8

Now that we have the area behind our header finished, let’s work on the header itself. Create a new group above the Body layer and name it InsideHeader. Now that we have our group, let’s duplicate the designs that we made earlier in the upper left, and upper right corners of the header so that we can get the hidden content inside the header.

Place the graphics inside the new group. The problem now is that the layer still shows outside the header, which is blocking our shadow effect. To fix this (Ctrl-click) on the thumbnail for your header layer. This will make a selection of the header. Now all we need to do is click the Add Layer Mask button on our InsideHeader group so all the contained layers show inside the header. Finally, let’s change the Opacity of the group BehindHeader to 90% so that it appears darker.

Step 9

Let’s place some text on top of the header and inside the header to introduce the site. Create a logo or graphic and place it to the left so that it draws attention to the main attraction area. You can also add a Foreground to Transparent gradient layer. I used (#030a0e) for mine. If you add this, be sure to create a stroke underneath it that is brighter than the gradient. For this I used (#0b1316). This will help to add a transition between the header and the navigation.

Step 10

Make a selection of your header area. Create a new layer effect. Apply the settings shown below. For the Pattern Overlay I used a pattern of a fleur-de-lis I had available. Then create a layer mask, by clicking the Add Layer Mask Button in the layers palette. Be sure to click this with the layer selected. Then draw a radial gradient that goes from white to black. Place it at the top center of the header and allow it to overlap past the top of the document. The effect is shown in the last image below.

Step 11

For the navigation, let’s make a new group called Navigation. Then create a 35px high black bar underneath the main part of our header. Then let’s add a Foreground to Transparent gradient with a foreground color of (#0c0c0c) starting at the top of the navigation. It looks good, but adding a 1px stroke of (#232323) at the bottom will make the transition between the banner and the main body better.

Add some text so that you know how the links will look. I used a basic Verdana 18pt size text with Strong enabled.

Step 12

Now create new group called Date. Create a new smaller splatter effect and keep it within a 100px wide x 100px high area. Then create a new layer above these splatters. Then grab your Rounded Rectangle Tool. Set the Radius to 5px. Then make a rectangle around 50px wide by 50px high. Then add an outer glow with a Blending Mode of Normal and set the Color to black.

You can also use the rays of light you created earlier, and place a smaller version behind your box. Add some text inside the date box so that you know what it will look like. I used 12px Verdana for the month and 24px bolded Verdana for the day.

Add a title and content to the right of the date box. I used 30px Verdana with a color of white for the header, and 12px Verdana (#dddddd) for the content text. I made a sample link with the color (#36ade1).

Step 13

To create the sidebar box use the Rounded Rectangle Tool with a Radius of 10, add a stroke of (#080808) and create two Foreground to Transparent gradients. Place one on top and one on the bottom.

Step 14

Finally, the last step is to create the footer. You can create it with the same technique used for the inside of the header. Create a layer mask on the group so that it stays in a 800px wide x 300px high. I decided to place an image in the top left position. I also created small boxes with arrows to use before links, as seen in the image below. There are also hair line separators between each link. I used a Foreground to Transparent gradient to separate the footer from the main content.

Final Result

We now have a completed dark Web design that is ready to be coded in CSS/HTML. Remember the strategic reasons for placing graphics in certain areas of attraction. Create your own unique awe-inspiring designs that pop with color set against a dark background.

If you enjoyed this post, your vote is always highly appreciated!! Delicious StumbleUpon Float Reddit Bump This!

Comments

Add a Comment

Note: We use Gravatars on PSDTUTS, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too!