Tutorial: Create an Easily Customizable Candy-Like Icon in Adobe Illustrator

In this tutorial we will explain step-by-step how to create an easily customizable, candy-like icon using Adobe Illustrator. The icon will be built using a single, solid color allowing it to be quickly adapted to your needs whether you’re using it for a website button, to spice up your logo, or something to put on promotional items.

Step 1: Create a New Document

Start by creating a new document.
• Size: Letter
• Orientation: Horizontal
• Document Color: RGB ( for web ) or CMYK ( for print )

Step 2: Create the Outer Circle

Select the Ellipse Tool and draw a 2in x 2in circle. Any solid, dark color can be utilized but for the purposes of this tutorial, we will begin by creating our initial color as a Twitter Blue swatch ( RGB: 28, 168, 231 ).

Step 3: The Outer Circle Gradient

Select the Outer Circle and copy/paste it in front ( Command+C, Command+F ) then Offset ( Object > Path > Offset ) the path by -.08in. When creating an offset path, Illustrator maintains the original path as well as the offset path. We will be needing both. Select the outermost Outer Circle copy as well as the Offset path and open the Pathfinder palette. Select “Subtract from the shape” followed by the Expand button finish by coloring the remaining outline white to distinguish it from its background.

Step 4: The Outer Circle Gradient

Create two swatches: White swatch ( RGB: 255, 255, 255 ) and Black swatch ( RGB: 0, 0, 0 ) and add them to the Swatches palette. Open the Gradient palette and add the White swatch to the left gradient marker and the Black swatch to the right gradient marker. With the Outer Circle Gradient created in step 3 selected, choose the Gradient tool from the tool bar and drag the gradient line from the upper selection point to the lower selection point.

Step 5: The Outer Circle Gradient

Select the Outer Circle Gradient and copy/paste it in front ( Command+C, Command+F ). Select the newly copied Outer Circle Gradient and reverse the gradient pattern by choosing the Gradient tool from the tool bar and dragging the gradient line from the lower selection point to the upper selection point. Select the Gradient palette and adjust the gradient slider to a Location of 15%.

Step 6: The Outer Circle Gradient

Select both the foreground and background Outer Circle Gradient shapes and open the Transparency palette. Reduce the transparency of both circles to 60%. Complete the look by opening the Transparency palette menu options and select “Make Opacity Mask”.

Step 7: The Upper Glare

Select the original, Twitter blue Outer Circle and again offset ( Object > Path > Offset ) the path by -.08in. While still selecting the new offset path again offset it by -.05in. In the example below we have colored both offset paths for demonstration purposes.

Step 8: The Upper Glare

Select both the Upper Glare Offset paths and open the Pathfinder palette. Select “Subtract from the shape” followed by the Expand button. Color the remaining circle white to distinguish it from its background.

Step 9: The Upper Glare

Select the white Upper Glare again and copy/paste it in front ( Command+C, Command+F ). Create a new Grey swatch ( RGB: 179, 179, 179 ) and add the it to the left gradient marker and place the Black swatch created in step 4 to the right gradient marker. Select the Gradient palette and adjust the gradient slider to a Location of 13%. With the newly pasted Upper Glare selected, choose the Gradient tool from the tool bar and drag the gradient line from the upper selection point to the lower selection point.

Step 10: The Upper Glare

Select both copies of the Upper Glare and open the Transparency palette menu options. Select “Make Opacity Mask” to complete the Upper Glare.

Step 11: The Inner Glare

Select the original, Twitter blue Outer Circle and again offset ( Object > Path > Offset ) the path by -.08in. Color the new offset path white to distinguish it from its background.

Step 12: The Inner Glare

Select the original, Twitter blue Outer Circle once again and copy/paste it in front ( Command+C, Command+F ). With the copy still selected select the Scale tool from the tool bar and increase the dimensions to 200%. Adjust the newly enlarged Outer Circle by placing it approximately 50% down and 45% to the right of our icon and set the circle in the foreground ( Command+Shift+} ).

Step 13: The Inner Glare

Select both the Enlarged Outer Circle and the Offset Circle and open the Pathfinder palette. Select “Subtract from the shape” followed by the Expand button and color the newly cut Inner Glare white to distinguish it from its background.

Step 14: The Inner Glare

Select the Inner Glare and copy/paste it in front ( Command+C, Command+F ). Create a new gradient using a dark Grey ( RGB: 51, 51, 51 ) swatch and the Black ( RGB: 0, 0, 0 ) swatch created in step 4. Add the dark Grey swatch to the left gradient marker and the Black swatch to the right gradient marker. With the Inner Glare still selected choose the Gradient tool from the tool bar and drag the gradient line from the left selection point to the right selection point. Select the Gradient palette and adjust the gradient slider to a Location of 30%.

Step 15: The Inner Glare

Select both copies of the Inner Glare, open the Transparency palette menu options and select “Make Opacity Mask”.

Step 16: Add a Drop Shadow

Select the Outer Circle and choose ( Effect > Stylize > Drop Shadow ) from the main menu options. Set the drop shadow options to:
• Mode: Multiply
• Opacity: 89%
• X Offset: 0
• Y Offset: 0
• Blur: 0.03
• Color: Black
• Darkness: 100%.

Step 17: Add an Image

Because our intention was to create a Twitter icon, we have added the Twitter logo for demonstration purposes. The icon is now color changeable with ease by selecting the Outer Circle and adjusting the color.