Interactive 3D Mockups: From Illustrator to AR

Although not many know it, Adobe Illustrator contains great design tools that go beyond vector graphics. Today we will focus on one of them, 3D shape creation and its export in formats compatible with augmented reality (AR).

Next, we explain step by step how to create a 3D object inside Adobe Illustrator and how to export it correctly to view it in an AR viewer.

Adobe Illustrator DOWNLOAD

Before you start: prepare your design

Before converting your illustration into a 3D object, create or select the vector art that will serve as the base. It can be text, a geometric shape, or any path created with the classic tools of Adobe Illustrator.

It is advisable to keep the design clean and well-defined, without overlapping strokes or complex transparencies, as this will facilitate its conversion to volume.

Apply 3D effects

Once you have your shape ready, open the 3D and Materials panel through Effects > 3D and Materials > Extrude & Bevel. As you will see, you have a lot of 3D options at your disposal:

• Extrude & Bevel: will help you add depth to a flat shape.
• Revolve: with this you will create cylindrical shapes, such as a pipe.
• Inflate: to give volume to objects in the style of a balloon.

Within the panel, you will see many different settings that will help you customize your object to the fullest, such as depth, rotation, etc.

Illustrator allows you to use predefined materials (plastic, metal, wood, etc.) that you can access from the Materials tab, located in the 3D and Materials panel. From there, you can also add materials from the Adobe Substance resources.

On the left side, you will find the Lighting tab, from where you can modify the lighting. You can apply preconfigured effects such as Standard, Diffuse, Upper Left, or Right. Illustrator also has a Ray Tracing mode, which we advise you not to activate if you do not have a powerful PC. If you ultimately decide to activate it, you will experience higher response times, depending on the complexity of the object.

Additionally, you can also map illustrations onto the surface of any 3D object. To do this, return to the 3D and Materials panel and go to the Materials tab.

• With your design open in Illustrator, keep it selected and go to the 3D and Materials panel again.
• In Materials, click on the + button and select Add as a single graphic. You can also drag your design and drop it directly into the panel.
• Select the 3D object you want to map and then click on your design, which you will find in the Your Graphics panel.

Export your 3D model

Once satisfied with the result, it’s time to export your creation in a format compatible with augmented reality. From the top menu, select Window > Asset Export.

• Select the 3D object and drag and drop it into the Asset Export panel.
• In the Format section, choose one of the following formats:
  • GLTF (.gltf / .glb): lightweight format ideal for AR visualization, web browsers, or mobile devices.
  • USDZ (.usd / .usdz): format developed by Apple and Pixar, especially useful if you are going to use iOS devices or apps like Adobe Aero.
  • OBJ: classic format compatible with most 3D programs, although it may not retain all materials.
• Once you have chosen the format, select the object again in the Asset Export panel and click on Export.. to finish.

How to view your design in augmented reality

With the exported file, the next step is to view it in AR.
There are several options, depending on the device or platform you use.

Adobe Aero, for example, allows you to import 3D models (GLTF or USDZ) and place them directly in a real environment through the camera of your mobile phone or tablet. (Keep in mind that Adobe plans to withdraw support for Aero on November 6, 2025, so it is advisable to use it while it is available).

On the other hand, if you export in USDZ format, you can open the file directly from the browser or file manager and view it in AR without the need for additional applications. You also have WebAR platforms available, which are online viewers that allow you to load GLTF or GLB files to view them in augmented reality from any device with a camera.

When opening your model, you can adjust its scale, rotation, and position in the environment, and even capture images or videos of how it looks integrated into the real world.

Adobe Illustrator DOWNLOAD