Loading

How to create Augmented Reality (AR) Tutorial I: Using The Artivive Application

Introduction

In this tutorial, we will be learning how to produce augmented reality images and projects using simple and creative techniques. Our first training will discuss one method to use the Artivive application using your phone and computer.

With this tutorial you will learn how to embed a slideshow and audio in the background to an image using Adobe Premiere Pro, Adobe Audition (optional) and Adobe Media Encoder.

ARTIVIVE

Step #1: Make an artivive account

  • Artivive is FREE! All you need is an email account.
  • Go to www.artivive.com & register as a student. Use your @berkeley.edu email.
  • It comes with 5 free AR images to create.

Step #2: Download the Artivive app on your phone

Method 1: CREATING AN AR PROJECT WITH A SLIDESHOW VIDEO EMBEDDED TO YOUR MAIN IMAGE

Now that you have downloaded the artivive application on your phone. We will show you different methods to create an augmented reality experience.

Here is the following image. Using the Artivive app, focus the camera onto the image.

What do you see? What do you hear?

We will show you step by step, how we came up with this.

choose your images

  1. Choose your base image. This will be the main image that you point your phone at with the Artivive app, and where your slideshow will play.

2. Choose your slideshow images. These images should relate to your base image that you will edit together to create the slideshow.

3. Create a folder and import all your images into that folder.

record an audio file

  1. Record an audio file that will play at the same time as your slideshow. (You can use Voice Memos or Adobe Audition to record your audio)

2. Your audio file should describe or comment on the slideshow images you chose.

3. Your audio file should be less than 40 seconds.

4. Once your audio file is recorded, save it in the same folder with your images.

Making a slideshow in Adobe Premiere Pro

Once you have the images and audio for your slideshow saved, you are ready to create your slideshow using Adobe Premiere Pro.

1. Start a New project by clicking the button that says "New Project":

2. Name your project, select a location, and press okay:

3. Import your slideshow images by going to the Media Browser Tab (Bottom Left Section)

  • select the folder your images are in
  • choose your images, and import them

You can also import your images by dragging them to your timeline.

4. Place your images next to each other on the track labeled V1:

5. Next, you will import your Audio File.

  • locate your audio file under Media Browser, and add it the same way you added your images
  • add your audio file to your timeline on the track labeled A1

6. Next, you want to edit your images so that the images and audio tracks are the same length.

You can use the select tool to move your images on the timeline, and drag the end of the image to extend or shorten the duration.

OR You can also change the duration by selecting your image, right clicking, and selecting Speed/Duration:

A box that says Clip Speed/ Duration will pop up, and you can change the duration by typing in your desired length for the image, then press "OK":

Once your images and audio are the same length you are ready to export and save your project.

6. To save your project go to:

File > Export> Media

7. A box will pop up, make sure to check the following:

  • Format: H.264
  • Output Name: You can click this to change the location that your project will be saved at
  • Make sure the boxes labeled "Export Video" and "Export Audio" are checked
  • You can check the box that says "Use Maximum Render Quality"

Once you've checked all these settings, select "Export" and wait for your project to save.

Creating your AR in Artivive

  1. Open Artivive and log in.

2. Click "Add artwork" to start creating your Artivive project

3. Add your main image on the left section titled "IMAGE", and add your video/slideshow on the right section titled "VIDEO":

4. Once your image and video are uploaded, make sure to give your project a title by typing it in the box at the top labeled "ARTWORK NAME".

5. You can then click "Add" to complete your project on Artivive.

6. Open the Artivive app on your phone and point it to your base image. Your Augmented Reality project should be working, and you should see you slideshow video play with your audio when you point your phone to your base image.

method 2:

Embed a Screen recorded video to your main image

Open your Artivive application and point the camera to the image on the left. This training will show you how to create a similar AR project.

For this method you will embed a video to your base image. You will use the Artivive application on your phone and computer, a video search platform and Adobe Premiere Pro (optional).

1. choose your main image

Choose your main image. This will be the image that you point your phone at with the Artivive app, and your video will play.

2. Find your video

Search through Youtube or Vimeo to find a video related to the main image you chose.

3. Screen record your video

  1. Once you have found your video you are ready to screen record.

2. You can use QuickTime Player on Mac to screen record.

3. To screen record a video with audio follow the steps in this video:

4. Trim your video

  1. Trim your video so that it is less than 40 seconds long.
  2. You can trim your video by opening the video, going to the top of your screen, and select: Edit > Trim

3. You can also use Adobe Premiere Pro to trim your video.

5. Create your artivive project

  1. Open Artivive and log in.

2. Click "Add artwork" to start creating your Artivive project

3. Add your main image on the left section titled IMAGE, and add your video on the right section titled VIDEO:

4. Give your project a title by typing it in the box at the top the labeled "ARTWORK NAME", and click "ADD" at the bottom of the screen when you're ready to save your project.

6. Test your project

Open the Artivive app on your phone and point it to your base image. Your Augmented Reality project should be working, and you should see the video you screen recorded play when you point your phone to your base image.

Method 3:

AR 3-D Image using photoshop

For this method you will create the illusion that your base image is 3-D by using the Artivive application on your phone and computer, and Photoshop.

Example: Open the Artivive app on your phone and point it to this image to see an example of a 3-D image AR Project:

Audio: Ep. 6 - Homeland Insecurity Podcast Hosted by Erika Andiola // Art by Sarai Montes

1. choose your image

  1. Choose a base image that you will turn into a 3-D image. Try to choose an image that will be easy for you to choose a part to cut out in Photoshop.

2. Download and open photoshop

  1. Download Photoshop. It is free for Berkeley Students.

2. Open Photoshop and click "Create New" to start your project.

3. You can customize the size of your project depending on the image you are working with, but we recommend keeping the resolution as: 300 Pixels/Inch.

4. Click "Create" once you are done choosing the size of your project:

3. Turn Your image into a PNG

A transparent PNG is an image that has a transparent background. There are several ways to turn your image into a PNG using Photoshop.

Example of a PNG image with a transparent background:

You can use the "lasso tool" to cut out your shape:

  1. Add your image to a layer on Photoshop

2. Select the "magnetic lasso" tool

3. Trace around the shape you want to cut out

OR If the background of your image is only one color, you can easily turn it into a PNG by following this tutorial:

Once you have cut out your image, you are ready to export and save it as a PNG:

4. Choose File > Save As, and choose PNG from the Format menu.

5. Click "OK" to save.

assemble your project in artivive

Next, log in to your Artivive account.

  1. Select the gray square titled "Add Artwork":

2. Select the "3D/Pro" button located in the upper right hand corner:

3. Click "select file", and add your base image:

Once you have selected the file, your image will appear on the grid.

4. Next, you want to add your PNG image to your project. To do this you need to add another image layer by clicking the button that says "Add Image" on the "LAYERS" tab:

5. Scroll down to your "Layer 2 - IMAGE" section, and click "select file". Choose your PNG image.

6. Once your PNG image has been added, it will be placed on top of your base image. You want to move it forward by dragging it along the green arrow pointing forward.

Note: If you can not see the arrows, make sure to check that the arrow button in the bottom left corner is selected.

7. You can zoom in/out or move around your image to see how it looks from different angles. Move your PNG image around until you are satisfied with the way it looks.

8. If you want to add audio, you need to record a video (screen record with audio or record yourself speaking). Then go to the "Layer 1 Video" Section and add your video:

9. Once your video is in your project, use the arrows to move your project BEHIND your base image. You want to make sure the video is behind the base image, because when your project is complete you want to hear the audio, but you don't want to see the images from the video.

10. Once you are satisfied with the placement of your images:

  • Give your project a title in the "ARTWORK NAME" box at the top of the screen
  • Delete any image/video layers you didn't use
  • Click the "SAVE" button at the bottom of your screen

Test out your project

Open the Artivive app on your phone and point it to your base image. Your Augmented Reality project should be working, and you should see your video play when you point your phone to your base image.