Design a custom RSS feed icon

Adobe Photoshop Tutorials :

Category: Adobe Photoshop Tutorials
Added: 04/15/2007
Views: 71,682

Custom RSS Feed Buttons

Custom RSS 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, Zoom Tool (Z), 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, Rounded Rectangle Tool (U), 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:

RSS Button Shape

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.

RSS Inner Glow

Gradient Overlay : Solidifies the button and provides main colors.

RSS Gradient Overlay Settings

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

RSS Gradient Settings

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

RSS Stoke

Click OK and here is what we have so far:

RSS Button Shape

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

Shiny RSS

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

Transform RSS

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, Rectangular Marquee (M), and select the bottom half of the white rasterized layer.

Select Bottom Half

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

Reduce Opacity

Budda Bing!, there is the shine effect:

RSS with Shine

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

Flash Den

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, Custom Shape Tool, and select the symbol from the custom shape list:

Creative RSS Symbol

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.

Creative RSS Symbol 2

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

Flip the Shape

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

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.

Circle in Shape

Rasterize the layer
Layer > Rasterize > Shape

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

Finish RSS Symbol

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

Finish RSS Symbol

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.

RSS 3D

Gradient Overlay : Final Touch

RSS Gradient Overlay Settings

Gradient Settings

RSS Gradient Settings

Finally, the custom RSS button is finished:

Custom RSS Button

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.

Like My Work?

I am a professional freelance web developer & graphic designer. These tutorials are a small sample of what I'm capable of. Check out my client portfolio and feel free to contact me. Whether it's a full blown database driven web application or simply a flashy banner design, hire a professional.

Project Sample

Web Development : Land Trust Web Development Androscoggin Land Trust Website

Land Trust Web Development
Land conservation in Maine

Web Development : Video Subscription Site Daily Almanac

Video Subscription Site
Classroom Fitness Series

Web Development : Online Booking Agent Aid Tour Management System

Online Booking Agent Aid
Manage National Actor Tours

Testimonials

"Working with Max was easy and fun. He understood the feel and look I wanted my site to have. Max is easy to communicate with and very available, always returning emails and answering all of my questions promptly. He also had great suggestions when I had questions about website and business etiquette. In addition to his programming abilities, Max has a great way with people. He has set me up to manage my website easily. I am left feeling confident and proud of my new site."

- Megan Jean Morris, Professional Fine Artist, Farmington, Maine
View More Testimonials

More Tutorials!