Design a Vector Themed Cereal Box in Adobe Illustrator ~ KrobKnea

Final product image — What You'll Be Creating

The most important meal of the day is Adobe Illustrator. I'm pretty sure breakfast comes second. As such, we're going to combine the two and pay homage to the cereal boxes of our childhood with this cartoony box design.

1. Start With a Sketch

Step 1

It's important to figure out your central character and layout within your sketch. I like sketching within Adobe Illustrator CC itself (though you can import a sketch as well). Using the Paintbrush Tool (B) with Fidelity set to Smooth in the Paintbrush Tool Options panel and a default Calligraphic brush selected, I've drawn out an excited cartoon character and blocked in the cereal's name above him.
For a detailed guide to drawing the hands, take a look at Cartoon Fundamentals: How to Draw Cartoon Hands by Carlos Gomes Cabral.

Step 2

Since this is a cereal box, don't forget to showcase the cereal bowl. In this case, we'll be drawing (mostly) O-shaped cereal bits with the character jumping out of (or presenting) the bowl (which has been filled to the brim). Group (Control-G) together your sketch lines and lock the group in the Layers panel, as you'll be tracing these when creating your final design.

2. Form the Head

Step 1

Building up every bit of anatomy isn't necessary in this design.

Start with the face by tracing your sketch with the Pen Tool (P).
The face comprises half of the head and one ear. You can draw portions of it (head, jaw, and ear) separately and Unite in the Pathfinder panel.
Either set the stroke color to dark brown in order to create an outline, or Copy (Control-C) and Paste (Control-V) your face shape, set the fill and stroke color to dark brown, Stroke Weight to 2 pts, and Align it behind the original face.
Draw a small D-like shape for the other ear, in a darker flesh-tone (relative to whatever flesh-tone you've chosen) and place it behind the other head shapes. For more info on various skin-tones, check out this quick tip from yours truly.

Step 2

Having figured out the hair during the sketch stage, I can now just trace it with the Pen Tool. Think of hair as being in sections: bangs (fringe), sides, and back. If you want your hair design to be a bit more fluid, use the Pencil Tool (N) to draw it quickly and round out any edges by manipulating Live Corners.
Using the same dark flesh-tone used for the ear, draw a shape that mimics the edges of the hair. This will serve to cast a shadow from the hair onto the face. Place the shape beneath the hair in the Layers panel.
Don't forget a C-shape for the inside of the left ear.

Step 3

The face is mostly built from simple shapes combined to form a really, really excited face.

Draw two overlapping circles using the Ellipse Tool (L). If you set the fill color to null and the stroke to the same dark brown being used for outlines, you can then alter the width of the circles on the outer edges with the Width Tool (Shift-W). The mouth, drawn with the Pen Tool, is like a sideways jelly bean.
The nose is like an upside-down question mark, or half-circle with a little leg on it.
For the tongue, I chose a light pink and drew a shape that takes up the lower half of the mouth.
The teeth are curved shapes which follow the contour of the mouth.
Copy and Paste the circles created for the eyes and fill them with a light blue. Make sure the left eye overlaps the right.

Step 4

Continuing with the eyes:

Draw white circles that overlap the light blue ones from the previous step. If you select the light blue circle and its overlapping white counterpart, you can use the Shape Builder Tool (Shift-M) to separate the non-intersecting portion of the white circle (by selecting it), Deselect, and Delete.
Use the Width Tool to increase the width of the eye's stroke. In this case, I Pasted the outline circle from the previous step and placed it over the white and light blue shapes forming the right eye.
The mouth needs an outline too. Copy and Paste the base mouth shape (that sideways jelly bean) and set the stroke to 1pt weight.
So that the nose doesn't appear transparent, draw a half circle and place it beneath the nose line, but above the eyes in the Layers panel.
Thicken up the outline of the left eye too and draw two small circles for the eyes' pupils.
Using the Paintbrush Tool, I drew two small eyebrows and Expanded them under Object.

Step 5

When you're satisfied with your cartoon guy's head, Group everything together. To add a thicker outline around the entire thing (while retaining the one drawn previously, which helps define where the head ends and barely seen ear on the right begins), Copy, Paste, and Unite the copied head in Pathfinder. Set the fill and stroke color to dark brown and the stroke weight to 2-3pts, depending on what you prefer. Align the head and its silhouette and Group them together.

3. Let's Add a Body

Step 1

Once again, the shape of the body was figured out during the sketch stage.

The body's sections are as follows: two hands, two arms, a neck, a shirt, and the insides of the shirt. I found it easiest, for me, to Copy, Paste, and Reflect the left arm (over a Vertical Axis) to get the right arm. I scaled and rotated it as well in order to fit with the sketch.
Using the technique from the previous section, give the neck and arms a 2pt weight outline.
Using the same dark skin-tone as used in the shadows on the face, draw shadow shapes for the palms of the hands, on the neck, and upper arms (where shadows from the sleeves are being cast).

Step 2

Use the Pen Tool to draw lines on the shirt denoting sleeve cuffs, stitching, and a collar. Group everything together and once again, Copy, Paste, Unite in the Pathfinder panel, apply a thick stroke weight to the shape, and Align behind the main character. Group all of this together and we'll move on to create the rest of the box design.

4. Drawing Three-Dimensional Cereal

Step 1

Draw a circle within a large circle using the Ellipse Tool. With both selected, hit Minus Front in the Pathfinder panel. Select your flat donut shape and go to Effect > 3D> Extrude & Bevel.... Play with the rotation, or enter in the following details to get the same 3D shape below:

X Axis: 3°
Y axis: 6°
Z axis: -2°
Extrude Depth: 34 pt
Surface: Plastic Shading

Step 2

With the 3D donut shape selected, go to Object> Expand Appearance. Use the Direct Selection Tool (A) to select the face of the cereal shape and set the fill color to a light tan. Select everything but the face of the object and set the fill color to a darker tan. Follow the steps from Section 3, Step 2 to give the cereal shape a thick outline. Group these shapes together. You'll be using this process of drawing a flat image, extruding it, changing the fill colors, and giving it an outline for the other cereal pieces later in this tutorial.

Step 3

Copy and Paste several of the "Vector O's". Rotate them around as you see fit, or even create new 3D versions of them for extra variety in each cereal object's perspective. Select a group of them and in the Pattern Options panel, create a new pattern. Choose Hex by Column or whatever will give you the most coverage. Save your pattern and move on to the next step.

Step 4

Draw a large ellipse that will serve as the top of the bowl. Set the fill color to a light cream (this will serve as our milk).
Copy and Paste that ellipse and apply your new pattern to it (please ignore the lack marshmallow shape, as that's coming up shortly).
Paste cereal shapes around the bowl in order to cover any pattern edges and to make the cereal bowl look like it's filled to the brim with delicious "Vector O's". Use the Pen Tool to draw shallow bowl. Only the sides and top edge will show in the final design, so how precise in the bowl's perspective you are is your call entirely.

5. Marshmallow Shapes!

Step 1

The previous section mentioned some of the Illustrator-themed marshmallow shapes we're adding to the bowl of cereal. Let's get working on them. Let's start with a Pen Tool-inspired marshmallow. Draw one-half of the design, seen below, with the Pen Tool itself. Copy and Paste the object and Reflect it over a Vertical Axis. Using the steps from Section 4, Step 1, create a 3D version of the pen tool and change the shadow colors to dark teal. Draw a circle in the center of the shape and Group together. Give it a thick outline just like the cereal O's.

Step 2

For the next marshmallow shape, we'll be creating a yellow pencil. Use the Rectangle Tool (M) to draw a narrow rectangle. Round the corners by selecting it with the Direct Selection Tool and pulling the Live Corners inward. Cut the shape in half (or more) by drawing a rectangle over it and hitting Minus Front in the Pathfinder panel.

Step 3

Use the Polygon Tool to draw a simple triangle.
Align and Scale it so its base is the same width as the rest of the pencil shape.
Using the Pathfinder panel again, cut off the tip of the triangle.
From here, you can draw some narrow stripes on the pencil and proceed to creating a 3D object as done with the other cereal shapes.

Step 4

The other marshmallow shapes get a quick overview, since it's more of the same in creating them.

Note how different values in rotating over different axes will give you different perspectives for your marshmallows.
The third shape is a paintbrush. I draw it based off of the Paintbrush Tool icon with the Pencil Tool.
The final marshmallow is the Selection Tool rendered in green. It's made of a rectangle and a large, indented triangle.

Step 5

Scatter your marshmallows and "Vector O's" around the design, making sure to put some near and on the character's hand as though he's popping out of the bowl and throwing them around. Group all of this together. You'll notice, too, the pen icon used for the blue marshmallow was also added to his shirt. Clearly, this guy loves vector art.

6. Sticker and Background

Step 1

Let's draw that cute sticker located in the lower right side of the composition.

Draw a circle with the Ellipse Tool and fill it with a dark yellow color. Go to Effect > Distort & Transform > Zig & Zag... Adjust the effect to your liking. The larger the size, the deeper the points will plunge into the center of the circle. And the more ridges per segment, the more points you'll have around your circle.
Create an outline for your sticker shape and make sure the corners are rounded out either through manipulating Live Corners or choosing Rounded Caps and Corners in the Stroke panel.
To make it shiny, draw a circle with a Linear Gradient going from light yellow at 100% to 0% Opacity and angled from the top left. Delete any non-intersecting portions of the circle from your sticker shape using the Shape Builder Tool.
Finally, use a comic-style font like Arch Rival or Toontime for your text layers.

Step 2

The background is fairly simple. Draw a large rectangle over the artboard in "teal" using the Rectangle Tool. With the Pen Tool, draw long shapes radiating outwards from the center (or so) of the design. Unite them in the Pathfinder panel and apply a Radial gradient to the Compound Shape going from light blue in the center and teal at the edges. Most of your design will cover the more opaque portions of the shape in the center.

7. The Logo

Step 1

Using another comic-like font, I wrote out out cereal's name. This font is called Helsinki. I recommend using something that is childlike and either rounded or looks hand-drawn. Extrude & Bevel, just like the marshmallow shapes were before.

Step 2

The steps to creating the logo are pretty simple:

Expand your 3D text in Object and Ungroup so you can move each letter up, down, or rotate it to your liking.
Change the letters' faces to light blue and their shadow colors to teal.
Scale some of the letters up, like the C and the O, and some of them down, like the E.
Group the text together once satisfied with the placement and create an outline by Copying, Pasting, and Uniting the copied group in the Pathfinder panel. Set the stroke weight at 3-5pts and Align it behind the first logo group. Note how the text curves a bit, ready for the box design.

Step 3

Put it all together! I decided the character should overlap the logo a bit and the additional text of "with marshmallow tools" was set in Arch Rival again. I also added two extra outlines to the character, bowl, and cereal bits flying around in order to set them apart from the background further.

At this point, with the main design completed, you can call this project well done. Or, you can continue on to create a digital cereal box mock-up.

8. The Side Panel

Step 1

Before we bother with mocking up the design, we need to create the side panel of the cereal box. I've decided to go to the trouble of creating the full nutrition facts. Use the Rectangle Tool to draw a narrow rectangle filled with white and the stroke color set to black and a 2pt weight. For the lines, I used the Line Segment Tool to draw each line, making sure the width of the lines matched the width of the initial rectangle. Check out a real cereal box (or other foodstuff) in order to match the FDA's guidelines for nutrition facts. Unless you're going the route of just making it all up, then take whatever artistic liberties you want.

Step 2

The font used for "Nutrition Facts" is Franklin Gothic. For the rest of the label, I used Liberation Sans, as I prefer it over Arial or Helvetica. Make sure that you're aligning your text so that the vitamins and major nutritional components line up while their values and percentages line up on the other side.

Step 3

Like the front of the cereal box, the side panel is also teal (though without the radiating gradient shapes). Copy and Paste the logo and Scale it down so it fits within the rectangle. Paste your nutrition facts and assorted instances of the marshmallow designs too.

KrobKnea