photoshop

Archived Posts.

How a Digg button is made.

Posted by mccrory on 05 Oct 2006 | Tagged as: photoshop

This really is a no brainer folks…

The kind people at Digg have released a pack of buttons and badges you can download from digg.com/tools/buttons.

The digg-badges.zip file contains a ton of GIF and PNG graphics and one very nice Photoshop PSD file called badges.psd.

If you want to know how a Digg button is made just open up badges.psd in Photoshop.

The badges.psd is basically a sheet of graphics with the buttons divided into folders in the Layer Dialog Box.

Sheet of Digg Graphics

If you right click anywhere on the sheet you can select any of the specific buttons.

Just to show you how simply made these button are, right click and select the Large Button Option.

Look across to layers dialog box. You should see a folder called Large Button selected.

Click on the folder and it should open up 3 more layers inside.

 

Hide the text, and the nice little Digg man layers (click on the little eye) and all you should have left is a Digg button on a white background.

 

Click on the little arrow beside the layer style symbol and you should see the 3 layer styles have been used to create the button.

 

The button brakes down into 3 sections all represented by an individual layer style.

1. The Stroke Style – Used to place a 1px border on the rectangle
2. The Inner Shadow – Places a white edge on the border
3. The Gradient Overlay – The Buttons internal gradient.

So the cool Digg button is a plain white rectangular box, filled with white and 3 layer styles applied.

And thats it…

 

Try playing around with the different style settings and you can come up with some excellent variations.

Now to create your own button from scratch just match the settings from the styles above on a new canvas in a white rectangle.

Here’s 3 buttons made only by changing the color of the gradient style in the layer.

Bingo, you have your own instant Digg style button.

And thats only one of the graphics.

Enjoy…