Icon Instructions

ICON DESIGN STEP-BY-STEP

Follow each step in order.

THROUGH STEP 7, WORK ONLY IN BLACK AND WHITE!

1

Use the Shape tool to create a 6” square box with an empty fill and a black border. Lock the layer it is on and add another layer. As you work, remain conscious of filling the background space.

2

SAVE AS  yourname.icon.ai

3

Select the type tool, click anywhere in your document and type in your initials. This may be two or three or even four letters.

4

Change the typeface and size of the type using either the type panel or control panel, which will appear at the top of your screen as soon as you select the type tool. If the type panel isn’t showing, go to the Window Menu and Select Type>Character.

You can leave all the letters in the same typeface and size or change them inidividually by dragging across a letter with the type tool and picking another font.

You can also change the size of the type by using the Free Transform tool and dragging one of the handles of the type block. To keep the same aspect ratio (relationship of height to width), hold down shift while dragging.

HINT

It is a good idea to duplicate your monogram before converting it to outlines. If you want to scrap the alterations you are making, this make it easy to go back to the original type.There are three ways to do this:

  1. Select the type block with the selection tool and Copy and Paste it. Then drag the duplicate to the side.
  2. Select the type block with the selection tool, hold down the Option key, and drag. This will make a copy. You can keep your backup copy outside the document on the pasteboard.
  3. You can also duplicate the layer with the type on it. Make a new layer. Select the type. On the layer panel, you will see a small colored box on the active layer (the one with the type selected). Hold down the Option key and drag that small box to the new layer. Make one of the layers invisible to avoid confusion. Use that layer only to store backup objects. (To make a layer invisible, click on the eye icon.)

5

Select your type block with the Selection Tool (black arrow) and change the type to objects that can be edited. Type>Create Outlines.

6

Separate the letters from each other by selecting them and then ungrouping them Object>Ungroup.

SAVE FREQUENTLY

7

You can now move the letters around individually or as a group, change the fill and stroke characteristics, and reshape them in many ways.

Try several methods and use the best result:

point by point (Direct Selection tool – the white arrow)

with envelope distort (Object menu)

with distort (Filter menu)

rotate them

move them to the front or the back (Object>Arrange)

REVISE OFTEN

Keep it simple! Keep it simple! Keep it simple!

Design is as much an act of spacing
as an act of marking. – 
Ellen Lupton

8

Once your letters look the way you want, SAVE again and then SAVE AS yourname.color.ai

Now add color, outlines, pattern. Experiment with the Appearance Panel.

On your bottom layer, fill in your background or change the border (or both). You can add other shapes as well. You can use more than one layer to keep organized. BUT KEEP IT SIMPLE!

9

Once you are happy with your design, check to see how it looks at app size.

SAVE again and then SAVE AS yourname.app.ai

Unlock any locked layers. Select All (Select menu or Command-A). Group the objects using the Object menu or Command-G. They will all now be on one layer.

Make multiple sizes of your icon in four steps:

  1. Duplicate your grouped icon. (Option+drag or copy and paste)
  2. With your icon selected, double-click on the scaling tool in the toolbar. Type in 33.3% uniform reduction. Also be sure to check that effects are scaled if you are using them. This will reduce your 6″ square to a to 2″. See if  you need to make adjustment to retain the visual effect you want.
  3. Select your 2″ version and duplicate it.
  4. Double-click the scaling tool again, and type in 25%. This will reduce your icon to 1/2″ square. See if this works. If not, go back and adjust.

10

SAVE again and make a copy of the entire document using SAVE AS yourname.gray.ai

11

Change the colors to black, white and gray. Edit > Edit Colors > Convert to Grayscale. Adjust this version so the design is clear and strong.

Use the Direct Selection Tool (White Arrow) or Isolation Mode to work with individual elements.

12

HAND IN  TWO FILES, each with all three sizes on one sheet.

Color version

Grayscale version