How to Create Mooncake and Dim Sum Icons for Chinese New Year

Final product image
What You’ll Be Creating

Celebrate Chinese New Year with mooncakes, steamed buns, and dumplings! In this tutorial we’ll illustrate dim sum food icons, perfect for use in a mobile game or other vector graphic needs. Start with circles and ellipses, and end with delicious food drawings. 

You can also supplement your icon designs with vectors from Envato Market to create a complete set of dim sum pieces. Check out this dim sum set from Envato Market as an option to complete your final design.

1. Make a Mooncake Base

Step 1

Three of our icon designs will begin with the same tart-like base design. Let’s start in a New Document with a 14-sided polygon created with the Polygon Tool.

Draw a 14 sided polygon with the polygon tool

Step 2

Let’s round out the shape so it resembles a flower. Select the polygon and go to Effect > Distort & Transform > Pucker & Bloat to apply a Bloat effect of 15% or so. Under Object, hit Expand Appearance to redefine the effect’s boundaries.

Pull the object’s Live Corners inward to round out the shape slightly and soften the look of the tart base.

Transform the polygon into a softened flower shape to form a tart

2. Create a Geometric Mooncake Design

Step 1

Use the Rectangle Tool (M) to draw a square in the center of the mooncake. Draw a circle in the center, below the square, with the Ellipse Tool (L). Set the fill color to match the mooncake base and the stroke color to a darker brown. I’ll be setting all thicker strokes to 4 pt weight and thin strokes to 2 pt and 3 pt weight.

Draw a square and circle in the center to begin the geometric design

Step 2

Use the Line Segment Tool (/) or the Pen Tool (N) to draw L-like shapes in the corners of the mooncake design. Make sure the lines are aligned with the square drawn earlier.

Draw in the lined corners of the design

Step 3

Once again, using either the Line Segment Tool or the Pen Tool, draw several lines, this time in each of the four sections around the square. Draw ten lines in total and make sure to distribute them evenly. Repeat around the square.

When finished with the lines, add a thick brown stroke to the mooncake base object.

Draw lines around the square and add an outline to the mooncake

Step 4

The center of the mooncake has four angled spirals. I drew mine with the Pen Tool. Try to line up their edges so they sit in the center of the square evenly.

Draw angled spirals in the center of the mooncake

Step 5

Draw an ellipse and apply a Radial Gradient to it, going from light brown at 100% Opacity to medium brown at 0% Opacity. Adjust the placement of the gradient’s radius with the Gradient Tool, and adjust the Opacity of the gradient in the Gradient panel. 

Place a gradient shape like this on each of the 14 scallops around the mooncake. Group (Control-G) them together and place them behind the rest of the mooncake’s design but above the mooncake base in the Layers panel.

Add gradient shapes to the outside of the tart

Step 6

Draw a circle overlapping the center circle of the mooncake and apply the same gradient to it from the previous step. This time, however, you’ll want to set it to Linear and change the Blending Mode from Normal to Overlay in the Transparency panel. Group this entire design together.

Add an overlay shape for another highlight

Step 7

Below you’ll see our completed mooncake and the basic design for our second icon. Copy and Paste the first mooncake and delete all of the components that make up the central design.

Our mooncake design and mooncake template

3. Create a Flower-Style Mooncake

Step 1

Let’s start with a circle that will be in the center of the second mooncake.

  1. Draw a circle with the Ellipse Tool. Draw a smaller square in the center of the circle.
  2. Next, draw two vertical lines and two horizontal lines in the center of the circle and square. Distribute them evenly.
  3. Use the Direct Selection Tool to adjust the length of the lines to stop at the edge of the circle.

Group this design together and place it in the center of the second mooncake.

Draw a waffle pattern in a circle for the second mooncake

Step 2

To create the first layer of flower petals, you’ll need to draw a circle with the Ellipse Tool and apply a Radial Gradient going from brown to darker brown, with the darker of the two colors in the center. Adjust the Radius of the Gradient with the Gradient Tool. You’ll want it to be more elliptical than round.

Use the Direct Selection Tool to pull the top anchor point upward to create a flower petal.

Draw a flower petal with a radial gradient in the center

Step 3

CopyPaste, and Rotate each copy of the flower petal around the center of the mooncake. Repeat with a smaller instance of the petal and place it above the larger petal. You should have two layers of petals arranged around a circle. Make sure to space them evenly.

Evenly space out two layers of petals

Step 4

The next layer of flower petals starts with two of the teardrop petals. Copy and Paste two instances of flower petals and Unite them in the Pathfinder panel once you’ve rotated and overlapped them slightly (in the fashion seen below).

CopyPaste, and Rotate six instances of the larger petals and place them beneath and between the other, smaller petals within the center of the design. See below for placement within the mooncake design. Now we have two sweet mooncake designs! Group the components of the second mooncake together.

Draw larger petals and place them between the smaller ones to complete the design

4. Create a Simple Egg Tart

Step 1

Another design can be created with the mooncake base. Start with the simple rounded-out polygon that we created at the start of this tutorial. Apply a Radial Gradient to it that keeps the darker brown in the center of the cake and the lighter brown around the edges of the tart.

As with the mooncakes before it, draw gradient highlight ellipses for each of the 14 scallop shapes. Draw a yellow circle for the center. Set the stroke color to dark brown.

Draw a rounded polygon to build your egg tart

Step 2

Add a Radial Gradient to the yellow circle. This one should go from dark yellow to medium yellow. As with the tart base, you want the gradient to stick close to the edges of the shape.

Draw a slightly smaller circle with the Ellipse Tool, place it in the center of the egg tart design, and fill it with a Linear Gradient that goes from dark yellow to medium yellow. You can see how the dark yellow of the gradient is concentrated in the upper left of the design.

Use the Pen Tool to draw a curving shape in the lower right of the egg tart. Apply a light yellow gradient to it and reduce the opacity of the shadow and highlight gradients as you see fit. This renders the egg tart just enough to give it some depth.

Render the egg tart with gradient shapes

5. Create a Longevity Peach

Step 1

As with most of the designs in this tutorial, we’ll start again with a circle. Pull the top anchor point upward slightly with the Direct Selection Tool. Convert the top anchor point from a curve to a point with the Anchor Point Tool (Shift-C) to form the perfect peach bun shape.

Convert a circle into a cute peach bun shape

Step 2

Set the fill color to a Radial Gradient that goes from cream to pink with the pink concentrated on the top of the peach bun. Adjust the gradient’s placement with the Gradient Tool.

Apply a radial gradient to the peach bun object

Step 3

Draw a curved shape (using the drawing tool of your choice) in the upper center of the peach bun. You can fill it with a darker cream and reduce its opacity or fill it with a dark cream to cream gradient. Add a dark brown stroke to the peach shape.

Add a cleft to the peach object

Step 4

Draw a pointed teardrop for each leaf and apply a green gradient to it. Add an outline and a straight line for the leaf’s vein. Place two leaves behind the peach bun and Group the entire design together. 

Add cute little leaves to the design

6. Create a Sesame Ball

Step 1

Sesame balls are not only easy to draw, but the real things are wonderful and delicious. Draw two circles and set the fill colors to Linear Gradients going from tan to dark tan. In the center of one circle, draw a dark brown circle whose stroked outline is dark tan. Add a dark brown stroke to both of the larger circles.

Draw a couple circles for the sesame balls

Step 2

To create the sesame seeds, draw a small light-cream teardrop shape. In the Brushes panel, create a New Brush and select Scatter Brush as the type. 

Play with the Spacing and Rotation settings, and make sure the Rotation is relative to the Path. Hit OK and you’ll find your new brush in your Brushes panel. Feel free to create a few copies of this brush with different SizeSpacingScatter, and Rotation settings.

Create a custom scatter brush

Step 3

Use the Paintbrush Tool (B) to draw a few scribbled lines over both of the sesame balls. Instantly you’ll have perfectly scattered sesame seeds on your design! If the spacing, size, or rotation isn’t right, adjust your brush settings to your liking. 

I also added some shadow gradient shapes on each ball to give them a bit more depth. Let’s move on to dumpling designs!

7. Create a Bamboo Steamer

Step 1

One of our designs, some cute steamed buns, needs a bamboo steamer to complete the design. Let’s create the steamer element now.

  1. Start with two identical ellipses and a rectangle. Make sure the length of each item is exactly the same.
  2. Unite all three objects together in the Pathfinder panel.
  3. Draw another ellipse the same size and width as the first one you drew for the steamer, and place it on top of the United design.
Ellipses and a rectangle form the basic steamer shape

Step 2

Draw a smaller, darker brown ellipse for the center of the steamer to show the inside of it. Optionally, you can also stack these objects to form two or three tiers of simple bamboo steamers.

Create single or stacked steamers

Step 3

This is the basic steamer design I’ll be using. Note how wide the inside of it is: plenty of room for dumplings, buns, or whatever else you’re filling your steamer with in your design.

Finalize your steamer design before creating the fillings

8. Create Steamed Buns

Step 1

To create simple buns, draw a circle and pull the top anchor point upward as we did with other peach and teardrop shapes. Keep the anchor point as a curve, however. Using the Pencil Tool (N), draw a scalloped-edged shape at the top of the bun and Unite the two objects together in the Pathfinder panel or with the Shape Builder Tool (Shift-M).

Draw teardrop gradient shapes to show the folds in the top of the bun and use the same colors and gradients as the sesame balls to complete the bun shape.

Create a simple bun from a circle and scalloped shapes

Step 2

Let’s fill the steamer with freshly steamed buns!

  1. Copy and Paste five instances of the buns and Group them together above the steamer. You’ll want to arrange them in the manner you’d like them to peek out of the steamer.
  2. Draw an ellipse that lines up with the inner ellipse of the steamer.
  3. Draw and Unite a rectangle over the top of the ellipse so only the top half of the bun group is covered.
  4. Select both the newly created shape and the steamed bun group.
  5. Create a Clipping Mask (Control-7) and make sure your newly clipped steamed buns fit perfectly inside the steamer. Adjust the clipping path accordingly as well as the clip group if need be.
Create a clipping mask to fit the steamed buns into the steamer design

Step 3

You can create a steamer full of dumplings, buns, peach buns, or whatever you choose! Let’s complete the steamer design by drawing two curved rectangles with the Pen Tool and a line beneath them to show steam in the bamboo steamer. Group the entire steamer icon together.

Complete the steamer design

9. Create Steamed Dumplings

Step 1

Let’s start by building a half circle:

  • Draw a circle with the Ellipse Tool.
  • Overlap the circle with a rectangle.
  • Hit Minus Front in the Pathfinder panel and make sure you expand the shape.

 Now you have a quick and easy half circle design!

Draw a half circle from a circle and rectangle

Step 2

Using the half circle as a guide, draw a scalloped shape overlapping it. You may want to reference steamed dumplings to get an idea of how wavy the outer edge of the design is. Unite the two shapes in the Pathfinder panel. Note how imperfect my scalloped contour is. I want it to look as though it was made by hand.

Create a simple steamed dumpling shape

Step 3

Render the dumpling by applying a Linear Gradient to its basic shape, similar to the ones used for the steamed buns and sesame balls. 

Draw gradient shapes with the Pen Tool or the Pencil Tool between each scallop shape. Add a half circle with a Radial Gradient going from dark tan at 100% Opacity to 0% Opacity to give it the look of being cooked a bit. This is optional depending on whether you want your dumpling to look steamed or fried.

Render your final dumpling design

Step 4

To complete the steamed dumpling icon, I Copied and Pasted a second instance of the dumpling and Scaled and Rotated it slightly before Grouping the two together. I also completed the peach bun icon in the same way.

Complete your steamed dumpling icon

Great Job! Let’s Eat!

Now that you’ve completed all seven of the dim sum icons, you’re ready for quite a feast! What other dim sum favorites can you think of to add to this icon set? Share with us in the comment section below, and Happy Chinese New Year!

Complete your final icon design

Leave a comment

Your email address will not be published.