Creating tattoo inspired augmented reality

Inspired by a love for traditional tattoo art, we set out to reimagine the 2D artform in a 3D world.

Tattoo inspired AR course overview

An overview of the course and what to expect.

What you learned: How to start your AR experience and the supporting materials you will need.

• Tattoo Flash Set contains all the Tattoo inspired assets in one Aero scene with behaviors.
• Tattoos to Life contains an interactive AR scene using some of the assets supplied.
• QR codes can be generated from within Aero and used to launch your augmented reality experience.
• Scene navigation hot keys:
  • 1 on the keyboard to Orbit
  • 2 on the keyboard to Pan
  • 3 on the keyboard to Dolly
  • F on the keyboard Frames Selected object
• The support materials include:
  • 12 tattoo inspired 3D models (GLTF) 
  • Six images
  • QR codes to launch experiences
  • Two Aero .real scenes (Aero AR file format)
• These sample files are Adobe Stock assets that you can use to practice what you learn in this tutorial. If you want to use these sample files beyond this tutorial, you can purchase licenses on Adobe Stock. Check out the ReadMe file in the folder for the terms that apply to your use of a sample file.
  • Clouds Adobe Stock #161092348
  • Paper Adobe Stock #138956731
• Learn more about the Tattoos to Life project on Velvet Spectrums Behance page.

Photoshop prep work for Aero assets

Preparing assets in Photoshop for augmented reality.

What you learned: How to adjust the assets in Photoshop for AR.

• Use Shadows/Highlights in Photoshop to retouch and lighten up the coastal scene image.
• Control the color using a Curves adjustment layer.
• Extract the white from the cloud image using Color Range.
• Create high contrast elements for the image anchor using the Rectangle tool and Type tool
  • For more information on Image Anchors and what makes a good anchor, see the documentation HERE
• Age the paper image using a gradient map.
• Create a transparent ellipse using a mask.

Building the "Tattoos to Life" scene in Aero

Importing assets into Aero and laying out the augmented reality scene.

What you learned: How to use an image anchor and import assets.

• Choose the image anchor by going through the Scene Graph.
• Import assets into Aero by using the + button.
• Change the objects pivot point in the Properties panel
• Shift+rotate will lock the rotation on an object to increments of 15 degrees.
• Position assets using the move, scale and rotate gizmos.

Using Behavior Builder to add interaction and animations

Create triggers and add actions to bring the scene to life.

What you learned: How to create triggers and add actions with Behavior builder.

• Use the Import button to import transparent cloud pngs into Aero. 
• Duplicate an object using the Duplicate option in the Action panel.
• Group objects using the Group option in the Action panel.
• Add motion to multiple objects by grouping them together and placing the action on the entire group.
• Use a Start trigger in Behavior Builder to start an action at the beginning of the experience.
• Create a Tap trigger and rotate action to the ships wheel in Behavior builder.
• Reveal objects by hiding them at the start of the experience and using the Show action.

Animating a subtle “MUM” banner in After Effects and sharing the AR experience

Creating a subtle looping wave motion in After Effects, export the animation as an images sequence with Media Encoder and sharing the AR experience.

What you learned: How to create an animated image sequence for AR using After Effects and Media Encoder and how to share your augmented reality Aero experience

• Import banner into After Affects.
• Activate fonts through Adobe Fonts.
• Use Type tool to add typography to banner.
• Skew the type with the Transform effect in After Affects.
• Use the wave preset to create an animated wave on the banner.
• Add composition to Adobe Media Encoder to create an image sequence with Alpha.
• Zip all the png files into one Zip file and import that zip file into Adobe Aero.
• Add the Play image action on the sequence to play the animation.
• Add sounds by using the Play Audio action.
• Share your object using the Share icon in the upper right corner of screen.

Experience the scene in augmented reality by scanning the QR code below!