How to create an RSS Icon in Illustrator

November 25, 2010

RSS feeds are everywhere on the web these days. Have you ever wondered how to create your own RSS icon in Illustrator? If you have then you've come to the right place. Today, I am going to show you just how easy it is to create your own RSS feed icon with this beginners Illustrator tutorial. After the tutorial, think about how you can use the skills that you've learned here to create other buttons for the web.

Here is the final RSS icon design that you will be creating:

rss Button final design

Step 1: Creating the Rectangle

Open a new Illustrator document that is 300 x 300px. Remember that you are using this RSS icon for web so your colour mode should be RGB at 72dpi. Look at the toolbox to the left of the screen. Hidden under the Rectangle Tool is the Rounded Rectangle Tool. Select the Rounded Rectangle Tool and while holding Shift, draw out a rounded rectangle on your stage. Your rounded rectangle will probably have the default black stroke and white fill. Remove the stroke and add a light orange to dark orange gradient fill. Set the gradient angle to -90 so that the gradient inside the rounded rectangle moves from top to bottom, dark orange to light orange.

You should end up with this:

Step 1: Rounded Rectangle with Orange Gradient Fill

With your rounded rectangle still selected, go to Object -> Path -> Offset Path. Add the values below and click OK.

offset Path values

What you have done is created a smaller rounded rectangle on top of the first rounded rectangle that you created. Select this second rounded rectangle and rotate it 180 degrees so that its gradient runs in the opposite direction of the first rounded rectangle that you created (from top to bottom, light orange to dark orange).

You should end up with something like this:

Step 1: two rounded rectangles

Step 2: Creating the Inner Design

In the Toolbar to the left of the stage, under the Rectangle Tool, is the Ellipse Tool. Select the Ellipse Tool and while holding Shift, draw out a circle somewhere on your stage. Make sure that your circle has no fill and a black stroke. Set the stroke weight to 16pts. Now, choose your Direct Selection tool from the Toolbar on the left of your screen. Select the two lower left points of your circle and delete them so that you are left with a quarter of the circle (the two points circled in yellow below are the two points that you need to delete).

RSS feed icon circle

With your quarter circle selected, go to Edit -> Copy and then, Edit -> Paste in Front. You should now have two quarters sitting on top of each other. Resize and reposition the second quarter below the first quarter so that it looks something like the image shown below. Use your rules and guides to position your elements. Draw a circle inside the two quarters (if you get lost here, please follow me in the video below). You should end up with something like this:

Inside of the rss button

Select all three of the elements that you created above. Go to Object -> Expand -> select Stroke (only the Stroke box should be selected; you don't need the Fill box to be checked) and click OK. Add a white to grey gradient to all three of the objects and a darker grey, 1pt, stroke. Once this is done, go to Object -> Group to group all three objects together. Position the three elements inside the orange rectangle that you created in Step 1. You should end up with this:

Step 2: RSS Button

Step 3: Adding the Shadow

You are almost done. All we need to do now is add a little shadow over the top half of the RSS icon.

Select the top orange rectangle. Go to Edit -> Copy and then, Edit - > Paste in Front. Remove the stroke on this new, third rectangle and give it a white fill. Select your Pen Tool and draw out the shape of the shadow that you want to have over top of your button. Select both the white rectangle and the shadow shape that you just created.

Creating the shadow

Go to Window -> Pathfinder to open the Pathfinders Palette. Select the Minus Front icon (it's the 2nd icon in from the left). You will now have the finished shape of your shadow. Decrease its Opacity to 15% and you're all finished. Congratulations!

Follow along with this video tutorial:




Also in Pixellogo blog archive

Adobe launches Document Cloud, Acrobat Mobile and Fill & Sign Apps

March 19, 2015

Adobe is one of those great companies out there that is constantly pushing the envelop, testing new ideas and reinventing the way that we interact with technology and our environment. The people at Adobe are ambitious, creative and inventive. The newly unveiled Document Cloud by Adobe is a testament to this fact. Adobe has done it again and this time with Document Cloud, they are...

Read More

6 Free Color Resources for Logo, Graphic and Web Designers

March 06, 2015

Color is very important in every project. Designers use color to captivate their audience, convey emotions and establish associations. Color is often what attracts users to a design and it is a vital component in every design. Color excites us, stimulates us and draws in our eyes. Color is everywhere and it subtly moves us every day.

Designers are very aware of the power of color....

Read More

20 Creative & Inspiring Workspaces

February 04, 2015

If you are a creative person then you definitely need a creative workspace. It is important that you have a very special sanctuary in which you can conduct your business. Your workspace should be inspiring and motivating. It should spur you to action, spark your imagination and and trigger originality. Your workspace should be personal and it should be...

Read More