Testing on iPhone & iPad using Adobe Device Preview

This lesson is exclusive to members

Course contents
SECTION: 7
Color 3:42
SECTION: 10
Page adjustments 1:28

Questions

0
0
0
0
0
0
0

Course info

49 lessons / 3 hours

Overview

Web design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Photoshop. We’ll start right at the basics of Photoshop and work our way through to building professional website concepts.

I created this course for people new to the world of website design and Photoshop. I created this for people nervous about changing their careers into the world of web design.

You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what types of files and code are required at the end of your job. This course is for people serious about making money as a professional web designer.

Now let me help you earn more money, get that job and become more awesome!

What are the requirements?

  • You'll need a copy of Photoshop CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Photoshop or web design experience is necessary.

What am I going to get from this course?

  • 49 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

This course is for beginners. Aimed at people new to the world of web design. No previous experience is necessary. 

This course is NOT suited to people highly experience in the world of website mockups in Photoshop already.

Course duration 2 hours 43 mins

Get the completed files here
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

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.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025