In this tutorial, we'll cover how to attach digital content to a business card, using Adobe's Aero iOS app. We'll also go over tip and tricks for the design of the physical card.

To complete this intermediate level how-to, you should have a basic knowledge of how to use Adobe Aero. Aero should be installed on your iPhone or iPad, and be logged into your creative cloud account. You should have gone through the guided tour, and understand how to add and arrange assets, and add simple behaviors.​​​​​​​

To attach your augmented reality content to a business card (or other physical image), the first thing we'll need is the physical card for Aero to see - so to get started, have your card on hand, or print out a copy on card stock (For best results, you'll want a rigid material)  We'll also need a digital copy so we can tell Aero what image to look for.

It's important to know that some images work better than others. For Aero to successfully track where our card is in the camera view, it looks for unique details in the image such as lines, edges, contrasting tones. Our business card design should include these visual elements to work well. Avoid sparse layouts that have few unique visual elements, or repeat the same element over a large area. The finish of a business card can also affect the visual detection - you'll want to stick with matte finishes so that glare or reflections don't throw off the tracking.

By default, Aero places content on horizontal or vertical surfaces.To make our digital content attach to specific images like a business card, we'll use the image anchor option instead. To start, create a new scene, and scan for a surfaces. Tap the blue plus button to add an asset, and place it on the anchor. Don't worry about layout yet, we just want an asset in the scene. Now that we have a basic Aero scene, next we'll make it look for our business card image.

Tap on the menu icon and choose Anchor Settings. At the bottom of the screen you'll see the Anchor Type button. Tap the icon, and in the anchor type menu, select the Image option to change to an Image Anchor. We'll then browse to and select the digital copy of the business card.

In the screen that appears next, a thumbnail of your image should show, along with some options. We'll want to set the dimensions of the physical image so that Aero knows how big it is in the real world.  For a horizontal 3.5 x 2 inch business card, enter 0.09m in the Width field. For a vertical card, enter 0.09m into the Height field. Aero automatically fills in the other dimension (should show 0.052m) Tap Done to commit to the Image Anchor settings.

If our physical card isn't visible to Aero, the image we selected now appears on your surface as a digital placeholder. This placeholder is useful for getting started if you don't have the physical artifact available, and can be used for designing your scene in the absence of the business card.

Now if we point the camera at our business card, the asset you added earlier should snap to the top of the actual card. The asset should be stuck to the card as you move it around! You now have an Image Anchor scene, ready to add and arrange your business card assets.

We can now select that first asset and arrange it relative to the physical card. It's easiest to lay out your assets while the card is laying flat on a table, but it's helpful to pick it up as you work to see how things look from different angles. As you lay out your scene, try playing with orientation of your 2D and 3D assets to see what works best, and experiment with how to relates to the physical design of the card.

Keep in mind that Aero needs to see the physical card to keep the digital content stuck to it, so it's a good practice to keep your assets close to the card. We'll also want to keep the assets above the card, since the AR layer will always draw on top of the camera view. Lastly, consider what part of your card people will hold between their finger tips - and be mindful of placing content that will visually intersect with their fingers, which can look strange.

To make an asset link out to a URL, we can use the Open URL action in the behaviors. Select the asset you want to link to the URL, and open the Behaviors tab.

Add a Tap trigger, and then a new action. Scroll to the bottom of the list to find the Open URL action, and select it. Enter the URL you'd like, and commit it with the checkmark. 

You can test your scene with the Preview button to make sure your link is working as expected when it launches out to the browser or app.

When we give an AR business card to someone, we want them to know it's augmented, and how to access the AR experience. We can do this by adding information to the card, and a QR code.

We can generate a unique QR code for the card by tapping the Share icon, and selecting Share a Link. Customize the title that will be shown when viewed, then tap Create link to generate the unique url. Once the link has been created, tap the small QR code icon to see your code. You can save the image to your device from the 'Share QR code' option.

Now you can add the QR code to the design of your business card. You can include some copy to let the card's recipient know that is is AR enabled.]

What we've learned in this how-to can be applied to other images as well. Maybe you want to augment a book cover, gallery exhibit, or website - using the same techniques we've covered here you can create all sorts of unique experiences!