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

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

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

Download Exercise Files

Transcript

Alright, Adobe preview or device preview is a way of showing what you’re working on on photoshop directly onto a mobile device - either an iPhone or iPad while you’re working. So this means that you can be making your mockups on your computer, and 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 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. 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 but you just don’t know what it is. So the way to find out is to go up other, - go up to help, I’m in photoshop - go up to help and 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. If you can’t remember you password try using this email address in Adobe.com and try to sign in, and if you can't remember your password click the button that says send me a new password. Once you’ve got that sign into your app from there. One or two things need to happen,- you need to have a connector like I have to your plug, this is just a plug that comes with your charger. Plug it into your computer, and use that to connect it up, or you can us wifi without the plug. Now using wifi just means that this phone needs to be connected up to the same router as your computer . 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’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 will have the name of your phone, and on your app it will have here that you’re connected. The next thing to do is to make sure you have a file open in photoshop. I’m going to open up the file that we are going to be using or creating during this course. That is the final version. You can see here on my phone it’s all being displayed. Now the really nice thing here is that it’s usable, I can scroll through it and see what all the design looks like on this phone. It’s independent of photoshop - you can see it’s not doing anything - but it’s displaying here. Now a really nice thing is that it’s dynamic, which means that when I update something in photoshop it’s going to instantly update on my phone without me doing anything. So watch this - I’ve noticed on my phone that it’s both the BYOL and navigation bar are quite big. So what I’m going to do is, - I’m going to make it smaller. I’m going to zoom in on this top part here and you’ll notice that if find my navigation and I make it nice and small. You’ll see that if I grab my navigation and I make it a bit smaller - click enter - You’ll notice that very quickly that it’s updating on the phone. It takes about a second or two, but totally usable.

Same thing with the BYOL here, the fonts too big. Grab the font and make it smaller, just turn it down to something like 45, and move it along and around, and you’ll notice that it kind of updates as I’m moving around with about a second or two delay. Let’s do the same for this text here, this text, white text here looks a little smaller on the mobile device, so I’m going to grab the type tool. I'll select it all and I’ll move it from 16, and bump it up to say 18, and you’ll notice on my phone it will update automatically. A couple of things that you can do with the device preview, is if you click it once up the top here there is a drop down, and it means that you can shuffle through the different artboards you’ve got. So for me it’s not that useful because I’ve got the different artboards on tablet and desktop, and it’s interesting to see it down on the site, but it’s not really not going to help me with my workflow.

So what it’s really good for, is say your developing an app or say you’re at concept stage from mobile, and you’ve got a couple of different versions, it means you can toggle through, and click the different artboards to see them in comparison to each other.

One thing to note as well, is you don’t actually have to have artboards 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 often it doesn’t work very well, and I’ll struggle along with them for quite a time, but this particular one, Adobe Preview is brilliant. OK 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 so many designers wait till right at the end , till the website is actually built, before they really get down, and test what it’s really going to 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 a review as you go along.

Now probably the most important thing to remember when you re using Adobe Preview is to make sure you connect up a couple of phones, a couple of iPads, - you pin them all around your screen here. OK to make it look like you’re super important. OK It will also - it’ll look like you are working on the minority report like Tom Cruise, moving things around, swiping them around and it will totally impress your colleagues.

Alright that's it for Adobe Preview.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024