An Interest In:
Web News this WeekSearch Archive
How to Make Isometric Art Food Icons in Adobe Illustrator
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 ofmeasure. The length, height andwidth 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 30degrees 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.
Learninghow to make icons in this style is a great way to start yourisometric graphics adventure and develop a skill that you can build upon. Youwill be able to apply these techniques in all sorts of vectordesigns.
1. Howto Open a New Document
LaunchIllustratorandgo to File> New toopen a blank document. Type a name for your file, set up thedimensions, and then select PixelsasUnitsandRGBasColorMode.
Next,go to Edit> Preferences > General andset the KeyboardIncrement to1px, andwhile there, go to Unitstomake sure they are set as in the following image. I usually work withthese settings, and they will help you throughout the drawing process.
2. Howto Create an Isometric Grid
Whenlearning how to draw icons in an isometric view, a very importantpart of the process is knowing how to create your own gridinside the artboard. Here is my method of creating a quick, simple isometric grid inIllustrator. In a few minutes, we will be ready to start drawing thefood icons.
Grabthe Line Segment Tool (\) and click anywhere on your artboard to openthe Options window. Type 400 px in the Length field and 30 degrees inthe Angle field because everything needs to be drawn at this angle inisometric drawings. Position the line somewhere on the left side ofyour 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 30Copies in order to multiply it. You should have enough lines to coverthe artboard and more. Hit OK.
Withthe line still selected, go to Object > Expand Appearance in orderto expand the Transform effect applied in the previous step. Keep theresulting group selected, and press Horizontal Align Center followedby Vertical Align Center in the Align panel while making sure the Align toArtboard 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 theselines over the artboard (2).
I don't find it necessary to add vertical lines to the grid, so select thetwo groups of lines and go to View > Guides > Make Guides.That's it! The isometric grid is done. Keep it on a separate layercalled “grid” and make a new layer above it for the first foodicon.
Beforeyou continue, make sure to activate the Smart Guides under the Viewmenu. Also, check Snap to Point and uncheck Snap to Pixel.
Iusually don't lock the “grid” layer because Smart Guides workbest when layers and objects are not locked, but you can do so if youare afraid of moving it by mistake.
3. Howto Create an Isometric Square Sandwich Icon
Whencreating isometric graphics in Illustrator, pretty much everythingstarts from basic isometric shapes like squares, rectangles, andcircles. 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.
Takethe Pen Tool (P) and draw the first path, which is seven grid squares inlength. Continue to count seven grid squares for the other sides, andclose the shape to obtain the isometric square. Give it a beige fillcolor and a 2 pt dark brown Stroke. On the Stroke panel, pressthe Round Cap and Round Join options. I will name this shape “bottombread”.
Usethe Pen Tool (P) again to draw the left side of the bread. The heightof 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 2pt Stroke as before. We will keep the same stroke settings throughoutthe entire tutorial in order the make icons in the same style.
Drawthe right side of the bread in the same way.
Hereis how to make isometric circles in Illustrator. First, Copy andPaste in Place (Shift-Control-V) the “bottom bread” so you have acopy of the square (1). Go to Effect> Stylize > Round Cornersand apply a very high Radius value like 100 px or as high as youcan. Choose Expand Appearance from the Object menu in order to expandthe effect applied, and you have just obtained an isometric circle (2). Easy, right?
Whilethe circle stays selected, go to Object > Path > Add AnchorPoints 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).
Scaledown the circle obtained in the previous stepwhile holding the Shift key to maintain the proportions. Then move it next to the bottom right edge of the bread. Fill it with thecolor indicated and apply the same stroke (1).
Makea bunch of smaller copies of this circle and arrange them randomly ontop. Use three shades of pink to color them, and this time don't applya stroke. This will be the “salami slice” in the sandwich, and youcan group all the shapes that compose it (2).
Makea copy of the “salami slice” and arrange it next to the bottom leftedge of the bread (3).
Copyand Paste in Place (Shift-Control-V) the “bottom bread” to make acopy of it in front of everything. Use the Round Corners technique toobtain a new isometric circle as explained earlier (1).
Whilethe 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 > ExpandAppearance and you will get the shape of the lettuce. Fill it withlight green and apply the same stroke settings (2).
Selectthe “bottom bread” again and go to Object > Transform >Scale. Type 90% in the Scale Uniform field and hit Copy to get asmaller copy of the isometric square. Bring it in front of everythingby going to Object > Arrange > Bring to Front(Shift-Control-]). This will be the “cheese slice” in thesandwich, and you can color it yellow. Move it upwards a littleby pressing the Up Arrow key on your keyboard a couple of times.
Selectthe entire bread at the bottom of the sandwich and then Copy andPaste in Place (Shift-Control-V) to make a copy of it. Group(Control-G) the three shapes and move them upwards by three gridsquares (1).
Tocreate some texture on the top bread, randomly arrange a bunch ofsmall isometric circles as you did for the salami. Color them withbeige and reduce the Opacity to 35% (2).
Atthis point, the square sandwich icon is ready, and here is how the iconlooks like without the grid.
4. Howto Create an Isometric Rectangular Sandwich Icon
Let'screate a new artboard inside the document for the second icon. Takethe Rectangle Tool (M) and draw a new 200 x 200 px square; then go toObject > Artboards > Convert to Artboards.
Now,create a new isometric grid as explained at the beginning of thetutorial, or copy the existing one. Just make sure that you align thesecond grid with Artboard 2.
Makea new layer called “long sandwich” in the Layers panel, and weare ready to create the second food icon.
Wewill use the same technique to create an isometric circle starting from anisometric 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 theupper right part of the artboard (1).
With both squares selected, go to Effect > Stylize > RoundCorners and apply a Radius of 100 px or as high as you can. ChooseExpand Appearance from the Object menu to expand the effect applied, and you will get the two circles (2).
Usethe Direct Selection Tool (A) to select only the indicated points andpress the Delete key on your keyboard to delete them (1). You willget two semicircles.
Stillusing the Direct Selection Tool (A), select two corresponding endpoints and press Control-J to join them (2). Repeat the same thingwith 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 brownStroke (3).
Copyand Paste in Back (Control-B) the bread shape and use the DirectSelection Tool (A) to select only the indicated points (1). Move themdownwards a little by pressing the Down Arrow key on your keyboard afew times. I will name the resulting shape “bottom bun”. Changethe fill color to a slightly darker shade of beige (2).
Nowthat you've mastered drawing isometric circles, create and arrange threeof them on the bread as tomatoes. Color them red (1).
Makesmaller copies of the three circles and replace the red fill withwhite. This will be the mozzarella in the sandwich (2).
Selectthe bread shape and then Copy and Paste in Place (Shift-Control-V) tomake 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 theAngle field. Hit OK and you will obtain the top bun. Replace the fillcolor with a darker shade of beige.
Let'sadd some final touches. Grab the Line Segment Tool (\) and use it todraw a line 40 px in length at a 120 degrees Angle. Make three copies and arrange them on the top bun as shown (1).
Givethem an 8 pt Stroke and select Width Profile 1 in the Strokepanel. Choose Expand Appearance from the Object menu in order to turnthe strokes into filled shapes, and after that, go to Object >Compound Path > Make (Control-8) (2).
Selectthe top bun and then Copy and Paste in Place (Shift-Control-V) tomake 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 smallershape (1).
Now,select the blue shape and the black compound path and press Intersectin the Pathfinder panel. Fill the resulting shapes with a lightershade of beige, and these will be the slashes on the bun (2).
Atthis point, the rectangular sandwich icon is done, and here is how the iconlooks without the grid.
5. Howto Create an Isometric Soup Icon
Createa third 200 x 200 px artboard in your document and align the isometric grid withit as you did before. Also, create a new layer in the Layers panelcalled “soup”, and we can start creating the third food icon.
Drawan 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 toobtain a smaller circle inside (2).
Makea copy of the bigger black circle and change the Height value to 130px 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 pressDivide 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).
Deletethe top purple shape because we don't need it, and now we have thesoup bowl (3).
Colorthe pink and green shapes with light gray and apply a 2 pt brownStroke to keep the same style (1). Next, select the original blackand orange circles and go to Object > Compound Path > Make(Control-8). Bring the resulting compound path in front of the othersby going to Object > Arrange > Bring to Front (Shift-Control-]), and this will be the outer edge of the bowl. Color it with white andapply the same stroke settings (2).
Selectthe circle that used to be pink; go to Object > Transform >Scale and type 40% in the Scale Uniform field. Hit Copy and you willget a smaller circle. Move it to the bottom of the bowl (3).
Selectthe white edge of the bowl and then Copy and Pastein Front (Control-F).Next, go to Object > Compound Path > Release to get separate circles. For now, grab the smaller one of the twobecause we need it to create the soup (1).
Makeanother copy of the orange circle and move it downwards a little (thered 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 itdownwards a little. Grab the Scissors Tool (C) and click on the twoindicated points to cut the path, and then delete the top segment (2).
Selectthe bottom segment and give it a 2 pt red Stroke to create adecorative line on the bowl (3). Choose Object > Expand in order to turn the stroke into a filled shape.
Selectthe 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 toObject > Path > Offset Path and apply an Offset of -1 px to geta slightly smaller shape. Set this shape to stroke-none and fill-none, although for visual reasons I've colored it with green (1).
Selectthis smaller bowl shape along with the red stripeand press Intersect in the Pathfinder panel (2).
Let'sadd some noodles in the soup. Grab the Line Segment Tool (\) and useit to draw a line 111 px in length at a 30 degrees Anglebecause even the noodles have to be isometric when creating isometricart. Make two copies of this line and arrange them in the upperleft part of the soup (1).
Givethem a 2 pt Stroke; then go to Effect > Distort & Transform >Zig Zag and apply the settings shown. You will obtain the wavy lookof the noodles (2).
Selectthe soup shape and then Copy and Paste in Place (Shift-Control-V) tomake 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 obtaina 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 toObject > Clipping Mask > Make (Control-7) (2).
Let'sadd the final touches in the form of a few small isometric circleswith a 2 pt green Stroke.
Atthis point, the noodle soup icon is ready, and here is how the icon looks without the grid.
Hereare the three artboards inside the document with the isometric foodicons. This makes things easier for you to save the iconsindividually.
Somecall it isometric art, some call it a nightmare. What do you think?
Isometricdrawing is a useful skill to have that can be used in a variety ofdesigns from icon design to isometric illustrations, technical drawing,infographics, and many more.
Ifyou decide to learn how to draw isometric vectors and recreate thesefood icons, don't forget to share an image of your design. Iwould 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
Original Link: https://design.tutsplus.com/tutorials/how-to-make-isometric-art-food-icons-in-adobe-illustrator--cms-33180