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.
Learning 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 designs.
If you are looking for more isometric icons, isometric vectors, or food icons to use in your awesome designs, make sure to go over to GraphicRiver and you'll find a great selection. Here are the highlights:
Or if you're hungry for more isometric illustration tutorials, check out this wonderful list:
Otherwise, let's begin!
1. How to Open a New Document
Launch Illustrator and go to File > New to open a blank document. Type a name for your file, set up the dimensions, and then select Pixels as Units and RGB as Color Mode.
Next, go to Edit > Preferences > General and set the Keyboard Increment to 1 px, and while there, go to Units to 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.
2. How to Create an Isometric Grid
When 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 food icons.
Grab 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.
With 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 icon.
Before you continue, make sure to activate the Smart Guides under the View menu. Also, check Snap to Point and uncheck Snap to Pixel.
I 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.
3. How to Create an Isometric Square Sandwich Icon
When 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.
Take 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 bread”.
Use 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.
Draw the right side of the bread in the same way.
Here 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?
While 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).
Scale 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).
Make 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).
Make a copy of the “salami slice” and arrange it next to the bottom left edge of the bread (3).
Copy 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).
While 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).
Select 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.
Select 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 squares (1).
To 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).
At this point, the square sandwich icon is ready, and here is how the icon looks like without the grid.
4. How to Create an Isometric Rectangular Sandwich Icon
Let's 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.
Now, 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.
Make a new layer called “long sandwich” in the Layers panel, and we are ready to create the second food icon.
We 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).
Use 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.
Still 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 Stroke (3).
Copy 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).
Now that you've mastered drawing isometric circles, create and arrange three of them on the bread as tomatoes. Color them red (1).
Make smaller copies of the three circles and replace the red fill with white. This will be the mozzarella in the sandwich (2).
Select 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.
Let's 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).
Give 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).
Select 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 shape (1).
Now, 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).
At this point, the rectangular sandwich icon is done, and here is how the icon looks without the grid.
5. How to Create an Isometric Soup Icon
Create 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.
Draw 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).
Make 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).
Next, 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).
Delete the top purple shape because we don't need it, and now we have the soup bowl (3).
Color 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).
Select 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).
Select 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).
Make 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).
Now, 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).
Select 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.
Select 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).
Select this smaller bowl shape along with the red stripe and press Intersect in the Pathfinder panel (2).
Let's 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).
Give 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).
Select 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).
Now, select the noodles along with the smaller shape of the soup and go to Object > Clipping Mask > Make (Control-7) (2).
Let's add the final touches in the form of a few small isometric circles with a 2 pt green Stroke.
At this point, the noodle soup icon is ready, and here is how the icon looks without the grid.
Here are the three artboards inside the document with the isometric food icons. This makes things easier for you to save the icons individually.
Congratulations! You're Done
Some call it isometric art, some call it a nightmare. What do you think?
Isometric 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.
If 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 IconsAndrei Stefan
- Tools & TipsQuick Tip: How to Draw Isometric Circles in Adobe IllustratorDiego Barrionuevo
- IllustrationWorking With Orthographic Projections and Basic IsometricsCody Walker
- IsometricQuick Tip: How to Create an Isometric Grid in Less Than 2 Minutes!Iulius Curt
- Text EffectsHow to Create an Isometric Layered Text Effect in Adobe IllustratorAndrei Marius
- Text EffectsHow to Create an Isometric Text Effect in Adobe IllustratorAndrei Marius
- IsometricHow to Create Isometric Gambling Assets in Adobe IllustratorYulia Sokolova
- IllustrationHow to Create a Detailed Isometric Building in Adobe IllustratorDiego Barrionuevo