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:
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:
With your rounded rectangle still selected, go to Object -> Path -> Offset Path. Add the values below and click OK.
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 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).
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:
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 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.
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!