alright in this video, we're going to look at exporting illustrator files for web Okay, we're gonna look at Jpeg and PNG s doing full outboards and little individual things as well. Alright, let's get started. First up, we've got a file open called exporting web ai which is in your exercise files, we want to do two things. Right, I've got this kind of art board over here, so I got two outboards are gonna kill my outboard tool. There's one and two. So we're looking at to kind of versions of exporting this one, I just want a big Jpeg, I just want a Jpeg. They can email or stick up on a website and this one here, I want to export the individual pieces. So let's do this first one. Okay, there's two different techniques. So we're gonna go to file and we're gonna go to export and we're gonna go to this one that says export as okay, export as allows us to down the bottom. Okay, let's move it up a little bit. I'm gonna put it in my desktop on my illustrator files and in here I can pick a forma...

t. Okay, so PNG Jpeg is probably the best for this particular image because there's no transparency. Okay, it's just a nice flat rectangle, Lots of colors. Jpeg is perfect. I'm going to say use outboards without that, it just exports everything that you can see which you might like, but I'm gonna say use art boards, I'm going to say just the range of one. Okay, just the first one click export now in an option here. Okay, you can decide on the quality now, have a look like you want to be around the 10 to 8 mark. Okay, but just look at the file size at the end of its huge, you're like, oh man, I'm going to lower it down and it's just a balancing act of file size versus the quality. Somebody down here, it's gonna look pretty bad. Okay, so My advice is around about eight gives you a kind of a nice balance between the two now, when it comes to resolution, this is also another balancing act. If it's going to print, which we're not trying to do here, it should be 300 if it's going to a traditional kind of screen or website 72 will work. Okay, because screens are changing quite a bit. There's high res and retina and high dP I there's some other things you might kind of cut the middle And go 150. That's what I would typically do. Okay, so have a little look, see what you've got as a result. Okay, every usage is a little bit different, click OK. Kick back, relax. It'll make you a jpeg. So let's have a little look and in my desktop, where are you? The files and where's my web? Okay, It's called it web Oh one. Okay. And yeah, it looks good. It's fine size. It's really small. File size. Okay, so that works for that. These guys are a different story if I use the same method, I'll get this whole art board. Okay. And all of these guys together, I want them as separate icons. Okay. I might have designed them for a website or for iphone app. Okay. And I want them all to be separate. And what we do is we open up something called the window and we go to the assets export. This is really handy. I'm gonna move it over here. So what I'd like to do is watch the foot drag the all in there. He is there, he is kind of like his own little individual asset. I can click on him and call him al. Okay, Same with the crown. Easy peasy. Call them crown. You get the idea here, you're gonna, we're gonna run into a problem in the second. I'll show you what it is. Alien Casper alien. Okay, this guy here, I'm going to say all of you guys, I'm gonna drag them in and we'll, we get kind of four parts. Okay, so I'm going to undo that. And what happens is, is if they're not grouped, they assume that they're all separate objects. Okay, so, and this guy here is getting dragged in and because they're not grouped, it's kind of exporting an eye and an eye and that's the kind of middle bit of this like hood and everything separate. So you get the idea. So with him selected, we're going to go over here and go to group now if I drag him in, he's now just one old ninja ninja cool. Now with a more selective actually with them selected in here. Okay, you can see it's blue on him. Blue blue, blue. Okay, so now I was selecting lots of them by holding down the shift key. Okay, They all go blue. So click on the first one, hold shift, click the last one. They're all selected and I can decide what kind of format now you can export these as PDFs here, which is cool. And but in our case like Jpeg won't work for us because the Jpeg will put in the background, we want a transparent background. Okay, So we're gonna go to PNG or SVG. SVG is kind of new. So talk to your web designer or app developer if they want SVG? S most, it's getting more and more popular. Okay. But PNG is probably the most typical. Okay, so, but you might decide actually, I'm not sure. I'm going to send them both. Click on this thing and says add scale and instead of scale we're going to say actually just want an SVG as well. So you're going to export two versions. Let's click export. Okay, It's going to ask you where you want it. I'm going to stick it on my desktop illustrated Class files, I'm going to make a folder in here called web export and click choose and off it goes, let's see what we've got. So and find a way of export. Cool. So let's go to icons. I've got two aliens ones, a PNG ones in SVG. You might also want to jPEg, so you're not sure. Just put them all in there. Okay. I got a crown. Okay. I've got my ninja and I've got my owl. Okay. So the naming came through from the asset panel and you can decide on what kinds of formats you want. Alright. That is exporting for Web from adobe illustrator. Alright, I will see you in the next video.

Class Materials

Bonus Materials with Purchase

Exercise Files

Completed Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Graphic Design Illustration Adobe Illustrator Drawing

Ratings and Reviews

Roz Fruchtman

BIG COMPLAINT... I'm just starting this course. I have Illustrator CS6. My BIG/HUGE Complaint and I only watched 2 1/2 brief lessons... Is that the FiVRR LOGO (top right) is RIGHT ON TOP of the Illustrator Panels and YOU CANNOT SEE what is under it. IF one is just learning, they need to see what everything looks like in Illustrator (or any class). I STRONGLY suggest that FIVRR and CreativeLive find a better place to put the FIVRR Logo instead of putting it where it BLOCKS ESSENTIAL course visuals! Not sure I can get through this, but I'm not giving up quite yet. I like the course previews and IF I can learn how to get around Illustrator I will be thrilled... I am a Photoshop person, and Illustrator makes me feel like an incompetent! ;) Perhaps IF I can learn Illustrator I can use it for some of the visuals I create! Thanks in advance. PLEASE PLEASE PLEASE find a better place and size for the Fivrr Logo. ~Roz Fruchtman aka @RozSpirations

Annie Kerr

This was a great class that covered the fundamentals really well - some of the instructions were out of date if you are using Creative Cloud but wasn't anything I couldn't get around. I loved the format and Daniel is a great teacher, who made each video interesting and fun to watch!

Christi Peace

This class is AMAZING!! Daniel is a very thorough, entertaining and easy to follow instructor. You DO NOT need to take any college course on Illustrator because this is the whole thing right here!! You will be a pro once you complete it. I only wish that Creative Live could send me a diploma for it once I complete it! BUY THIS CLASS! IT’S WORTH EVERY PENNY!!

2,000+ classes ranging from fundamentals to advanced techniques.

How to Save Your Illustrator Files as Jpegs for Websites

How to Save Your Illustrator Files as Jpegs for Websites

Lesson Info

35. How to Save Your Illustrator Files as Jpegs for Websites

Lessons

Class Introduction to Adobe Illustrator CC for Beginners

Class Exercise Files for Adobe Illustrator CC Essentials

Getting Started with Adobe Illustrator CC

How to Draw in Adobe Illustrator CC with Shapes & Lines

How to Draw Using the Shape Builder Tool in Adobe Illustrator CC

How to Draw a Fox Using the Shape Builder Tool in Adobe Illustrator

Drawing - Quiz

How to Draw Custom Logo Shapes Easily in Adobe Illustrator CC

How to Draw Anything Using the Curvature Tool in Adobe Illustrator

How to Draw Using the Pen Tool in Adobe Illustrator CC

Drawing with the Pencil Tool in Adobe Illustrator CC

How to Use Brushes in Adobe Illustrator CC

How to Draw Lines with the Width Tool in Adobe Illustrator

How to Use Type & Fonts in Adobe Illustrator to Design a Postcard

How to Curve Type Around a Badge Using Adobe Illustrator CC

How to Break Apart & Destroy Text & Fonts Using Adobe Illustrator CC

What is RGB & CMYK Colors in Adobe Illustrator CC

How to Steal Colors from an Image Using Eye Dropper in Illustrator

How to Find Amazing Colors in Illustrator Using Color Theme

How to Make Gradients in Adobe Illustrator CC

Color - Quiz

How to Mask an Image Inside Text in Adobe Illustrator CC

How to Cut Holes in Shapes Using Compound Shapes in Illustrator CC

Masking - Quiz

How to Use CC Libraries in Adobe Illustrator CC

Making Things Liquid & Distorted in Adobe Illustrator CC

How to Bend & Warp Shapes & Text in Adobe Illustrator CC

Drawing Amazing Repeating Shapes in Adobe Illustrator CC

How to Create Repeating Patterns in Adobe Illustrator CC

How to Vectorize an Image in Adobe Illustrator CC

Effects & Patterns - Quiz

How to Use Adobe Capture App with Adobe Illustrator CC

Using Free Templates in Adobe Illustrator CC

Exporting for Print