There is a lot more to importing images into XD than simply dropping them into position. In this video, learn how to import single and multiple images, how to light images and how scale artwork by the numbers.
- [Instructor] In this chapter we're going to be working with images and vectors and we're going to start right at the beginning of the process, bringing images in. So to get yourself started open the Warriors file that's found in your Chapter 3 download. And when it opens you'll see that we're off to visit the Terracotta Warriors in Xi'an, China. And the plan is is we're just going to reproduce this page or this screen right here in this blank screen. So let's get started. We're going to start with the image at the top here, this is an actual image of the pit where all the warriors are found, and there are two ways of bringing an image in.
The first way is real simple, File, Import, and then you head on over to your Chapter 3 exercise folder, and we'll bring over the Pit.png image. So we'll click Import. And you'll notice it's huge. And that's no big deal, because what we can do is just scale it. And I'm just going to hold down the Shift key and I'm just going to scale it in to fit. Just like that, there we go, okay.
Now let's deal with this little bit up here, which is the status bar. Inside of XD are a series of templates, so if you open a UI Kit you'll see that you've got them for iOS, Google's Material design, and Microsoft Windows. And because this is an iPhone 6 project we're going to work with Apple iOS, so we just open that one, and the template opens, and what I want is the status bar, I probably want the white one at the top here, so I'm just going to zoom in on it, just like that, hit the selection tool, click on the status bar to select it, and then I'm just going to copy it to the clipboard.
So I'm going to press Command + C on my Mac, you guys on PC will be Control + C, copy, and once I've got that I can close it, and then I can just paste. And you can see, there it is right there. And we just drag it right on top. Now the other thing I want you to pay attention to is as I move this thing around you'll notice the Smart Guide shows me that it's lined up on the center of the screen, which is good. But I got a bit of a problem here. This is a somewhat light image and white text against it is a little bit on the faint side and the problem is because it's so gray if I were to use black I'm going to have issues there as well.
So we're going to use a little technique called a scrim. Now a scrim is nothing more than a little gradient put behind an object just to give it some contract. So to create the scrim what we're going to do is we're going to come over here to the rectangle tool, and we're just going to draw a rectangle, and over in the Properties panel we're going to turn off the Border, and we're going to open the Fill, and choose Gradient from the Solid Color. And you can see that you get a linear Gradient. These are the stops, so if I want to start it with white at the top and black at the bottom that's the way to go.
And these are my colors, so I start with white right up here, see? And right here I start with black. And I want black, so I'm going to pull this down and get black. Now obviously we got a bit of a problem here, 'cause it's covering everything. So I'm going to use the opacity slider here to sort of bring it back in opacity, and that's with the black, and I'm going to do the same thing with the white. I'm just going to pull it down just a bit. And then I'm going to make sure that I've got my box selected and I'm going to go to Object, Arrange, and I'm going to Send it Backward.
Okay, we're going to send that one layer back and there we go, we've got our scrim in place. The next thing we're going to do is to bring in these images, so we're going to bring in this image here, this is warrior one. Now the other way you can do this is just drag and drop, so I'm just going to open up the Finder here, there I am in my Chapter 3 download folder, and I want Warrior1, so I'm just going to drag him and put him right there. And going to tuck him up against the edge here.
Now a couple of things when you're placing images, be aware of placement. I don't want any of this hanging over, I want it right on the edge. So that's where the X value becomes really important. If it's 0 on the X it's right up against that left edge. Same thing with this image. Make sure it's at 0, 0, that means it's perfectly positioned and goes right across the page. Okay, so we've got that done. Let's bring in this guy. And again, we can do Import, and let's bring in him, so we'll just import him, that's Warrior2, and oh my god, he's too small.
No problem. Hold down the Shift key and you can drag it there to make it the size you want. Okay, just make sure that when you're doing that you've got the Shift key down, so that you're not distorting the image at all. Now we've been bringing in single images, but you can also bring in multiples. So again, we're going to just go over to our Finder, so we're just going to pop over to our exercise folder, and we're going to grab Warrior4 and Warrior3, and we're just going to drag them in. And I can take this guy and just bump him right there and take this guy and put him right there.
So far so good. Everything's looking great, now we've got to bring in the icons. And again, we can do a multiple import, so File, Import, and the Images, Like, and Chat icons are there, they're SVG format. And you notice that by holding down the Shift key I can select them all. And for those of you using a PC just hold down the Control key to do a multiple select.
And I just click Import and there they are. And I can just move them into position. I want that there, I want this at the end, I want this in the middle here, so I'm going to be using the Smart Guides to line them up, so I'm going to line up the Chat with the center of this image and I'm going to line up the Images with the center of this image, and I'm going to line up the Like with the center of that image. Okay, this one down here.
Now obviously these are way too big, so there's a way of sizing them which is kind of neat, so I'm just going to hold down the Shift key, going to select all three, and I'm going to come over here, and I can change the X and the Y height. So if I select this one I'm going to make it 30 pixels high, I want these 30 pixels high. Now you're going to click the link here to make sure that it scales proportionally and you're just going to change the height value to 30. Press the Return key and it's in place. And you're going to do this with each one of these.
So lock, 30, lock, 30. Now I want to line them up with each other, so I'm going to hold down the Shift key, select each one, and I'm going to come up here to the alignment, and I'm going to align them on the horizontal centers, which is good. Now that I've got the horizontal centers all lined up I'm going to hold down the Shift key and just pull it down a little bit, there we go.
And now I just going to have to line these up with the images. And again, use the Shift key, get my Smart Guide to make sure I know where I'm going. Yep, that's where that's supposed to be, and this one is right where it's supposed to be, and we have created our screen. Now there's another thing you can do with these screens. And if you want to work with an image in a screen and you don't want to disturb it, disturb something behind it, you can lock it. And that's right in here with the Object, Lock.
And you can see, there's a little lock icon right there and if you click the lock icon it's unlocked and if you want to lock it again you just go to Object, Lock or press Command or Control + L to lock it. And that way you can't get at it. See, I can't move it around. So there you go, there's bringing in images, sizing images, aligning images, bringing in SVG, multiple import, you can bring multiple images in, and I showed you also how to lock images, so we'll lock content into place, so that you don't disturb it.
- Navigating the XD interface
- Using artboards and grids
- Adding content to layers
- Using the Repeat Grid feature
- Adding interactivity to a project
- Exporting content
- Sharing your work
Skill Level Beginner
Q: This course was updated on 11/29/2017. What changed?
A: New videos were added that cover the XD Assets panel, Experience Design symbols, Creative Cloud Libraries, and pinning comments.
Q: This course was updated on 08/15/2018. What changed?
A: New videos were added that cover the Search Assets feature, using a grid in XD, the Paste Interactions feature, creating element overlays, fixing element positions, the Design Specs feature, and exporting a project to Zeplin.