First of all you’ll need to create a new Photoshop document – the size I’ve chosen is 600 by 420 pixels just like all my other tutorials – but the button will be considerably smaller ;) With that open, fill it in with a dark radial gradient (I’ve used the colours #131313 and #090909).

Step 2

It seems to be quite popular to add noise to backgrounds so I’ll just quickly teach you how to achieve that effect: with your background layer selected go Filter > Noise > Add Noise with Amount 0.5%, Distribution Uniform and Monocrhomatic ticked. It isn’t too noticeable on this dark gradual gradient but with lighter colours, and more distinct gradients, it would be more visible.

Step 3

Now it’s time to form the button: create a new layer and using the rounded rectangle tool (radius set to 5 pixels, width: 250 pixels and height: 40 pixels) create a rectangle in the center of the document. Any colour will do (I’ve used white so that it is easier to see).

Step 4

Next, we’re going to be applying a gradient overlay to our button using layer styles. Go Layer > Layer Styles > Gradient Overlay and apply these settings:

This gives it a nice shiny look with a result of:

Step 5

The next step is to add the text for the button which can be done using the text tool.

Step 6

The next section of the button is the little icon beside the text: I’ve used a slightly different font style for the down arrow to make sure it is clearly defined. If you didn’t know how to make a double arrow simply hold down the Alt key and type in the numbers 1, 7 then 5 – it’s just an ascii symbol short key – and then rotate using transform (Edit > Transform > Rotate or Ctrl + T).

Step 7

Now we’ll just make the background for the down arrow icon: using that rounded rectangle tool we used before, make an 11 by 11 pixels square with a radius of 2 pixels. Again it doesn’t matter what colour yet, we’ll be changing that very shortly.

Step 8

Apply this gradient overlay to our new layer in the same way we did with the button.

Result:

Step 9

The button isn’t standing out very much, so to fix that we’ll add a highlight underneath. To do this select the button layer’s area (ie Ctrl + Click the button’s icon in the layers window) – we do this because we want to have the same curvature of the button without too much effort.

Fill the selection with a reflected gradient with your foreground colour set to #95c622 and background #486e10. To do this: left click in the center of the selection and drag to one of the sides and release (ie it will reflect from where you start the gradient). Keep the selection (as I have).

We only want the highlight to be a couple of pixels high (ie: a highlight) so nudge the selection up two pixels by tapping the up arrow key (on your keyboard). You can now deselect your selection (Ctrl + D). Now we want to move the highlight below the button so nudge the layer down two pixels by tapping the down key while holding the Ctrl key.

Step 10

So that’s the button complete, to add a hover effect in Photoshop simply means that when your mouse is hovered above the button it changes slightly so that it is obvious that the user can click it. Create a new layer above the base button layer (the shiny gradient layer) and select the area of the button and apply a radial gradient from white (top) to transparent (bottom) in the selection.

To tone down the brightness set the blend mode of this layer to overlay and the opacity to 50%.

If you’d like to follow on with the coding of this button and create the rollover effect in CSS continue this tutorial here.

Related posts:

1. Classic Shiny Button
2. Sleek Dark Navigation
3. Simple Professional Logo

So firstly we are going to want to create a new document to create our button in. Go File > New and I’ve selected a size of 600 by 420 pixels to give us plenty of space. Also note that the resolution is set to 72 pixels/inch – this is the default for web designs.

Step 2

Now that we have our document, we want to have a dark background for our soon-to-come button. The easiest way to achieve this is to go Edit > Fill, using the colour #1a1a1a. Another method is to set your background colour to #1a1a1a and use the shortcut Ctrl + Backspace to fill the background with the background colour.

Step 3

The next task is to create the base of the button – the general shape of it. We’re going to be using the rounded rectangle tool for this, so select it and set it to a fixed size of 500 by 75 pixels and raidus 10 pixels.

Step 4

Click somewhere in your document and this will insert the rectangle. We want this rectangle to be centered in our document, so select the move tool (shortcut V), select the entire layer (shortcut Ctrl + A) and using the icons at the top, center the layer. The colour of your rectangle might be black or white, we’ll sort that up in the next step – but the position should be like below.

Step 5

Now we’ll be adding a coloured gradient overlay to our button so it doesn’t look so… black or white. Right click the layer in the layer’s window and go blending options and go down to the gradient overlay style. To bring up the second window, you can click on the gradient, and then add the colours below.

Result;

Step 6

The next section of the tutorial is going to be focusing on how to create shadow layers to give the button some depth. On a new layer below the button select the brush tool with a soft brush about 65 pixels and 25% opacity. This first shadow is just going to run across from the bottom left to the bottom right of the button – so that you can see the bottom half of the brush.

Step 7

On another layer use the soft brush on a lower pixel setting – about 30 – and with an opacity of 40%, go over the original shadow. This is building up the shadow gradually to give more of a depth feel to the button. If you want you could add some more shadows and lighter sections around the button, but I won’t go into that for this tutorial.

Step 8

Now with in keeping with the theme of making the button as realistic as possible, we’ll be adding some shines and subtle gradients to the button. The first one involves us making a new layer above the button and adding a shine to the top half. To do this select the area of the button (shortcut Ctrl + Click the layer’s icon in the layers window), and using the rectangular marquee tool deselect (just like selecting except holding down the Alt key) the bottom half of the button.

Step 9

Select the gradient tool and with it set to white to transparent, fill the selection – start about four fifths of the way down and drag to the edge, this means it will fade out over the last fifth of the selection.

Step 10

Set the blend mode to Overlay and the opacity to 27%.

Step 11

We’re now going to be applying another shine layer to define the middle subtly. Using the technique in step 8, select the top half of the button and then fill with white (just like at the start of the tutorial, go Edit > Fill).

Step 12

Set the blend mode to Soft Light and the opacity to 17% for this new shine layer.

Step 13

Now we’ll be adding one last highlight to the button. On a new layer, select the area of the button and go Select > Modify > Contract by 1 pixel, and then Select > Modify > Border with a width of 1 pixel. This has made a one pixel border around the button, one pixel inside. Fill this selection with a gradient from white to transparent so you’re left with something similiar as to below.

Step 14

To make the highlight a little more realistic, set the blend mode to Overlay and opacity to 70%.

Step 15

The last step is to add some text to the button – so pull out the text tool and chuck some text in, remember to center the text just like we did the button at the start. The font I’ve used here is Myriad Pro, 30pt and the colour #543823.

Colours

If you don’t like orange, or want a different colour, you can easily change the gradient overlay on the button and the text colour.

Related posts:

1. Sleek Dark Button
2. Christmas Ball Decoration
3. Simple Professional Logo

Firstly, we are going to be creating a new document. Go File > New and use the settings below and hit enter. You should end up with a new document with light grey and white squares in the background.

Step 2

We are going to be filling our background with a radial gradient. Select the gradient tool from the tools window and set it to radial (at the top). Set your foreground colour to #2f373f and background to #282c30. Left click in the top left quarter and drag to the bottom right and release.

Step 3

Thirdly, we are going to be adding the text of the logo. Select the text tool and click in the middle of the document (this creates a new text layer for you) and type out the name of your site. The font I have used is ‘Gauntlet Thin‘ (white) & ‘Gauntlet Classic‘ (bold and the colour is #ff6d06). This text effect is just a simple two tone effect but looks clear and professional.

Step 4

Now we are going to be adding a subtle gradient underneath the text. Create a new layer (Layer > New > Layer) and make a selection like this using the rectangular marquee tool. Move this new layer beneath the text layer so it does not overlap.

Step 5

Select the gradient tool and set it to linear this time. Set the foreground colour to #38404a and set the gradient to ‘foreground to transparent’ – this is a default preset. Fill the selection from top to bottom with this gradient so you have something like this.

Step 6

Using a large soft brush (200 pixels) erase the left and ride sides of the gradient.

Step 7

On a new layer make a selection one pixel down from the top of the gradient we just made using the single row marquee tool. This tool makes a selection one pixel high, and the width of the document.

Step 8

Fill this selection with the colour #475563. To fill a selection simply go Edit > Fill with colour.

Step 9

The highlight line is currently taking up the entire width of the document, and we only want it to be underneath the text so select the area of the gradient layer (Ctrl + Click the gradient layer’s icon). Invert selection (Select > Inverse) and remove (delete on the keyboard) – this deletes everything outside the gradient on the highlight layer. Make sure you have the highlight layer selected when you hit delete (because it will only remove everything in that selection on the layer selected).

Step 10

Next we are going to be adding a little talk shape. On a new layer select the custom shape tool and make sure it’s set to shape layers and the colour is white. Select the ‘talk 2′ shape and make a shape to the top right of the text.

Step 11

Lastly we are going to give the talk shape a bit of shading so on a new layer select the area of the talk shape (Ctrl + Click layer icon like before) and contract the selection by a couple of pixels (Select > Modify > Contract).

Step 12

Select the gradient tool and fill the selection with a black to white gradient from the bottom left corner (so the black side is there).

Step 13

Lower the opacity to 20% and you are finished!

Related posts:

1. Cloud Logo
2. Professional Tabbed Box
3. Classic Shiny Button

Firstly, we are going to be creating a new document. The dimensions I have used are 600 pixels wide and 420 pixels high. Fill in the background with a subtle radial gradient from #4d99ca to #2c7bb4.

Step 2

On a new layer use the ellipticial marquee tool to form a cloud shape. To add to a selection, hold down the shift key while selecting with a marquee tool.

Step 3

Fill your cloud selection with white. To fill a selection simply go Edit > Fill with the colour #ffffff. Line the cloud up in the center of the document if you want, but we’ll be duplicating it and such later on anyway.

Step 4

Now we are going to be adding some layer styles to our cloud. To adjust layer styles right click the layer and select blending options.

Result:

Step 5

Duplicate the cloud layer (Ctrl + J) and reduce the size of it (in proportion – so hold down the shift key). To transform the size of an object just go Edit > Transform > Scale or Ctrl + T. Move the clouds around until you have them in a position that you like the look of. Ensure that you have some space to stick the text to come though.

Step 6

Select the text tool and write the name of your site there. I’ve used one of the Vista fonts ‘Cambria’. I’ve also given the text a dark outer glow effect too.

Related posts:

1. Simple Professional Logo
2. Sleek Dark Button
3. Page Fold Effect