Subscribe or Login to watch video

Login or Subscribe to watch video

37 - One more Prototype trick & faking depth of field for mockup

Questions & Comments

No comments

ALL ACCESS: $19.95 per Month + Cancel anytime   

Video Transcription

Hey there, in this tutorial we're going to look at one more trick for Prototyping, and we'll go and build this list. Actually I've already built it but I want to show you how to do this kind of prospective blurring the background drop shadowy type thing. All right, let's go and do that now in this tutorial.

So I have added a lot of my prototyping, and done some testing. The cool thing you can do is that you can be on Prototype, be on your Black Arrow, and just pick 'Command A', or 'Control A' on a PC, and you can kind of see all the wires. Sometimes I like to just take screenshots of this, include it in the proposal just so that-- just looks really impressive. And you can see, all at once, where everything connects and maybe where you've got pages not going at anywhere. Like this one here, Lone Ranger.

So while I was doing that, I built one other page I felt needed to be there, which is this Marketing Checklist thing here. So I'm going to use that for my user testing. One of the other things I want to show you for prototyping is, let's say that-- I've rigged this up, so I click on this, and these buttons go to the dashboards, and with that button, this one here goes to the app, you can see it running down the bottom there, but I've got two of these pages, so I've to do it twice, right? And I have to select all of these, and group it. There is a trick. If I copy and paste this in Design view, and I bring it across, it does not bring in any of those wires. Those connections. But if I do the exact same thing in Prototype-- so I'm going to select all of you guys. I just selected every single thing there. Copy it, and go-- you guys delete, go away. Hit 'Paste', you'll notice that all the wires come along, and they can save you loads of time, especially when you're down here like, I found, like down here with my app, I'm clicking on 'Next', this one goes 'Next', actually 'Skip'. 'Skip' goes the same page… you might have loads of those. So you can just copy and paste them, make sure your Prototype load. So that's what we've done for the Prototyping.

Next thing I want to show you is, just I'm going to do it, so I figured out I'll show you. I like to do some kind of fake Depth of Field stuff that I showed you at the beginning, so I've got this guy, this is the thing that I made, I'm going to grab Design view. I'm going to copy it, and what I might do is just make a bigger version for Photoshop. I'm just going to ungroup it, and watch this. If I start dragging it out, can you see, it's still doing some weird stuff. It's because I have a repeat grid inside of this repeat grid, so I did these kind of drop down menus, that's the first repeat grid. Then I grouped it all together, then did another repeat grid to do the whole module. So what you might have to do is ungroup a few times. So I'm holding 'Command-Shift-G'. That's ungroup, or 'Control-Shift-G'. I'm just mashing it a few times so I know that everything's ungrouped, now will re-size nicely. That's making a better quality, so I can copy it. Jump into Photoshop.

Now how big do I want this to be? I'm going to put it on the Home Page, right? I've decided I don't want this kind of split, I just want a space for it to go roughly this sort of size. It's going to fit one of these little tiles. How big? Roughly about that big. So it's going to be 920x700. Actually, I want it to be 900x720 but I want it to kind of tuck in there, just to line up with anything else. So, in Photoshop, 'New Document', I'm going to make it 920x700. And I am going to do a couple of things first before I paste it in. I'm just going to put green here in the background, for no reason. There's the Gradient tool there. And it just takes your foreground and background color. If you want to do more on Photoshop, I've got a course on Photoshop. Go check that out.

I'm just doing a kind of-- I don't know what I'm doing. Some sort of gradient thing. Not a big enough difference, Dan, but a lot better than the old gradients. So I'm going to paste him in. And what I'd like to do is just use 'Edit', 'Transform', 'Distort'. Distort here just allows me to fake a bit of depth, or, guess, perspective. Zooming out a lot. I just want something that looks like it's kind of, I don't know. Zooming. Don't even know where. Hope you get the idea of what I want to do. Yes, I like that. This weird force perspective, okay. So I want something like that, maybe a little smaller so I can see all of the next line. I'm just kind of tucking it in because I want those edges to line up with everything else. So, I'm going to do that and a couple of other things to make it look nice. And an easy one is to duplicate it. Right click it, duplicate it, or just drag it on to this new window here, this is going to be Shadow. And I'm just going to select it all by holding 'Command', and clicking the 'Thumbnails'. I'm using lots of shortcuts here I guess this is not a Photoshop course, just going fast. So 'Command-click', gives you a selection around this whole thing. And I'll go to 'Control-click' on a PC, go to 'Edit', 'Fill'. And I'll fill it with a color, I'll fill it with black. So now I've got this black thing. I'm just going to drop it down there. Put it underneath my layer. I'm going to lower it. I want to feel like there's a Drop Shadow going on. 'Filter', 'Blur Gallery', everyone uses 'Gaussian Blur'. There's probably better ones, but everyone goes to that one. So I've blurred the edges, I'm just going to lower the opacity a little bit just so it's kind of looking like this. Pushing off the page a little bit. Awesome!

The last little thing I will do is the Depth of Field. So, with this layer selected, what I'm going to do is go to 'Filter', 'Blur Gallery', and 'Irish Blur' is a good one for this. It allows you to kind of move this center around. And what I might do is-- I want that to be mainly in the focus. And then you can grab these edges, rotate it around, drag it in and out. I like that one just a little bit longer down here. To adjust the Blur, you can actually just grab this dial here. Drag it back, or you can use the slider there. Once you've finished, click 'OK'. And I've got this kind of fake Depth of Field. It's kind of coming forward. That's what I'm looking for anyway. So I'm going to save this as a JPEG. Easiest way, 'File', 'Export', 'Export As'. Make sure you pick 'JPEG' at the top here. Quality slider, I'm going to leave mine at 100%. And we'll let XD sample it later on. And also, into the exercise files called 'List Depth of Field'. Awesome! I'll save this as a PSD in there as well. If you want to have a look at it. I'm going to bring it in, and stick it on this page. So, bring it in. 'Exercise Files', 'Images'. Let's have a little look at 'List Depth of Field', there you go, buddy. And it should be pretty much perfect. I love it. How much do I love it? Not even sure I like it anymore, but, hey, you learn a new thing. Tried doing these tutorials, and then kind of trying to be creative doing them as well. I'll probably go out and do something a bit different with them. But that is it for this one. We have faked some Depth of Field, we have learned a little bit more about Prototyping. And yes, let's get on to exporting stuff.

ALL ACCESS: $19.95 per Month + Cancel anytime