Software Engineering

Mastering Another Dimension: An Isometric Illustration Tutorial

Isometric illustrations—two-dimensional figures that appear three-dimensional—add depth and emphasis to app and web graphics, improving user experience and engagement. For example, isometric spot icons, which tend to be larger than interface icons, can be used to emphasize microcopy and calls to action. Other isometric images, such as infographics, diagrams, and product renderings, offer clarity when users need detailed product information or a bird’s-eye view of a process. For instance, a car manufacturer’s website might display an exploded isometric rendering to showcase the precision engineering of its parts, or a real estate company might provide an isometric illustration to highlight important milestones for prospective homebuyers.

Isometric illustrations can be tricky and time-intensive to produce. However, I’ve spent several years creating isometric vector illustrations for clients and have discovered a quicker way to make them. In this isometric illustration tutorial for UI designers, I explain how to use Adobe Illustrator’s 3D Revolve effect to create isometric objects in six simple steps.

How to Create an Isometric Illustration in Adobe Illustrator

In Adobe Illustrator, you can quickly create isometric illustrations using the tool’s 3D effects. In this tutorial, we’ll make a simple isometric drawing of a bottle and label using the Revolve effect, but these insights also apply to Illustrator’s other 3D effects like Extrude and Bevel.

Step 1: Draw the Bottle and Liquid

Create a new Adobe Illustrator document, and add an image reference of a bottle to the document. Draw an outline of the bottle and the liquid inside. Split the bottle and liquid in half. The stroke thickness of the bottle’s contour will define the glass thickness.

Pro tip: Copy and paste the artwork outside the artboard as a backup.

Creating isometric illustrations starts with outlining a reference image and cutting it in half. This tutorial uses a short-necked bottle as an example.
Figure 1A: Paste in a reference image of a bottle. Figure 1B: Draw the bottle and liquid. Figure 1C: Split the bottle in half.

Step 2: Apply the Revolve Effect

As its name suggests, the Revolve effect turns the path in a circular direction around its global y-axis (revolve axis) to create a 3D object. In Adobe Illustrator, the position of the Revolve axis is fixed vertically. (This is why we outlined the bottle and split it in half.)

Pro tip: Don’t use gradients as fill colors for either the bottle outline or the liquid object. You’ll have a chance to add gradients, highlights, and other visual effects at the end of the tutorial.

To find the Revolve effect, go to Effect > 3D and Materials > 3D (Classics) > Revolve (Classic). At the top of the dialog window, you’ll see a field labeled Position. Choose Isometric Left. Under Revolve, tweak the following revolve and surface shading options:

  • Angle: This defines the degree of rotation around the object’s axis. If set to 180°, the bottle will be split in half vertically. Set the angle to 360° to create an entire bottle.
  • Offset: This controls the offset distance from the object’s vertical axis. Enter 0.
  • Surface: This sets the object’s material and lighting properties. Choose No Shading.
Ensure that the angle, offset, and surface have the correct settings.
Figure 2A: Ungroup the shapes and apply the Revolve effect. Figure 2B: Use the highlighted settings.

You have created an isometric bottle with liquid. Now it’s time to add labels.

Pro tip: You may be tempted to apply the Expand Appearance effect at this point, but don’t do that until we create the labels.

The Revolve effect gives the isometric illustration a rounded, 3D look.
Figure 2C: Fill the revolved shape with a non-gradient color. Figure 2D: Areas where you will add labels in Step 3.

Step 3: Prepare the Bottle Label

Use the bottle to define the label dimensions. In the example image below, the height of the body label is apparent, but the height of the neck label isn’t clear because the surface isn’t parallel to the axis. An approximate height will suffice. The label length is calculated using the circle circumference formula 2πr.

When you’re happy with your label design, convert both labels to symbols. The Symbols panel is found under Window > Symbols. Individually drag and drop the label designs into the panel to create symbols.

Pro tip: Symbols in Adobe Illustrator and Sketch work similarly.

Estimate the height of the labels with the formula 2πr, then add symbols. In this 3D Illustrator tutorial, a black-and-white icon defines the bottle.
Figure 3A: Neck label height and body label height. Figure 3B: Use the formula 2πr to find the circumference.

Step 4: Map the Label Onto the Bottle

As long as the bottle hasn’t been vectorized using the Expand Appearance effect, it is fully editable. Select the bottle and then navigate to Window > Appearance > 3D Revolve.

To map the label design to the bottle, click the Map Art option at the bottom left of the 3D Revolve panel. This will allow you to select and adjust the symbol for the bottle. Make sure to match the symbol to the correct surface. Click Scale to Fit, and the label will map to the bottle.

Follow the same steps for the neck label.

With the Revolve feature, combine the bottle and labels. Use the highlighted settings to map the labels around the bottle.
Figure 4A: Preview of art mapped to bottle. Figure 4B: Use the highlighted settings.

Step 5: Clean Up the File

Now it’s time to apply Bezier curves—used in computer graphics to produce continuous curves which appear smooth at all scales—to your bottle. Select Object > Expand Appearance.

Expanding an object’s appearance creates a grouped collection of minor elements that give the illusion of a 3D object. Combine the elements with either the Pathfinder or Shape Builder tools to keep things tidy.

Joining objects will create unwanted anchor points. Reduce them by selecting Object > Path > Simplify. If you use Illustrator regularly, download the VectorScribe plugin and use its Delete Anchor Point tool to perfect this step.

The isometric vector illustration needs to be simplified. Expand the bottle illustration and combine the segments so that they appear less cluttered.
Figure 5A: Multiple segments created by the Expand Appearance effect. Figure 5B: Multiple segments combined and simplified.

Step 6: Refine Your Illustration With Colors and Gradients

Once you’ve created your isometric illustration, you may want to add colors and gradients to help bring the bottle to life. Add reflections, highlights, and shadows (organized in separate layers) for a realistic look, or use strokes and a simplified color palette for a more graphic vibe. If you’re unsure where to begin, explore different color combinations with Illustrator’s palette generator. With a solid isometric illustration foundation, the design possibilities are endless.

The foundation of the isometric illustration is complete. Play around with gradients and color for a more realistic effect.
Figure 6A: Raw bottle and label design. Figure 6B: Bottle stylized with color and gradients.

Examples of Isometric Illustrations in UI Design

Now that you have a fast and easy way to create isometric illustrations, take a look at some examples from three Toptal other designers to get your creative juices flowing.

Digital Conference Brochure

Štefan Kováč is a template designer for the Adobe Stock marketplace. This example is a digital conference brochure template he created using simple strokes, shapes, text frames, and monochromatic gradients. To compose these drawings, Štefan used InDesign’s Rotation +/- 30° and Skew +/-30° effects to achieve isometric distortion.

Štefan’s isometric illustration uses 3D buildings and pathways to present information such as conference attendance and agenda.
Štefan combines shapes, colors, text, and gradients in his isometric illustration for the Adobe Stock marketplace.

Digital Office Guide

Paulina Jozwik used isometric illustrations to create a digital office-space guide for Teal Space. She chose this technique due to its prevalence in architectural drawings and because she felt that the three-dimensional nature of isometric images would help her renderings stand out on Teal Space’s website, which primarily employs flat design elements.

This isometric illustration shows structure and depth. Complete with sticky notes, a monitor, a table and chairs, it replicates a real-life conference room.
Paulina’s design demonstrates the depth capabilities of isometric illustration, giving a realistic bird’s-eye view of an office space.

Instagram Campaign

To celebrate the 50th National Day of Oman, Wafa’ Babasail was commissioned to create a unique Instagram campaign for Asyad Group, a logistics company in the Middle East. Wafa’ used isometric illustration techniques and exaggerated scale relationships to design a map showing the company’s widespread impact on Oman’s seaports.

Wafa’ highlighted brand details in her isometric illustration of this campaign, apparent in the ships, containers, and human characters.
Wielding space, color, typography, reference images, and isometric illustration, Wafa’ illustrated Asyad Group’s impact in the Middle East for the 50th National Day of Oman.

Bring Your UI Designs to Life With Isometric Illustrations

Isometric illustrations help designers bring depth, dimension, and personality to their UI design projects. Traditionally, creating isometric illustrations has been a time-consuming task, but it doesn’t have to be. Whether you’re working on a map, product rendering, or infographic, isometric drawing is a great way to add richness and perspective to web and mobile illustrations.

By following the fast and easy method outlined in this tutorial, you can create stunning isometric artwork in no time.

This article has recently undergone a comprehensive update to incorporate the latest and most accurate information. Comments below may predate these changes.