Exporting images and pictures from Illustrator CC 2017 for web

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

In this video we're going to look at exporting our images, things like photographs, and there's background graphic here, you can see that we're going to end up in this ‘Export’ panel, and then we're going to end up in this lovely group I've exported. Awesomeness! All right, let's get started.

So first up, what we need to do is, do we need to export all three of these? We don't, because what's going to happen at web design phase is that you're going to import this one image, so it’s background image here, and you're going to re-use it in all three sizes by scaling it rather than switching it out. There is a way of switching it out for every different image, but it makes your page load a long time, and it means you've got lots of different CSS files and assets going on. So, typically what happens is, you import this one file, and like we did in Illustrator, we just, in web, we scale it down for the different sizes for these different break points, or the different screen sizes.

What you do is you pick the largest one, because however big it's going to get you want to export that version, because that's going to be true of this background image on the desktop, it's as big as it's ever going to be. And when you get down to, say these guys though, we kind of worked out through this tutorial, actually the guy on the mobile has actually scaled up a bit bigger than this guy, so a small percentage bigger, so we're going to export this background image from desktop, we’ll export these guys from mobile, and then we'll look at the icons in the next one, because it's a slightly different process for doing icons and logos.

First of all we need to unlock our background layer, and we need to open up this 'Asset' panel, this 'Asset Export' panel, and you can do it from 'Window', and you can go to 'Asset Export'. So what we're going to do is we're going to zoom in a little bit, I'm going to select all three of these, I don't want to get this bit, I just want all three of these guys, and all I need to do is select them all and hold them and drag them into this one here, just watch, click, hold, and drag. Awesome! So it's going to export that image for me, I'm going to give it a name, let's go ahead and call it 'Asset 4' at the moment, so let's give it a good search engine name. 

Whenever you're naming files give it a good search engine name, so this is 'Daniel-Scott-- I'm using hyphens, and not spaces, when you come to build this later on as a website, the developer, or yourself would be annoyed if there's spaces in them, because browsers don't like them, they're like a full path, so 'Daniel-Scott-Portfolio'. And what kind of format? In this case it's going to be a JPG. Now, how to know which one to pick? When it comes to images you only get to pick JPGs and PNGs. You can't use SVGs even though we just finished talking about it, that's good for icons in simple colors, and logos, but not good for these images. 

When should I use a PNG and a JPG? Pretty much, JPG the whole time if it's like a flat rectangle image. If you need transparency, say you've been into Photoshop, and you've masked things out, and you wanted to have like a transparent behind it, then you got to have to move to PNG. Problem with PNGs though is they include transparency, which is awesome, but they make the file size a lot larger, so we'll do a little comparison, we'll export this thing as a PNG, and we'll add another one, so add another scale, and instead of scaling it up we're just going to go back to the same size, so it's going to be exactly times 1, ‘1x’, but we're going to do a JPG version. And how high in this JPG one? It's up to you, most of the time you can get away with a JPG50, but you can adjust them here to be any size you want, and think of this as a quality slider. If you move it up to a 100 it's going to be super perfect, but probably a really big file size.

So what we need to do is find a bit of a balance of quality versus size, and I find JPG, especially this background image, it's not very clear anyway because it's kind of washed into the background. Say there was a picture of the thing I was selling, say I was trying to sell a Bentley, I would have it probably pretty high, at about 80 just because I want that to be a beautiful image, as crystal clear as it can be, probably above of what I probably need it for.

You can go lower than 50, no problem. What we'll do is we'll export both of these, we'll hit 'Export', it’s going to ask me where it's going to go, and I'm going to put it into our exercise files, so you can check these out, and I'll make a folder in there called 'Export Images', and I'm going to put them in there. Once I've done there I'm going to go off and check him. 'Export images', and you'll see the difference between these two, there's the PNG, and it's 450KB, and this one here is 120, so a lot smaller. And, let's look at the quality versus the two. Don't worry about that gray changing in the background, we're more worried about the actual image itself, and there is no difference. You might notice that-- It's hard to tell because you're watching a video probably, and it's—Well, you're definitely watching a video, but the quality might not be HD where you're watching it, and it's that we're using a low res image with a watermark on it just so that-- I don't get into trouble giving you images that I've paid for. The quality is not perfect because I've scaled that up because it's a watermark version, but you can see, the difference is because I don't need-- I don't need transparency, I don't need a PNG.

So, that's that image done. What's really cool about it is-- You can kind of see them in there, they're kind of tid bit, so I decide that this top image-- Remember we selected him at the top, and we picked that green, say you decide later on that the client like some more of the orange one, can you see it's already there, and I can click 'Export' again and it goes off and updates them. 'Choose', 'Replace', and it makes it nice once you've done it, and once the client comes back, or the web developer comes back and says, "Can you change, or adjust?" or "Can you give me another version?" You can keep, you don't have to kind of go through and name them again, you can see, they've all been exported again. I'm going to go back to my lovely color.

So, do you have to deal with them all separately? No way. I'm going to bin this PNG version because I know I don't need it, and I'm going to go through and say, "I want this guy." Black arrow, grab this guy, that guy, there he goes. That guy, in he goes… Can you get them all in one big go? Probably. And, 'Asset 10'. I'm going to go through and name them all. So, maybe Tayla, you could speed this up for me, buddy.

Alright, now we're going to click 'Export', 'Choose', off it goes, and hopefully now, all of this worked. The reason it didn't export them all, it's because I had this one selected, because it was highlighted I only exported him. So I'm going to select all of them, or maybe just select none of them. So I got nothing selected in there, and-- oh, I need to select them all. So I'm going to hold 'Shift' and select all of these guys, and make sure they are all selected, and now go to 'Export', hit 'Choose', hit 'Replace'. Nice! 

There's this guy in here that I'm going to get rid of, which is my PNG, I don't want him, but all of these guys have been exported, but being appended with the -50, which just says that's the quality, I probably wouldn't do that, I probably-- Can you see it says 'Suffix'? I don't like that. So I'm going to go in here, delete all these guys, and then go into this thing, select the first one, hold 'Shift', grab the last one, so they are all selected, and go to 'Export', hit 'Choose', and it's going to go export them all without that suffix at the end, and there's my graphics. They are all getting small enough. Nice!

All right, so that's how you export images. What I've just realized is, I remember talking at the beginning, making sure, export the largest one, and I totally just missed that. Don't worry, you can export these ones. The only trouble with that is that I cannot delete it, and it’s four of these images rather than the whole six. No big drama, I would go through and make these a bit bigger, maybe stick them off to the edge here, just these place holders so I can use them in this 'Export' window.

All right, that's just done now. Let's move on to exporting SVG icons and logos. 

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