Rss feed icon design, part 2

Now we have a good idea of what we want, let’s get started. I have done the work in photoshop so I will give explanation for this software. I let you make the translation for your favourite image editor.

rss icon final version

First create a new document (ctrl+n or cmd+n), give it a size about 500×300 pixels. Select the rounded corner shape in the shape tool and set the radius to 20px. Draw a box, a square in my case and give it an orange colour of your choice. Select the redraw path tool from the pen tool box and modify two of the corners to get ride of the rounded effect.

Duplicate your layer (ctrl+j or cmd+j) two times and increase the size of the new boxes (hold maj to keep the proportions). Got to the blending option (double click on the layer) and add a border 6px, white for the two smallest boxes.

rss screenshot 1

Load the selection of the first box (ctrl+click on the path thumbnail in the layer panel) and, holding maj, repeat this for the two other layer. Holding maj will add the new selection to the current one. You should now have a selection like that:

rss screenshot 2, selection

Select your three boxes (ctrl+click or cmd+click in the layer panel) and merge them together. Now invert your selection (ctrl+maj+i or cmd+maj+i) and clear it in the new layer (called icon layer from now). Add a border 6px white on the icon layer. Create a new blank layer above the background layer (’new layer’ button at the bottom of the layer panel) and merge the icon layer with the blank layer.

rss screenshot 3, merged layers

Now we have our rss icon, we just need to add some fancy stuff to make it more attractive. I have chosen to add an other border around the icon layer, 2px grey. I have also added a white gradient on the top left hand side corner and a shadow on half the icon.

rss screenshot 4, finished icon

Next part, learn how to make a reflection effect !

Leave a reply