By mnovikovs in Web Design on Date 07/08/2008

Web 2.0 Photoshop Tutorial - VoiceTrader

In this tutorial I will walk you through the creation of my latest Templamatic design, titled "VoiceTrader".

NOTE: You can download the PSD files used in this tutorial at the bottom of the page.

We will start things off by creating a new Photoshop document: 1000px wide by 980px high, on a transparent background. Next we will create three separate rectangular blocks extending across the width of the canvas, each on their own layer. The first block is white (#FFFFFF), 72 px high and placed at the top of the canvas. Directly under the white bar we'll create a orange (#FF7200) bar 158px high. Finally, we'll fill the remaining canvas with a dark-gray (#2E2926) block 750px high.

Step 1
In the interest of keeping our organizational sanity, let's take the time to label our new layers. The layer containing the white rectangle we will name "Logo Placement", the orange rectangle will be named "Header", and the brown rectangle "Body". Now we'll turn our attention to the "Logo Placement" layer. Start by selecting this layer and go to Layer > Layer Style (in the menu or by double-clicking the right side of the layer's title area in the Layers panel) and apply the Drop Shadow and Gradient Overlay settings below:

Step 2
Still working on the "Logo Placement" layer, we'll now add the VoiceTrader text and give it a logo treatment. Let's go with an all-caps Helvetica Neue LTD Condensed typeface to begin with. Now select just the "VOICE" text, give it a font weight of extra-black and a color of #2E2926. Do the same with "TRADER", using the lightest weight and a color of #877A70.

To add a subtle drop shadow to the logo type we'll select the layer with the "VOICETRADER" text and again go to the Layer Style window, applying the following settings:

Step 3
Stock image sites are a great resource for spicing up your designs. While searching for and purchasing stock artwork is beyond the scope of this tutorial, I managed to find a simple vector icon which will work perfectly sitting just to the left of the VoiceTrader text. Let's add another line of text set in 12pt Arial Regular with a color of #4A443E that reads "Home | About | Contact Us" (the "|" or "pipe" is just above the "enter" key on your keyboard). By selecting "Home" and hitting the "underline" option in the Character panel, we'll indicate that the current page is the Home page.

Step 4
Now we'll work with a stock image I found to brighten up our header. Stock.xchng ( is a great resource for free stock imagry, and I found this image at Place the image on your canvas and scale it to the height of your orange header. To give it that blended "feather" effect, take out your Eraser tool, set the tip size to 150 with a hardness of 10, and erase along the directions of the arrows below:

Looking good! Now, let's spice up the header with some callout text. Let's use our Helvetica Neue LTD at 36pt and add the text "WE PRIDE OUR CLIENTS" in all-caps. Select "PRIDE" and give it a heavier font weight for added effect:

Next, we'll go to our Layer Style window and add a drop shadow to our "WE PRIDE OUR CLIENTS" text:

Just below the "WE PRIDE OUR CLIENT" text, we'll add a second line of text using the same font at 12pt reading "AND VALUE THEIR SHARE IN OUR COMPANY". Apply a Gradient Overlay along with the same Drop Shadow used in the previous step to the "AND VALUE THEIR SHARE IN OUR COMPANY":

Step 5
To finish up the header we will create two "call to action" buttons directing the audience to important areas of the site. Let's begin by creating the base shape of our button. We'll use the Rounded Rectangle tool with a corner radius of 12px (shown below) to create the desired button shape:

Open your Layer Style window, and add Drop Shadow, Gradient Overlay, and Stroke styles with the settings shown below:

Next, add the button text "FIND OUT MORE" in Helevetica Neue LTD size 12pt in the same orange as the header background (#FF7200), and add a drop shadow to the layer style:

After that, just duplicate the button (and text) and move it to the right of the original button. In the Layer Styles window for the new button, change the color of the gradient overlay to gray. Switch the new button's text to a darker shade of grey. You should now have something identical to the screen below:

Step 6
We've finished with the Header so now we're onto the Navigation! Start off by creating a new layer and naming it "Navigation". Using your Rectangular Marque Tool, select a 20px high area directly under the header spanning the entire width of the canvas. Fill the selection with the your background color (#2E2926). Take your Burn tool, set the tip size to 30 with a hardness of 0, and brush it along the bottom of your new rectangle according to the screen below:

Now we can add the navigation text. In all-caps Arial Bold 12pt, type "HOME", "ABOUT VOICE TRADER", "OUR SERVICES", "THE MARKETPLACE", "FORUMS" and "SUPPORT" on one line with a standard amount of spacing between each:

In a new layer, let's add a sample rollover state by taking our Rectangular Marque tool and creating a small rectangle 20px tall and just wide enough to cover the "HOME" text. Fill this with a lighter gray (#48403C) and use your Burn tool again to create a similar gradient effect you used on your navigation background:

Step 7
With the navigation complete, it's time for the Body of the page. Let's once again create a new layer and use the Rectangular Marquee tool to select an area from the bottom of the nav to the bottom of the page, spanning across the entire canvas. Fill this selection with the same color as your background (#2E2926) and then use the Dodge tool (with the tip set to 150px and a hardness of 0) to lighten the area according to the arrows below:

Now we'll add a small white vertical line between the Navigation and Body sections to visually separate the two. In a new layer, bring up the Pencil tool with a size of 1px and the foreground set to white. Hold the "Shift" key and drag a straight line from one side of the canvas to the other. Drop the opacity of this layer to 45%, and nudge it up or down if it's not exactly aligned with the bottom of the Nagivation section:

Step 8Let's start adding in content. I've found another site-worthy stock icon and will place it next to some welcome text for a little visual punch. In 14pt Arial Regular and a color of #9D9A99, add the text "Welcome to Voice Trader, Your Advisor in Telecom stocks":

Now we'll create an area for our first content paragraph to be held. Use your Rounded Rectangle tool with a 12pt radius setting to select an area 373px wide and 144px high, and fill it with a light gray (#3F3935):

Go to your Layer Style window and apply Drop Shadow and Stroke settings below:

Now we'll add some filler content with a headline set in white 12pt Arial Bold and the body copy in 12pt Arial Regular with a hint of orange (#CAB38A):

Duplicate our newly created paragraph along with all the headline and body copy and move the new group to the right of the original. Change the placeholder header and body copy text to indicate a different subject matter:

Step 9
In this step we will be using many of the techniques we've already established in the tutorial, so I won't go into too much detail explaining the steps. Let's begin by creating the background for our large content area... Notice on the screen below that the content area is a rounded rectangle with two separate colors. This can be done by creating one rounded rectangle area colored in white, and then duplicating it and changing the second rectangle's color to gray (#38322E). Rasterize both shapes and use the Rectangular Marquee to cut their appropriate ends off:

Apply the Layer Style settings below to the new gray layer:

Continuing with the gray area, let's add a simple introduction heading that reads "Our Solutions" and add the following icon to the right of the heading for some eyecandy:

Now select the layer with your white shape and apply the following settings in the Layer Style window:

Let's finish this area off with some filler content. Add a header set in 18pt Arial with a color of #FF7200, a subhead set in 12pt Arial with a color of #A38D71, and body text set in 12pt Arial with a color of #A5826B. Place the following stock image to the left of the header & subhead. Everything should now look like the screen below:

Step 10
In step 10, we finish putting content on the darker half of our body paragraph. Go back to the layer where we have added "Our Solutions" and create a rounded rectangle 226px wide and 36px tall and a color of #231E1B:

Now apply the following Layer Style settings to the newly created shape:

Add an icon and some label text, and then duplicate the tabs until you have a full list:

Final Step
In our last step, we will create the footer using the same tricks we did before. Use the Rectangular Marque tool and draw out a small rectangle 55px high, spreading the width of the canvas. Fill the selection with your standard background gray (#2E2926) and use the Burn tool along the top of the new shape:

Add some footer text and you're done:

Final Preview:

There you go, you've created a gorgeous website template! Using techniques you've just learned, you now have the knowledge to create an endless number of website designs.

Download the finished file for this tutorial.


  • ReGi
    7 years ago
    me encanta este tutorial es muy facil cuando vas asi paso a paso, mi pregunta es la siguiente: A la hora de pasarlo a documento html para subirlo a la red, como lo haces , con sectores o con la configuracion de enlaces de images ready....o en otra opcion.
  • ananyaroy
    8 years ago
  • Themerboy
    9 years ago
    Simple, Easy and useful for beginners.
  • Timo
    9 years ago
    OK, thanks for the tip.
  • bh4k
    9 years ago
    My guess is that the layer order is preventing you from seeing the duplicated button. In your layers window (F7 to show layers) find the duplicated layer and move it up until it is visible.
  • Timo
    9 years ago
    Ok, here it comes ... yet another basic question :) Since I have my Find Out More -button on the header and I want to reuse it on the International Minute Trade content box, how can I do this? What I did was that I duplicated the button layer and then tried to drag'n'drop it to the content area, but the button disappears after dragging it out of the orange header area. How can I prevent this to happen?
  • bh4k
    9 years ago
    Also, if you are working with real vectors in Adobe Illustrator, you can pull them into Photoshop as Smart Objects and they can be resized without becoming pixelated within Photoshop.
  • bh4k
    9 years ago
    Timo, I just opened the PSD to try and see if I could give you some advice. It looks like the vectors used in this tutorial were rasterized (they are no longer vectors) but, they do seem to have transparent backgrounds so you should be able to use them as they are in your own document. Let me know if this helps or if you have more questions. Glad you found the tutorial easy to follow!
  • Timo
    9 years ago
    Nice tutorial. Even as a beginner with PS I was able to complete it! However there was one thing I couldn't figure out how to do it nicely and that was how to import vector icons so that their background is transparent (for e.g. the box at left side of the International Minute Trade text). I just dragged'n'dropped the box that was on this tutorial to my psd-file and since the background wasn't transparent, boxes original background was visible. So, how can I make it transparent? Sorry if this is so obvious, but I'm just starting out with PhotoShop.
  • eod
    9 years ago
    clean and efficient, thank you for the inspiration
  • dhanediesil
    9 years ago
    Excellent tut!
  • mnovikovs
    9 years ago
    Thank you!
  • bh4k
    9 years ago
    wow! This post is epic. Great tutorial and I love the finished design.
or register to post comments.