Make a Modern RSS Icon

With the social media being incredibly big right now, icons for them appear on almost every website. In this tutorial, we are going to make a modern RSS icon with a template that can be used to create icons for Twitter, Facebook, LinkedIn and the other social media websites!

Creating a New Document

The first step is of course to set up a new document where we are going to create the icon in. I like to have some space around when I create icons and chose a 200×100 pixel size, at the web resolution 72ppi.

Making the Box

First, create a new layer ontop the currently white background layer. Then, select the rectangular marquee tool from the toolbar, drag out a box at the size that you wish to have your button. Fill this selection with white (Edit > Fill or press D to reset your foreground and background colors, then use the shortcut Command + Backspace (PC: Control + Backspace) to fill).

Finally, you can deselect by clicking Command + D (PC: Control + D).

Brining up Blending Options

Right click on the layer with the white box that we just created. Select Blending Options from the contextual menu.

In the Blending Options panel, click on Gradient Overlay and then on the little gradient preview box, curently showing a black to white gradient. This will bring up the gradient editor.

Setting up the Background Gradient

Here, first click on the little color holder on the left side. This activates its options (shown just below) where among the different options have Color. Click on the color box and set it to #d13c18 (R: 209 G: 124 B: 24).

Repeat this with the right side only this time, set the color to #f59826 (R: 245 G: 152 B: 38). Then click the OK button at the top of the dialog box to apply the changes.

You will, if you look at the image behind, see that we have got a gradient going in a top to bottom direction, using the colors we have set here.

Modifying the Gradient

To make the background of the button look a little bit better, we are going to change the angle of the gradient to about -16° and the scale to 110%. This will make the gradient go from the top left corner, to the bottom right one.

Don’t forget to click the OK button when you are done to save the changes.

Adding an Inside Border

Next up, we are going to add an inside border to the button, to give it some depth. Create a new layer, then command + click (PC: control + click) on the layer thumbnail for the box layer. This will load it as a selection.

Go to Select > Modify > Contract. Enter 2 pixels as the value and click OK. This will contract the selection by two pixels.

Right-click anywhere within the canvas and from the contextual menu, chose Stroke.

Here, enter 1px as the width, set the color to white (#ffffff) and the location to Inside. Click OK.

Deselect by clicking Command + D (PC: Control + D).

Finally, on the new layer with the stroke, drop the opacity down to about 50%.

Applying a Slight Shadow

Let’s also add a slight shadow below the icon to give it some depth to the website it is on. Create a new layer and drop it just below Layer 1 (the one with the box). As before, hold down the Command-key (PC: control key) and click on the Layer 1 thumbnail icon to load it as a selection. Then, with the new layer now selected, fill it with black.

Deselect by clicking Command + D (PC: Control + D).

Bring up the Free Transform tool by using the keyboard shortcut Command + T (PC: Control + T). Grab the middle top handle and drag it, almost all the way to the bottom, leaving a small rectangular shape.

Right-click anywhere within the canvas to bring up the contextual menu for the free transform tool. There, select Perspective from the list.

While holding down the Shift-key, click on either of the top-corner handles and drag them outwards, to have the top-corners extend out from the box, creating a perspective.

Finally, click the Enter key to apply the changes.

Go to Filter > Blur > Gaussian Blur. Enter a radius of about 1.5 to 2.0 pixels and click OK.

Finally, drop down the opacity of the shadow layer to about 30% to make it just subtle behind.

Adding the RSS Elements

Grab the typical “RSS Logo” from somewhere and if it isn’t already, fill it with white. Position it down in the bottom-left-corner of the icon.

Grab the Type Tool and enter the text RSS. Use the font Myriad Pro (or similar), at 22pt size and bold. Set the anti-aliasing to Sharp.

Position it in the top-right region.

Final Result

Now we have the final result! A modern and stylish RSS icon that can be used as a template for other social media websites. Just changing the icon on it and the gradient color can make it a perfect icon for anyone.

You can also make it in a smaller size to just contain the “RSS logo” itself if you want!

Tags: ,


Erik is the owner of online media company Bernskiold Media that runs tutorial website Bernskiold learning and he is a Web Designer, Photographer and Software-Trainer.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>