Custom RSS Feed Buttons

Tutorial Goal

Design a custom RSS feed button using Adobe Photoshop. The technique allows for easy color changes so that the RSS button will match your site or application style. Here are a few RSS icon variations on orange, blue, green, and red buttons against black and white backgrounds:

Step 1 : Document Setup

Open Adobe Photoshop and Create a new Image:
Size: 25 x 25px
Background Color: White

Select the Zoom Tool, , and zoom in to 800% so we can work with the little bugger.

Step 2 : Create the button background.

First we will make the main part of the button, its colored background.

Select the Rounded Rectangle Tool, , and set the Radius to 5px in its tool bar.

Now click in the very upper left hand corner and drag down to the very lower right hand corner to make the shape below:

Now open the Layer Blending Options:
Right click the layer and select "Blending Options" or
Layer > Layer Style > Blending Options...

Apply the following settings:

Inner Glow : Helps the 3D effect and softens edges.

Gradient Overlay : Solidifies the button and provides main colors.

Gradient Settings : More traditional RSS colors are below, change to suit your tastes.

Stroke : Defines the outer edge and makes the button sharp.

Click OK and here is what we have so far:

Step 4 : Make that RSS button shine!

Now we will make a high gloss effect over the button. The idea is simple, we want the top half of the button to appear to reflect light. In other words, we want it to be lighter than the bottom half.

Duplicate the button layer and name it 'Shine'
Layer > Duplicate Layer...

Next remove the blending options from the new layer.
Layer > Layer Style > Clear Layer Style
It should be plain white.

Then select Edit > Free Transform and reduce the Width and Height percentage to 90%.

We did this to make the button appear more 3D. Without that 1 pixel border unaffected by the shine the button would appear flat. (not much of a button)

Now Rasterize the layer
Layer > Rasterize > Shape

Select the Rectangular Marquee Tool, , and select the bottom half of the white rasterized layer.

Press Delete and then reduce the layer Opacity to 30%.

Budda Bing!, there is the shine effect:

When we zoom back out, it looks 8 times better. yes.. 8, we are working at 800%. ;)

Step 5 : Slap a RSS Logo on it.

We have a shiny button... but it has no purpose. Let us give it one. Really at this point you could make this button into ANYTHING! maybe even leave it blank and let the user wonder what that little, blank, shiny button is doing on your site. Alright, this button will be for Really Simple Syndication. RSS.

Here is a creative way to make the RSS symbol:

Select the Custom Shape Tool, , and select the © symbol from the custom shape list:

Click and drag the shape onto the Stage. Use the circled points below as a reference for its size and location. To align the shape, while drawing it hold down the space bar.

Bare with me, flip the shape.
Edit > Transform Path > Flip Horizontal

Select the Ellipse Tool,, and change its tool property to "Add to shape area (+)".

Draw a circle in the center of the © symbol. Again, while dragging the shape, you can adjust it's position by holding down the space bar.

Rasterize the layer
Layer > Rasterize > Shape

Select the Retangular Marquee Tool, , and select and delete the bottom and left side of the outer rings.

Drag the Layer under the "shine" layer or:
Layer > Arrange > Send Backward

Open the Layer Blending Options:
Right click the layer and select "Blending Options" or
Layer > Layer Style > Blending Options...

Apply the following settings:

Drop Shadow : Helps the 3D effect.

Gradient Overlay : Final Touch

Gradient Settings

Finally, the custom RSS button is finished:

Concluding Statements

Hope the tutorial was easy to follow and you now have a personalized RSS button. Check out some of my other tutorials to learn more or for fun look through my experiments.

Feel free to send Comments, Questions, and other inquires using the contact page. I hope that you enjoyed the "Design a custom RSS feed icon" tutorial. View more of my tutorials here.