Note: Because this is an ongoing series, viewers will not receive a certificate of completion.
Skill Level Intermediate
- [Instructor] Hey everyone. I'm Howard Pinski and in this Adobe XD tip, we're going to take a look at creating an animated card gallery, specifically, for augmented reality experiences. On this document, I have a nice blank art board that we're going to be using for this design. And to start the process, I'm going to grab my rectangle tool and draw out a shape across my entire canvas. This will allow us to load in an image directly into this shape. So, hopping over to Finder or Explorer, I've a bunch of images that will work great for augmented reality experiences including this one of a living room wall. So, I'll go ahead and select the image and drag it directly into Adobe XD, onto the shape and boop, we now have a background image. The next thing I want to do is I want to start adding the cards that we'll be able to navigate between. So, with the rectangle one more time, I'm going to draw out the first card just like this. And I'm not too concerned about the size of the card just yet, 'cause we'll be able to move this back and forth in space to line it up with the wall perfectly. With this first card in place, I'm going to hop back over to Finder. I'm going to hop into this folder here where I have some great fantasy style images from Adobe Stock, and I'll drag one of these images directly onto one of these cards. Now, some of you might be asking, "Why aren't you using "a repeat grid for this process?" And there are two reasons. First off, I want to show you how stacks can work in an experience like this. And two, since the active card will eventually be a little bit larger than the others, using a repeat grid won't allow us to do that. So, with this first card in place, what I want to do in my Layers panel, is pop this into a group. So, I'm going to hold down my Command key and press the G key on the keyboard, and I'm going to call this group "Games." And with that done, we're going to direct our attention over to the properties inspector to the right and I'll want to turn on the stack option. And this will automatically look at the direction of the layers inside of this group and determine the orientation. Now because there's only one layer, it defaults to horizontal which is perfect in this situation. Now what I can do is I can dive into this group by double clicking, and if I duplicate, Command and Control D, it's going to automatically add a new card over to the right. I can now hop back over to Finder, add a new card, duplicate, Command and Control D, and repeat the process just like this. Wonderful. And as I'm going through this process, if I do want to adjust the spacing, I can do that on an individual basis by hovering in between any of these items and pulling. Or, I can hold down my Shift key and move them just like that. Another benefit of working with stacks is if I wanted to rearrange some of these items, all I need to do is shift them. All right, so we have our gallery of cards in place, but what we want to do now is we want to actually line this up with the wall and push it back in space so we can start creating the prototype. And to do that, we want to activate 3D transforms over within the Properties Inspector to the right or the Command and Control T shortcut. And, on the canvas, you have a few options to rotate along the X and Y axis, and you can also use this handle in the middle to pull the items forward in space or backwards. Now, what you're going to notice is when I pushed it backwards, it disappeared. And some of you may run into this. And it's happening because the background image which we added originally, if you take a look within the Properties Inspector has a Z depth of zero. And when I had the game selected and I pushed that back, the Z depth went negative. So, it actually pushed it behind the image. So, in this case, all we need to do is select the background image and set a Z depth of let's say negative 500. And then we can go ahead and enlarge it so it looks just like it did before. And now if we select that group of games and push it back in space, we don't have that intersecting problem. Now that it's been pushed back a bit, we also want to rotate it on the X axis so it lines up a little bit with the wall. And we can use the baseboard to help us out in this process. That looks pretty good right about there. So, this gallery's definitely coming along, but it still doesn't look like it's part of this scene. So, there are a few things that I want to do to make it look a little bit more realistic. First up, I want to make sure that the cards don't overflow off the wall. And to help with that, wee can utilize a mask. I'm going to go ahead and grab my pen tool from the tools bar and I'm going to click on this wall over here to the right, right up here to the top, over here to the curtain, and then down on this side too. And if your curtain does have a little bit of a curve, you can go ahead and add a curve to your path just like that by pulling. And then I'm going to close this off right here. If I turn on the fill, we can see the shape that we've created. And what we want to do now is use this newly created path as a mask for our games. So, inside of the layers panel I have this new path created which I'm going to name Wall. I want to also select the group of games that we created and pushed back and rotated. So, I'm going to hold down my Shift key and click on that group. And then, under the object menu, we're going to go Mask with Shape. And if I zoom in here, we can see that things are looking a little bit better. And if you look really closely, you can see that the curtain is not perfect, so we can dive in here, grab the path, double click, and make some changes if we wanted to. But overall, it looks pretty good. The next thing I want to do is really bring focus to the active card. And there are two things that can help that. One, we can make it a little bit larger. So, I'm going to double click into this mask, and then double click into this group to select this card here. And I'm simply going to hold down my Alt or Ops key and Shift key and then enlarge it. And what you're noticing, because we're using a stack, it's nicely pushing all the other cards out of the way. And the second thing we can do, is we can decrease the opacity of some of the other cards. So, this one over here to the left, I might drop it to about 50%. This one could be 50% as well. And this one, because it's a little bit further off, we can try 30%. And if we launch the preview at the top, we can take a look, and things are looking pretty good. Again, the masking is not perfect. I would spend a little bit more time getting that right. But overall, I'm pretty happy with this. Now of course, we want to make sure we can prototype this and animate between the different cards. So, I'm going to zoom out a little bit. I'm going to select this entire art board. And I'm going to duplicate this over to the right. Command and Control D. And once that's in place, we can start setting up card number two. So, I'm going to dive in, just like I did before. I'm going to start by selecting the next card I want to be active. I can enlarge it just like we did earlier. I'm going to grab this card, make it smaller. And then shift the entire group over. Finally, I'm going to work on the opacity. So, I'm going to double click, set the opacity of this card back up to 100%. This one will be 50, this one will be 50 as well, and then this one in the distance will be down to 30. Perfect. So, we have two of our art boards complete and ready to go, and now we want to start wiring it up. So, on the first art board, we're going to hop into prototype mode at the top. And we want to select the object that will trigger the next interaction. And in this case, it's going to be this card right over here. So, I'm going to select that card, drag the wire over to the second art board, and then from the Properties Inspector, I'm going to choose a tap trigger. You can also choose a drag trigger if you want that extra interaction. But I'm going to stick with tap for now. We're going to make sure that auto-animate is selected so that XD recognizes the differences and animates them beautifully. And then for the easing options, we'll do a nice in out with a duration of around 0.6 seconds. Then we can do the exact same thing going back so I can select this card in here, drag it back, all the other properties are the same. And we're now ready to see this in action. So, with the first art board selected, I'm going to press the play button one more time. Click. And then click to go back. And of course, you can continue getting super creative with this by adding additional shadows and a lot of fun things to make this experience look even more realistic. But that is how you create an animated card gallery for augmented reality experiences in Adobe XD. Thanks for watching everyone and I'll see you all in the next tip.