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

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 up create a new document – I’ve made sure that I have lots of room to work with so I chose 540 by 440 as my size.

Fill the background with a dark gradient or just a solid colour (Edit > Fill and use a colour like #262626) if you don’t know how.

Step 2

Create a new layer (Layer > New > Layer). Select the rounded rectangle tool and use the settings below.

Left click somewhere in the middle of your document.

Right click and left click “make selection”.

Now you should have a selection like this:

Step 3

Next up we are going to be filling our selection with a gradient. Select the gradient tool anduse these settings. You can get the green gradient by clicking that area and changing the left colour to #7ebe3e and the right to #a8da77 or by setting your foreground colour to #7ebe3e and your background colour to #a8da77 whatever suits you

Left click in the middle of the selection and drag to the bottom while holding the shift key (which keeps it straight) and release. Now you can deselect your selection (Ctrl + D).

Step 4

Now we are going to be adding an outside stroke to our button. The easiest way to do this is to go Layer > Layer Style > Stroke.

Step 5

On a new layer (Layer > New > Layer) make a selection of 3 by 40 pixels in the position shown below. The easiest way to do this is to select the rectangular marquee tool and use the fixed size setting with width set to 3 pixels and the height set to 40 pixels.

Fill (Edit > Fill) with white (#ffffff). And deselect (Ctrl + D if you’ve forgotten already). And with any luck your button should now be looking like this…

Step 6

Add a double arrow “»” (copy and paste it if you want) on a new text layer.

Step 7

Go Layer > Layer Style > Drop Shadow.

This should make it a little easier to read and stand out from the background a little bit – some depth.

Step 8

Add some text for your button like your website’s name or something like “Home” if it is going to be a link to the home page and you are complete.

Here is an orange version of the button. You can change the colour of the button by adding a different coloured gradient to the base layer (the first layer we created).

Step 1

Like usual we are going to start off with filling the background with a radial gradient from a light grey to a darker grey. Light grey: #3e3d3d. Dark grey: #151515.

Step 2

Create a new layer (Layer > New > Layer) and using the rounded rectangle tool make a fixed shape of 300 by 50 pixels in the middle of the document.

Right click the shape and click make selection.

Select the gradient tool and set the style to reflected gradient. Set the foreground colour to #1c3f47 and the background colour to #2a6976. Left click in the middle of the selection and drag to the bottom of the selection and release. This will provide us with the base of the button.

Step 3

Now we are going to be adding some layer styles to our button to make it vista styled.

Layer > Layer Styles > Outer Glow

Layer > Layer Styles > Inner Glow

Layer > Layer Styles > Gradient Overlay

Now your button should be looking like this.

Step 4

Now we are going to be adding a reflection to our button. On a new layer select the area of your base layer (ctrl + click layer) and fill the selection with white (#ffffff).

With the rectangular marquee tool selected move it down below the button.

Go Edit > Transform > Perspective and drag the bottom right box towards the right while holding down the shift key (this pulls the other side out too so it keeps it even).

Add a layer mask and add a gradient from white to black within the reflection – this will fade it out.

Set the blend mode of the layer to Soft Light and lower the opacity to 15%.

Step 5

Last of all we are going to be adding some text. Choose a nice crisp and clean font for this.

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

First up we are going to be creating a new document (the size that I have chosen is 500 by 200 pixels).

Select the gradient tool and select the radial gradient style. Now fill the document with a gradient from the left to the right (start about 100 pixels or so inwards from the left and half way down from the top). The lighter colour on the left is #1c1c1c and the darker colour on the right is #080808.

Step 2

Using the rectangular marquee tool make a fixed sized selection of 100 by 100 pixels on the left like so.

Step 3

On a new layer (Layer > New > Layer) fill the selection with a radial gradient from the top left (colour is #69a01e) to the bottom right (colour is #93d43b).

Step 4

Select the rectangular marquee tool again and make a fixed size selection of 30 by 30 pixels and make the selection in the top left corner of the green box.

Hit delete and this will delete whatever was in the selection.

Step 5

Repeat step four for the remaining 3 corners.

Step 6

Now we are going to be adding a stroke to the shape by going Layer > Layer Style > Stroke. The colour I have used there is #5b8e19.

Now your logo should be looking like this.

Step 7

Next up we are going to be adding a shine to our shape. Select the area of your shape (ctrl + click layer in the layers window).

Go Select > Modify > Contract by 2 pixels. This will achieve a double border effect. One with the stroke and one with having a space between the shine and the border.

Step 8

Using the radial gradient tool again make a gradient from top left (white) to bottom right (transparent).

Lower the opacity of the shine layer to 50%.

Step 9

Now we just need to add some text and we are complete. Here I have chosen a … different … font called Aubrey. The colours that I have used are #adadad and #ffffff.

I have also added a drop shadow to this text (Layer > Layer Style > Drop Shadow) – there colour is #2b2b2b.

Here is what it should be looking like now.

Step 10

Add some small text (the colour that I have used is #4c4c4c)…

…and you are complete!

Step 1

Create a new document (File > New) 100 by 100 pixels and fill the background (Edit > Fill) with white.

Step 2

Make a new layer (Layer > New > Layer) and select the Elliptical Marquee Tool. Make a fixed sized selection of 75 by 75 pixels in the middle of the document and fill it with a linear gradient from #68ac00 to #036800.

Step 3

Now we are going to be applying some layer styles to the icon.

Layer > Layer Style > Outer Glow

Layer > Layer Style > Gradient Overlay

Layer > Layer Style > Stroke

Your icon should now be looking something like

Step 4

Next up we are going to be adding a shine layer so create a new layer and select the area of your icon. You can do this by going Ctrl + Click on the icon layer.

Go Select > Modify > Contract by 2 pixels.

Now select the Elliptical Marquee Tool (set the style to normal) and while holding down the Alt key subtract the bottom half of the selection like so…

…and release.

Step 5

Create a new layer if you have not already and select the gradient tool. Set your foreground colour to white and apply a gradient from white to transparent in your selection (go into the gradient editor by clicking on the gradient bar at the top left of the photoshop window and select foreground to transparent).

Now left click at the top just above the selection and drag down to just under the bottom of the selection like below. What this will do is not make it 100% white at the top of the selection to 0% at the bottom, it will be more gradual which is what we want.

With any luck your icon should be looking pretty shiny now

Step 6

Now we are just going to be putting whatever we want on the top for the button’s purpose.. it could be an arrow or whatever so I have just chucked one of the default photoshop arrows in using the custom shape tool

Fill (remember from the start? Edit > Fill ) the selection with white.

Step 7

Add an outer glow to your arrow by going Layer > Layer Style > Outer Glow.

And you’re finished!