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 CCand 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.
Step 2
Adjust your radial gradient's radius with the Gradient Tool (G) so the radius is more elliptical than a perfectly round circle.
2. Jake the Dog: Basic Shapes
Step 1
Draw a mustard yellow square with the Rectangle Tool. Pull the Live Cornersinward in order to round out the rectangle. If you're not using Adobe Illustrator CC, you can use the Rounded Rectangle Tool instead.
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.
Step 3
Let's work on Jake's muzzle.
- 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.
- 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.
- 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.
- You can either repeat the previous steps on the left side, or reproduce the left half for the right.
- Overlap the right half of your design with a large rectangle. Hit Minus Frontonce again in the Pathfinder panel.
- 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. Unitethe two shapes in the Pathfinder panel.
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.
Step 5
Let's work on the mouth and teeth.
- Use the Pen Tool to draw a red-brown smiling mouth and place it beneath the muzzle in the Layers panel.
- I drew a half circle for the tongue and set the fill color to pink. Each tooth is a rounded rectangle.
- 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.
- Delete the non-intersecting portions of the teeth and add outlines to the teeth, mouth, and tongue of 1–3 pt.
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.
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.
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.
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
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.
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.
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.
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.
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.
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 Layerspanel. 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.
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 Toolto draw a light peach ellipse on the top of the face. Make sure the gradient goes from light peach at 100% to 0% Opacity.
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!
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.
Step 2
Overlap the top of the face with a rectangle and hit Minus Front in the Pathfinderpanel to create her blunt fringe.
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.
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.
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.
Step 6
Finally, let's add some simple gradients and gradient shapes.
- The crown has a yellow to yellow ochre Linear Gradient.
- The face is pink to medium pink.
- 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.
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!
