In the following tutorial, you will learn how to create a minimal set of isometric food icons in Adobe Illustrator. If you are new to isometric drawing then this tutorial is for you because you will learn how to create your own isometric grid, and the icons are made using only basic shapes.
Before we start, let’s take a quick look at the important characteristics of this style of design:
What is isometric? It means equality of
measure. The length, height and
width of the objects are equally scaled.
What is isometric view? It’s a way in which three-dimensional objects are presented through isometric projection on a two-dimensional plane.
What is isometric design? It’s an on-trend illustrative style and offers a unique perspective on the common flat style. It is not meant to be realistic.
How do you draw isometric? An angle of 30
degrees is used on all sides in order to give a 3D look. Opposing sides are parallel to each other, meaning objects in the foreground are displayed at the same scale as objects displayed in the background. There is no perspective, and there are no vanishing points.
What are isometric graphics used for? They are used for their clarity, simplicity, and speed of creation. Also known as isometric projections, they are successfully used in web design, user interface illustrations, vector icons, and technical drawings.
how to make icons in this style is a great way to start your
isometric graphics adventure and develop a skill that you can build upon. You
will be able to apply these techniques in all sorts of vector
to Open a New Document
go to File
> New to
open a blank document. Type a name for your file, set up the
dimensions, and then select Pixels
go to Edit
> Preferences > General and
set the Keyboard
while there, go to Units
make sure they are set as in the following image. I usually work with
these settings, and they will help you throughout the drawing process.
to Create an Isometric Grid
learning how to draw icons in an isometric view, a very important
part of the process is knowing how to create your own grid
inside the artboard. Here is my method of creating a quick, simple isometric grid in
Illustrator. In a few minutes, we will be ready to start drawing the
the Line Segment Tool () and click anywhere on your artboard to open
the Options window. Type 400 px in the Length field and 30 degrees in
the Angle field because everything needs to be drawn at this angle in
isometric drawings. Position the line somewhere on the left side of
your 200 x 200 px artboard and give it a 1 pt Stroke.
With the line still selected, go to Effect > Distort & Transform >
Transform. Type 18 px in the Move Horizontal field and choose 30
Copies in order to multiply it. You should have enough lines to cover
the artboard and more. Hit OK.
the line still selected, go to Object > Expand Appearance in order
to expand the Transform effect applied in the previous step. Keep the
resulting group selected, and press Horizontal Align Center followed
by Vertical Align Center in the Align panel while making sure the Align to
Artboard option is checked (1).
With the group of lines still selected, go to Object > Transform >
Reflect. Check Vertical and hit Copy to obtain a reflection of these
lines over the artboard (2).
I don’t find it necessary to add vertical lines to the grid, so select the
two groups of lines and go to View > Guides > Make Guides.
That’s it! The isometric grid is done. Keep it on a separate layer
called “grid” and make a new layer above it for the first food
you continue, make sure to activate the Smart Guides under the View
menu. Also, check Snap to Point and uncheck Snap to Pixel.
usually don’t lock the “grid” layer because Smart Guides work
best when layers and objects are not locked, but you can do so if you
are afraid of moving it by mistake.
to Create an Isometric Square Sandwich Icon
creating isometric graphics in Illustrator, pretty much everything
starts from basic isometric shapes like squares, rectangles, and
circles. The first food icon that we will draw is a square sandwich, so let’s start by looking at how to draw an isometric square.
the Pen Tool (P) and draw the first path, which is seven grid squares in
length. Continue to count seven grid squares for the other sides, and
close the shape to obtain the isometric square. Give it a beige fill
color and a 2 pt dark brown Stroke. On the Stroke panel, press
the Round Cap and Round Join options. I will name this shape “bottom
the Pen Tool (P) again to draw the left side of the bread. The height
of this shape is just one grid square, and the length remains seven.
Apply a slightly darker shade of beige as the fill color and give it a 2
pt Stroke as before. We will keep the same stroke settings throughout
the entire tutorial in order the make icons in the same style.
the right side of the bread in the same way.
is how to make isometric circles in Illustrator. First, Copy and
Paste in Place (Shift-Control-V) the “bottom bread” so you have a
copy of the square (1). Go to Effect
> Stylize > Round Corners
and apply a very high Radius value like 100 px or as high as you
can. Choose Expand Appearance from the Object menu in order to expand
the effect applied, and you have just obtained an isometric circle (2). Easy, right?
the circle stays selected, go to Object > Path > Add Anchor
Points to add extra points on the left, right, top, and bottom sides.
These points are useful when aligning the circle to the grid or to other shapes in your design (3).
down the circle obtained in the previous step
while holding the Shift key to maintain the proportions. Then move it next to the bottom right edge of the bread. Fill it with the
color indicated and apply the same stroke (1).
a bunch of smaller copies of this circle and arrange them randomly on
top. Use three shades of pink to color them, and this time don’t apply
a stroke. This will be the “salami slice” in the sandwich, and you
can group all the shapes that compose it (2).
a copy of the “salami slice” and arrange it next to the bottom left
edge of the bread (3).
and Paste in Place (Shift-Control-V) the “bottom bread” to make a
copy of it in front of everything. Use the Round Corners technique to
obtain a new isometric circle as explained earlier (1).
the circle stays selected, go to Effect > Distort & Transform
> Zig Zag and apply the settings shown to obtain the wavy edges.
Make sure to expand this effect by going to Object > Expand
Appearance and you will get the shape of the lettuce. Fill it with
light green and apply the same stroke settings (2).
the “bottom bread” again and go to Object > Transform >
Scale. Type 90% in the Scale Uniform field and hit Copy to get a
smaller copy of the isometric square. Bring it in front of everything
by going to Object > Arrange > Bring to Front
(Shift-Control-]). This will be the “cheese slice” in the
sandwich, and you can color it yellow. Move it upwards a little
by pressing the Up Arrow key on your keyboard a couple of times.
the entire bread at the bottom of the sandwich and then Copy and
Paste in Place (Shift-Control-V) to make a copy of it. Group
(Control-G) the three shapes and move them upwards by three grid
create some texture on the top bread, randomly arrange a bunch of
small isometric circles as you did for the salami. Color them with
beige and reduce the Opacity to 35% (2).
this point, the square sandwich icon is ready, and here is how the icon
looks like without the grid.
to Create an Isometric Rectangular Sandwich Icon
create a new artboard inside the document for the second icon. Take
the Rectangle Tool (M) and draw a new 200 x 200 px square; then go to
Object > Artboards > Convert to Artboards.
create a new isometric grid as explained at the beginning of the
tutorial, or copy the existing one. Just make sure that you align the
second grid with Artboard 2.
a new layer called “long sandwich” in the Layers panel, and we
are ready to create the second food icon.
will use the same technique to create an isometric circle starting from an
isometric square, so grab the Pen Tool (P) and draw a square counting four grid squares on each side. Make a copy of it and arrange it in the
upper right part of the artboard (1).
With both squares selected, go to Effect > Stylize > Round
Corners and apply a Radius of 100 px or as high as you can. Choose
Expand Appearance from the Object menu to expand the effect applied, and you will get the two circles (2).
the Direct Selection Tool (A) to select only the indicated points and
press the Delete key on your keyboard to delete them (1). You will
get two semicircles.
using the Direct Selection Tool (A), select two corresponding end
points and press Control-J to join them (2). Repeat the same thing
with the other two end points at the top and you will practically obtain an isometric rounded rectangle. Color the bread with light beige and apply the same 2 pt brown
and Paste in Back (Control-B) the bread shape and use the Direct
Selection Tool (A) to select only the indicated points (1). Move them
downwards a little by pressing the Down Arrow key on your keyboard a
few times. I will name the resulting shape “bottom bun”. Change
the fill color to a slightly darker shade of beige (2).
that you’ve mastered drawing isometric circles, create and arrange three
of them on the bread as tomatoes. Color them red (1).
smaller copies of the three circles and replace the red fill with
white. This will be the mozzarella in the sandwich (2).
the bread shape and then Copy and Paste in Place (Shift-Control-V) to
make a copy of it in front of everything. Go to Object > Transform
> Move, and type -18 px in the Vertical field and 90 degrees in the
Angle field. Hit OK and you will obtain the top bun. Replace the fill
color with a darker shade of beige.
add some final touches. Grab the Line Segment Tool () and use it to
draw a line 40 px in length at a 120 degrees Angle. Make three copies and arrange them on the top bun as shown (1).
them an 8 pt Stroke and select Width Profile 1 in the Stroke
panel. Choose Expand Appearance from the Object menu in order to turn
the strokes into filled shapes, and after that, go to Object >
Compound Path > Make (Control-8) (2).
the top bun and then Copy and Paste in Place (Shift-Control-V) to
make a copy of it in front of everything. Go to Object > Path >
Offset Path and apply an Offset of -1 px to get a slightly smaller
select the blue shape and the black compound path and press Intersect
in the Pathfinder panel. Fill the resulting shapes with a lighter
shade of beige, and these will be the slashes on the bun (2).
this point, the rectangular sandwich icon is done, and here is how the icon
looks without the grid.
to Create an Isometric Soup Icon
a third 200 x 200 px artboard in your document and align the isometric grid with
it as you did before. Also, create a new layer in the Layers panel
called “soup”, and we can start creating the third food icon.
an isometric circle starting from a 10 x 10 square as you learned earlier (1). With the circle still selected, go to Object > Transform
> Scale and type 89% in the Scale Uniform field. Hit Copy to
obtain a smaller circle inside (2).
a copy of the bigger black circle and change the Height value to 130
px in the Transform panel. You will obtain the red oval shape (1).
select the red shape along with a copy of the black circle and press
Divide in the Pathfinder panel followed by Ungroup (Shift-Control-G).
As a result, you will get three separate shapes colored with purple,
pink, and green in the image below (2).
the top purple shape because we don’t need it, and now we have the
soup bowl (3).
the pink and green shapes with light gray and apply a 2 pt brown
Stroke to keep the same style (1). Next, select the original black
and orange circles and go to Object > Compound Path > Make
(Control-8). Bring the resulting compound path in front of the others
by going to Object > Arrange > Bring to Front (Shift-Control-]), and this will be the outer edge of the bowl. Color it with white and
apply the same stroke settings (2).
the circle that used to be pink; go to Object > Transform >
Scale and type 40% in the Scale Uniform field. Hit Copy and you will
get a smaller circle. Move it to the bottom of the bowl (3).
the white edge of the bowl and then Copy and Paste
in Front (Control-F).
Next, go to Object > Compound Path > Release to get separate circles. For now, grab the smaller one of the two
because we need it to create the soup (1).
another copy of the orange circle and move it downwards a little (the
red circle). With the two orange and red circles selected,
press Intersect on the Pathfinder panel (2). Fill the resulting soup shape with light yellow and apply the same 2 pt Stroke (3).
grab the bigger circle of the two from the previous step and move it
downwards a little. Grab the Scissors Tool (C) and click on the two
indicated points to cut the path, and then delete the top segment (2).
the bottom segment and give it a 2 pt red Stroke to create a
decorative line on the bowl (3). Choose Object > Expand in order to turn the stroke into a filled shape.
the main shape of the bowl and then Copy and Paste in Place
(Shift-Control-V) to make a copy of it in front of everything. Go to
Object > Path > Offset Path and apply an Offset of -1 px to get
a slightly smaller shape. Set this shape to stroke-none and fill-none, although for visual reasons I’ve colored it with green (1).
this smaller bowl shape along with the red stripe
and press Intersect in the Pathfinder panel (2).
add some noodles in the soup. Grab the Line Segment Tool () and use
it to draw a line 111 px in length at a 30 degrees Angle
because even the noodles have to be isometric when creating isometric
art. Make two copies of this line and arrange them in the upper
left part of the soup (1).
them a 2 pt Stroke; then go to Effect > Distort & Transform >
Zig Zag and apply the settings shown. You will obtain the wavy look
of the noodles (2).
the soup shape and then Copy and Paste in Place (Shift-Control-V) to
make a copy of it in front of everything. Next, go to Object >
Path > Offset Path and apply an Offset of -1 px in order to obtain
a slightly smaller shape. Set this copy to stroke-none and fill-none, although for visual reasons I’ve colored it with blue (1).
select the noodles along with the smaller shape of the soup and go to
Object > Clipping Mask > Make (Control-7) (2).
add the final touches in the form of a few small isometric circles
with a 2 pt green Stroke.
this point, the noodle soup icon is ready, and here is how the icon looks without the grid.
are the three artboards inside the document with the isometric food
icons. This makes things easier for you to save the icons
call it isometric art, some call it a nightmare. What do you think?
drawing is a useful skill to have that can be used in a variety of
designs from icon design to isometric illustrations, technical drawing,
infographics, and many more.
you decide to learn how to draw isometric vectors and recreate these
food icons, don’t forget to share an image of your design. I
would love to see it.
Expand Your Icon-Designing Skills!
Want to make more icons or isometric vectors? Keep learning with these recommended tutorials:
Icon DesignHow to Make Icons
Tools & TipsQuick Tip: How to Draw Isometric Circles in Adobe Illustrator
IllustrationWorking with Orthographic Projections and Basic Isometrics
IsometricQuick Tip: How to Create an Isometric Grid in Less Than 2 Minutes!
Text EffectsHow to Create an Isometric Layered Text Effect in Adobe Illustrator
Text EffectsHow to Create an Isometric Text Effect in Adobe Illustrator
IsometricHow to Create Isometric Gambling Assets in Adobe Illustrator
IllustrationHow to Create a Detailed Isometric Building in Adobe Illustrator
Go to original Source
Powered by WPeMatico