Lessons

Lesson Info

Using Effects and Repeat Grids

Next what we're gonna do is we're gonna start talking about some really pretty cool things. We're gonna kinda get into effects and repeat grids and go from there. All right, so, this is the good stuff. All of this is good. All of this actually amazing, as far as I'm concerned. But what I want to do now is we're gonna go in and we're gonna start to set up what's called a mask and a repeat grid. Now masks a lot of us have probably used before where we go in and we take an image and we cut part of it off maybe in Illustrator or InDesign or Photoshop. Well we can do the same thing in XD. We can create a mask. There's two ways to do this. At least two ways. Now, the two main ways are to take, if you look at my screen, here, I've got this Places Seattle image. What I really want to do is I want to cut part of the bottom off. And we create an object, we'll draw maybe a rectangle or shape, put it on top of the image, or put it on top of what we want to mask, and then we can say, mask with the ...

top object. It's just that simple. Another way is we can draw a shape, an object, etc., maybe like a circle and maybe we're doing wire framing. Wire framing is, depends on who you talk to, but wire framing could be just gray boxes and placeholder text and things like that where you're just trying to associate or figure out associations for content and things. You could have circles to indicate profile pics and you wanna do later on is, after you actually have the content and you're starting to put the flesh to the bones, so to speak, you wanna add your imagery, your actual fonts, etc., you can drag images in and it will place them within the actual circle, or the graphic itself, and that's gonna be a mask. So there's two ways to mask for us. You're gonna see differences between the two. So what we're gonna do for this one, is we're gonna draw a shape first and make a mask. Select the rectangle tool and just starting in the corner, just click and drag, smart guides should help you to snap to the edges of the artboard. And we're gonna make it so it's about as tall as that image right there. We could figure out the exact dimensions over in the Property Inspector. Go to the Select tool, and I want you to shift-click on the image behind it to select both objects, to select the rectangle and the image. Now what we're gonna do is we're gonna go in and we're going to mask this. So if you got to Object, you're gonna see, now this is on Mac, Object, Mask Symbol, on Windows you want to right click on those objects, okay. Like I said, it's a little different. Object, not Make Symbol, I didn't say that, I said Mask with Shape, that's what we wanna choose, right. Some of you are thinking, "Symbol? What are you talking about?" Mask with Shape, so choose that. And let's see what it does. What we just did was we took a shape, we made a mask, we did that. If you were to look in the layers panel, go over to the layers panel in the lower left corner, you're gonna see that we now have a mask group. You'll see the icon in there is a mask icon. It's a group. So if you click on the mask icon over there in the layers panel on the left, you'll actually see both objects. What we can do is we can do things like lock things, all kinds of stuff from there. Now, I want to move the image. I'm gonna do something different. I masked it, and I'm like, oh I don't like the size of it, whatever. Right now if you double click on the masked object, you're gonna see the image and mask shape. You can go out and change the mask shape if you want. You can click on the image behind, for instance. And you can change that as well. Maybe mask out parts of this, or something like that. Just a little bit. If you press escape, you're done editing, essentially. That's awesome. That's a great way for us to be able to go in and do all kinds of things. We can change the image, we can rotate it, we can do different things if we wanna do. And that's a great, easy way for us to work. Now I want to make sure that it's about the same height, so let me drag this image down so it's about the height, there we go. Make it a little bit bigger. Okay. All right now, another way to make a mask. We're gonna go in, I'm actually gonna take this text and drag it down. Let's just move it down a little bit. Same thing over here. Bring it down. We're gonna draw a shape. In this case what you can do is, like I said, you can maybe have a shape that's a placeholder for where your images might go, or whatever you're using. And later you can add them. So we'll go over to the circle here, the ellipse, and I'm gonna shift drag, make a circle. Not too big, there we go. Press the letter V to get to the Select tool, you can always go over to the black arrow. And just center align it right there. Now another way to make a mask is to just drop an image in there. So I'm gonna go out to my desktop, I'm gonna open up the folder that I've got there full of assets. In this case you can drag a lot of different types of things. What I'm gonna do is I'm gonna grab an employee, okay. So I'm gonna grab this png right in there and what happens is when you drag it on top, it's just gonna fill proportionally. So it's gonna fill it up, it's gonna prob trim part of the image in some ways. But this is our mask. And the interesting thing about this, is that we're not gonna go in and edit the image. The image is technically a fill for the shape, okay. If you were to resize right now, it would keep the image, take a look at this. It would keep it filled proportionally, okay. Now that's horrible, so I'm gonna undo that. If you were to double click on it, you would actually get to these anchor points. You could resize, reshape, change them. But you're not gonna go back and you're not gonna be able to select or not select the individual image inside that mask. So it's a different way to work. It's just another type of mask that you have. All right, I'm gonna put another over here. I'm just gonna copy this You can click on it with the Select tool, copy it, come over here and paste. Now my first instinct is to Option or Alt drag it over, but if you just click in the artboard here and paste it in the same position, which is great. And I'm just gonna put another image in there. So I'm gonna Command Tab back over to my desktop. Or Alt Tab on Windows. Show the folder, show a folder. And just drag another image in. So to replace an image in XD, you just drag on top and there we go. Not too bad. Okay, we're getting there. You've got some things you can fill out. We can add rectangles and colors and things. All right, I'm gonna save my file. Now the next things we're gonna do is called a repeat grid. This is pretty awesome. This is probably one of my favorite things in here. Now we're not gonna go crazy with it. I'm gonna kinda show you how it works a bit. But what I want you to do is, we're gonna put an image out here that we're gonna use for the repeat grid. But we're gonna start with a rectangle. So make a rectangle. Just a little rectangle like this. And what I'm gonna do is I'm gonna round the corners a little bit. Drag one of the corner points. I'm gonna zoom in so you can see it actually. There we go. Now I'm gonna put an image in there, just like we did. So I'm gonna go Command Tab out to my desktop, find a folder. Alt Tab on Windows. And we're just gonna drag an image. So I will grab, I've got a folder of images here called repeat grid. I'll just grab one of these in, and drop it in, you now, fill it up. Let's add a little text, maybe, just to try something here. So I'm gonna press the letter T to get to the Type tool. Click and type in Old Mill Hike, something like that. Press Escape, and what we can do is if we go to the Select tool, you can just move it around. Put it over here. Remember if you want to apply formatting that we saved, we can always go over to the Assets panel in the lower right corner, and you can apply a character style, you can go work with the styling over there if you wanna do that as well. Now we've got a couple things going on here. What I want to do now is this. We're gonna make it so if we take these objects, I want to repeat them. I want to have like four or five of these. Maybe we got listing of hikes that we want people to be able to tap on and then go see the actual page that has more information. Instead of taking each image and each text object here, and just making a bunch of copies. But we're gonna kinda link them all together and we're gonna create something called a repeat grid. So if you want, just select some content, and this is great for all kinds of things. You're gonna see in a second here. What I'm gonna do is first of all I'm gonna close the Creative Cloud Libraries panel if you still have it open. On the right, click on the repeat grid button over there in the Property Inspector, and that kinda works a little magic here. It says take that content and now let's repeat it. We can repeat it either vertically, horizontally, or both, if we want to do that. See these handles here, grab a handle. I'm gonna go down, so drag a handle down. And look what it does. If you haven't seen this before, man you're in for a treat. Check this out. This is so much easier than copy pasting. And you'll see in a second why also it's better. If you wanna do a horizontal version, maybe. Maybe you've got a bunch of employees that have their image and their bio kind of information, you've got a big grid of them, you can drag it to the right too, to create a repeat going that way as well. But I don't wanna do that. So let's go smaller. If you wanna change the distance between each one of these objects, put your cursor between put that pointer right between and you can drag when you see the pink line. That's gonna change what's called the gapping. So we can kinda adjust the gapping right there. Now here's the best part. I wanna be able to go in and maybe replace all those pictures or the text. But I've got a bunch of pictures I wanna just put in there. What we can do, is we can select a series of images and drag 'em right on top. And it's gonna just, in the ordering of the naming convention of the files, and I'll show you, gonna put 'em in there and replace those images and repeat it. So, we're gonna go out and find a folder some folder full of images that we're gonna use out on our desktop. I'm gonna use Command Tab on Mac or Alt Tab on Windows, I've got this repeat grid folder with four different images in it. Now I did a repeat of five in the file, and only four images, because I want you to see what's gonna happen here. It's gonna repeat the repeat. All right, we're gonna drag the images in. Drop it on one of them. And let go. And you'll see what it does. That's pretty awesome. That is a little bit faster than being able to copy paste and kinda work that way. The great thing about this is that you are going to see the repeat happen. The four images are going from top to bottom. And then, because there was only four, it's gonna repeat those four as it goes. No matter how tall you stretch it out, it's gonna keep repeating them. We can now, this is another great part, you can now go in and do things like adjust the appearance for these objects. Check this out, it's gonna adjust all of them, they're all tied together. I can change the sizing, the position of things. I can do something like this. I wanna add a little more text, like maybe how long the hike is or something. I go and copy paste this maybe. Copy paste that text, you're gonna see, whatever you put in there, whatever you paste or create right now that's in this grid, we can then go in and start to change it. Now this is the thing about text in a repeat grid which is actually pretty cool. If I go in here I can say like 7 miles and of course it's aligning right, I need to align left. Let me do that on the right. You're gonna notice that object is too far over. I'll press escape so I can move it over. There we go. You can change the text independently for all these. It's gonna use the same place holder start, but you can change it. Another great thing too is if you set up a text file you can actually drop a .txt file, for each one of these, if you go into a text editor, you put in the name for instance, and put a return in, and keep doing that, if you drag a .txt file on top of one of those, it's gonna just replace all the text in everything. That's a pretty effective way to get all this done quickly. I don't happen to have that, so I'm just go in here and say like this one's 10 miles. And you can keep going if you want to. There's a lot of ways to work this. When you work with a repeat grid, you need to be aware that, yes, there's a lot of great stuff going on here, but there's a few things that if I decide later on, I'm like you know what, I maybe want to get rid of one of these or maybe move them independently, do things like that, if we have a repeat grid, we can break it apart later. So if you select the repeat grid, you'll see what's called Ungroup Grid. That button over in the Property Inspector. And that allows you to kind of break it apart if you want to do that. All right, if I did that, I'll show you, each one of these will become a separate object. A separate group of objects. I'm gonna undo that, so Command Z or Control Z. And we've got our repeat grid back. There's a lot of things, I wish we could just keep going. So many things you can do with a repeat grid. But that's kinda what I wanted to get to. If you wanna keep trying it, after we're done, you can go back in and adjust the font sizes, and make it look great and all that. But repeat grids are phenomenal. All right, let me zoom out here. I'm gonna save. Now we've got repeat grids. We've gone through and talked a little bit about working with masks, that type of thing. We also have a lot of different types of things we can work with. Including things like overlays, effects, like drop shadows and that type of thing. Now what I want to do is I want to set up an overlay or an effect here. So, go back over to one of your artboards that has content like the Home artboard. And what we're gonna do is we're gonna make a copy of it. So pretend that we wanna do this. Pretend that we wanna have somebody tap or click on that LogIn button And we have an overlay. We have the actual LogIn show over the top of the content. What we're gonna do in XD is we're gonna kinda fake that. So we're gonna take this screen and we're gonna copy it. We're gonna stick something over the top, we're gonna blur that stuff, and we're gonna put a form on the very top. When somebody taps on the Home screen, we're gonna go to that new screen and make it kind of fast, that way you can't tell that it's just blurring and putting this over going to another artboard. So I'm gonna copy the Home artboard. We can Option drag or Alt drag, you can do that. From the artboard name, hold down Option on Mac or Alt on Windows and drag down. Now what we're gonna do is we're gonna put a rectangle over the top. So come to the rectangle tool, and you gotta deselect first, so I'm gonna kinda click somewhere with the deselect tool. There's a shortcut to deselect and all that, you can do that. But come to the corner and click and drag. There we go. This is the best part. We have two kinds of, well we have several different types of effects we can work with. If you look on the right in the Property Inspector, you can see that we have shadows. If you wanna do a drop shadow on things, just turn it on. You can affect the color, you can do all kinds of things. We won't see it now, really, because it's being cropped or cut by the edge of the artboard, but that's how you can apply a shadow. What we're gonna talk about right now are called Blurs. We have what's called Background Blur and Object Blur. Object Blur means blur the object you have selected or the objects you have selected. If I click on Background Blur and select that, turn it on, look what it does. This is awesome. It's gonna take your shape and whatever's behind the object or in the background of the object is going to be blurred. You don't have to go to all that content and blur it. This does it for you. It really doesn't matter the color of that object. It is the blurred object, or it is doing the blurring, I should say. It was white before, it loses that. So all it is doing right now is blurring. And you can set up a whole bunch of different options. Less blur, more blur, darker, lighter. You can do a lot of different things here. Lighter over all, etc. So you can go in and play with that a little bit. What we can then do is we can actually put a form on top of that to work with. And that's a great way for us to be able to do things like set up this type of situation where you tap on and it looks like it's just blurring in a form overlay or kind of like a mortal window or whatever you want to call it, it's gonna show up over the top. In the final version I actually have kind of an example of that. Let me switch over to that real quick. If I scroll down a little bit, you're gonna see. This is kinda what it looks like or what I have. So it just, you guys can go in and just add things like user name, password, a button, etc. And then just make it look like a form. And we'll use that to create a prototype, which is pretty cool. So we got a lot of different ways to work to create this type of situation. There's a lot of effects we can work with, let's say that.