Dark Template

Step 1 - Navigation & Content

This is a great tutorial for web designer's who plan on making a future for themselves as freelancers. I will explain how to make a beautiful navigation menu, and a simple content section. From there it's up to you to make it look more unique!

Click to enlarge

Step 2 - Background

Let's get started shall we? Start off by creating a new document, normal sizes are usually anywhere around 900x900px. The background is the first step of all web layouts. You can start by either making a solid color background, gradient background, patterned background, or anything you want! I chose to use a background pattern from DeviantArt.com. If you got nothing else to use, click the image above and use that as your background.

Click to enlarge

Step 3 - Navigation Background

Alright, after having creating your stylish background, let's start the structure of the navigation menu. First create a new layer, then grab your Selection Marquee tool (top left in toolbox). Now take a look at the top of your Photoshop window and find the View, Window, Help, etc... Right below that you'll see Style: Normal. Change that to Fixed Size. Insert 580x32px right aside from it. Now click anywhere in the document and it will already be set for you. Then right click > Fill. Fill this with #FFFFFF white. Change the blending mode to Overlay.

Now change create a new layer and change the fixed size to 759x30px on the Selection marquee tool. Then click anywhere on the document, but then move it so the right side of it lines up with the right side of the first navigation you made. Then right click > Fill. Fill this one with #323b3a. Finally, add a drop shadow effect on this layer by going to Layer > Layer Style > Drop Shadow. Use the settings below:

Click to enlarge

Step 4 - Adding the Home button

Look for the Rectangle Tool on your toolbox . Then once you found it, click and hold your mouse over it until a drop menu appears. Then click Rounded Rectangle Tool. Then go to the top of your Photoshop window again and change the radius to 6px. Then make a pretty large size Home Button (Refer to the image above). Make sure the bottom of it is under the dark navigation bar so it hides the bottom 2 curves.

Now go ahead and add some text as the navigation. Set the AA to none. Never use Soft, Sharp, Crisp, etc.. effects for text in website layouts. I decided to use Trebuchet MS at size 11px with #FFFFFF color. I put 20 spacebars in between each text.

Click to enlarge

Step 5 - Content Box

Finally, the template looks like it's going good. After the navigation is complete, time to add a content section. Use the Marquee Selection tool and make a new selection that lines up with the left side and the right side of the navigation. Then space it down a lot and make a big content box. Now right click the selection and find Fill. Fill it with #1b2121.

Once the content is lined up and everything matches, go ahead and add some example text. This gives us the idea of how it will look once it is all coded. Again, do NOT use AA (soft, crisp, sharp, etc...) on this text. Once it is coded, the AA will not show up do to the coding languages.

Click to enlarge

Step 6 - Adding the Logo

The logo is basically all up to you since everyone has their own. If you don't have a logo, go ahead and follow along to see how I made mine. Again, using the font Trebuchet MS at size 24, type the name of your website. Then change the .com, .net, etc... to size 9 with the color #455654. Then go over to your character window (if you don't have one, go to Window > Character) and click Small Caps (Tt).

Then create a new text layer under it and add a few periods . . . . . . . Then right click this layer and go to rasterize type. Then grab the Selection Marquee tool and select the right side of it like in the image below. Then right click that selection and go to Feather. Change it to 10px. Then go to Edit > Clear. Now your logo should be complete.

Click to enlarge

Step 7 - Finishing Touches

Now your done with the top part of your template design! All you have to do now is add details, and the bottom part of it. Notice i did not explain every step of the template (like the effect on the Home Button). You should not learn by coping everything from this tutorial. Just try it once, then after that try it with your own style until you get something you like.

Click to enlarge

Congratulations, your finished! Here's a copy of the .psd file. Enjoy!