Subscribe

RSS Feed | RSS Email | Twitter
 

Sponsors

 

Search / Categories

 

Create a Metallic RSS Feed Button in Photoshop

Posted on April 11th, 2009 by Zen Elements 7 Comments

Metal RSS Button, Photoshop Tutorial

Create a sharp Metallic RSS Button for your blog in this Photoshop tutorial, inspired ever so slightly by the Mac Pro’s power button. Final source files included.

 

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.

Metal RSS Button, Photoshop Tutorial

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

Metal RSS Button, Photoshop Tutorial

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

Metal RSS Button, Photoshop Tutorial

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.

Metal RSS Button, Photoshop Tutorial

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.

Metal RSS Button, Photoshop Tutorial

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:-

Metal RSS Button, Photoshop Tutorial

Step 5 – Metal texture

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

Metal RSS Button, Photoshop Tutorial

Metal RSS Button, Photoshop Tutorial

Metal RSS Button, Photoshop Tutorial

(The gradient used here is quite complex however you can see it in more detail by downloading the source .psd which has been included in this tutorial.)

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:-

Metal RSS Button, Photoshop Tutorial

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…).

Metal RSS Button, Photoshop Tutorial

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%.

Metal RSS Button, Photoshop Tutorial

 

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.

Metal RSS Button, Photoshop Tutorial

 

I hope you got something out this and thank you for reading!

Alex | Zen Elements


 
RSS
Facebook
StumbleUpon

Comments (7)

MONSTERtutsApril 12th, 2009 at 5:23 am

great tutorial, hope to see more like this.

JimmyApril 13th, 2009 at 11:13 pm

Very Nice work

RejisApril 21st, 2009 at 5:21 am

Nice Tut

retoque fotograficoMay 3rd, 2009 at 9:57 am

Mucho gracias! Una retoque fotografico muy divertida!

Zen ElementsMay 3rd, 2009 at 11:11 am

Thank you for the comments everyone! I’m glad you enjoyed this tutorial and thank you to those who took some time to share it with friends & followers :)

flyerMay 6th, 2009 at 8:08 pm

it is a great way of explaining the task

Nand0_September 6th, 2009 at 6:33 pm

great… tnx 4 allthings :D

Leave a comment

Your comment

top
  • Zen Elements on Facebook
  • Zen Elements on Flickr
  • Zen Elements on Twitter
  • Zen Elements RSS Feed

© Zen Elements Ltd. 2008. All Rights Reserved. Sitemap | CSS | XHTML | Terms & Conditions