Custom RSS Feed Icons

I'm going to show you two ways to make your Feed Icons custom. What you will need for this tutorial:

• Feed Icons Dev Kit
• Adobe Photoshop (of course)

Basic Customization

Unzip the Dev Kit and take a look inside, there are multiple sizes of the default orange and white rss feed icon as well as a folder full of grayscale versions. For this part of the tutorial go ahead and open one of the grayscale versions; I have opened the 128 x 128 pixel version (feed-icon-128x128.psd) in Photoshop.

To add some color to this icon and make it your own will take you literally one step. It's not flashy and is very simple, but it is customized to your liking and that's what counts.

Step 1 (and only one) - Add Some Color

Simply go to the layers palette and click on "Add Layer Style" and choose Color Overlay. Change your Blend Mode to "Color" and choose a color to your liking that is "web safe". Once you've got it click OK and you've just customized your RSS Feed Icon. Of course when you've finished be sure to "Save for Web" in the format of your choice.

As I stated this is very basic customization of the feed icon and doesn't use a much (if any) creativity. So, how do you make something completely unique similar to the GrandmasterB Feed Icon… lemme show ya.

Advanced Customization - glassy icon

The cool thing about these feed icons is that there are Illustrator versions included in the Dev Kit. I'm not going to dive into using the Illustrator files, but if you want to do some experimenting they are available. For this advanced version of the tutorial, I will use the supplied Photoshop file (link below) that has a few extras enclosed.

What you will need for this tutorial:

• Download the GMBfeed-icon-128x128.psd
• Adobe Photoshop (of course)

Step 1 - Getting Started
If you haven't done so already, download the required Photoshop file and open it. You'll see that the grayscale version of the Feed Icon is included as well as two other layers which are hidden. To start out go ahead and turn off the visibility on the "feed icon" layer. We won't need it for this tutorial, but I included it in case you wanted it. Now that we have nothing visible and a blank canvas turn on your guides (cmd-; or ctrl-;). Next with the "feed icon" layer selected create a new layer and name it "base". Reset your colors to black and white (d)

Now, lets get something on that blank canvas. Grab your "rounded rectangle tool" and set your corner radius to 10px. Starting at the center of the canvas start dragging out your shape; once you see that it's drawing hold down the Alt+Shift keys to drag the shape out from center and keep it uniform. Stop just short of filling the entire canvas. We will need space outside the shape for the next step. When you're done you'll have a shape like below.

Step 2 - Add Layer Style to Base
This step is going to give the ugly black box we created in Step ONE some style. Once this step is done, we'll have the beginnings of a decent looking icon. Everything is built off this layer and you can customize the colors how you like. I'm going with RED, but you can make whatever color you like. With the "base" layer selected choose "add layer style" at the bottom of the layers palette. Add the following settings for each style, remember the color is up to you.

Step 3 - Add Starburst
The "starburst" is one of the included layers within the Photoshop file. Now that we are at this step go ahead and turn on the layer visibility. It's not very impressive is it? Well, lets change that! Double-click the color selector and change it to a darker version of your chosen color. Since I chose to use red, I'm using a fill color of #390808. Once you have your color chosen, change the layer Blend Mode to Color Dodge and the Opacity to 50%. As you can see the starburst is still visible outside the "base" layer. To fix that small issue we will make a selection of the "base" layer (cmd-click or ctrl-click the layer) and with the starburst layer selected choose "Create Layer Mask". Now the starburst is contained within the borders of the base layer.

Step 4 - RSS Feed Icon Detail
From here we will turn on the last of the included layers "rss.icon.detail". I've included this layer as a "vector smart object", so that you could resize it without losing any of the details. If this layer were made of pixels (same with the starburst layer) and you resized it multiple times it would distort and look like garbage. Once the "rss.icon.detail" layer is on we'll add the following layer styles to give it some pop.

I chose to give this layer a metallic feel, but you can change it to appear however you like. It's all a matter of preference.

Step 5 - Add Some Shading
This step and the next will both be built on layers above the "rss.icon.detail" layer, so we'll start by creating a new layer above it and rename it to "shading". Make sure your colors are reset to black/white, if not go ahead and reset them now (d). Make a selection of the "base" layer and grab the gradient tool. We're going to create a linear gradient and set it to "foreground to transparent". Draw a gradient starting at the top of the icon down to the middle and another starting at the bottom up to the middle. When you're satisfied with your gradients change the Layer Opacity to 50%. NOTE: Don't deselect your selection… you'll need it in Step SIX.

Step 6 - Make It Glassy
Create a new layer above "shading" and rename it "glass". Grab the elliptical marquee tool and starting at the top right corner (outside the canvas); hold down Alt+Shift (cross-hair will have an x below it) and drag out a selection. You should have a selection that resembles this image:

Grab the gradient tool and flip the colors to white/black (x). Starting at the bottom of the canvas drag the gradient up to the top of the canvas. If done correctly you'll get a smooth transparent gradient that looks glassy. Deselect and you're finished!

I hope that you have enjoyed this set of tutorials teaching you how to customize your own RSS Feed Icons. As you have seen there are quick, easy ways to make a custom icon and there are more advanced methods. These two options are just the tip of the iceberg though; I have seen a ton of custom Feed Icons all over the Internet and each one has it's own unique shape, style and flare. One of my favorites has to be the Bomb Icon that Jason Boom uses for his feed. I'm sure there's some repository of Feed Icons on display somewhere around the Internet… until you run into it though check out Google Images for ideas.

This copyrighted tutorial was originally published at GrandmasterB.com on 06/14/2008.