2.4 Importing and Editing Images
Welcome back to the course. In this lesson you’ll learn how to work with images in Adobe XD. We’ll be importing images, scaling them, masking them with shapes, and playing around with blend modes. We’ll also be loading some vector graphics from Adobe CC Libraries. Let’s begin.
1.Introduction1 lesson, 01:20
2.The Basics of Working With Adobe XD4 lessons, 56:12
3.The Advanced Functionality of Adobe XD8 lessons, 1:13:40
4.Prototyping With Adobe XD2 lessons, 15:57
2.4 Importing and Editing Images
Welcome back to the course. In this lesson, you'll learn how to work with images in Adobe XD. I will be importing them, scaling them, masking them with different shapes, and also opening up couple of vectors from CC libraries. So let's begin. To import an image in Adobe XD, we'll go to the File menu if you're using Windows, you can find it here. If you're using MacOS, you'll find it in the top bar in your operating system. So because I'm using Windows, I'm gonna click this button here, Import and I went ahead and downloaded some images from Unsplash. So let's select the first one, Import. And now, I have the image here, a new layer was created and it was named after the original file name of the image. But as you can see it's a little bit too big for my artboard, so let's see how we can resize it or scale it. Pretty easy task, simply grab one of the corners. And if you want to scale this proportionally, hold down Shift, And scale it until it fits your artboard or gets to the desired size. This behaves just like a rectangle. For example, I can round off its corners. I can make it bigger and smaller. And if for some reason I want to scale it without a proportion. So I want to scale the width separately from its height, all I got to do is uncheck Lock Aspect. So now, I can do something like this or something like this, and you'll see that the width or the height are being changed separately from one another. Now this might be worth doing on a simple rectangle but on an image, I always recommend that you keep on lock aspect because it's just gonna resize your image proportionally. With an image, you can always flip it. So this is horizontally, this is vertically. And you can change its opacity. If you want, you can add a fill color to it, either a solid color or one of the two gradients. But if you do that, it's just gonna be another shape with a fill color, the details of the image will be lost. You can add a border to it, shadow background blur. And since we're dealing with images, let me show you what background blur is doing because this is where you see it best. And let's also draw a shape on top of this to about the halfway point like that. So with the shapes selected and make sure the shape is above my image. I'm gonna select it and then I'll go and add background blur. So this takes anything that's behind or under the shape and blurs it. And you can control this, you can control the amount of blur. You can control the brightness. And you can control the opacity. So by doing this, it's really easy to create, for example, a frosted glass effect over the selected image. Now instead of background blur, you can also use object blur. Simply click on this little icon here, select Object Blur and this will instead blur the object itself and not what's behind it or whatever. And again, here you have the option to choose the amount of blur that you want to add to that object. Cool, now the final option here is Mark for Export. This is checked by default when you're importing an image because XD assumes that okay, anything that's an image will be exported later on for when you're coding the actual project. So when you're importing the image, this will be checked by default. For example, if I were to add a normal shape here, you'll see that this checkmark is not checked by default. All right, so that's how you can import an image in XD using File and then going to Import. But there's a simpler way and that is just drag and drop. So here, I have my Explorer open in Windows, I selected an image and let me actually bring this over. So I selected an image and I can simply drag and drop and that's gonna do the exact same thing. It's gonna bring in my image, which you can then resize, To match your project. Now, in the beginning of this video, I mentioned masking an image with a given shape, so let's see how we can do that. It's actually a very simple process. Let's say that I want to create a circle and this image will be kind of contained within that circle. So, grab the Ellipse tool, hold Shift, click and drag. Let's set it out that I just want to capture this motorcycle in here. Something like that. So now with these two elements selected, I would right-click and I would say Mask with Shape. Let me see if I can bring this even further up. So Mask with Shape or Shift+Ctrl or Cmd+M. Okay, so now this created a mask group. And our image is now contained within that group. The beauty of this is that I can always go back either by double-clicking this, or by clicking this icon. And I can make the ellipse bigger or smaller, I can change its properties. And I can also select the image and move it around. So I can do something like this, for example. Very cool, but now the mask group is an object in itself and I can change its properties. I can move it around, I can change its opacity, I can add a fill to it if I want although nothing is gonna happen, and I can also add a border to it. Now, I can create any shape that I want, it doesn't have to be, An ellipse. So for example, I can delete the ellipse, and I can grab the Pen Tool. And I can create a shape like this. Notice that when I delete it, that ellipse, this turned from a mask group to a simple group. To enable masking again, I can simply select both of these. Again, right-click Mask with Shape. And then I can right-click here and say Ungroup. So all I'm left right now is the original mask group. And again, just like with the ellipse, I can go in, I can move the image, I can select the path, I can change its shape here. And of course, I can edit the mask as well. Just like we did in the previous lesson when we were working with the pen tool. And now, we're back with the mask group. Now, a relatively new feature that was added to XD is called blend modes. So let me quickly bring in another image. And here in the inspector, we can see a dropdown called Blend Mode. Right now it's set to normal, but we can set it to Darken, Multiply, Color Burn, Lighten, Screen, Color Dodge. We have a lot of them, if you've ever done some image editing in Photoshop, then you would be very familiar with these elements. So applying a blend mode directly to the image, in most cases, it's not gonna do much. A blend mode works when two or more layers are involved. So for example, I can grab the rectangle tool, I can draw a simple shape here. And I can choose as a fill, let's go with this blue color, and then I can select it. And I can choose the blend mode to darken and you can see that whatever is behind it now kind of blends in with the color. Then Multiply does something different. Color Burn has a different effect, Lighten has a different effect. Overlay, I'll probably use this a lot because it's a great way to create the color overlay for an image, very nice. So you can choose these and do soft edits on the image. This is not as powerful as Photoshop but it's not meant to be. Photoshop is a dedicated image editor, while XD is not, it has a totally different purpose. But it's nice to have these elements here or these options here in XD so that you can do some of these quick image edits. Now, in the beginning of this lesson, I mentioned that we're gonna load some vectors from CC Libraries, or Adobe CC Libraries. And CC Libraries is basically a place where you can store assets, and then use them across all Adobe products. Like for example, you can create graphics in Photoshop or Illustrator and then have access to those graphics in other apps such as Premiere Pro or in this case, XD. So to access CC Libraries, you will need to go to Assets. And we'll talk more about assets in a future lesson but for now, we can go in here, click this button where it says Open CC Libraries, or we can go into the File menu and we can select Open CC Libraries from here, or use Shift+Ctrl or Cmd+L. And this does the same thing it opens up this panel that you can move around and you can choose the library from this dropdown. And here, I have a couple of of assets saved a while back when I worked on a project in Illustrator, I have some colors saved up and also, some graphics. I have some vectors here and also some images. So with these images, I can simply click and drag into my canvas and the same thing goes for the vectors. I can click and drag, and depending on the size of the asset, it's gonna take a little while to download. But once it does, I have now downloaded that assets from CC Libraries. This was just a quick look at working with CC Libraries because it kind of pertained to what we're talking about in this lesson, which is images. But we'll cover assets in more depth in a future lesson. And that's how we can work with images in XD. With this lesson complete, you've now learned the basics of working with Adobe XD. I think it's time we turn it up a notch, and start getting into the more advanced features of this app. We'll do that in the next lesson with Boolean operations, or more commonly known as combining shapes. So I'll see you in the next lesson.