Create an augmented reality artwork | an iPad QuickLesson Video

create your own

Augmented Artwork Experience

28th March 2021

Suggested Lesson Duration: 75-90mins

jacob-profile-picture

an iPad QuickLesson by Jacob Woolcock

Description

For this #QuickLesson we’re going to learn how to create a mind-blowing Augmented Reality experience which is based on a piece of our own artwork or an image that we’ve found. We’re going to photograph that artwork and import it into the Reality Composer app, setting is as an Image Anchor. Then we’ll build our own AR Experience around that image using text, speech bubbles, 3D models and more before previewing it using Augmented Reality. Lastly, if you’d like to go even further, we’re going to add animations and movement to our AR objects to make them appear and move around your artwork. It sounds like a lot, but with this Quick Lesson you’ll be away and creating in no time!

Teacher Notes

Transcript

Introduction

Hello, and welcome to another Quick Lesson with me, Jacob Woolcock. Today, we’re going to take a piece of artwork that you’ve already made, and we’re going to use augmented reality to bring it to life. So, what does that mean? Well, here’s an example—you can see a lino cut that I’ve made of a Cornish Chough, and then you can see the information that I’ve added around it using augmented reality. You could add your own facts or figures, include information about your picture, or even add some really cool sculptures and 3D objects coming out of your artwork to make it truly come alive. We’re going to follow five easy steps to make this work. The first step will be to take your piece of artwork and bring it onto your iPad as an image. Then, in Reality Composer, we’re going to set that image as our anchor point for the augmented reality experience to come alive around. In step number three, we’ll build that experience using text and objects, customising them as we go. In step number four, I’ll show you how to make this experience come to life using the augmented reality camera. Finally, in step number five, if you want to go further, you can add animations to make your text and objects pop out of the screen. To complete this tutorial, all you’re going to need is an iPad with the Reality Composer app installed. If you haven’t got it already, jump on the App Store—it’s free! You’ll also need a picture or a piece of artwork to use as the anchor for your augmented reality experience. When you’ve got those things ready, let’s get started!

Step 1: Photograph your Physical Artwork

Okay, first of all, open up the Camera app on your iPad, and take a photograph of your piece of artwork or picture. Try to get a really square-on photograph to avoid distortion, but don’t worry if you need to crop it later—we can do that. Aim for a nice, clean photograph, and then tap on the picture to enter editing mode. From here, crop your image to ensure that only the actual piece of art is visible on the screen. Once you’ve cropped it, press Done. That image is now saved as a photograph, but we’ll need to put it into the Files app to make it easier to access later. Press the Share button, then choose Save to Files. You can select which folder to save your picture in—I’m going to put mine into my Quick Lessons Resources folder so I can find it easily in a minute or two. And that’s it—step number one is complete. I’ll wait here while you catch up, and when you’re ready, we’ll move on to step number two together.

Step 2: Prepare your Workspace

Now we’re going to open the Reality Composer app, and from the home screen, you’re going to create a new project. Here, you can choose what sort of anchor you want to use, and for today’s Quick Lesson, we’re going to choose the Image Anchor. Tap on that, and it will open a new workspace for you. In the middle, you’ll see a 3D object and a kind of placeholder of your picture. Tap on that placeholder first, and on the right-hand side, in the project inspector, you’ll see Image Asset. Tap on Choose, and then find the file you saved in the last step. I’ll jump into Files, then into Quick Lessons Resources, and there’s my picture. I’m going to add it and then tap on it again to select it. You’ll now see it update on your Reality Composer canvas. This is great, but the only problem is that it’s currently much bigger than my actual object. In reality, my lino cut is about 30 centimetres wide, but on the screen right now, it’s over a metre. So, on the inspector again, we’re going to adjust the sliders for Physical Width and Physical Height to make it closer to its real-life size. This isn’t vital, but it does mean you can better judge the objects you’ll be adding later on. When you’ve changed the size, take some time to explore moving around your canvas using one and two fingers. Try rotating, zooming, and panning around to get a feel for how Reality Composer works—this will be helpful later. When you’re done, tap on the blue object in the middle and press Delete. This will leave you with a blank Reality Composer interface, with just your image anchor waiting in place. Take your time here to import your picture and make sure it’s the right size. When you’re ready, step number three will begin shortly.

Step 3: Build your Augmented Artwork

Okay, so now it’s time to start adding some content around our piece of artwork, and I’m going to start off with some text to title my picture. So, press the Plus button on the top toolbar and then scroll down to Text. Now, when you first import that, you may notice the text is standing up vertically on your piece of artwork, and really, I want it to lie flat underneath. When you tap on that text, you’re going to see three coloured arrows—red, green, and blue—and this seems like a good chance to talk about what they mean. As we’re working in 3D space here, each of those arrows will slide your object across the X, Y, or Z axis. If I grab one of those arrows and pull in the direction it’s pointing, my text will move in that direction, whether that’s up or down, left or right, or forwards or backwards. But there’s more! If you tap onto one of those arrows, you’ll then get a coloured circle around your object, again on one of those three axes. If you choose the right coloured circle and rub your finger around the circle, it will rotate. So, I’ve chosen the red circle here, and as I rotate that 90 degrees, you’ll see my text is now lying flat on the document. Then I can use the arrow to slide it below my piece of artwork, and now I can use the inspector to change that text to be my title—in this case, Corn Shelf. Now, on the inspector, there are a huge number of different options to customise that object, and each object has a different set of options, which you’ll find out later. For me, I want to make the scale smaller so that the text fits on the page better, and I want to turn off the feature called Word Wrap, which means the text will all appear on one line, like a title. Then I can start exploring the materials that my label is made of. This could be plastic, metal, terracotta—whatever you want! Some of these materials let you choose the colour as well. For example, with Car Paint, you can then choose what colour to paint it, and each one will change how light interacts with it in augmented reality. There’s tons to explore here, so do take some time later. For me, I’m going to choose gold as my material because it catches the light really nicely in real life. The last thing to do is to change the font to one I like the look of more. Again, you can explore all these options later, and I’m not going to talk you through them step by step because it’s very easy to understand. Well, I’ve got one title looking good. I’m going to tap on it, press Duplicate, and then make the scale slightly smaller and change the text to be my name. Now I’ve got a title and a subtitle, and it’s looking good. For my example, I’m going to add some facts about the Cornish Chough around my piece of artwork, but you may want to add different things. For me, the starting point is to press the Plus button to go back to the object browser and then go to the Callouts section. From here, I’m going to use that spiky dynamic one because it kind of matches my artwork style. I’ll drag that onto the page just like before, and also just like before, I’m going to rotate it so it’s lying flat and then position it where I want it to be. Always make sure you look at your workspace from different angles because you can see here that the text callout is actually floating quite high above my picture. Now, you can have objects floating, and in AR they’ll look really cool if they’re slightly off the ground, but I don’t want mine floating quite that high. So, I’ll nudge it down a little bit. Then we can go onto the inspector, change the text, change the font, change the scale, and adjust the colour just like before. Let’s duplicate that now, and I’ll change the second one to a different fact and a different colour. One of the really great things about Reality Composer is that on the inspector there are different options for different objects. One of the options for the callout is to change the position that the speech bubble is pointing. That means you can really customise this to exactly what you want. I’m going to race ahead and do that now, and then I can position it where I want it to be. Okay, I’m going to jump ahead again now because I’m not going to show you all of those steps again and again, but I’ve now added four different speech bubbles with facts and some gold stars as well. I’ve positioned these around my picture, made some flat on the page, and raised some slightly. As you rotate around the canvas, you can see exactly how that looks. Take your time here—there’s a lot to do in this step. In fact, you’ll probably spend the most time on this step out of any in this video, so take your time. Great stuff! Make sure your artwork is looking amazing, add as much information and content as you want, and we’ll go on to step number four when you’re ready.

Step 4: Preview + Adjust your AR Artwork

We’re now going to have a chance to look at that piece of augmented reality artwork in real life. So, make sure you’ve got your actual picture nearby, along with your iPad, and on the top toolbar, you’re going to press the AR button. That will activate the camera, and as soon as the camera recognises your piece of art, all of those objects that you’ve placed in Reality Composer should then snap into place over your real-life object. It may well be, at this point, you notice a few things you want to tweak, so come out of that experience, and then you can reposition things, rescale things—whatever you want to do to make your work look amazing. Then we’ll preview it again by pressing the AR button and the Play button. Don’t forget you can lift up your picture and move it around, and that augmented reality content should follow your piece of art wherever you hold it, which is pretty cool. It may be you’re happy to leave the project at this stage if you’ve managed to complete your AR piece of artwork, but if you want to go further with animations, stay tuned for step number five.

Step 5: Go Further by Adding Animations

To make our augmented reality experience even more dynamic and interesting, we can make our objects appear and disappear at different times. Tap on the Behaviours button on the top toolbar—that’s the one I’m pointing to now. Then, add a new behaviour to the object currently selected. I’m going to choose Start Hidden. Now, at the bottom of the screen, you should see some new boxes pop up with all the different actions for that behaviour. The second box along shows that objects will start hidden, and it will say it applies to one object (the one you initially selected). However, if you tap Choose, you can pick any object you want to include in that action. I’m going to select all of my objects, including the title, so that when my experience starts, you don’t see anything at all—it’s a bit like a magic trick! Next, I’m going to scroll to the action box called Show and apply this to my title and subtitle. I’ll choose those two objects, and then customise how they’ll appear on the screen. I want mine to slide in from below, and I can even adjust the distance they slide in from. I’ll also set the duration to a couple of seconds to make it smooth. Now that part of the augmented reality experience will be animated. At the moment, that’s only our text showing up—nothing else. To add more, press the + button in the Action Sequence section, then choose this action to apply to your text boxes again. Select the objects, decide how they’ll appear, and set the duration for their animation. Now you’re building the animation step by step. Reality Composer will read those boxes from left to right and apply the animations in sequence. I’ll repeat this process one more time for my stars, but you can repeat it as many or as few times as you like to make your animation as complex or simple as you want. When you’re done, press the AR button on the top toolbar. Now, when you press Play, your objects should all disappear and then reappear according to the animations you’ve just created. This step can be a little fiddly and might take a few tries to get it looking perfect, but don’t hesitate to experiment and see what you can make Reality Composer do!

Conclusion

And you know what? That’s it—tutorial complete! Well done for finishing this Quick Lesson. We’ve taken a piece of artwork from the real world and digitalised it onto our iPad. Then, using Reality Composer and the magic of augmented reality, we’ve added other objects and information that aren’t there in the real world but appear in the AR world. We’ve gone even further by adding animations to make this really pop and come to life. I really hope, at this point, you’ve created something you’re proud of that looks really cool, and hopefully, you’ve learned a few new things along the way as well. If you’re able to, please share this with me on Twitter, Instagram, or Facebook using Quick Lessons, or let me know in the comments below how you got on. And don’t forget—you can like and subscribe to my channel for more Quick Lessons, including the two that are on the screen now. Until next time, see you later!
grey-placeholder-app-icon

Video Details

Thank You

All of my content is completely free to watch. However, to create these videos I require a steady stream of caffeine!  If you’ve found this QuickTip helpful then please do consider buying me a coffee. Thank you.

Additional Information

The content used in this video is intended for educational and informational purposes only. All rights to the images, music, clips, and other media used belong to their respective owners. I do not claim ownership over any third-party content used. This video has not been authorised, sponsored, or otherwise approved by Apple Inc.

iPhone, iPad and iPadOS are trademarks of Apple Inc., registered in the U.S. and other countries and regions. iOS is a registered trademark of Cisco Systems Inc. Whilst I have done my best to list all applicable trademarks for this video, in the (hopefully unlikely) event that I have missed any you can find a full list of trademarks registered to Apple Inc. here.

Finally, please note that whilst every effort has been made to ensure the information contained within this video was correct at time of publication, please be aware that as future updates and software changes occur some or all elements of this video may become outdated. I will endeavour to remove videos which are completely obsolete so as not to cause confusion!

steps in this

QuickLesson

camera_app_icon

Step 1: Photograph your Physical Artwork

begins at 01:17

reality-composer-app-icon

Step 2: Prepare your Workspace

begins at 02:17

reality-composer-app-icon

Step 3: Build your Augmented Artwork

begins at 03:53

reality-composer-app-icon

Step 4: Preview + Adjust your AR Artwork

begins at 08:09

reality-composer-app-icon

Step 5: Go Further by Adding Animations

begins at 09:06

more

QuickLessons

Enjoyed this video? Say thanks by buying me a coffee!

share this

QuickLesson

QuickLesson+ is Coming Soon

This next section is under construction and the information visible is not accurate. Please check back soon when this QuickLesson+ will be available to purchase.

QuickLesson+

Download and keep this entire QuickLesson to watch whenever you like, ad free - along with detailed lesson plans, curriculum links and a copy of the files I created in this lesson.

This QuickLesson+ includes:

Create an augmented reality artwork | an iPad QuickLesson Video

Alternatively you enjoy the QuickLesson for free on YouTube below!