Design a quick logo or Web button


    Adobe Illustrator provides a variety of tools for creating basic geometric shapes, as well as hundreds of professionally-designed symbols. Follow along and learn how to use shapes and symbols as building blocks for artwork.

    Basic shapes and symbols in Illustrator can be easily modified to become customized buttons and artwork for your projects.

1. Draw a shape.

    Hold the mouse down on a shape tool in the toolbox, and select the shape tool you want to use. Then drag in the document window to draw the shape.

    We selected the Ellipse tool and held down the Shift key while dragging to draw a circle. Holding down the Shift key tells Illustrator to constrain proportions. For example, you can use the Shift key with the Rectangle tool to draw a square.

    Holding down the Shift key while dragging with the Ellipse tool to create a circle

2. Fill the shape with color.

    Click the fill box in the toolbox. This tells Illustrator that you want to apply color inside the shape rather than to its stroke (or outline). Then click any swatch in the Swatches palette to fill the shape with color. (If the Swatches palette isn't showing, choose Window > Swatches.)

    If you don't like any of the default colors in the Swatches palette, there are several other ways to select a color. Double-click the fill box in the toolbox to select a color using the Color Picker, or choose Window > Color to select a color using the Color palette. (See Selecting colors.) Or click the triangle icon at the top right corner of the Swatches palette, and choose a swatch library from the Open Swatch Library submenu. (See Creating swatch libraries.)

    Filling the circle with a color from the Swatches palette

3. Change the shape's stroke weight.

    If the Stroke palette isn't showing, choose Window > Stroke. In the Stroke palette, type a different value in the Weight text box, and press Enter or Return to apply the change.

    We increased the stroke weight to 3 points. Although we decided to stick with a black stroke, you can change the stroke color by clicking the stroke box in the toolbox and selecting a different color. (See Applying color using the toolbox.)

    Modifying the circle’s stroke

4. Place a symbol instance.

    If the Symbols palette isn't showing, choose Window > Symbols. The Symbols palette displays a variety of default symbols; however many additional symbols are available to you through symbol libraries. To open a symbol library, click the triangle icon at the top right corner of the Symbols palette, and choose an option from the Open Symbol Library submenu.

    Once you locate the symbol you want to use, drag it from the palette into the document window. The placed symbol is called a symbol instance. We used the Home symbol from the Web Icons symbol library.

    Dragging an instance of the Home symbol (from the Web icon library) onto the work area

5. Resize the symbol instance.

    Depending on the size of the symbol instance, you may want to make it larger or smaller. First select the Selection tool in the toolbox and click the symbol instance. Then drag one of the corner handles on the symbol instance to enlarge or reduce it. As with drawing shapes, holding down the Shift key as you drag causes Illustrator to constrain the proportions of the symbol instance.

    You can also use the Scale tool or the Transform palette to resize selected objects in the document window. (See Scaling objects, strokes, and effects.)

    Dragging with the Selection tool to resize the symbol instance

6. Align the symbol instance and the shape.

    Make sure the Selection tool is still active in the toolbox, and drag a marquee around both the shape and symbol instance. Then choose Window > Align to show the Align palette.

    The Align palette contains buttons for aligning and distributing objects. First, we clicked the Horizontal Align Center. Then we clicked the Vertical Align Center button.

    Aligning the symbol within the shape you created

7. Experiment with design variations.

    Now that you have a basic design, experiment with different variations. For example, if you want to apply a different fill and stroke to the symbol instance, select the instance in the document window and click the Break Link to Symbol button in the Symbols palette. Once the link to the symbol is broken the object is no longer a symbol, so you can apply different fills and strokes to it.

    We went one step further by applying a variety of gradients to our design. First, we drew another circle, chose Object > Arrange > Send Backward, and realigned all three objects using the Align palette. Then we filled the objects with a default gradient from the Swatches palette. Then, we selected just the outer circle and used the Gradient tool to reverse the direction of the gradient. (See Using the Gradient palette.) Our final design will make a great Web button, so we used the Save For Web command to save it in GIF format. (See Optimizing images.)

    Break the link to the symbol instance so you can apply various fills and strokes, including gradients, to the components.