How to make a simple UI app web design mockup using Photoshop

Hi there, this video is all about mocking up UI app design, it's a nice simple one. We're going to scale these guys down, which is not exciting, but we'll add a convincing blur, on, off, on. We'll reduce the Background Levels. We'll add a Drop Shadow that only affects the background UI options. It's pretty easy to do, let's learn the techniques now in Photoshop.

 
To get started let's go to 'Print'. So file a new print, we're using 'US Letter'. We're going to use 'Landscape', and it's going to work for me. I'm going to color the background in the gradient. So I'm going to click on my 'Gradient Tool', and what I'm going to do is, I'm going to make sure my foreground color is one kind of gray, and then the background color is a different, or darker gray. Is that good enough? Yes, I'm going to use Radial. Yes, I'm using Radial Gradient. Click, hold, and drag. That's going to work for me, just that real subtle gradient anyway. 

Let's bring in a different UI mock-up, these were made in Adobe XD. Just simple shapes and letters. Place embedded. Under 'Exercise Files', under 'Mockups' I'm going to show you, using that File, Place Embedded, you can't pick more than one, so what I tend to do is have this open, this works on a Mac and a PC. Just got to have your Finder window open, or your Window open in Windows. Find your files, grab these three and just dump them in there. Hit 'Return', 'Return', 'Return'. Just gets them all in there at the same time, plus they're all Smart Objects, which is cool, or just work through slowly and bring them in one by one. 

So what do I want? My dashboard is going to be like that main focus one. And I want him - just transforming him, 'Command T' - to be the biggest kind of main feature one. These other two I'd like to be the same size. So I've selected both of them in my Layers Panel. 'Command T' or 'Ctrl T' on a PC. Scale it down. So which one? I'm going to use Onboarding. It's going to go over here, it's going to be just behind. Same with the login. It's going to be just behind. What I might do is select them all and just distribute the centers. Just to make sure they're all lined up nice. Perfect. What I also might do for these two is I want to slow it down. So now I need to make these kind of ones at the back recede into the background. What I'd like to do is I want to do them to the-- instead of doing it once to this one, then trying to copy and paste Layer Styles, I'm going to group them. Instead of grouping them inside of, like a folder, it's actually really good just to select both of them and make them a Smart Object. Just means that they're going to act as one layer. And if I need to go inside it, I can double click to go inside, and they're both still in there. 

So use Smart Objects as grouping as well, I do. I want to do two things, with it selected I'm going to go to 'Adjustments' and I want to find my Levels. And I want to make sure the levels are clipping just to the layer underneath. That's what this little arrow does, just this layer here. I find this is a useful trick, just to kind of grab the whites, and decide, I want less white. So I'm not fixing the levels, I'm actually just dragging and saying, there are no more whites. You can see it's just darkening them up. Showing bit of a contrast between the two. Up to you how far you want to go. Not too far. Somewhere about there. 

Next thing I want to do as well is I want to click on this Layer, and I want to add my favorite Filter, my second favorite. My first favorite is Gaussian Blur. Who could forget you, buddy? But my next favorite, 'Blur Gallery', 'Irish Blur'. The cool thing about Irish Blur, has a center and kind of fades out, and you can move that center. So right in the middle there-- actually, by default it's kind of cool. It's only affecting these guys in the background, you can adjust this. So it just means it's going to be perfectly sharp in the middle, and there's this kind of like transition between how blurry it is at the outside. And that is controlled by this little slider here, how blur it is on the outside. Or you can use this slider over here. That's what I want. Visible, readable in the middle here. I might move it up a little bit as well. You can have more than one. I haven't in this course. I've just been using one for lots of things, but know you can have more than one. When you're ready, click 'OK'. Awesome. 

One last thing I want to do is have a shadow for this main dashboard version of my app. I want that to cast a shadow on these two. So with it selected let's go to 'Effects', 'Drop Shadow'. Pick a 'Drop Shadow', I'm going to pick something nice and fuzzy. Distance wise, I'm not worried too much about distance at the moment. Why? Because we're going to detach it, so I'm going to have distance at 0. I'm going to have it nice and fluffy. How hard? Something like that, even fluffier. I'm going to click 'OK', and you could leave it like that. What I want to do though is, you can see, it's got the shadow casting everywhere, I'm going to do our trick that we've done a zillion times now. We're going to right click 'Drop Shadow', and say 'Create Layer'. The mysteriously named thing. So that it detaches it from that original layer. 

Now what we can do is we can say, you my friend, I would like you to only effect this group here. I want to do exactly what the levels is doing. Levels is clipping to that layer, I want you to do it as well. Hold down my 'Option' key on a Mac, or 'Alt' on a PC, and just looking for this little icon that appears in between the two layers. So that now you can see it only appears on these two guys, not on this background bit. Awesome. So if you wanted to update it all you do is double click on him, I'm going to invert mine for no reason, 'Save' it. You can see, it's a lovely, reusable little mock-up. 

All right, that is it for this tutorial, I will see you in the next video. Before we go, InstructorHQ, just so you know, it's something that I work on, it's one of my other projects. Basically instructorhq.com is for people who want to themselves become an instructor. I'm an Adobe instructor, but you might be looking to do something similar, or some other complete field. And basically InstructorHQ is there to, show you how to make the courses, how to edit them, way to distribute them, how to market them, plus it tracks their success as well. So it's a cool little thing, go check it out if you're keen. That explains why InstructorHQ appears randomly every now and again. 

All right, that is definitely the end of the video, I'll see you in the next one.