When designed creatively and effectively, icons are a great way to convey a simple, universal message without having to use words.
You might be thinking to yourself…how can I find some cool free icons to use in my projects? Easy…create your own! Let’s get our design fingers ready, our genius minds in gear and create some awesome icons.
WHAT YOU'LL CREATE
Each of the icons we’ll be creating won’t require any intense drawing skills, since they’ll all be created by merging different shapes that are already available in Adobe Illustrator.
We’re going to create three iD youth summer camp icons; an iD Texas Summer Camp icon, an iD Arizona Summer Camp Icon and a fun, Summer icon. Here’s an example of the style of icons that we’ll be creating and the final result that you’ll have after this tutorial:
TOOLS OF THE TRADE
There will be four main tools that we’ll be using in Illustrator for this project. These will be:
The Shape Tool: This tool gives you the option to create all different kinds of vector shapes. Unlike Photoshop, where you create raster shapes, vector shapes can be enlarged or minimized within Illustrator or another vector program without losing their quality.
The Direct Selection Tool: This tool allows you to select a specific point or path on a shape. Each shape you create will have multiple points and paths, which will combine to make one final shape.
The Selection Tool: When you want to move an entire shape rather than a specific point or path on a shape, you’ll use this tool. It picks up your entire shape and lets you move it around your screen to another location.
The Fill and Stroke Tool: You’ll use these two tools to choose which colors you want your shape to be. The Fill Tool will be the color of the inside part of the shape, while the Stroke Tool will be the color of the outside stroke of the shape. 
The Pathfinder Palette: This palette allows you to combine and subtract different shapes to one solid shape. Since this is an intermediate tool, we’ll be getting more in depth later on in this tutorial.
PREPPING YOUR WORKSPACE
Since it’s sometimes difficult to draw things from memory, it can be helpful to grab images off of the web so that you can get an idea of how something looks. Below are the starting images that we’ll be using. You may want to right click and save them to your computer so that you can bring them into Illustrator.
Open Illustrator and create a new 8.5” tall x11” wide web document. Then bring in the image that you just saved, by going to File>Place>Select the image you want to bring in.
Just like Photoshop, Illustrator has a Layers Palette. It’s always a good idea to name your layers for better organization. To rename a layer, double-click on the text that reads Layer 1, then re-name it “Original Clipart”. Now lock the layer and create a new one labeled, “Icon Circles”.
Now let’s create our circle for the icon. Click and hold on the Shape Tool to select the Elipse Tool. Then draw circle that has a black fill color and a 10-point green stroke color.
Copy and past three more icons to use later on for the other icons. Lock this layer and create a new layer, called “Icon Artwork”.
SHAPE UP: CREATING THE TEXAS STAR SUMMER CAMP ICON
What we need to do now is figure out which shapes will make up the Texas icon. Looking at our image of the star , we can pick out two shapes. The circle shape and the five star shapes.
Using your ellipse tool again, draw a circle in one of the four icon circles you drew previously. (Remember you’ve locked the “Icon Circles” layer, so your new shapes shouldn’t interfere with the original image.)
Now go to your Shapes Menu and click on the Star Tool. Change the fill color and stroke color to white and draw a star inside the circle you created in the previous step.
Change your fill color and stroke color to green and draw four, tiny stars to surround the star and circle you just created.
And you’re done with your first icon! How easy was that? Think you’re up for the next icon creation challenge?
FEEL THE HEAT: CREATING THE ARIZONA SUMMER CAMP ICON
To create the cactus icon, we’ll be using the Rounded Rectangle Tool from the Shape Menu. Click anywhere on your artboard to bring up your Options Menu and then change the Corner Radius of your shape to 25 px.
Now using the same shape multiple times in different sizes, recreate the cactus so it looks similar to the one below:
It’s time to use the Pathfinder Tools! This menu of tool can be a lot of fun and really helpful. You’ll see why in this step. First select all of the shapes that make up your cactus. An easy way to do this is to click hold the Shift Key, while selecting each shape with the Selection Tool (V).
With all of your shapes selected, go to the Pathfinder Menu. (If it’s not open, you can go to Window>Pathfinder.) Then click on the Unite Tool. (It will be the first one on the top row.) Your cactus should now be one, solid shape.
In design, the details make all the difference. So I’ve changed the color of my cactus to be green on the inside and have a white border. Then I added the cactus needles by using the line tool. I also added a slight highlight by drawing another thin rounded rectangle in white and setting its Opacity to 60%.
ADD & SUBTRACT: CREATING THE SUMMER CAMP ICON
The Summer Camp icon is going to sharpen your Illustrator skills even more. First we’ll create the bucket portion of the icon. To get started we’re going to draw a green rectangle. Use the Direct Selection Tool (A) and click on the bottom right corner of the rectangle. Then use the left arrow key on your keyboard and move the Shape Point over about 5 spaces. Now, use this same process to move the other bottom point in.
Next, change your fill color to black and your stroke color to green and a thickness of about 2. Draw an oblong oval and place it on top of the shape you made in the previous step. Create another oval with a green fill and stroke color and place it at the bottom of your main shape.
To create the bucket handle, draw a circle with no fill and a white stroke. When you draw a circle in Illustrator, the circle is made up of four paths (or lines). Use the Direct Selection Tool to select to two paths on the top of your circle and delete them so you have half a circle left.
Now move your half circle over your bucket so that it looks like a handle hanging down. Depending on the size you made your circle, you may need to make it bigger or smaller to look correct. Let’s group all of the shapes that make up your bucket by selecting them all at the same time and going to Object>Group.
To create the sand castle, draw another green rectangle and this time, move the bottom corner points out about 3 spaces. Duplicate the shape you just modified and place it on top of the first one and make it a bit smaller so it looks like a tier on our sand castle.
Create another half circle, and place it in the bottom, middle of your castle to make the door. Then draw two squares on the first tier and a single square on the second tier for the castle’s windows.
To add the flag on top, use the Line Tool and draw a short, white line on top of your castle. This will be the flag pole. To make the flag, draw a long, green horizontal rectangle. Next we need a triangle so that we can create the two points on the right side of the flag.
There’s not a triangle shape in our Shape Menu, but there’s an easy way to create one. Click and hold on your Shapes Tool and choose the Polygon Tool. Then click anywhere on your artboard and the Polygon Options Menu will pop up. Change the Sides Setting to be 3. Click OK and a triangle will appear on your screen.
Resize your triangle to be larger than the rectangle you just drew. You’ll begin to see the shape of the flag if you place it correctly.
With all of your shapes selected, go to the Pathfinder Menu. Then click on the Minus Tool. (It will be the second one on the top row.) Your new shape will look like the shape of a flag. Pretty neat huh?
Your new shape will look like the shape of a flag. Pretty neat huh? Place it on top of the small line that you made for your flag pole. You’ll probably need to resize it so it looks proportional to your sand castle. Once you’re satisfied with how it looks, you’ll want to group all of the shapes of your sand castle together.
WHEN ALL IS SAID & DONE
You can see that making icons really isn’t too difficult. You’ve just created three highly graphic icons by using simple shapes like rectangles, circles and stars. If you want, you can even bring them into Photoshop and add some cool effects like a glare or a drop shadow. Like any graphic design project, the possibilities are endless.
Now that you have an idea of how modify shapes into images for your icons, it’s easy to go out and create your own. A good rule of thumb for icons is to keep them simple. Many icons are resized to be very small on websites, so the less detail you can get away with the better.
Until next time iD readers…here’s to hours of icon creation fun.
If kids and teens don't want to wait until next time, Photoshop tutors and graphic design courses are now available—students can learn the fundamentals of drawing, while editing photos or images, and creating a digital portfolio.
