Subscribe or Login to watch video

Login or Subscribe to watch video

28 - Working with Illustrator, Photoshop & InDesign in Adobe XD

Questions & Comments

No comments

ALL ACCESS: $19.95 per Month + Cancel anytime   

Video Transcription

In this video we're going to look at how to use Illustrator, InDesign, and Photoshop all together nicely with XD, plus we'll do some cool Photoshop stuff, where we turn him into super long version. Same with her. She becomes super long version. I promise, it's Photoshop magic. Let's get in and do it now.


So working with Illustrator, InDesign, and Photoshop are all pretty easy. Photoshop's going to have some special treats at the end so hang around for that, but working with Illustrator, we've kind of seen it before, right? We just draw anything we like in Illustrator, copy it, and jump into XD, and hit 'Paste'. I'm just using 'Edit', 'Copy', and then 'Edit', 'Paste'. And the cool thing about them is that from Illustrator, it's vector, I can double click on it, start breaking things apart, start playing with it. So that's some of the nice perks with Illustrator. Works exact same way with InDesign, let's say I want to draw—


I know how to draw a Star Burst in InDesign a lot better than I can draw in any other program. So I'm going to use the Polygon tool, give it a height and width. Sides of '50', and percentage of '10'. And you get this kind of-- I'm going to fill it with the color. You get this kind of like Star Burst shape. All you have to do is, select it with the Black Arrow, 'Edit', 'Copy'. And then in here, go 'Paste'. Same sort of principle is, it comes through as Vector, so depending on your skills you might be using either of these programs. You might not be using the middle one, that's fine, but if you do, know that you can copy and paste from these programs, super easy. Now working with Photoshop you can still copy and paste. So in here, I can open up a couple of files. Open up both 'Hero-image1', and 'Hero-image2'. And I can select it all, copy, and in XD, just paste it. And it comes through. So that's an easy way.


One little bonus thing I want to show you is that this graphic here, often when you're dealing with websites you want it really long, thin, because I want it to kind of only be about-- I'll give you kind of an example, I want it to be about that kind of wide, but I need to shrink him down, and the problem is if I shrink him down to fit that kind of height that I want, because I want his whole body in there, problem is, I'm left with white spaces either side. So I want it to be even smaller. Unfortunately you're kind of left with what to do with this Arial here. So, cool little tricks in Photoshop. The first one is, we'll deal with this guy. The first thing I want to do is, do a 'Select All' and then go 'Edit', 'Copy', 'Edit', 'Paste'. You can totally use your shortcuts here. So I've got him on his own layer. I'm not really worried about this layer underneath. And what I want to do is, I want to zoom out a little bit. I'm using 'Command -' on my keyboard, or 'Control -' on a PC. Then I want this tool here, it's called the Crop tool. It's about the fifth tool down in your Toolbar. And what I want you to do is, holding down the 'Option' key on your Mac, or the 'Alt' key on the PC, grab one of these sides, and it just means, holding that Option key just means it doesn’t just do one side. Holding down Option or Alt means it does both sides at the same time. I want it roughly about that sort of size, and hit 'return'. Just giving myself a little bit of extra room.


Now, filling this space here, there is a magical trick. What you do is, you can go to 'Image', and go to 'Edit', 'Content-Aware Scale'. Click on this. You get this little bounding box, and you're ready for the magic. We're going to click, hold, and drag this way. And you're like, "No way", and I'm like, "Yes way." I love Content-Aware Scale. You see, I've made the pales go bigger but left him intact, hit 'return' when you finish. That is Content-Aware Scale. Now Content-Aware Scale doesn't work on every image but particularly good with this one. Let's look at another image. So let's say we got this guy here. And I am going to do the exact same thing. I'm going to go to 'Select All', then copy and paste it on its own layer. Zoom out a little bit. Grab my Crop tool, seize the shortcut, hold down 'Option'. Get it to be a rough size.


Now another good technique is, you can see here, it's like a slight gradient in the background so if I grab, say the Eye Dropper tool, grab that and I try to fill the background, you'll notice that it's just too high, because the gradients are so weird and it's not just the solid color in the background there. So what you can do-- I'm working on the top layer here. I'm grabbing my 'Magic 1' tool, which is the fourth tool down. I can hold down the 'Quick Selection' tool till you find the 'Magic 1' tool. Click once on this side, hold 'Shift', click on this side. So we got both side selected, then go to 'Edit', and go to 'Fill', and it will default to this one here. This is our secret weapon, Content-Aware Fill. It's quite like Content-Aware Scale. Click 'OK'. Hold on to your hats, click 'OK'. I'm going to deselect. Select, deselect, and look at that magic. Look at those blends, so good.


So those are the two magic kind of portions when you want these really elongated images. So, 'Edit', 'Fill', it will default to Content-Aware Fill, or Content-Aware Scale. Doesn't work every time, but it's definitely the first thing to try. So I'm going to save both of these, and import them in. Remember, we can't use PSD, so I need to do a 'File', 'Save As'. And I'm going to do JPEGs for both of these. And I'm going to change these to 'Extended image 2'. Save it. Super high quality. And we also, remember we talked about before, 'Image Size'. This thing is giant-nomous now, so way bigger than we need it, which is good. And I'll close this one down. And same for this guy, I'm going to save it as a JPEG. And this guy is going to be called 'Extended image'. Nice! Close him down, I'm not going to save him, and in XD now I'm going to say, "Goodbye buddy." And you are gone. And I bring in my two images just by dragging them. Extended image 1 and 2, in we go. Awesome! So you are there. Probably bigger than I need you now. Probably made too many panels, I might go back and redo that, but… and do I want you? No, he'll be fine. Do that, send it to the back.


I should have flipped him over as well while I was here, which I'll do now. And, 'Edit', 'Transform'. You can see, I can't do it because I got to go to 'Select' first. 'Edit', 'Transform', 'Flip Horizontal'. 'Save', close it down, and back into XD. Delete this guy. If you're not using libraries, they don't update. So you just got to drag them in every time. That's why libraries are handy. I'll use about the kind of-- what I'm looking to do now. And the girl, which is out here. One thing you'll notice is that, watch this, if I put this just on the edge here and I click off, it disappears, but if I put it all the way out click on it, go all the way out kind of stays forward, it's because it's not part of this Artboard anymore. You can see over here, if I click in the background and have nothing selected I have a Home page Artboard and then I have a Paste Board, which is all of this stuff. So it's on its kind of separate Artboard. There you go, and you drag it out there for this one.


Last thing I want to show you before we finish. It's not really a super-duper trick. I'm going to delete these. Often what I want to do is, I want to have this guy here, I want to have text over the top. So I need to wash him out, so I'm grabbing the Rectangle tool, and I'm going to draw a rectangle that is close up here. Make sure it's snatched to the bottom. I might even get it to snap to this side. I'm going to fill it with black. I'm going to give it a border of 'None'. Turn the tick off. And what I want to do is, I'm going to-- these are backwards until it's underneath this thing but not behind the image. The easiest way to do it, is you can right click and say 'Send Backwards' over and over again until it gets in the right place, but you see this shortcut here, on a Mac, it's 'Command ['. On a PC, it's 'Control ['. So I save my time just tapping away on the keyboard, you probably hear me tapping. You can also see it in your Layers panel here. I want him just above that image, but below this.


What I'm going to do is lower the Opacity. Just a nice way of dimming it down. Just so that you can add text or in my case, kind of little icons. So that's working with Illustrator, InDesign and some super awesome stuff in Photoshop. Oh yes, side note, I have courses on all, specifically on InDesign, in Illustrator, and Photoshop. So you can check those out as well if you want to get more up to speed with those. All right, on to the next video.

ALL ACCESS: $19.95 per Month + Cancel anytime