Advertisement
  1. Design & Illustration
  2. Fan Art
Design

What Time Is It? It's Create Icons in Adobe Illustrator Time!

by
Difficulty:IntermediateLength:MediumLanguages:
Final product image
What You'll Be Creating

Mathematical! Create three fantastic icon designs featuring the Adventure Time characters Jake, Finn, and Princess Bubblegum. We'll use simple shapes to bring each character to life, ready for desktop or mobile app use. Simple touches like long gradients and outlines really make these icons pop! Open up Adobe Illustrator CC and let's get going.

1. Prepare Your Document

Step 1

Create a New Document of whatever size you're comfortable working in; I typically create an icon set within a document of 800 px square. Use the Rectangle Tool (M) to draw a large rectangle overlapping your entire Artboard. Fill your rectangle with a Radial Gradient in the Gradient panel going from medium gray to dark gray.

Create a background with a radial gradient

Step 2

Adjust your radial gradient's radius with the Gradient Tool (G) so the radius is more elliptical than a perfectly round circle.

Adjust your gradients radius

2. Jake the Dog: Basic Shapes

Step 1

Draw a mustard yellow square with the Rectangle Tool. Pull the Live Corners inward in order to round out the rectangle. If you're not using Adobe Illustrator CC, you can use the Rounded Rectangle Tool instead.

Round out the rectangle

Step 2

Next, we'll draw Jake's eyes. Using the Ellipse Tool (L), draw a black or dark gray circle. Draw a smaller white circle within the black one, making sure to place it closer to the upper right than the center. Repeat with the right eye.

Draw circles for the eyes

Step 3

Let's work on Jake's muzzle.

  1. Start with three rounded rectangles. Overlap either side of the horizontal rounded rectangle with the two vertical ones. Make sure the vertical ones are rotated outward slightly.
  2. Unite all three shapes in the Pathfinder panel. Using the Pen Tool (P) or Pencil Tool (N), draw a shape that overlaps the upper left to smooth it (see below). The corner is too severe as it is. Select both shapes and hit Minus Front in the Pathfinder panel.
  3. Repeat with the lower left of the design: draw a shape that smooths out the lower left corner and hit Minus Front in the Pathfinder panel.
  4. You can either repeat the previous steps on the left side, or reproduce the left half for the right.
  5. Overlap the right half of your design with a large rectangle. Hit Minus Front once again in the Pathfinder panel. 
  6. Copy (Control-C) and Paste (Control-V) the remaining left side. Reflect the copied object over a Vertical Axis and line up the right side with the left. Unite the two shapes in the Pathfinder panel.
Drawing Jakes muzzle

Step 4

Place the muzzle between the eyes, overlapping them slightly. Draw an ellipse for the nose and set the outline of the muzzle shape to 2–4 pt in the Stroke panel.

Add the muzzle and nose

Step 5

Let's work on the mouth and teeth.

  1. Use the Pen Tool to draw a red-brown smiling mouth and place it beneath the muzzle in the Layers panel.
  2. I drew a half circle for the tongue and set the fill color to pink. Each tooth is a rounded rectangle. 
  3. Copy and Paste three tooth shapes across the top of the mouth. Select the teeth and mouth objects. With the Shape Builder Tool (Shift-M), select the portions of the teeth that do not intersect with the mouth shape. I like to just drag my tool across all of those shapes so they merge, disconnecting from the rest of the teeth.
  4. Delete the non-intersecting portions of the teeth and add outlines to the teeth, mouth, and tongue of 1–3 pt.
Draw the mouth and teeth

3. Jake the Dog: Adding Gradients

Step 1

Draw a couple of long rectangular shapes with the Pen Tool from the muzzle to the bottom right corner. Apply a Linear Gradient to the shapes going from yellow ochre at 100% to 0% Opacity in the Gradient panel.

Add long line gradients

Step 2

Select the base rectangle and apply a Linear Gradient going from yellow to mustard yellow, with the darker of the two colors in the lower right corner.

Add a gradient to the main shape

Step 3

Select and Group (Control-G) your icon components together. Copy and Paste the base rectangle over your icon design. Select both and Make a Clipping Mask (Control-7) so your long gradients don't extend beyond the icon design any more.

Make a clipping mask

Step 4

Place a dark yellow rectangle behind the icon and move it downward slightly to give the icon some added dimension. Group the clipping mask group and new rectangle together. Select the group and apply a Drop Shadow by going to Effect > Stylize > Drop Shadow. Add the following attributes:

  • Mode: Multiply
  • Opacity: 25%
  • X Offset: 4 px
  • Y Offset: 6 px
  • Blur: 1 px
  • Color: Black
Add a drop shadow to your icon

4. Finn the Human

Step 1

Copy and Paste the base rectangle from the Jake icon. Set the gradient fill to white to light gray. Add the drop shadow to the base shape as we did with the previous icon.

Create the same base shape for Finn

Step 2

For Finn's face, draw a peach-colored ellipse in the center of the icon. Set the fill color to light peach to medium peach in the Gradient panel. Set the stroke color to the same black or dark gray as we used in the Jake icon with a weight of 2–3 pt.

Draw Finns head inside of the icon

Step 3

Two small circles form Finn's eyes. I added a Linear Gradient in each going from dark gray to black. For the mouth, I drew a curving shape with the Pencil Tool. Imagine this to be a jelly bean or kidney shape. You can also draw it with the Pen Tool if you find it more comfortable. 

Draw the eyes and mouth

Step 4

Like Jake's teeth, Finn's are also little rounded rectangles. He has a gap in his teeth, so one is on the left and two are overlapping each other on the right. As with Jake's mouth, use the Shape Builder Tool to delete the non-intersecting tooth components from the mouth shape.

Draw the teeth

Step 5

For the outlines, Copy and Paste each of the teeth. Set the copies to black with black outlines and Align them behind the white teeth shapes. Then, draw a half circle or half heart for the pink tongue.

Alternative outline technique

Step 6

As with the Jake icon, draw a rectangular gradient shape going from the face to the lower right corner of the icon. Place it behind the face components in the Layers panel. Use a Clipping Mask to clip the gradient shape to the rectangle.

For Finn's shirt, draw a blue rectangle over the lower part of Finn's icon. Use the Shape Builder Tool to delete the non-intersecting component of the icon. Apply a Linear Gradient of bright blue to medium blue to the shape.

Add a gradient and shirt

Step 7

Let's add a couple final touches to this icon. Draw a dark blue rounded rectangle behind the rest of the icon to add dimension to the icon itself. Use the Ellipse Tool to draw a light peach ellipse on the top of the face. Make sure the gradient goes from light peach at 100% to 0% Opacity.

Complete the Finn icon

Step 8

Make sure each icon is Grouped together with its own components. Also make sure the strokes in each icon are of a similar width versus the variety you may see below. Let's move on to our final icon, Princess Bubblegum!

Jake the dog and Finn the human

5. Princess Bubblegum

Step 1

Draw a rounded pink square. Overlap the square with a light pink circle on the lower half of the icon. 

Draw a square and circle for the start of Princess Bubblegums face

Step 2

Overlap the top of the face with a rectangle and hit Minus Front in the Pathfinder panel to create her blunt fringe. 

Cut the top of the face off to give PB her flat bangs

Step 3

For PB's crown, draw a long, thin, yellow rectangle across the top of the head. Draw a small vertical rectangle in the center heading upwards. Then, draw a yellow circle to top it all off.

PB's eyes are two small black circles and she has a small blue circle in the center of the top of her crown. Finally, her neck is a thin pink rectangle under the face shape that ends at the bottom edge of the icon.

Give PB a crown and cute face

Step 4

Unite the face and neck shapes together in the Pathfinder panel. Add an outline to the face and the yellow crown of 2–4 pt.

Add outlines to the main shapes

Step 5

Using the Pen Tool, draw a half circle or a soft curve for the mouth. Set the fill color to null and the stroke to 2–3 pt Weight with Rounded Caps in the Stroke panel.

Draw a simple mouth

Step 6

Finally, let's add some simple gradients and gradient shapes.

  1. The crown has a yellow to yellow ochre Linear Gradient.
  2. The face is pink to medium pink.
  3. There are two gradient shapes: one under the crown and one under the face. Both are dark pink at 100% to 0% Opacity. 

As with the other icons before this one, use a Clipping Mask to clip icon components and add a Drop Shadow to the final icon design.

Add final gradients

Oh My Glob, You're Done!

Gather your icons together into a neat little row because you're ready to go. Add more characters to your set like Marceline, B-MO, and my favorite, Lumpy Space Princess. There are so many fantastic characters hanging out in the Candy Kingdom, ready to be turned into icons for your desktop or mobile dashboard. Share your creations in the comment section below!

Final icon set
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.