2.4 Scaling Content, Background Blur, and Point vs. Container Type
In this lesson, we’ll learn how to proportionally scale content, apply background blur effects, and switch between point and container type.
1.Introduction1 lesson, 00:34
2.Adobe XD Tips and Tricks6 lessons, 1:13:44
3.Conclusion1 lesson, 00:17
2.4 Scaling Content, Background Blur, and Point vs. Container Type
[MUSIC] Okay. Scaling content proportionally. So what's this, number ten. So if you do have something in XD. Like a circle. You can, of course, drag this around, then it will skew it out of shape. You could hold Shift, and it will scale it proportionately, or you could hold Alt, as well as Shift, and it scales up and down from the center. Now sometimes when you create shapes in XD, you'll see the link option up here. And if this is checked, when you scale from the corner, regardless of whether you hold Shift or not, it will scale it proportionately. So if you do want to skew anything out of shape, you see this link? You just uncheck that link, and it will unlock the aspect ratio between the width and the height, and it will allow you to adjust that. So similarly with squares or rectangles, if you get caught when you're just trying to kind of lengthen this, and it won't do that, just make sure you've got that unchecked. Or conversely, if you want to make sure that it does always scale proportionately, you can just link that there, and it will stay proportionately. There we go. That's probably the quickest one, but sometimes, at least when I first started using XD, I had to kind of figure out why I was scaling it, and it wasn't retaining its proportions. Or I created a new shape, and it was staying proportional, and I wanted to distort it. So just that little link there. It's just one to be aware of, if you're adjusting the size of shapes. Ooh, background blur, okay, this one is a fun one. I love this, love, love, love this. Right, let's pick. This will look nice. Okay, so we've got a really nice photo here. Again, super high res, so we'll scale that down. And this is the great thing about XD, as well, is as I scale my image up or down, it retains its proportions. Because of course, why would you want to skew it out of shape? I mean, you may want to, but. So there we go. Anything that goes off of the art board just isn't shown. So that's really cool. I can just adjust that. And you can, if you want to, go and add a rectangle that is the exact width and height of your art board. And then, just go an add that as a mask, as well, if you want to. So we're going to add a rectangle now. And we'll just give this, well, I'll leave this as a white fill, and we'll just stretch this out, so it fills the entire width of the content. And bring this down a bit. Now, often times when you might want to create a UI design, you may wish to have some text information. So if we just go and type lovely photo. And we'll type John Smith. I don't actually know the author of this name. The author of this name [LAUGH]. I don't know the talented individual that took this photo. I don't know the name, so they're going to have to be John Smith, unfortunately. But it's a lovely photo, so we're going to add some text information here. And I think I will change the color of this, as well. So this is going to be our UI design, and of course, sometimes that, at a very small size, is quite hard to read. So oftentimes, when you've got text information, or if you've got paragraphs of text, and you want it to stand out against an image, you may wish to add a background blur. So this blurs the area around the text and makes it more legible. But it still kind of keeps, is in keeping with the aesthetic of the image overall, because you're just blurring what's behind the box, in this case. And you can do this with any shape. It doesn't have to be a box. So what we can do, is we can just check the background blur option. Now, XD always puts the brightness here at 15, so I like to knock that back to normal. But you can adjust the brightness here, as well, if you want, and you've got the opacity here, as well. So, remember, this fill is black here, so as we increase this to 100%, it will bring back that fill. But if you just want to go with straight blur what's behind this shape, just keep these at zero here, and adjust the blur. And it adjusts in real time. Now in Photoshop, you can do this, but you can do it with masks. And I find it a little bit more fiddly, so we can adjust this here. And we could make this a subtle blur. It doesn't have to get crazy like this. But you can see, because you've got the colors from the image, the photo coming through, it all hangs together really nicely. And I can group this together, and as I move this around, it blurs what is behind it. So whereas when you mask something in Photoshop, you're masking a specific area. And you can move it around, but it's just a bit more fiddly, but this, I can just double-click or hold Cmd to control, click to go in the group. And we could do something like this. So I could just have that as a tag in the corner. And wherever I position it, it's blurring what is behind it. So I absolutely love that, and when you're doing app design, that feature is amazing. It's probably one of my favorite things, that and layout grids, they're my favorite additions, I think. Okay, so now we're gonna look at point versus container type. So when you type in XD, this is some text. Ha, there we go, let's give it a color. This is some text. As always, incredibly creative, we'll just scale that down a bit. So I created this by just simply left clicking on the art board. Now this is called point text, where you just click, and you type your text. Container type, or container text, is where you left click and drag, and you create a text box. Now, the advantage of this, is if you have lots of text, and you need it to sit within a box. What it does is, as you approach the edge, it will wrap onto the next line. So let's make this considerably smaller. And we'll then just copy and paste this. So pretend this is a lot of descriptive text. And as you're adjusting your design. It wraps. So incredibly useful for paragraph text, or anything that you might need to wrap over multiple lines. But you can also switch these around, so you can switch this from container, or area, text here to point text in XD. And you can do the same here. So if you do decide that you created it one way, and you think, actually I need to be able to edit this and have it wrap on multiple lines, you can do. And if you get something like this, where you see this little circle within a circle at the top, it just means that your text is hidden. Just extend that area text, or that container text box, and it will become visible. So if you just make it a bit too small, of course, your text will be hidden. So just make sure you drag it out, if you are using area or container text. I'm not sure what this was I was trying to type there. [LAUGH] Okay, so i could switch that back to point text, cuz that is a title, and that one can be area text. And you can toggle between them both.