I recently removed Adobe CS2 from my laptop to clear up some hard drive space (Note: you can legally continue to run older versions of Adobe CS even after you’ve upgraded, and it’s probably a good idea to keep your older versions unless you need the disk space). Well, today, I went to open a document that I had created prior to removing CS2, when lo and behold, Illustrator CS4 informed me that Century Old Style Std was missing. Now, I had created this document in Illustrator CS4, so it didn’t dawn on me right away that the removal of CS2 could be the source of the problem, so I wasted quite a bit of time trying to figure out how this font could have been deleted from my Windows>Fonts folder. As it turns out, it wasn’t deleted from there at all, because it was never there in the first place.

When installing Adobe CS2 on a Windows machine,  Open Type Fonts are stored in Program Files>Common Files>Adobe>Fonts (on a Mac they are stored in [Macintosh HD] /Library/Application Support/Adobe/Fonts/). As long as you leave the fonts there, you can upgrade to newer versions of Adobe CS products and the fonts will still be accessible. For example, upgrading to CS4 will not wipe out your CS2 fonts from this folder. HOWEVER, if at some point you decide to remove your older CS or CS2 versions, the uninstaller will remove the fonts associated with the Creative Suite version you are removing (I think this only applicable to CS and CS2 removal, but I’m not positive).

The easiest way to prevent this from happening is, of course, not to remove your older versions of Adobe CS. If you’re like me and you’ve already made that mistake, hopefully, you still have your CS or CS2 installation disks laying around (or better yet, you still have the older versions on another machine). To fix the situation, either completely reinstall your old CS version(s) or copy the missing fonts you need off another machine that you are LEGALLY running the older versions on (the Adobe Creative Suite license typically allows activation on 2 machines) and paste them into the folder mentioned in the paragraph above. Restart your Adobe application, and you should be all set.

Orange Peel Effect created in Adobe Illustrator

The following Adobe Illustrator tools/features will be used in this tutorial:

• Selection Tool
• Ellipse Tool
• Pen Tool
• Add Anchor Point Tool
• Delete Anchor Point Tool
• 3D Revolve
• Layers Palette

For this example, open a new 640px x 480px CMYK document in Adobe Illustrator.

Step One: Create Map Art

The first step toward achieving this effect, is to create and image map that we will later apply our revolved object, which will result in a spherical shape. In the Layers Palette, double-click on Layer 1 and name it “Map Art.”

We’ll start by creating a set of guides to help us draw our map art. Make sure you have your rulers visible (View>Show Rulers or Ctrl/Cmd-R) and that your guides are not set to locked (View>Guides>Lock Guides should be unchecked), and drag out 7 horizontal guides and two vertical guides and arrange somewhat like the guides in the image below. Select the guides using the Selection Tool and then use the Vertical Distribute Space option in the Align Palette to evenly distribute the vertical spacing between the 7 horizontal guides.

Select the guides and use the Align Palette to vertically distribute the horizontal guides evenly.

Once you have vertically distributed the guides, your guides should look similar to the image below. If you need to adjust the two vertical guides so that they look close to the image below, do so now. The placement of the vertical guides does not need to be exact, but it should look similar to the example image.

Your guide placement should look similar to these guides.

Once you have your guides in place, you can lock them (View>Guides>Lock Guides). Next, we’re going to activate the Pen Tool and create a series of diagonal lines. In this example, I’m using a orange stroke color (C=0 M=50 Y=100 K=0). For the first line, we’ll place our starting point at the upper-left intersection between the top horizontal guide and the left vertical. The end point will be the intersection of the second-most upper horizontal guide and the right vertical guide (see image below).

Use the Pen Tool and the guides to create a diagonal line

Now, using the intersections of our guides at starting and ending points for our lines, we’re going to create 5 more lines parallel to our first line and evenly distributed, as seen in the image below.

Using the guides create 5 more evenly distribute parallel lines.

Once you have all 6 lines drawn using the method above, simultaneously select all 6 lines and group them together (Object>Group or Ctrl/Cmd-G). With the lines grouped, set the stroke weight of the lines to 20pt.

With the grouped lines selected, set Stroke Weight = 20pt

Next, we want to expand our strokes into shapes. With the grouped lines still selected, go to Object>Expand and click “OK.” You now should have a group of six filled shapes.

Expand the strokes to shapes

If you look closely at our resultant shapes, you’ll see that the bottom-left corners extend past the left vertical guide and that the upper-right corners extend past the right vertical guide. We want the edges of our shapes to be flush with our vertical guides. To achieve this, we’ll start by using the Selection Tool to horizontally expand our group of shapes, so that the upper-left corners are aligned to the left vertical guide and the bottom-right corners are aligned to the right vertical guide. With the group of shapes selected zoom in to area indicated in the image below (using either the Navigator or the Magnifying Glass Tool).

Zoom in on the circled area.

Use the Selection Tool to drag the control point of the selection marquee until the upper-left corner is aligned with the left vertical guide.

Align the upper-left corner with the vertical guide.

Following the same method, zoom in on the right side of our grouped object.

Zoom in on the circled area.

Now, use the Selection Tool to drag to control point of the selection marquee until the lower-right corner is aligned with the right vertical guide.

Align bottom-right corners with vertical guide.

Now, we have our upper-left corners aligned to the left vertical guide, and our lower-right corners aligned to the right vertical guide, but what about the upper-right and lower-left corners that extend beyond the vertical guides? We’re going to take care of those, next. Activate the Add Anchor Point Tool (it is grouped with the Pen Tool; Keyboard Shortcut is +), and add anchor points at the intersections of the right vertical guide and the top of edges of each of our shapes.

Add anchor points at the intersection of the top edge of each shape and the right vertical guide.

On the left side of our shapes, we’re going to add anchor points at the intersection of the bottom edge of our shapes and the left vertical guide.

Add points at the intersection of the bottom edge and the left vertical guide.

Now, we’re going to activate that Delete Anchor Point Tool (Keyboard Shortcut -) and delete the far lower-left corner points on each of our shapes (these are the points that extend past the left vertical guide).

Delete the lower-left corner points from each shape.

Using the Delete Anchor Point Tool, move over to the right side of our grouped object and delete the upper-right corner points.

Delete the upper right corner points for each shape.

Once you’ve deleted the point extending beyond the vertical guides, the side edges of your shapes should be aligned with the vertical guides on each side.

Edges should now be aligned with the vertical guides.

Your resultant object should now look like this.

Edges on both sides should be aligned with the vertical guides.

Using the Add Anchor Point Tool, add a point to the top edge of the bottom shape just a little to the right of the midpoint between the left and right guides (see image).

Add an anchor point to the top edge of the bottom shape just to the right of the center.

Use the Delete Anchor Point to delete the two corner points on the right side of the bottom shape to get the resultant shape below.

Resultant shape after deleting the two corner points on the right side of the bottom shape.

Next, we’ll use the same method on the top-shape, only with the sides reversed. Add the new anchor point to the bottom edge of the top shape just to the left of the midpoint between the vertical guides, then delete the two left corner points.  This will create the appearance of a notch at the top and the base of your peel where the stem/core would have been.  You should now have a resultant object similar to the image below.

This is the resultant shape for our map art.

This is the final shape for our image map. Our next step is to drag our map art to the Symbols Palette to create a new symbol based on this object. (If the Symbols Palette is not visible go to Window>Symbols Palette.)

Drag the grouped object over into the Symbols Palette to convert it to a symbol.

When you drag the object into the Symbols Palette, the Symbol Options dialog box will appear. Give this symbol a name, such as Orange_Peel, and click “OK” (you don’t need to modify any of the other options for this example).

Name the symbol and click OK.

Since we are finished with our map_art, go ahead an lock the map_art layer and turn the visibility for it off.

Step Two: Using the 3D Revolve Effect

With our map art completed and converted to a symbol, we’re ready to create our shape that we will be applying the map art to. Create a new layer in the Layers Palette, double-click it, and name Orange_Peel. Activate the Ellipse Tool, and create a circular shape in the middle of the artboard (in this example, I created a circle with 125px radius).

Create a circular shape with the Ellipse Tool.

Activate the Direct Selection Tool and select the right control point on our ellipse/circle and then hit the Delete key (follow this method, and do not try to use the Delete Anchor Point Tool for this step).

Use the Direct Selection Tool to select the left point and then hit the Delete key.

You should now be left with a semi-circle path like the image below.

Resultant semi-circle path.

With this path selected, go to Effects>3D>Revolve. This will bring up the 3D Revolve Options dialog box.

3D Revolve Options

Click on the Map Art button to bring up the Map Art dialog box. At the upper-right of the Map Art Options box, there is a drop-down menu labeled Symbol, click on the drop-down box and select the Orange_Peel symbol that we just created. The symbol should appear below on the image map. Click on the Scale to Fit button in the lower-left to expand the symbol to fit the image map. Then check the checkboxes next to Shade Artwork and Invisible Geometry. The Shade Artwork option will create more of a sense of depth through shading, while the Invisible Geometry will make our shape invisible allowing only the map art to be seen.

Map Art Options: click on Scale to Fit, and check Shade Artwork and Invisible Geometry.

Click OK to return to the main 3D Revolve Options dialog box. You’ll notice that there are setting for rotation angles in the X, Y, and Z planes. These values will determine the perspective of your 3D object. You can either enter numeric values in the text boxes, or simply click and drag on the cube to modify its position. If you click on the More Options button on the 3D Revolve Options dialog box you can modify the lighting settings, modify the position and number of light sources, and modify the shading used. For simplicity’s sake, I’m going to leave these values at the default settings for this example. Feel free to experiment with these settings. Clicking on the Preview checkbox will give you a preview of what your resultant 3D shape will look like based on the current settings, but it can slow down performance when you start creating more complex shapes. When you are satisfied with your settings, click OK, and you should end up with a nice “orange peel” effect like the images below.

Orange Peel View 01

Orange Peel View 2 (modified angle)

Orange Peel View 3 (modified angle)

This should be a good example to get you started with using Map Art with the 3D Revolve Effect. Feel free to try out other art on the spherical shape. You can create new objects, like a beach ball, for instance, just by changing the selected symbol in the Map Art options.

Beach Ball created by simply changing the map art on the orange peel sphere.

RSS Icon

This will be a simple Illustrator tutorial on how to design a basic RSS icon. Part 1 will only deal with creating the shapes (paths) needed for the icon. This tutorial is intended for Adobe Illustrator “beginners.”

Tools Used:

• Guides
• Rectangle Tool
• Rounded Rectangle Tool
• Ellipse Tool
• Pathfinder – Divide

Start by creating a new document in Illustrator. Since this type of icon is typically used for web applications, we will use RGB color mode. The dimensions of the document should be 600px by 600 px. (If you are using CS4, we will only be using 1 artboard.)

Now, that you have created a new document, make sure you have your Rulers visible. If they are not visible, you can turn them on using View>Show Rulers or with the keyboard shortcut Ctrl-R (substitute Cmd for Ctrl on Mac).

We are going to use Layer 1 for our guides, so double-click on Layer 1 in the Layers palette to bring up the Layer dialog box and name this layer “Guides.”

Layer options

Next we will set up our guides. For this step, make sure that “Lock Guides” is unchecked (View>Guides>Lock Guides or Alt-Ctrl-; ). A new guide can be created by clicking on the rulers at the top (for horizontal guides) or left (for vertical guides) of the page and then dragging the mouse across the artboard. The guide will be set at the position at which you release the mouse button. As long as you have “Lock Guides” turned off, you will be able to select your Guides with the Selection Tool (or Direct Selection Tool). When a guide is selected you can set the x and y positions of the guide either using the x and y value boxes on the Control toolbar (at the top of your screen, under the main menu) or by using the Transform Palette (Window>Transform or Shift+F8).

Setting Guide Position

We will be creating Guides using this method at the following values.

• x=25px  y=0px
• x=575px  y=0px
• x=0px  y=25px
• x=0px  y=575px
• x=175px  y=0px
• x=0px  y=175px
• x=125px  y=0px
• x=0px  y=125px

(note: The zero x-values for horizontal guides, and zero y-values for vertical guides are done for illustrative purposes. These values are actually arbitrary given the nature of guides.)

Once you have your guides set, your artboard should look something like this.

Guide Setup

Now that our guides are set, we can go ahead and turn on the “Lock Guides” option. Next, we will add a new layer by clicking on the “New Layer” icon in the Layers Palette. Double-click this layer to bring up the Layer Options and name it “Artwork.” We will be creating the paths for our RSS symbol on this layer.

Add a new layer and name it "Artwork"

Now we’re ready to start creating our paths. We’re going to start out with the the Rounded Rectangle Tool. The first thing we want to do is set a stroke color for our path, so that we can see what we’re creating. I’m going to select black as the stroke color, and keep the fill color empty (transparent), since we are really only just going to be drawing paths for this exercise. (See image below) We’ll get into fills, gradients, and stroke in Part II. After you set your stroke color to black, click on the Shape Tool icon in the toolbar. The Rectangle Tool is typically the default Shape Tool, but we want to use the Rounded Rectangle Tool. Anytime a shape tool other than the one you want to use appears as the Shape Tool (for example, a rectangle or another shape is there instead) click on that shape and hold down the mouse button and more shape options will appear.

Selecting the Rounded Rectangle Tool

Before we start drawing paths, we want to make sure that “Smart Guides” are turned on (View>Smart Guides or Ctrl-U). Smart Guides will facilitate positioning are objects in relation to the guides we created in our Guide layer.

With the Rounded Rectangle Tool selected click and release the mouse button anywhere on the artboard. This should cause the Rounded Rectangle Dialog box to pop-up where we can enter Width, Height, and Corner Radius values for our rounded rectangle shape. The rounded rectangle that we are going to create will have the following values.

• width=550px
• height=550px
• corner radius=20px

Enter these values into the Rounded Rectangle Dialog box and click “OK.”

Rounded Rectangle Dialog Box

You should now have a rounded rectangle somewhere on your artboard (depending upon where you clicked and release the mouse prior to the Rounded Rectangle dialog box appearing). We are now going to select the Selection Tool to position our rectangle with each of the four edges aligned to the guides we set at x=25px, y=0px; x=575px, y=0px; x=0px, y=25px; and x=0px, y=575px. The Selection Tool is the black arrow in the upper-left corner of the Illustrator Toolbar (keyboard shortcut V). With the Selection Tool click on any edge of the rounded rectangle (but NOT on one of the vertices/corners, see image below) and hold the mouse button down. You can now the drag the rectangle to any position on the artboard. Since we have Smart Guides enabled, you should notice that while you’re dragging the shape around, it will “snap” into position whenever an edge approaches one of your guides. Drag the rounded rectangle so that the edges approach the guides that we are trying to align to until it “snaps” into our desired position.

Positioning rounded rectangle with Selection Tool using Smart Guides

Once you have positioned the rounded rectangle, your artboard should look like this…

Positioned rounded rectangle

Next, we are going to use the Ellipse Tool to create a circle. The Ellipse Tool can be activated the same way we activated the Rounded Rectangle Tool. Click on the Shape Tool icon in the toolbar (which is currently the Rounded Rectangle Tool) and hold the mouse button down until the shape option pop up. Now, select the Ellipse Tool (the Ellipse Tool can also quickly be selected with the keyboard shortcut L).

With the Ellipse Tool selected, move your cursor over the intersection of the guides positioned at x=175 and y=175. Hold down the “Alt” key and click and release the mouse button. Holding down the “Alt” key causes the point at which we click the mouse button to be the center point of the ellipse/circle.

Create a circle center at x=175px and y=175px with the Ellipse Tool

Once you release the mouse button the Ellipse dialog box will appear, and you can enter width and height values for your ellipse. We will be using values of 100px for both width and height.

Ellipse Dialog Box

Note: While clicking and releasing the mouse button causes the Ellipse dialog box to appear, holding the mouse button down and dragging the mouse allows you to set the width and height of the mouse based on how far you drag the mouse from where you first clicked the mouse button. Releasing the mouse button will set your ellipse. Feel free to experiment with this technique, as well. For precise sizes, like we are using in this example, using the dialog box makes things easier. This click and drag technique works across the various different Shape Tools in Illustrator.

Enter 100px in for each value in the Ellipse Dialog Box and click “OK.” You should end up with the result below.

Resultant Circle

Next, we will be using the Rectangle Tool. It can be found in the same spot on the toolbar as the Ellipse Tool and the Rounded Rectangle Tool, by clicking and holding the mouse button over the Ellipse Tool until the Shape options pop-up appears or by using the keyboard short-cut M.

With the Rectangle Tool selected click and release anywhere on the artboard to bring up the Rectangle Tool dialog box. This will be very similar to the method we used for creating our rounded rectangle. Enter values of 375px for both width and height in the Rectangle dialog box and click “OK.”

You should now have a 375px x 375 px rectangle on your artboard. We are now going to select the Selection Tool to position our rectangle with the bottom-left corner at the intersection of the guides at x=125px and y=125px. Since we have Smart Guides enabled, you should notice that while you’re dragging the shape around, it will “snap” into position whenever an edge approaches one of your guides. Drag the rectangle so that the bottom-right corner approaches the intersection of the guides at x=125px and y=125px until it “snaps” into place. Once you have positioned the rectangle, you should have a resultant image that looks like this.

Positioning the rectangle

Now, that we’ve gone through the Rounded Rectangle Tool, the Ellipse Tool, the Rectangle Tool, and how to position objects with the Selection Tool. I’m going to pick up the pace a little bit. Next, we will be drawing 4 circles using the same method we used with the Ellipse Tool to draw our first circle. Our four circles will have the following dimensions:

1. 350px x 350px
2. 500px x 500px
3. 600px x 600px
4. 750px x 750px

Each circle will be centered at the intersection of the guides at x=125px and y=125px (the same position as the lower-left corner of our rectangle). Select the Ellipse Tool in the same manner you did before. Since we know we want each circle to be centered at a specific point, we will again hold the “Alt” key down and click and release the mouse button at the point (x=125px and y=125px) we want the circle to be centered upon. Enter each set of values above for each respective circle. You should end up with the following result.

Resulting Four Circles

You’ll notice that your circles are overflowing off the artboard. Don’t worry about this, as we are about to take care of any overflowing objects. Our next step is to simultaneously select the four circles that we just drew along with our rectangle. Select the Selection Tool, click and hold the mouse button and drag the cursor to create a selection marquee (see image below). With the Selection Tool, any shape that is intersected by the selection marquee will be selected.

Selecting Multiple Objects with the Selection Tool

With all four circles and our rectangle selected, we are now going to use Illustrator’s Pathfinder Tool (Window>Pathfinder or Shift-Ctrl-F9). We will be using the Divide option in the Pathfinder palette. In Illustrator CS4, Pathfinder seems to “Expand” compound shapes by default, but I believe older versions of Illustrator used to require holding down the “Alt” key while clicking the Pathfinder option. (This may vary depending on your version.) Click the “Divide” option to divide intersecting paths into separate shapes.

Using the Pathfinder Divide option (Expand compound shapes)

With our divided shapes still selected, we now want to use the Ungroup (Object>Ungroup or Shift-Ctrl-G) command to ungroup the separate shapes. We can also “turn off” or “hide” our Guide layer at this point, because we no longer need to use the guides we created. In the Layer Palette click on the icon that looks like an eye next to the layer named Guide. This will turn the visibility off for this layer, so that our layers are hidden. You can toggle the visibility of any layer on or off by this method.

Toggle Guide layer visibility off to hide the Guide layer.

After we have ungrouped the divided shapes, we can now select each one individually, by clicking on an “edge” or path with the Selection Tool, and delete the shapes we do not need. Selected objects can be deleted by hitting the “Delete” key.

First we will select the objects that are overflowing off the artboard.

Select and Delete Unwanted Shapes

Deleting the objects overflowing off the artboard should give you the following resultant.

Resultant after deleting overflowing objects

Using the images below as guidelines, delete the remaining three unwanted shapes. I have used the Selection Tool in the example images to create a selection marquee around part of each unwanted shape to give you a guideline for what shapes should be deleted.

Select and delete the remaining upper-right corner of the rectangle

Select and delete the "middle" ring fragment

Select and delete the remaing bottom-left corner of the rectangle

If you deleted the correct unwanted shapes, you should now have the shapes for an RSS symbol!

RSS icon outlines

Part 2 of this tutorial will walk-through applying stroke and gradient fills to our shape to achieve this…

RSS icon color

Stay tuned for Part 2!