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.

image 1

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

image 2

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

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.

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.

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

image 6

Step 5 - Metal texture

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

image 7

image 8

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

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

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

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



Author's URL: Zen Elements
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
The most versatile section of the Photoshop tutorials, it includes guidelines on drawing and editing of different objects in Photoshop. More Drawing Techniques Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Reader's comments
comments DH February 01, 2011 says:
This was awesome! Easy to follow and looks wonderful!
Reply
Add comments to "Create a Metallic RSS Feed Button in Photoshop"

Captcha