The pros & cons for working with images inside Adobe XD

In this video we're going to look at importing Images, the pros and cons, and why you need to have very, very big images to support all sorts of devices later on when we're exporting. All right, let's go and look at images now. 

So one of the cons is you can't bring in PSDs or ai files, which are the native files for Photoshop and Illustrator. You need to save Illustrator files as SVGs, and Photoshop files need to be saved as JPEGs or PNGs. Then they come in fine. So bringing them in is easy, you can use 'File', 'Import'. Often what I do is just find them, and just drag them in from either the Finder window on a Mac, or on a PC, you can just kind of do the same sort of thing with a window. So that's my files in here. 

Another way of working is-- I'm going to delete him, it's connecting to the Creative Cloud libraries. So let's save that in Photoshop. I've got this image, I drag it into my Instructor HQ library. And in here, in XD, I'll open up my 'Libraries', and I can drag him in. The cool thing about that is that there's a connection between the two. That means that when I drag this out, it is this giant size. So I'm going to shrink it down. And I want it kind of in there, and I'm going to send this to the back, but it's here that I want to kind of flip it over. Because, you can see, over here, it's linked, if I make changes to it in Photoshop, so I drag this into here, he's not this guy anymore, he's a lone ranger. If I go to 'Window', 'Libraries' I've got this guy, I can right click, and say 'Edit'. And if I say, 'Select All', and go to 'Edit' and I go to 'Transform', and 'Flip Horizontally' and I hit 'Save', look what happens over in XD. You can see, it flips over in here as well. That's handy especially if you're using Assets across like say InDesign, in Illustrator, in After Effects, or using that shade library, you can start using in XD, so they're all connected. So when you make changes to one, they all go and change. 

The other thing to consider when you're working with images inside XD is the size they need to be. We're working with a kind of rough size of-- I'm going to send this guy to the back, and this guy, even further back. I'm using my shortcut, 'Command-Shift-square bracket', or 'Control-Shift-square bracket' to do the arranging. Remember, across here is about 1400 pixels. So when you are picking images in Photoshop you need to make sure they're about double the size you need them. Let's jump to Photoshop. So in here I can go to 'Image', 'Image Size', and you can see, it's not quite double of what I needed but close enough for me, that's as big as I can get it at the moment. 

Why are we trying to do double sizes? It's because most computers would show you just their 1400 version, but if you're dealing with retina screens-- so regular screen is 72 dots per inch, but say my MacBook Pro that I'm recording on right now, it's actually at 144, so it is double resolution. So you just need to make sure that your images for a website are kind of double the size you needed because when we export this, at the end of the course we're going to have an option that says "Would you like to save a double resolution version?" And we can say, "Yes." If you start with really small images, it will double the size of them but they will pixelate and not look very nice. It's not good quality images. When it comes to mobile phones, it's even bigger. 

Some Android phones get up to four times the size they need to be. So if you want to support those super big high res phones which you'll need to talk to your developer whether you're going to support that, or just two or three times, you might have to start with some really big images first and you can scale it down in XD, fine, and XD will do all the hard work when you export image at the end for all the different sizes. We'll talk about that in another video. So the rule of thumb, double the size you need them, mainly for Web. All right, on to the next video.