Photoshop in XD
Hi there. This video is all about working with Photoshop Now. If you don't have adobe Photoshop, it's not going to like stop you using XD but I guess I want to show you some cool things in Photoshop if you do. And also just identify often as a career to be a UX designer. Often you need more than just adobe XD skills. You need some skills and things like Photoshop, an illustrator. And what we want to do now is I want this to kind of extend all the way across and you'll notice that lots of like these banner ads and bars and stuff. Use a really weird format, like a long thin format and photographs just don't fit that format. So we want to stretch it out. So we're gonna take this away and magic it up some more background here in Photoshop. I'll show you quickly here before after before. After that was a cool one. Right? When you get rid of the person and we extend the sky. Look at the sky, no sky, no sky, no rocks there look more and it's stretched out wide. This is a little bit of Photosh...
op to help us extend our adobe XD skills. Let's jump in now and get to it. Right? So the file we're going to start with is let's bring it in. Let's go to file import let's go the long way file import exercise files. Images will use this plane called hero image too. You can import that now. I wanted to go into, I'm going to clear a space for it. I'm going to get rid of the bicycle. He's just in there randomly. So I'm going to clear a space for all of this space, looking at all. Moving in clear a big gap. So what I'd like to do is I want to start at the beginning there, it's kind of, I want it to be just over this side, but I need this kind of area over here. I could try and match the color but it never seems to work right If I click on this and say I drop a tool and I click on this blue, right on the edge here. Okay, you can see it kind of works but you can definitely see the edge here. So I just want to extend it. Same on this side. I want more on this side so I can make another rectangle and try and connect it up. But we're going to show you that sweet tricks in Photoshop. We'll start with this one and get more and more impressive. So let's open that exact same image up in Photoshop. So Photoshop it's gonna open, let's find it enhanced called hero image too. Now if you don't have Photoshop can just watch along, I've got a graphic in there that you can use. Okay, it's called hero in there. No, it's called extended to the extended image to you could use that this is the final result of this. So what I wanna do is I want to reset my workspace so that it matches yours. There's a couple of ways of doing this. This particular image is going to work really easy with the crop tool. Okay, so grab the crop tool. I'm going to turn on this. Okay. It's off by default, turn it on and I'm going to drag it this way a bit because I want some more on that side zooming out and I want a bit more on this side. Get ready city. I'm gonna zoom in a bit because I want this to be impressive. Okay. The return kick back, relax and watch it. Just generate more background. Ready magic. Huh? Just kind of made it and blended it and it's beautiful. Now I can drag this into my library like we're connecting back with things and then we realized our library takes a while, Only an XD. I'll come back to that. Let's just look at practicing example, show you a different way of doing it. Okay, so let's go to, well, let's just practice with the Hero Image one even though we've marked, we're not going to use this one. Right? Oh, it's extended Image one. That's the final results. Given away giving it away, let's go Hero Image one. Okay, in this case here we can do the exact same thing. But instead of using the crop tool, some people prefer to do it this way. So crop tool, let's turn content aware off. It's on for forever more remember to turn it off because sometimes it's a pain I'm going to drag out the side of it because I just want to say you want them in the middle, you just need more of this. So hit return and it's done nothing right. It's just kind of like made a bit more area over here. What I'd like to do is grab my rectangle marquee tool, want to grab all of this. Okay. And I want to go to edit and content aware scale basically that's what that crop tool was doing. Remember we turned it on this is doing it manually because then you can just drag it and slowly, it depends on the version of Photoshop you have, if you're in the latest version, you're going to actually have to, I'm gonna have to undo that hold shift while you're dragging it. Okay, so hold shift while dragging that cursor and just look the somehow magical Photoshop theories just like invent more background is kind of weird because there's like extra panels but who knew how big they were to get started with. Okay, so really handy and really easy when you've got something like, like this one here is quite a clear definition between the background. If this, if there was like 10 of his cousins all around it would be very hard, but if there's like a unique object in it, it can be really easy. I want to take this a bit further because we've all had those problems, right? Like those, those letterbox sizes, this thing here or leaderboard or banner ad that kind of size is really tough to design for because all images come in this kind of more traditional ratio. Let's take it a bit further and look at some of the other content to wear things that you'll use when you're kind of working with XD. It's not a full Photoshop of course, just a little taste. Just a little bit of the things that you're most likely to use. So once you get a file open in Photoshop and one should open a one that's called content aware dot psD Open them up. So the same problem as before. I want to extend this out. So we're gonna go to edit content aware scale. Remember holding shift down so you can drag it to the right and just pretty cool. Huh? Just like invented. It's really great for like inventing new sky or in this case small ocean or grass just where you kind of like, I love like it would be nice to leave this all the lovely cropped but there's often times you just need space to be able to put text and logos and ads and all that sort of fun design stuff hit return when you're finished. That's one thing, let's say that the client comes back and says, we don't want the woman in it. Can you find one without it? What you can do is grab the rectangle tool, drag a box around her and go to edit and whether use content aware scale we're gonna use this one now called fill so click on Phil one of the options it should default to is content aware click OK and go to select de select. Mine's done an average job. I've done that like times and like half the time it comes out great. Other half it comes out a little bit average, that's fine. And the next thing I want to do is I wanted to show you back to that crop tool because I want more sky. Right? I just need a bit more and the thing crops off in a weird angle. Just kind of stops there. Maybe we'll turn this back on, remember to turn it off afterwards. I'm going to drag it up higher about about that high, roughly. Okay, let go hit return and get ready. Watch all this stuff over here in the clouds. Be prepared for greatness. We're better than that first hero image, brilliant. Huh? I love it. It's just like extended it up to the edge magically it's added more clouds. You can kind of see some repeats in there a little bit but you'd have to be really looking and regardless if you like it's just a good place to get started. If you're like, man, I can't deal with that repeat. You could now go and clone tools, stamp it out or do some adjustments. But for me it's looking pretty perfect. Now, all I need to do is just drag this into the library and I can start using it. We are not using it in this particular course. But I just wanted to I guess show you some of the exciting bits that you can use when you are dealing with XD and those really strange formats. Okay, phones. Another one. Where is my phone? It's just kind of weird height. Okay, so long and stretch. Have you ever done banner ads when they're like skyscrapers? Do a lot of banner ads in adobe animate. Okay. And it's just really handy when you need this like weird shapes so you can start kind of condensing things. Cool. Alright, so our little lady should have appeared. Here. She is. I'm going to add it in here. Double click it a little bit of room here. I could have given it a lot more room but that's kind of where I wanted it. Pretty cool. Huh? Alright, so that's gonna be it with our connection to Photoshop, Photoshop obviously can do a lot more. But I just, I wanted to show you a couple of cool things in there and that are useful and relevant to XD and also show you that often to do a project like this. You might need to jump in and out of a few other products like Photoshop illustrator maybe in design. Probably not in design. Alright, let's jump into the next video.