CMXtraneous: RSS icons in Fireworks

Right on the edge of useful

RSS icons in Fireworks

Posted Wednesday, August 16, 2006 7:39:40 PM by Gordon Mackay

One of the things I hate when it comes to design is being forced to use un editable, flattened images in designs, especially when they are icons or symbols.

One of the most commonly used icons on modern blogs is the RSS one that first appeared in the Mozilla Firefox status bar a good few versions ago. It looks like this:

RSS icon

Like most good icons it's very simple, so why use other people's versions of it when it's so easy to recreate in Fireworks. Here's how:

Let's get drawing the icon

Open up Fireworks and create a new 100 pixel by 100 pixel canvas. The reason it's 100 pixels is just to give you enough room to play.

Set the canvas color to black so that it's easier to see what you're doing.

Select the Ellipse Tool () and draw a 40 pixel by 40 pixel circle in the middle of your canvas.

Set the fill to "none", and set the stroke to a 3 pixel soft line. Your circle should look like this:

Now clone the circle you just drew (Edit > Clone) and set it's dimensions to 24 pixels by 24 pixels and position it centrally within the larger circle:

To make our little "RADAR" from these circles we use the Knife Tool () to make two cuts through our circle:

  1. From the 9 o'clock position right through to the 3 o'clock position
  2. From the 12 o'clock position through to the 6 o'clock position

To do this select both the circles and and drag the Knife Tool along the same paths as shown in this picture:

Now delete all the excess paths so that you're left with something that looks like this:

Now draw a 10 pixel by 10 pixel solid white circle and position it like this:

Now all that's left is to place a nice orange filled rectangle behind it, and change the canvas color back to white:

That's all there is to it. Feel free to get creative and use different background colors for your rectangle. Here is a PNG that I made (right click to save to your desktop):

Have fun :)

Category tags: Designing for the Web, Fireworks