The most versatile section of the Photoshop tutorials, it includes guidelines on drawing and editing of different objects in Photoshop.  Home Photoshop Drawing Techniques Create a Metallic RSS Feed Button in Photoshop

Create a Metallic RSS Feed Button in Photoshop


Step 1 - The inevitable "New Document"

Open Photoshop and create a New Document.

For the purpose of this tutorial, we have a document 630 pixels wide by 300 pixels high but as your button will likely be cut away from this eventually, just give yourself enough space to work.

Step 2 - Button base

The metallic RSS button is going to be round, so using the Ellipse Tool (U) with a medium to dark grey - I've gone with #454545 - draw your circle.

Create a Metallic RSS Feed Button in Photoshop image 1

Next go to the Layer Styles (double clicking the layer) and check Gradient, applying the following settings.

Create a Metallic RSS Feed Button in Photoshop image 2

Finally, merge this with a blank layer so that we have a flattened image.

Create a Metallic RSS Feed Button in Photoshop image 3

Step 3 - RSS Icon

Create a new layer and select the Custom Shape Tool (U), with the custom shape "Bull's Eye". Using a Chroma Keyer colour and draw a Bull's Eye over your button base, 5 - 10 pixels past the edge.

Now use the Rectangular Marquee Tool (M) to select and cut away the left side and lower half of the Bull's Eye, also removing the remaining quarter of the centre circle.

Create a Metallic RSS Feed Button in Photoshop image 4

Use the elliptical Marquee Tool (M) to draw in your own full circle, aligned to the left and lower area of the outer rings then drop it down into place, aligning it with the button base.

Create a Metallic RSS Feed Button in Photoshop image 5

Step 4 - Metal die cut

Duplicate the button base layer, Ctrl + Click the RSS icon layer and press delete.

You can now remove the RSS Icon layer and make the base button layer hidden to see what you've created. You should have a RSS Button that looks like this:-

Create a Metallic RSS Feed Button in Photoshop image 6

Step 5 - Metal texture

To create the metal texture, apply the following Layer Styles to the metal die cut:-

Create a Metallic RSS Feed Button in Photoshop image 7

Create a Metallic RSS Feed Button in Photoshop image 8

Create a Metallic RSS Feed Button in Photoshop image 9

Apply a Clipping Mask to the two layers (Layer > Create Clipping Mask) and you should now have a Metal RSS Button looking a little like this:-

Create a Metallic RSS Feed Button in Photoshop image 10

Step 6 - Brushed metal

Again duplicate the button base layer and bring it above everything.

Apply a Noise Filter of around 125%, Gaussian and Monochromatic (Filter > Noise > Add Noise).

Create a Metallic RSS Feed Button in Photoshop image 11

Ctrl + Click the layer so we have a selection and apply a Radial Spin (Filter > Blur > Radial Blur > Spin / 100 / Good.)

Set the layers Blending Mode to Multply and bring the opacity down to around 15%.

Create a Metallic RSS Feed Button in Photoshop image 12

Step 7 - Some shine

Finally, add a little shine by duplicating the button base layer, raising the lightness to 100% so that it is a solid white and place it above everything. Use the Elliptical Marquee Tool (U) to select around a two thirds area and press delete.

Set the Layer Blending Mode to Overlay and drop the opacity down to around 60%.

Add a vector mask and using a soft edge brush of around 25%, gentle brush the top edge away to give a more gentle shine.

Create a Metallic RSS Feed Button in Photoshop Tutorial: Final Result



Author's URL: Zen Elements
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Create a Metallic RSS Feed Button in Photoshop"

Only registered users can write comment

No comments yet...