Photoshop to Interactive 3D & Augmented Reality

If you’re a visual designer or art director, you may have noticed a growing trend of 3D elements being incorporated into traditionally 2D designs. Whether you’re designing an ad or creating a product presentation, combining 2D and 3D elements can create dynamic visuals that can be expanded to new mediums, like augmented reality or interactive 3D.

With BRIO, you can easily upload 2D and 3D assets to be remixed and exported without the need for any external 3D software. BRIO runs in your browser and includes a library of materials, studio light setups and camera presents to help you quickly set up your scene – even if you’re new to 3D.

Not only can you export high-quality renders of your design – with BRIO’s publishing options, you can use your design assets to create Augmented Reality experiences as well as interactive 3D presentations.

The following example shows how to set up and import a 2D element from Photoshop into BRIO to add to an interactive 3D product shot for a pair of sports headphones.

Watch the video to see a quick demonstration of the workflow, or follow the steps below.

1. Begin by bringing a 2D asset into Photoshop.

2. Prepare the image for export. Ensure the photo is edited and at your desired final quality, and remove any part you do not wish to include in the 3D scene. In this example, a mask is added to remove the background and show only the model – the background can be recreated in 3D later. Export as a PNG.

3. Open BRIO and start a new project. Import your 3D model(s) into BRIO.

4. Edit the model by adding materials from the BRIO library, or add custom materials by uploading your own maps to the channels in the material editing panel.  Get models from our Library or download from Turbosquid, Quixel, Grabcad or

5. Build out your scene with basic objects (found in the tools menu) or select from the BRIO object library. For this example, a cube is used to recreate the look of the wall behind the model.

6. In the tools menu, select the upload button and import the 2D image. Adjust the camera position or the rotation of the image so the camera faces it directly.

7. Set up the lighting. Select a from the light set library, or add lights individually via the tools panel.

8. To make your scene interactive, select the object on which you want to apply a behaviour. Open the behaviours panel and set a trigger (a click is selected as the trigger in this example). Select the behaviour that is to follow (in this case, a rotation animation).

Tip: Follow the same steps for uploading 2D assets to add instructional elements like text and arrows. You can also add these directly within BRIO using the text tool and object library.

9. Add Post Effects for the finishing touch before you publish.

10. Publish your scene. Select EXPORT and edit publishing settings, and publish your interactive 3D scene. Share your scene via a link or embed directly on your site! When viewed in 3D mode, viewers will be able to interact with the scene on any compatible device.

** Bonus Tip.  You can also limit which objects show up in AR using the per object attribute “Visible in AR”. In this way, you can create content that works for the web but also looks great when people preview in their own space

Drive more sales with BRIO AR and BRIO 3D! Sign up for free today to try it, and then select the affordable subscription plan that is right for your business here.

For tips, tutorials and to ask a question, please visit our Learning Page.


Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email

Leave a Reply

Your email address will not be published. Required fields are marked *