This is a typography tutorial for beginner level users of Illustrator. I am using Illustrator CS2.

First, type the text that you want to stylize onto your artboard. Because I am feeling in a superhero kind of mood today, I decided I would play with the word SUPERMAN. In order to make things easier down the road, set the fill color to anything besides black.

I want to style my text to appear strong and fast (like Superman), as if I am standing still and it is flying by me. So, in sticking with our mood, I am going to play with my text a little before applying the 3D effect. This step is not necessary to create your 3D text, but it will give it even more perspective.

Go to Object > Envelope Distort > Make with Warp (shown below). The Warp Options dialogue box below shows the settings I used to get my desired look. If you are going for a different look with your text, play around a little. (If you check the Preview box along the right you can click around from Warp to Warp and change your settings while seeing a preview of them without committing to them.)

Here is what my text looks like with the above Warp applied.

Once you have applied the desired Warp, it is time to apply the 3D effects to the text. Go to Effects > 3D > Extrude & Bevel. Listed below are the settings I am using for my text.

Here is what my text looks like with the above 3D Effect applied.

In order to edit and tweak the 3D text, we will need to Expand and Ungroup. First, go to Object > Expand Appearance.

Once the text has been expanded, go to Object > Ungroup to separate the pieces so that we can edit them individually. Note: You may have to repeat the Ungroup steps a few times before all the groups have been separated.

Select the “front face” of each letter and apply a new fill color/effect using your Color Palette. I chose a linear gradient and used colors that create the look of a reflective surface.

Here is my final 3D SUPERMAN text.

---

BONUS TUTORIAL!
The Reverse Effect ~ Let’s go over how to reverse the look of our 3D text, while reviewing some other basic tips and tricks.What we want to do is select all of the gradient “fronts” and make them blue and select the blue drop effect and apply the gradient.The first thing we want to do is save our gradient to the Gradient tab in the Color Palette so that we do not have to build it again when reapplying it to another shape. Select any of the “fronts” so that the gradient is showing as the current selection Fill in your Toolbox as shown below. Next select the Gradient tab in your Color Palette, also shown below. Now simply drag the Fill from you Toolbox into the Gradient Palette.To make our lives easier, we can put the fronts and the drag effect each on its own layer. For a review on how to do this, see my tutorial called “Shortcut to Moving an Object to a New Layer”Now that we have each group on a different layer, we can easily select only the part of the text that we want to work on. First, click on the little circle to the right of the drop effect layer in the Layers Palette to select the entire layer.

Now click on the new gradient swatch you just placed in the Gradient Palette.

Next, select the fronts layer by clicking the little circle and change the fill to blue or whatever color you were using.

Now you have a reverse version of the 3D text we created above.

There are all kinds of fun ways to spice up your text. MAKE IT MORE THAN WORDS…MAKE IT ART!

This is a fun tutorial for beginner level users of Illustrator. I am using Illustrator CS2.

First, using your Ellipse Tool, create an elongated ellipse like the one shown below. This is the first petal of our flower.
The Ellipse Tool looks like this:

Next, with the petal selected, click on the Rotate Tool in your tool box.
The Rotate Tool looks like this:

Once you have clicked on the tool icon, hold the Option(mac)/Alt(pc) keyas you move the cursor to the point you want your petals to rotate around and click. You will see the light blue rotation point on your artboard as shown below.

Once you select your rotation point, the Rotation dialogue box will appear.

Select the angle at which you want your petals to rotate around the rotation point (I am using a 30 degree angle) and hit COPY. Do not hit OK as this will simply rotate your original petal rather than adding a new one.

Next, add the rest of your petals by hitting Command(mac)/Control(pc) and D keys as many times as necessary. You can also repeat this step by going to Object > Transform > Transform Again.

Now that you have all your petals in place, create a circle (or a shape of you choice) and place it on top in the center.

There you have your quick and easy flower.

Once you get the hang of the steps, you can get a little more elaborate with your flowers. A few samples of flowers I made using these steps can be seen below.

Have fun with it!

This is a web graphics tutorial for beginner level users of Illustrator. I am using Illustrator CS2.

A common way to give web buttons a little perspective and visual interest is to give them the look of a liquid filled bubble. It is a quick and easy process! For this tutorial, I am going to create matching red and green bubble buttons, which can be used for a number of actions on your web page: indicating a yes or no answer, start and stop audio, or play and pause video.

First, on a CMYK artboard, create two circles - one red and one green.

Next, place two smaller circles in the bottom half of your red and green circles. These shapes will serve as the highlight areas of the buttons, so make the fill color of these new circles a lighter shade of the same or similar color.

Now, select each set of circles individually and create a blend. To do this go to Object> Blend > Make.
(You can also do this using the blend tool from your toolbox.)

Once you have made your blend, your circle should look something like this:

Next, we need to add a reflection to create the illusion of a liquid texture and add some dimension to our buttons. Create an ellipse and place it inside each circle towards the top. Fill the ellipses with a white to black gradient, making sure that the black is true black (C=100%, M=100%, Y=100%, K=100%). (If you need help with creating a gradient, email me at kelly@rdesignonline.com.)

Now, open your transparency palette (Window > Transparency) and change your Transparency Mode to Screen in the pull down menu. Depending on your button colors, you may want to adjust your transparency % as well.

Once you have made the your changes in the Transparency Palette, your finished buttons should look something like this:

Now you can take your bubble buttons and label them for use on your website. Listed below are some sample uses of this pair of buttons. Enjoy!

Wise designers know that using layers in your Illustrator artwork makes life a lot easier. Keeping objects on separate layers allows you to lock objects, turn visibilty on/off, and makes selecting and editing an individual object fast and uncomplicated. Here is a simple tip on moving objects from one layer to another using the Layers Palette.

We will begin with the numbered shapes seen below.

These three shapes were drawn onto one layer, as indicated in the Layers Palette below. We want to give each of the stars its own layer, so we will need to create two more layers. To create a new layer, click on the Create New Layer icon at the buttom of the palette window.

Illustrator will automatically name layers by number, as shown below. It is a very good idea to name your layers, using a brief description of what is contained in each layer. This will make finding and editing individual pieces of your design quick and easy. Naming your layers becomes even more important if the artwork is a collaborative effort and more than one artist will be working with the file.

To name a layer simply double click on the layer name in the Layers Pallete and a Layer Options window will pop up. Here you will type in your new layer name. (You can also choose a layer selection color and turn on/off several other tools.) For the purpose of this tutorial, we are only concerned with replacing the layer name.

I have named my three layers according to the shape I want be contained in each layer, but if you look closely you can see that all three stars are still on layer #1. Now I want to move shape #2 and shape #3 to thier corresponding layers.

First, select shape #2 using the selection tool. In the Layers Palette, you will notice that the star #1 layer is highlighted, indicating the layer in which the currently selected item appears. You will also see a small box (blue, in this case) to the very right of the layer information.

With your cursor, drag and drop the small blue box into the star #2 layer. Star #2 should now be the highlighted layer, indicating that the selected shape is contained in the new layer.

Now try selecting shape #2 AND shape #3 using the selection tool. You will notice that, because they are on two different layers, the selection guides around each shape is a different color. In the Layers Palette, the color of the little box to the right corresponds to the selected object that is contained in that layer. In this case, shape #2 has red selection guides indicating it is part of the layer with the red box while shape #3 has blue selection guides indicating it is part of the layer with the blue box. I want to move shape #3 up to the star #3 layer, so I simply drag and drop that little blue box up to the desired layer.

Now you can see that shape #3 is on layer #3 and is now a part of the green layer, indicated by the green selection guides and small green box.

VIOLA! Each shape has its own layer. And all by simply dragging and dropping.

Do yourself a favor. Make a habit of using layers and developing a sensible layer naming system. It will make your life and that of your collaborative colleagues so much more efficient. And now you have a quick and easy was to use the powerful organizational tool that is LAYERS.

You just created some truly awesome vector art in Illustrator. NOW WHAT?

Of course, you will need to save the file(s) so that you can use, send, and edit your artwork down the line. But before hitting that save button, you will need to make some important choices. This is a basic rundown of things to consider when saving your work in Adobe Illustrator.

First, let’s look at the Save commands essential to saving an Illustrator document. The basic Save commands are found in the File menu. You will see that right off the bat you have several choices as to which Save command best suits your needs. The basic Save choices are:

Save - This is the quickest of the Save commands, but it is only applicable to files that have already been saved(thus, have an existing name and location). This will overwrite the previous document with any changes made since being opened. The overwritten file will be saved in the exact location from which it was opened. Because the name, file type, and location are already known, you will not be asked to specify any options when using the Save command.

Save As - Use when saving a file for the first time, or if you want to change the file format and/or location of an existing file. You will be required to specify several options, including file name, file type, save location and program version. Because the Save As command is used something like 90% of saves, we will go over it’s use in more detail below (see figure 2a & 2b).

Save a Copy - Very similar to Save As, this command is used to simply save a new copy of the current document in a different location than the original file. This function is useful when you will be using different versions of the same artwork for different medium (ie. print and web).

Save a Template - Allows you to save a file as a template, to be used again and again as the starting point for documents that share common design elements.

Save a Version - Used to save a version of a file to a Version Cue Workspace. For more information on Version Cue, you can visit http://www.adobe.com/products/creativesuite/versioncue/.

Save for Web - As the name implies, this command is used to save Illustrator vector art that is intended to be used on the Web. Here you can save your vector artwork as raster images, such as JPGs and GIFs. For some very useful information on the differences between the various image file types, and when they should be used, check out Raffi’s blog titled “.gifs, .tifs and .jpgs…oh my!”.

(Only the choices applicable to the current file will be available for selection. Those that do not apply will be grayed out on the list, like Save a Version in figure 1.)

---

‘SAVE AS’ IN MORE DETAIL
Referring to the image below (figure 2a), we will go through the initial options presented when using the Save As command.

1. Save Location - Indicate where you want the file to be saved. You can choose to save the file to a location on your hard drive, a network server location or a storage device connected to the computer.

2. File name - Create a unique name for the file. The portion of the file name that appears after the dot is the file type extension and will be determined once a selection is made on the following option (3).

3. File Format - Select a file type from the list of Illustrator’s “native formats”. Saving as a native file format will preserve the Illustrator vector data and allow for editing. In figure 1a, the pull down list of file format option can be found by following the gray arrow. Before choosing a file format, a brief description of each of the native formats is necessary.

Illustrator Document (.ai) - Standard Illustrator format. Totally editable in Illustrator but not an acceptable format to be used in most other programs or applications.

Illustrator EPS (.eps)- Encapsulated PostScript. Very useful because it can be imported into most software packages (including raster programs) but maintains the vector data.

Illustrator Template (.ait) - Useful if the layout/basic design of the file will be used repeatedly as the framework for other documents.

Illustrator PDF (.pdf)- Portable Document Format. Allows the artwork to be viewed by anoyone with the standard (and free) Acrobat Reader application installed on their computer.

SVG (.svg) - Scalable Vector Graphics. High quality graphics, useful when the artwork is being used as part of an interactive Web project. The drawback is that the file size is very large (which poses problems in Web files).

SVG Compressed (.svgz) - A compressed version of a standard SVG file, reducing the file size by 50%-80%. However, the vector art will no longer be editable.

4. Save Button - Once you have selected a save location, named the file and selected the appropriate file type hit the Save button. This will open the next dialogue box, Illustrator Options, which can be seen in figure 2b.

1. Illustrator Version- If you are using a later version of Adobe Illustrator to create a file and need to be able to open and edit the file on an earlier version of the program, you will need to “save the document down” in order to do so. Select the lowest version for which the file needs to be readable from the drop down list, keeping in mind that the lower version of Illustrator may not have all of the tools and functions required to render all of the fancy filters and effects you may have used to create your file. Only save the file down if necessary for editing purposes. If you just want to be able to view a file on a computer with an older version of AI, save a copy of the file as a PDF for viewing.

2. Fonts- Indicate at what point a font used in the document should be embedded within the file (which will increase the file size). For example, the setting in figure 2b is for 100%, meaning that every character in a font set would have to be used somewhere in the document in order for me to require that the font be embedded.

3. Options - Tidbits of info about how you would like the file saved. A quick review of these options:

Create PDF Compatible File - Check this box if you want to be able to use your Illustrator file in conjunction with other Adobe programs.

Include Linked Files - Embeds any files linked to the document.

Use Compression - Compresses the document data. Deselect if you are experiencing slow save times.

Embed ICC Profiles - For color managed files.

4. Transparency - Indicates how to handle transparency when saving. Only applicable to files saved to AI 9 or earlier.

5. Errors- Illustrator will alert you to any potential problem with the selections you have made for the save.

Once all of the appropriate selection have been made, Click on the OK button to save the file to the location you have chosen.