If you're looking for a clean custom web design, then visit the incredible team over at Captain Marketing Thanks for visiting!

Step 1

Create a new document (I’ve chosen 540 by 440 pixels). Set your foreground colour to #134c72 and your background colour to #0a3567. Select the gradient tool and set it to radial (you can do this at the top left of your window). Left click in the middle of your document and drag to a corner and release. This will give us a background to work from.

Step 2

Create a new layer and select the Rounded Rectangle Tool. Set the radius to 10 pixels and the size to 300 by 300 pixels. Make a selection in the middle of the document like so.

We are now going to be filling the selection with another gradient. Set your foreground colour to #252524 and your background colour to #151515. Using the gradient tool again left click somewhere near the top left and drag down towards the right and release. You can deselect your selection now (Ctrl + D).

Step 3

Now we are going to be adding an Outer Glow to our box. We will do this by going Layer > Layer Style > Outer Glow and entering the below settings.

Now your box should be looking something like this.

Step 4

Using the text tool add a title to your box.

Step 5

Next up we are going to be adding a little divider under our poll’s title – sort of like an advanced underline. So create a rectangle 280 by 8 pixels using the Rectangular Marquee Tool.

We are now going to be filling this selection with a gradient. Set your foreground colour to #181618. This time select the gradient tool and bring up the Gradient Editor window (click on the gradient rectangle in the top left of photoshop). Select Foreground to Transparent. Now left click at the top of the selection and drag to the bottom and release.

Select the Eraser tool and with a soft brush (about 100 pixels in size), erase a bit of the left of the divider.

Step 6

Add in some poll options using the text tool.

Step 7

Next up we are going to be adding the poll result bars (the percentages of votes etc). Make a selection of 150 by 20 pixels to the right of the first poll option using the Rectangular Marquee Tool.

This time we are going to be using a reflected gradient to fill our selection. Set your foreground colour to #18527a and your background colour to #0b3667. Select the gradient tool and set it to reflected gradient. Left click in the middle of the selection and drag to a side then release. Deselect (Ctrl + D).

Step 8

Now we are going to be adding a couple of layer styles to our bar.

Layer > Layer Style > Gradient Overlay

Layer > Layer Style > Stroke

Step 9

Duplicate the bar (Ctrl + J). Move it down 40 pixels (Ctrl + Shift + Down Arrow Key x4). Go Edit > Transform > Scale and bring in the right side a bit so it is shorter.

Repeat two more times.

Step 10

Lastly we are going to be adding a vote button so make a rounded selection of 100 by 30 pixels with a radius of 10 pixels using the Rounded Rectangle Tool.

Fill the selection with the same gradient as we did for the bars and apply the same layer styles too.

Add some text for the button.

Now you’re finished!

Step 1

To get us started create a new document and then we need to have a background so select the gradient tool. Set the style to radial gradient, set the foreground colour to #b3a773 and the background colour to #877948. Fill the background with a gradient from the center outwards (left click in the middle and drag to a corner and release).

Step 2

Our second task is to make a header for the navigation box. Using the rounded rectangle tool make a rounded selection (radius set at 10 pixels) 220 by 50 pixels.

Select the gradient tool again (set it to linear) and set your foreground colour to #202020 and your background colour to #2f2f2f. Left click on the left side of the selection, drag to the right side and release.

Step 3

We are now going to be adding a shine effect to this layer. So go Layer > Layer Styles > Gradient Overlay and use the following settings (click the gradient icon to go to the second window).

Now your header should have a shine effect to it.

Step 4

Now we are going to be adding a stroke to our header. Go Layer > Layer Styles > Stroke.

Step 5

Next up is some added diagonal lines. We are going to do this by creating a new layer (Layer > New > Layer) and making a selection of 15 by 100 pixels using the rectangular marquee tool.

Fill (Edit > Fill) the selection with white (#ffffff).

Step 6

Duplicate your line and move it 20 pixels to the right (Ctrl + Shift + Right Arrow x2).

Do this again so you have three lines in total.

Merge the three line layers.

Step 7

Now we are going to tilt the lines so go Edit > Transform and rotate it a bit.

Hit enter to set the transformation.

Step 8

Select the area of your header background (Ctrl + Click layer icon).

Invert the selection (Ctrl + Shift + I).

Hit delete and deselect (Ctrl + D).

Step 9

Lower the opacity of the layer to 5%.

Step 10

Add some text in your header.

I’ve also added a little icon that I’ve made a tutorial on (addFreak Logo).

Step 11

Now that we’ve finished the header, we can begin on the main section where the links will go. Start with making a rounded selection like we did for the header except it’s going to be 250 pixels high.

Fill this area with the colour #2f2f2f and deselect (Ctrl + D).

Move this layer below the header so we can see the header

Remove the overlapping bits of the lines on the header border to tidy it up a bit.

Step 12

Now we are going to be applying some layer styles to this new layer.

Layer > Layer Styles > Outer Glow

Layer > Layer Styles > Inner Glow

Layer > Layer Styles > Stroke

Now your box should be looking more like a navigation box now

Step 13

Next up we are going to be adding the text.

Step 14

We are now going to be doing the dividers – the bits between each link. On a new line make a selection of 200 by 1 pixel using the rectangular marquee tool between the first two links.

Fill (Edit > Fill) the selection with the colour #292929.

Step 15

Now using the pencil tool (with the foreground colour set to white) make a little rectangle 8 by 3 pixels in the middle of the divider. Zoom in to do this accurately

Step 16

Apply an outer glow to this bit by going Layer > Layer Styles > Outer Glow

Step 17

Duplicate the two layers so you have one between each link and you are finished at last!

Step 1

First of all we want to create a new document (File > New) and make it something like 540 by 440 pixels in size. Fill the background with a radial gradient from a lightish grey (I’ve used #343435) at the top left to a darker grey (and #222222) in the bottom right.

Step 2

Create a new layer (Layer > New > Layer). Select the rounded rectangle tool and make a selection of 300 by 300 pixels with a radius of 10 pixels.

Step 3

Fill the selection with another radial gradient from #007ccb at the top left to #004877 at the bottom right of the selection. Deselect (Ctrl + D).

Step 4

Now we are going to be adding a drop shadow to our navigation box by going Layer > Layer Style > Drop Shadow and applying the below settings.

Now your box should be looking like this.

Step 5

And we are going to be adding a gradient overlay to the box as well now. So go Layer > Layer Style > Gradient Overlay and apply these settings – click on the image on the right of “Gradient:” to get the top window.

Your navigation box should be looking pretty good now

Step 6

Add a title for the navigation box.

The font details I’ve used are…

Step 7

Now we are going to be adding some dividers etc to go between the text links that we will be adding. Using the rectangular marquee tool make a fixed sized selection of 260 by 1 pixel below the box title. Fill with #ffffff (white).

Step 8

Set the blend mode of that divider to Overlay and decrease the opacity of the layer to 20%.

Step 9

Duplicate the divider (Ctrl + J) and then move it down 30 pixels (Ctrl + Shift + Down Arrow three times). The Ctrl + Arrow moves the layer in the direction of the arrow by one pixel, and adding the shift key moves it 10 pixels. Repeat this process until you have enough dividers for your links.

Step 10

Now we are going to be adding the text links.

Pay close attention to the line height setting – this will set the line height (of course) to 30 pixels which is the distance between our dividers

Step 11

And we need a hover effect because otherwise it’d be boring when we hover our mouse over it (this is only when you have coded it! Please don’t ask why it doesnt work while in Photoshop or how to code it – this is a design blog ).

On a new layer make a selection of 260 by 30 pixels over one of the text links – so it sits nicely between the dividers.

Fill (Edit > Fill) the selection with #ffffff (white). Deselect – we don’t need it selected now.

Set the blend mode to Soft Light and the opacity to 20%. Or play around with the settings until you get a nice effect you like.

Step 1

Open a new document; apply a Radial Gradient on the first layer. I have used two dark red colours for this tutorial. Create a new layer. Select the Rounded Rectangle Tool and make a selection in the center of the document. Fill it with #FFFFFF (white).

Step 2

Now we will apply blending options to the second layer, i.e. the layer with the white box. Apply Satin and a Stroke with the values shown in the following figures. Experiment with other blending options if you like to make your design stand out.

Satin:

Stroke:

This is what the navigation box looks like at this point.

Step 3

Add some text links. I have used Futura Md for the “Navigation” text and Futura Lt for all the other links.

Step 4

Now we will create the rollover effect. On a new layer, make a selection around one of the links. Fill this selection with a dark red colour of your choice.

Add a Layer Mask. (The layer mask/vector mask button can be found at the bottom of the Layers window to the right of the blending options button). Select the Soft Mechanical 100px brush. Set the foreground colour to black, and brush the outsides of the box, so that this layer appears to merge with the main box. If you think you have brushed it too far, simply set the foreground colour to white and rebrush the areas. This will restore the original layer. Set the Layer Opacity to 14%.

Step 5

Now we will add a shadow at the top of the box. Create a new layer- call it “shadow”. Select the original layer with the white box, (the layer created in Step 1). Now select the “shadow layer” and apply a gradient from black to colourless. Reduce opacity to 45%. You can delete the majority of the bottom half it you like. The gradient should look something like this:

Apply a layer mask (as in step 4) so that the bottom of the “shadow” layer merges with the rest of the navigation box.

Step 6

Finally, we will make a glassy effect on top, again using simple techniques. Create a new layer called “glass”. Select the Pen tool and make a selection that resembles the one in the figure:

Now select the Convert Point tool and modify the figure to get this:

Right click > Make selection. Fill the selection with #FFFFFF. Change the layer mode to Soft Light with 60% opacity. Delete the part of the selection that is outside the box borders. (Select the layer from Step 1, use the Magic Wand tool to pick the area outside the navigation box, reselect the “glass” layer and hit delete)

Step 1

We are going to start off by making a background for our navigation. Using the Radient Gradient Tool make a gradient using #6b0100 and #3f0000. To do this you set the foreground and background colours to the ones we want our gradient to have, and then select the Radial Gradient Tool. Now left click somewhere at the top right and drag to the bottom right of the document and release.

Step 2

Now on a new layer make a white box at the bottom (dimensions are 540 by 20 pixels) using the Rectangular Marquee Tool to make the selection and going Edit > Fill to fill the selection.

Step 3

Next we are going to be making the active link background. Create a new layer and select the Rounded Rectangle Tool and make a selection of 100 by 50 pixels with a radius of 5 pixels, and fill this selection with white.

Step 4

Now we are going to be making the other link backgrounds. On a new layer make three more selections of 100 by 50 pixels using the Rounded Rectangle Tool. Fill the selections with a Linear Gradient from #9c0303 at the top to #750202 at the bottom.

Step 5

We are now going to be adding a Gradient Overlay layer style to this layer so go Layer > Layer Style > Gradient Overlay.

Your navigation should be looking something like below now

Step 6

Move your first white layer above all of the other layers.

Step 7

Our last step is to add the text. The font type that I have used here is Tahoma, Bold and Regular, 14 pt, None, #3f0000 and #ffffff.