Working with AR can be a complicated process, previously requiring fairly in depth knowledge of programming, or use of often bug ridden apps. Thankfully we can now use Adobe Aero to massively streamline the process.
Starting with Illustrator
We’ll start with our design we’ve put together in illustrator here. What we’re going to be doing is preparing it to be sent over to Aero. One of the nice things that AR allows us to do is have 3D layering effects, so that the design can “pop-out” of the poster we scan. In order to make that happen, we have to go through a few steps.
- I’d recommend you save a new copy of your file, as what we’ll be doing might make it harder to edit the design in the future. So we’ll go to “save as” and make a new file.
- Next, we want to split our design into all the different layers we want appearing. There’s a couple different ways we can go about doing this.
- The first is that we can select our whole design, and go to the three bars at the top of the “layers” panel, and click “release to layers (sequence)”. This will expand every item out onto it’s own layer.
- Another is to do this process manually, by creating new layers and moving items onto them. This will give you more precise control over how many layers you will have, but at the expense of taking more time.
- Once you have the elements onto their different layers, we want to save this as a .psd file, so Aero can see the different layers. To do that, we just need to go to “file > export > export as…” then in the box that appears, we want to select “Photoshop (psd)” as the file type.
- You’re done with Illustrator! Now we can move into Aero
Working with Aero
Thankfully for us, the interface for Aero is very straight forward. Once you’ve created your new file, you’ll be greeted with some sample objects in the pane on the left side of the screen. We can ignore those for the time being.
- To get started, we want to look to the bottom of the right panel. Look for a drop-down that says “horizontal surface”. We want to change this to “image”, then add our poster design as the target.
- Once this is set, you should see the image appear in the preview in the middle pane. We can now add in our AR poster design by clicking the “+” button. It should say “import” when you hover over it.
- With your poster added in, you may need to rotate and scale it to get it how you want. On the far left there should be controls, but you can also use the hotkeys “R” for rotate, “S” for scale, and “E” for move.
- Once you have it where you want, you’ll see that all of the layers are pretty close together. To give them some more space, we can go to that bottom right panel again, and scroll to the bottom option. When you find “layer spacing”, we can go ahead and increase that as much or as little as you want. This is what controls the 3D effect.
- Once you have it looking how you like, we can click the “Share” button in the top-right corner. This will upload our project and generate a QR code for us to scan. All you have to do is scan the QR code, and the AR project will be loaded onto your phone. Just point at the image of your poster, and you should see the AR version of it appear.
A Few Notes
While this is the tutorial for the desktop version of Aero, there is also a fully contained version of the app on iOS that you can create AR experiences with, though without the ability to easily import your Illustrator designs. This version is available free of charge, and doesn’t require an Adobe CC subscription. Android users will unfortunately have to use the desktop version of the app to create with AR.
As always, if you have any questions or problems, feel free to reach out to our Creative Technologies team here!