At one point in your blog’s life, you’ll decide that you’ve outgrown the typical RSS button. This tutorial is for that time. There are tons of tutorials for Web 2.0 buttons and the like. This tutorial is here to combine Web 2.0 with some different concepts. I will show you how I made my own RSS feed button as well as some other examples. You can combine the button effects to make your own unique one because they are all very flexible and easy to edit.

The first is quite similar to traditional RSS buttons but it has a thick border that makes it look more like plastic. If you don’t want to deviate too far, this is for you.

Begin with a rounded corner rectangle. Hold shift to keep a perfect square shape.

Apply these Blending Options.

Note: The color you want your RSS button to be should be the Inner Shadow color.

Now right click on the layer and rasterize it.

Select all (Control-A) then press the arrow tool. Then with your keyboard move the selection up once and then down again. (This selects visible pixels on the layer.) Now go to Select > Modify > Contract. Apply a setting like the one below.

Now you’ll have something like this.

Make a new layer and fill the selection with the color you’re going to use. (Same color as Inner Shadow)

Note: Put this layer beneath the previous one.

Now apply these Blending Options to this layer.

Result should look like this.

Using the pen tool, draw a shape like the one below.

Apply these Blending Options to it.

Now duplicate it and stretch it down. (Do this twice)
Important: Make sure all these highlights are between the small rounded square and the large one. The large one should be on top and the small one should be below.

The result should look like this:

Making the RSS symbol: draw a circle (anywhere) and apply these Blending Options.

Note: You might have to use a smaller stroke width if your button is smaller than mine. If it looks the same size as mine onscreen, use stroke size 20px.

Duplicate this circle and move it/resize it until it resembles the curves in the RSS button.

Add a third circle to create the dot in the symbol.

Now select the two big circles, right click, and choose “Merge Layers”. Now with the select tool, select the side and bottom of the RSS button and press delete. The result should look like this.

The next one doesnt look all that special but it is an important mention since lots of blogs don’t use rounded corners and the RSS button simply looks out of place on them.

Start with a square.

Apply this drop shadow.

You can use the same technique as I used for the first RSS button, or you can draw it by hand with the pen tool (Much easier than it sounds),

Drawing it with the pen tool makes it look imperfect but still smooth. It gives it a characteristic so it still stands out to readers. Optional: Add a gradient to the base. You can see this in the final at the bottom.

My RSS button is a simple sticky note. I like this one because you can make it big and it won’t look overbearing. The first and second buttons so far are ideal for smaller use. If you like your RSS buttons fairly large, or the space you have reserved for one is big, this is the solution for you

Start with a tan colored square.

Transform it and then switch to Warp Mode. (Look at the right part of the top panel)

Warp it to look a little raised at the bottom.

Duplicate it and do the same thing, only less evident. This will be your shadow.

Using handwritten or script fonts, make the curves with parentheses (Resize and Rotate them). Make the dot with a period.

You can also add some text to the post it note.

This last one is very unconventional and quite rare. It is a star badge RSS button.

Start by making the star. Use these settings with the polygon tool.

Your star will look like this:

Note: I will be using hot pink, so wherever you see hot pink, use the color you want your RSS final button to be.

Apply these settings.

It should look like this

Now duplicate it. (Put it beneath the first star layer)
Apply these settings.

Add highlights just like in my first example. I don’t want to repeat the entire process again so just scroll up. I literally copy pasted the highlights from the first example and resized them a bit.
Important: Make sure all these highlights are between the shadow star and the filled star. The shadow one should be on top and the filled one should be below.

Also use the same technique from the first one to get the RSS symbol.

Optional: Make text like the one below on top of your button.

Set it’s Blend Mode to Color and Opacity to 40%.

You can see the final (and all the other ones) below. Enjoy!

Keywords: Adobe photoshop tutorial, Buttons, highlights, web 2.0 buttons, navigational buttons, button effects, submit buttons, RSS feed symbols.