By Esben Thomsen

The purpose for this tutorial is to learn how to use the palettes mentioned previously. I will be using Illustrator CS3 for this article. In addition to the RSS icon, I will show you how to crop artwork in CS3 and how you should be able to do it in CS2 and older versions.

I would suggest that you setup your palettes as I’ve shown you earlier, since it will make the following a smoother process.

Tools, palettes and concepts covered in this article:

• Transform
• Align
• Appearance
• Pathfinder

There are many ways to make those radio-like beams, and this will be the mathematician’s favorite, because we are gonna draw with numbers.

Fire up Illy and make an RGB document, let’s say, 800x600 px in size. In Illustrator size doesn’t matter, because we will scale it later.

Select the Polar Grid Tool from the tools palette (under the Line Segment tool) and click once on the art board. This pop up window should appear:

The dimensions should be equal—400x400 px—or whatever you fancy, as long as it equal.

The “dividers” should be 4 and 4 with no skew. Click OK.

Now you should have something like this, blue curves and anchor points (anchor points are represented by the squares).

Drop a color on the stroke for reference, we will remove it later on, but it helps if you can see it for the next step.

This might get a little complicated for a new Illustrator user, but it’s a great showoff of what Illustrator is capable of.

Select your artwork, go to the Pathfinder palette and click the Divide button at the lower left corner.

With the Selection tool (black arrow in the tool box, shortcut is V) single click your artwork and then double click on it. You will see (hopefully) that you are inside a group, indicated with a gray bar at the top of the art board. To get out of group mode, click the arrow in the gray bar.

Click and drag (with the Selection tool, black arrow, V) to select the paths and delete them (delete/backspace key) until you have 1/4 of the Polar Grid left. It should look something like this:

Now it’s time to get rid of the stroke and make it a fill instead. Simply reverse the fill and the stroke colors at the bottom of the tool palette by clicking on the two arrows. Now your appearance palette should show a fill and not a stroke.

Select the artwork and double click anywhere on it, so you are in group mode again. Now select the second largest slice and hit the delete or backspace key.

The same goes for the two inner circles. You should only have two beams left.

Now we have successfully made the beams but we are missing that little circle as well as a box that surrounds it.

I personally like precision, partly because I can, but mostly because Illustrator has the power to do so.

Select the artwork (remember to be out of group mode) and go to the Transform palette. Make sure the reference point (square box/grid) is located in the lower left corner (represented by a black dot), because this will affect where the beams align to the corner.

In the X and Y fields in the Transform palette or in the context sensitive toolbar at the top of the Illustrator window, put in the number zero. It should now align against the art board like this:

You don’t have to do this step, but it helps with placing the circle more accurately without calculating the exact distance.

Draw a circle with the Ellipse tool while holding down the shift key (this will assure a perfect circle). The size doesn’t matter, just make a perfect circle. Give it a fill that is different from the “beams” (so you can see if it is properly proportional, which we’ll check next) and no stroke.

The beams in the sample pictures have been scaled to 100x100 pt and by moving the dot just below one of the beams, I can see that it fits nicely with around 20 pt.

Go to the Transform palette and type 0 (zero) in X and Y and make sure there the black dot is in the lower left corner again. This should align the dot perfectly and now you can give it a fill as you see fit, preferably the same as the beams.

Use the Selection tool (black arrow, V) and click and drag a square selection over both shapes (beams and circle), so the beams and the circle are highlighted in the color of the layer (here, blue) and hit Cmd/Ctrl + G. This groups the beams and circle together, which makes it a little easier to move them around.

Adding a Background to the RSS Icon

The hard part is all done. Congrats! Now we just have to add a background layer and then choose some nice colours for our RSS icon.

Take out the Rectangle tool and click and drag while holding down the shift key, which will make it a perfect square.

Go to the Transform tool (E) and change the size of the box to 120x120px in the W and H fields in the context sensitive toolbar at the top of the window, and place 0 (zero) once again in both X and Y coordinates.

When the rectangle has placed itself on top of the beams, select the square, right click and choose Arrange>Send to Back, or hit Cmd/Ctrl+Shift+[ (left bracket).

As you can see, the background and the beams don’t align particularly well, so let’s select both the background and the beams group by clicking and dragging a square selection over both of the shapes with the Selection tool (black arrow, V). Dive into the Align palette and hit Vertical Align Center and Horizontal Align Center.

The square and the beams should now be perfectly aligned to each other and now the fun begins…

Colouring, Gradients and Effects

In this part I have changed the beams to white.

First off I want to make a gradient on the background, because it makes the background more interesting. Gradients are difficult for new users and especially for Photoshop users because PS does it differently than Illy. I personally don’t have a problem with this, but then again I don’t draw in Photoshop!

Select the background with the Selection tool (black arrow, V). Open up your favorite swatch palette and the Gradient palette; make them float if you don’t have room for them in the dock.

Now drag two colours from the swatches onto the gradient bar. It might look weird like the example below, but that’s okay for now. If you have something that looks like my example, then you have to drag the white and black boxes off the gradient bar. In the Gradient palette, you can’t make anything really complicated, like you’re used to in Photoshop. If you want to make something more complicated, gradient mesh is the way to go, but we can talk about that later in another article.

Align the colours as you sees fit in the gradient bar, add more colours if that’s your thing, play around and have fun.

After you are satisfied with the appearance of the colours, we will add rounded corners to the background square. Select the square and go to Effects>Stylize>Rounded Corners.

Enter a pixel size and check the preview box to see it. If you want to change the roundness at a later time, go to the Appearance palette and double click on the effect to alter the settings; this is not possible if you use the Rounded Rectangle tool from the toolbox!

Perhaps a dropshadow or a feather on the background helps the background to stand out, but I won’t suggest that for the beams, since it will make them look separated from the background. A light gradient might help add interest to the beams though; try it and see if you like the results.

Preparing and Exporting for Web

When you are finished tweaking, it’s time to scale and export the artwork for the Web.

Select the entire artwork with Selection tool and go to the Transform palette. Access the palette options via the drop down arrow (three stripes and a downward pointing arrow in CS3, a circle button with a black arrow pointing right for CS2) and select Scale Strokes & Effects. This is one of the most important features in Illustrator, which is, unfortunately, well hidden away. Push the chain link icon, so that it constrains the proportion of the width and length.

You will have to make the choice of how small you want the RSS icon, as it depends on your website design.

Cropping in CS3

In the Tool box there is a Crop tool, double click on the artboard and it should automatically make a cropping around the icon. If you are satisfied with the cropping, then go to File>Save for Web and select either jpg, gif or png (if you have a drop shadow, then don’t use gif).

Sometimes you will see that there is a bug in this tool when the crop marks don’t give you the exact results. Only way I have found around this bug, is to change the cropping area pixel by pixel.

Cropping in CS2 and Older

I don’t know how far this goes, but it does work in CS2 and I think also beyond that, correct me if I’m wrong.

Draw a rectangle and transform it through the transform palette, so the size fits your final crop size. Place it above your artwork and go to Object>Crop Area>Make and then go to File>Save for Web, as above.

You can download the finished buttons in a .zip file that contains .ai, .svg and .eps formats.

Notice that there are two ways to achieve the same results in terms of transforming. You can use the Transform palette or you can use the Transform tool in combination with the context sensitive toolbar, which gives you the same options as the Transform palette. Use whichever method is more comfortable or familiar to you; there’s always more than one way to do something in Illustrator!

I’m not quite sure about what tutorial I should make next, but feel free to drop a comment and I will look into it!

Subscribe to Creative Curio so you don’t miss them! Email subscriptions are an alternative to the RSS subscription, which you can sign up for here.