All right. Uh, Adobe preview  or device preview is a way of showing  what you're working on in Photoshop directly onto a mobile  device, either an iPhone or an iPad while you're working. Okay? So this means  that you can be making a mockups on your computer,  but actually seeing what it looks like on a mobile device. Now, this app only works for iPhone and iPad at the moment. There's no Android equivalent yet and probably won't be,  but keep checking to see whether Adobe  do release anything for Android.

Next thing you need to do is you need to download the app  for your iPhone and iPad. Now I've got it on the iPhone here. Ignore the wallpaper there of my very handsome son. Um, and once you've done it, you open it up  and in there you'll have to sign in  with what's called your Adobe id. Now, if you don't have an Adobe id, you probably do. You just don't know what it is.

So the way to find out is to go up to here, go up to help. Okay, I'm in Photoshop. Go up to help. Now you can see here mine is  Daniel at bring your own laptop. Now, don't click Sign Out. This is just a guide here to know  what your email address is for your Adobe id.

And if you can't remember your password, try  and using this email address in  adobe.com and try and sign in. And if you can't remember your password, click the button  that says, send me out a new password. And once you've got that, uh, sign into your app. From there, one or two things needs to happen. You need to either have a connected, like I have to, uh,  your plug, okay? This is just the plug that comes for your charger.

Plug it into your computer and use that to connect it up. Or you can use wifi okay, without the plug. Now, using wifi just means that this phone  and it needs to be connected to the same router  that your computer is. Okay? They need to be hooked up to the same network,  and then it will work wirelessly. Now what we need to do is we need  to have our device preview open.

You can see it here. It's this little icon if you can,  if you can't see it there, it's in the window  and it's called device preview. Now, if they're both connected up,  you'll see on your screen it'll have the name of your phone  and on your app it'll have here that you're connected. So the next thing to do is  to make sure you have our file open in Photoshop. So I'm gonna open up the file that we're gonna be using  or creating during this course. Okay?

This is the final version, okay? And can you see here on my phone, it's all being displayed. Now the really nice thing here is  that it's that it's usable. Okay? I can scroll through it  and see what all the design looks like on this phone. Okay?

It's independent of Photoshop. You can see it's not doing anything,  but it's displaying here. Now, a really nice thing is, is that, is  that it's dynamic, okay? Which means that when I update something in Photoshop,  it's gonna instantly update on my phone  without me doing anything. So watch this. Um, I've noticed on my phone that it is, uh, both the BYOL  and the navigation bar is quite big.

So what I'm gonna do is I'm going to make it smaller. So I'm gonna zoom in on this top part here,  and you'll notice if I find my navigation and I make it nice  and small, you'll see if I grab my navigation  and I make it a bit smaller, click enter. You'll notice very quickly that it's updating on the phone. It takes about a second or two, but totally usable. Same thing with this. Bring your own laptop here.

Okay, the font's too big. Grab the font, make it smaller. Let's turn it down to something like 45. Okay? Move it along. Move it around.

And you'll notice that it kind of updates as I'm moving  around with about a second or two delay. Let's say the same for this text here. This text, white text here looks a little  small on my mobile device. So I am going to grab the type tool. I'll select it all, and I'll move it from 16, bump it up  to say 18. And you'll notice in my phone it'll update automatically.

A couple of things you can do with a device preview is if  you click it once at the top here, there's a dropdown,  and it means you can shuffle  through the different artboards you've got. So for me, it's not that useful. 'cause I've got the, the different Artboards are tablet  and desktop, and interesting to see it down on the size,  but not really gonna help me in my workflow. So, and what it's really good  for is say you're developing an app,  or say you're at the concept stage from mobile  and you've got a couple of different versions,  it means you can toggle through  and click the different art boards  to see them in comparison to each other. One thing to note as well is that you don't actually have  to have art boards set up in Photoshop for this to work. You can open up any old file and it will load up in the app.

Now I'm the first one in when there's any sort of tech  that connects my phone and my computer  and does demoing and stuff. And often they don't work very well. And I'll struggle along with them for quite a bit time. But this particular one, okay, Adobe Preview is brilliant. Okay? It works, it's quick,  and it really does help my workflow.

Now, if you're designing for mobile  and tablet, now,  you should be using something like this throughout your  build because, um,  so many designers wait till right at the end. So the website is actually built before they really get down  and test what it's gonna do on mobile and tablet. And that's far too far along the design  process to be doing something like that. So be testing, have it open, have it on the whole time  so you can kind of see and review as you go along. Now, probably the most important thing  to remember when using Adobe Preview is to make sure  that you connect up a couple of phones, a couple of iPads,  you pin them all around your screen here, okay? To make it look like you're super important.

Okay? And will also, it'll look like you're working on the  Minority report, okay? Like Tom Cruise, moving things around, swiping them around,  and it will totally impress your colleagues. All right. That's it for Adobe Preview.