How to make a mobile phone mockup with Adobe XD & Photoshop

Hi there, in this video we're going to mockup our dashboard on a mobile phone. We're going to use the Adobe Market that allows us to get editable PSDs from it and also use Smart Objects so that we can do cool stuff when we update things like the logo that we've made. Actually just going to destroy it. Hit 'Save', it means that Photoshop mockup updates automatically. And if I go to XD, give it a second and XD updates as well. Makes it super useful when you are kind of half way through things like designing logos, like I am for this product; CC Libraries rule. Let's go learn how to use that now in XD, Photoshop, and Illustrator. 

So the first thing we want to do is find the phone to use. We can draw one, and spend forever. So we're going to use the Creative Cloud app. You can go to Stock, and find an iPhone in there, but those are ones that you are charged for. 'Assets' though has some good ones in here. So 'Assets', 'Market', go to 'Search'. I search for iPhone6 and iPhone7, and iPhone6 seems to have the most variety of options but I would actually be looking for an iPhone 8 or iPhone X. So whatever the version it is for you now. And then you just pick the ones you think might work. We'll do two in this case, so I'm going to download this one to my Instructor HQ library. There was another one that I liked down here, this one here. We'll look at both of these. 

When you click on them, we're looking for PSD. So you want something, either ai file, or a PSD. We don't really want JPEGs mainly because we want them all to be clear cut already. So I've downloaded both of these. If you don't have access to this Assets Market they are actually already in your exercise files. They're under Images folder, and they are called iPhone Mockup 1 and 2. You can open these up. Why I've called this one 'psd psd'? Not sure. So open both of these in Photoshop, or if you are using the Creative Cloud Libraries in Photoshop, you can go to 'Window', open up 'Libraries'. Make sure you're on your 'Instructor HQ', and it should be in here. You can just double click on them. We'll do this one first, because it's simple. First thing I want to do is go through and make sure there's lots of parts to it. This is the nice thing, everything can be turned on and off, and adjusted. 

I wanted the background off because I don't need him, and what I would like to do is bring in some graphics from XD. So bringing in graphics, there's kind of two ways. There's the cave man way, and the proper way. I want these three to be part of my dashboard. What I can do is, if I just copy it, so, 'Command C', or 'Control C' on a PC and just paste it in, it just brings it through, but it's pixels. So it's not like lovely vector stuff. You can see, it's too small. To get around that, all that I do is some kind of a quick, cheap, and cheerful. I'm going to just make them bigger. Copy them, paste them in. Now they are about big enough size, I can convert them to a Smart Object. If I want to be super serious, use 'Edit', 'Transform' to get it down to the right size. So that's the cave man way, it's faster. 

What you could do if you wanted to be super official and keep all the vectorness, is that with these guys selected, you group them first, so 'Command J' on a Mac, or 'Control J' on a PC, as long as they are one group, you can right click them, and click 'Export'. We'll look at exporting later on properly but this the basics. In here, I can either pick SVG or PDF but we'll retain vector. Then you can bring those into Photoshop and those will be lovely vector goodness. If you have no idea what vector goodness means just make them big, and copy and paste them across. So what I want to do is two things, I want to align it up with the screen and I want to get it so-- can you see, this is the thing that I want, this is the screen. And what I want to do is have it just above the screen, and there's an easy way in Photoshop to mask these two together. So just make sure that the graphic that you've brought in is quite here. I'm going to rename it just to be official. It's going to be my 'XD Mockup'. Make sure he's above the screen, and then, if you hold down 'Option' or if you're on a PC, hold down the 'Alt' key.

You'll see, if I hover my mouse just between these two fellows - I'm looking for this icon, if we click on that, the top one gets masked by the one who's a bit messy. He's nice and easy there. You can move him around separately. Just a nice, easy way of doing Masks in Photoshop. With the screen, the lovely person who built this, left it as vector so I can double click that icon, and go change the color. Actually I want to use the color that I used in XD, which I know is 'F2F2F2'. That kind of gray color. And while I've been working as well, I've been-- for the client, I've been building them a logo. You saw probably at the beginning, we had just this typed logo. That's called a Logo Type, just a bit of text, styled as text. But I didn't want a logo, and this is kind of where we are at now. So we're adjusting this a little bit. Nice, easy way for this to work, just to show you the work flow I'm using is--let's say that's where we're kind of where we're up to now. It's going to drag it into my Instructor HQ. I'm in Illustrator, which is often where you build logos. I've got an Illustrator course, check that out if you want to know more about Illustrator. 

So it's in there, it's vector, it's awesome. In Photoshop, you'll see, he's appeared over here as well. That's the nice thing about libraries. Drag it in one, and you can drag it out here. Mine is just going to be at the top there. Click 'return', zoom in a little bit. And I've broken it. How did it break? Remember, I said this XD mockup needs to be right at the top of the screen, and I ended up bringing in artwork in between them so I'm going to go up there and make sure that these two are right above each other. This guy here, my logo is not interfering with that little kind of structure we built. Awesome! The cool thing about this, if I hit 'Save' now, it's clear cut and if I hit 'Save', can you see, because I brought it through my libraries it updates over here as well. You could just say this is a PSD or a PNG, because you want transparent background. Up to you. And you can jump into XD, and either import it, or use your libraries. So shortcut time, 'Command-Shift-L' for the libraries or you can go up to 'File', go in there, under 'Instructor HQ', now you stand to see the benefits of these libraries. 

We'll drag him in, and close it down. So I've got this little guy now, that I want to go through and we'll shrink him down to be kind of in this little app thing, it's right at the beginning. Can you also see the little green tick? That means it's linked to the library. You can unlink it, say you don't want to connect it to library, I think, you can just click on that, and it just disconnects. I'd like that connection, so I'm going to bring it in here. Put him kind of somewhere there. I'll grab this option, and you my friend. I'm going to ungroup it, so I can see it in full. This color. I'll select both of these holding 'Shift' and then we're going to go 'Object', and we go 'Mask with Shape', not 'Command 7' if you're from Illustrator. Actually what I want to do is, copy this, copy and paste, and I want it to be in front, so I want you. I've got two versions of it now. 

Actually what I want to do is copy this guy, copy and paste him, so there's two versions of him now, and I want to select the phone in him. Then go to 'Command-Shift-M' or 'Control-Shift-M' because now it used that rectangle, that peach kind of rectangle to mask it, and I'm left with a background as well. So, why continue using libraries? This is where the magic happens, when you've kind of strung together a logo that's half in development with a mockup in Photoshop, and that's been brought into XD. So if I'm in Illustrator here, I can double click the logo in my library and open it up, and decide that actually this thing, say gets changed, I don't know why. But it's going to change, I know. It's just kind of work in progress, this thing here. You change the fonts, you change the colors. Everything goes and changes, and watch what happens, if I hit 'File', 'Save', it updates the logo in the library, and because Photoshop is using that same library item, you can see, it updated over here. And if I save this document and go into XD, you'll notice sometimes it takes a little bit of time for XD to kind of really link it. If that happens, you can open up your libraries, click this little icon. It's done it for me already but if it didn't, you can just hit this button, that kind of refreshes it. 

So you can see, while it's work in progress, you can see, it at least change. And that would update if I was using the logo up here in my top part as well which I will do in a second. So I'm going to go back, undo this. And undo it before I broke it, save it. Photoshop updates, so that in XD, give it a second, and it will update. So that's one of the versions. Let's have a little look at how this option works. 

So, iPhone, the mockup 2. I want to show you this because some of them come like a slightly different style. The other one we did we just used this simple mask to make this happen. What we've done in this option, 'castle.co', given us a free resource, they've got two phones. A white one and a black one, I just want the white one but we'll cover them both for the moment. See it says, 'Place your image here'. What they mean by that is, if you double click this option here - it's called a Smart Object - you go inside, so we're going to double click and go inside this. And what ends up happening is, that was the file that we're at. And it opened up this extra thing called 'screen1.psp'. These are our Smart Objects. It's going to ask us what fonts-- I don't want those fonts. So what I want to do is, select everything in here except for the background, and hit 'delete' and with the background, I'm going to-- which fill, which color we want to use. We'll use the 'F2F2F2' again. So I've got that kind of off gray, I'll paste that thing in again from XD. The giant version, copy, paste in here. It's a bit big, I'll bring him down. Nice! Something like that. Add the logo. Turn to complete it. 

So I'm in this separate document, I've got to hit 'Save'. Then I can close it down, and watch what happens. Magic, it lays it out for you. So if you're finding stuff through the Adobe Market, often that will be separated this way, and things like the screens or mockups for a book, or a bag, or a T-shirt will have this thing where it says place your image here. And you're looking at that icon there, double click on them, go inside. It changes. Save it. You don't have to close it, but go back to this original, and you can see, it's updated in here. I'm going to undo that. Save it again. Close it down, nice little mockup. And what I'll do is turn the background off, I'll turn the black phone off. Hit 'Save'. You'll notice, up here in my mockups, it's like that and I can decide now which of these I want to use. I might try just a different option here. And the options, so, not you. I'm going to bring it in. 'Command-Shift-L' from the libraries, you, my friend, is updating. Give it a second. It's a lot bigger file, that one there. All right, here it is. Sometimes it can take a little while. The connection with XD and libraries is not 100% awesome yet. So, that's a pretty big mockup. 

I'm going to do the exact same thing as I was doing before. Scale down, 100%. 100%. And let's find something that works. I don't really like this version. I just wanted to have another option, a more complicated option to show you how it works. So now what I need to do is, I need to grab you, copy and paste him. Get that kind of where I wanted it, select both of them, 'Command-Shift-M'. And I've got a nice little mockup, but because it's part of the libraries, it will update if I update it in Photoshop. You could just save the PSD and bring it in, or a JPEG, or a PNG, if you want to keep it super simple. I don't like you, so I'm going to delete it. So that's how to work with those lovely Smart Objects and PSDs. 

Now what I'm going to do is just a little bit of filling in the details. So I want them to be-- Let it download, 'Download the Dashboard App'. A few mockup and a video sync. And we'll pick-- back to my Assets panel. I'm going to use that one there. Make it white. Slide in. Now in terms of the logos, for the App Stores, import them, they're in 'Icons'. And there is the 'Download App Store', and 'Google Play Store'. They are very different sizes, so I'm just going to scale him down, bring him in here. Now they're different sizes, that's just where I downloaded them from Google and from Apple, that gave us different sizes. Because it's vector, it doesn't matter. That scaled nicely, I just need to get these things to line up and be roughly the same size. Awesome! 

So I'm going to rejig it, I'm going to select it all, copy it and take it over to the Home Page, which is you. Click on the big box, 'Command 3' or 'Control 3' to zoom in or out. Paste it in. And I'm going to use most of this. What we'll actually do is have it in bits and pieces over here. I'm going to ungroup those. So I've got this, it needs to be a lot bigger. And you can see again, if it's a Smart Object, then it's linked. If I start using this over and over again on different pages it means when I update it it's going to float through the whole document. I'll have to go find it, and try and change it. So I want you, Background Image to be the green. Select it, copy and paste it, so I've got two options. Select both of these, 'Command-Shift-M', double click it because I want this image to be a little bit in here. Click off in the background, I'll use both of you. 'Command 1', or 'Control 1' on a PC to zoom in to 100%. 

So I'm getting these things to kind of the right sort of size. It will be a little bigger on the Desktop. And I want you, please. Nice! I don't need you anymore, thank you. 'Command 3'. All right, that's going to be my little clickable-- well actually, what I want to do is get you to be a little bit up here. So that's the background, go off, and the green box as well to be just kind of a little bit higher there. 

All right, my friends, that was another long video but it will show you how to utilize things like Adobe Market, how to get the best use out of Photoshop, and connecting everything in together with CC Libraries. Hope that was helpful, you learned a few things. Let's get on to the next video where we mockup the app.