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.