Retina - HiDPI and responsive image export from Illustrator CC 2017

This lesson is exclusive to members

Course contents
SECTION: 15
Cheat Sheet 5:23

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

45 lessons / 4 hours

Overview

UI 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 Adobe Illustrator. We’ll start right at the basics of Illustrator and work our way through to building professional UI designs. This course doesn’t cover how to code a website but focuses on the design processes that professional UI designers use when working.

This is a project based class for students who are new to the world of app & web design. I created this for people nervous about changing their careers into the world of user interface design.



We’ll build a professional portfolio website. You can use this course to build your own portfolio website (the one you’ve been putting off for years). You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what you’ll need to deliver at the end of a project to your client.

This course is for people serious about becoming a User Interface design professional.

Know that I’ll be around to help - if you get lost you can drop a post on the video 'Questions and Answers' below each video and I'll be sure to get back to you.

Now it’s time to upgrade your skills, get that better job, and impress your clients.


What are the requirements?

  • You'll need a copy of Adobe Illustrator CC 2017 or above. A free trial can be downloaded from Adobe.

  • No previous design skills are needed.

  • No previous Illustrator skills are needed. 

What am I going to get from this course?

  • 45 lectures 4 Hours 7 minutes of content!

  • You'll learn to design a website with in Adobe Illustrator.

  • User Interface essentials. 

  • 27 Completed files so you never fall behind. 

  • Learn how to wireframe at all levels

  • How to design for a responsive website. 

  • Downloadable exercise files & cheat sheet.

  • Forum support from me and the rest of the BYOL crew.

  • Techniques used by professional website designers.

  • 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 and UI design. While no previous Illustrator experience is necessary.

Course duration 4 hours

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

Hi there, in this video we're going to talk about what we do about retina, or high dpi, or responsive images, whatever you may want to call it, it's all about quality of images.

Now, most of the time, we're kind of at a point where there's no clear rules about what you should do, there's a couple of ways of doing it, and some people do it, and some people don't. Most of the time people don't, what they do is they just give you an image, and they scale it up and down for the different resolutions, and just live with it, because retina displays, like my Macbook Pro in front of me, and some of the Windows tablets, and some of the new iPads, they have double the pixels, they have some amazing quality crammed into them, and what mostly happens is people ignore it. It's sad but true, people just forget about those guys because there's such a small percentage, and there's a bit of work on the web design side to try and accommodate them all.

Now, saying that, if I was a big site, of course I’m going to accommodate them, but quite often when I'm dealing with people with small to medium websites, people start to worry about it. So you cannot worry about it, and you'll have to get into it, so we're going to talk about it now, but know that if you want it for your first website, it's okay, you get a whole pass, you're allowed to just use standard definition images for this first one, but after you've done a couple, and your web skills are getting better, you totally want to get into this, especially if you're dealing with clients, like for me, I'm teaching web designers, and creative things, and you could argue that I should be doing high resolution stuff because a lot of people doing my courses have some kick ass laptops, so they might be using Macbook Pros with retina screens, and all that sort of stuff.

So let's talk about what people normally do. It is, they just export a version, like we do here, I'm going to bin all of these, all our lovely work, and I'll bin them all, just so that we can start again. And let's say I'm exporting this for my website. I’m going to unlock the background layer, and I grab you, grab just this part now, and drag it in. What mostly people do is, it's going to be a JPG-- I'm going to get rid of this suffix, I don't like that there. And it's going to be a scale of '1', and they just live with it. And, when it gets on to a screen that is really big, or has really high resolution, like a retina display for Mac, it just scales and pixelates, it just does. It doesn't look too bad, but you can tell. I can tell a glitch, and I see, a population can't tell that it's not been scaled, so often what I do is, say for something like this, this big graphic here, is I'll make it bigger than it needs to be, so I'll go down here, and go to this '1.5', so I've made it kind of like-- It's not double the size, I could make it double, so it's actually twice the size of here, so that it means, when it's seen on a retina it's really clear. The problem with that is that, people that aren't, or say, somebody on a mobile phone, not dealing with this really big image, is being scaled right down for their phone, but they’re having to load this really big file size. So often what I do is I kind of cut it in the middle, and say, "I'm going to make it 1.5." 

Now, that's the cheap, cheesy, easy way, and the way I do it most of the times. So let's say that you're doing it proper. Let's pretend we're proper. What I'll do is, I'll create a version that scale '1', and then for the retina displays I'll create a different version, so I add a 'Scale', and I'm going to make a second one that's times 2, '2x'. And it just means that-- I'm going to go to JPG, and-- Am I going to append it? Yes, I'm going to have to append it, you can use the '@2x', that works fine, and that's really good when you're doing especially iOS development, which we'll cover in the next one, but normally when I do it I just do times 2, 'x2', and another version. 

It depends on how high you're going to go, I only-- If I'm getting serious I only support retina which is double the resolution. You can find lots of devices these days which have 4 times the resolution. This file size is going to be huge. At that time, you can sport those big files, and what you can do is, when you're building your site, you can switch things out with media queries, it just means you can check what size the screen is, and then display the right image for it, and that is perfect and it works pretty well, so a lot of extra work for quite a small percentage of your readership, or your users. 

So that's one way of doing it, and now I've got three versions. If I hit 'Export' now-- What is this guy called? I can't remember the proper name, so I'm going to give him a new name, I'm going to call it 'background', not very exciting. 'Export'. Stick him in there. Let's have a look. Okay, background, I've got this first version, and there's another version, and then this giant version. You can see the sizes here, one's at 0.1MB, one's 0.2, and then one jumps up to 0.7, so quite large. So, big, massive, even bigger. And what happens is, when you're building your website on the other side, what I mean by other side is  in code, it's not super hard to go through and create media queries to trigger these different screen sizes. It just says, if  my browser is looking at this with the super retina screen, check if it is, then, don't load this image, load this image. And yes, it's a pain in the bum, but that's how people go around it. 

So, that's how you deal with retina. Often you only do two versions. You'll do a normal version, and then a @times2, '@2x', and just switch it out in code. Now, in saying that, I don't, all I do is grab this guy and make a 1.5 right in the middle and I force everybody to look at the 1.5 version, and that means that people using screens that aren't retina are stuck having to load a slightly bigger file size, and the people that are on retina get a slightly better image. Nobody wins, or everybody wins, depends how you look at it.

So you can go through all of these images, and just upload them, drag them into here, and add to versions. So, hopefully that helps you. Another thing is, people sometimes call it HiDPI, and retina, they are the same thing. HiDPI is what non-Apple people have to call it, retina is kind of a branded term from Apple, so if you're calling it retina you're in trouble. It has to be HiDPI, because that's what they call that kind of high resolution images.

Now, one other thing, my little asterix at the end here, is that it's 2017, a picture in a couple of years, if you're looking at this in 2019, you’re probably sort of going, “Jeez, Dan! Bad, bad, bad stuff.” Things might have progressed, and they might have been either a big adoption of @times2, '@2x', or there might be just another way of doing it, so this one is the one they go and check, everything else, solid, this one here, just check, and check with your developer what they want.

All right, if you remember nothing from this video, I've kind of jumbled on a little bit here, is just leave it at @times1, '@1`x'. That's what everybody does, and you won't be hurt if you do that, just might not look as good on some screens, so just do 1 scale at the moment. All right, verbal diarrhea over, back to your videos.

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