Design a Web 2.0 Style RSS Icon


For our first update in a while I thought I would run you all through a pretty straight forward way to make your own Web 2.0 style RSS icon. This method can make many other icons as well. Without further adew here is what the icon looks
like:

I started off with a 200X200px canvas because i’m going to make this icon large just so you can see all the detail of it.

Next start a new layer, get your rounded rectangle tool with a 10px radius and draw a rectangle in the middle of your canvas. Just leave it the default color black:

Now go to your blending options and use these settings:

Gradient Overlay:

Also in the gradient I have my black color pulled further toward the gray:

Stroke:

Inner Glow:

Outer Glow:

After that you should have something like this:

Now an easy way to make the RSS shape is to get your bulls eye from your custom shape tool:

Start a new layer and draw the bulls eye over your whole canvas:

Now get your square marquee tool to delete the parts we don’t need.

First delete the vertical half from the left of the bulls eye:

Then the horizontal half from the bottom up:

You should have something left that looks like this:

I moved mine into the middle of the button.

Oh man the RSS icon is supposed to have a circle under the other lines and we deleted it… Well all we have to do is erase it and just draw a circle there with our Elliptical Shape tool!

Ok just make a new layer and draw your circle.

I used rulers and guides to keep my circle proportional to the other parts but that is not necessary, eyeballing it is fine.

So now we have this:

Ok now just merge your circle layer with the other layer of the RSS symbol and use these blend options on the newly merged layer:

Gradient Overlay:

Moved the colors in the gradient:

Inner Glow:

Should have something similar to this:

Now lets add some web 2.0 styling to the rss icon. Just get your rounded rectangle shape or your elliptical marquee tool and fill it with the color white. Draw an oval over your rss icon in a new layer and set its opacity at 46%:

As you can see we have some excess we need to get rid of. Just zoom in and use your rectangle marquee tool and a hard eraser brush to delete the parts you don’t need.

Result:

I think that looks pretty good what about you? But it still needs more.

Now for some reflections to complete our Web 2.0 feel. First duplicate your rss symbol layer and merge that layer down so it is editable, rotate it 180 degrees and flip it horizontally.

In my version of photoshop I go to edit>> transform>> rotate 180 degrees and flip horizontal is also in the same place.

After that move it below the other rss symbol like this:

To make the reflection you can either add a layer mask to it or use a large soft eraser brush and erase the parts you don’t need. I am going go with the eraser brush at about 100px. Just erase from bottom up until you get your desired result:

Do the same thing to make a reflection for your button:

There are a few more things you can add to this button and make it even better, but since this tutorial is getting kind of lengthy I am going to add one last touch.

Make one more new layer above all the rest, grab your brush tool with the color white, use about 100px soft brush and click on the top right corner of your button to give it a bit of shine.

Result:

Thank you for reading my tutorial, I hope it was helpful! Any comments or suggestions let me know and I will try my best to clarify anything. Thanks!

Leave a comment