Skip to main content

How to Save Your Illustrator Files as Jpegs for Websites

Lesson 35 from: Adobe Illustrator Fundamentals

Daniel Walter Scott

How to Save Your Illustrator Files as Jpegs for Websites

Lesson 35 from: Adobe Illustrator Fundamentals

Daniel Walter Scott

buy this class


Sale Ends Soon!

starting under


Unlock this classplus 2200+ more >

Lesson Info

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

Next Lesson: Exporting - Quiz


Class Trailer



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


Type & Fonts


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

CC Libraries


How to Use CC Libraries in Adobe Illustrator CC


Effects & Patterns


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

Capture App


How to Use Adobe Capture App with Adobe Illustrator CC


Free Templates


Using Free Templates in Adobe Illustrator CC




Exporting for Print


How to Save Your Illustrator Files as Jpegs for Websites


Exporting - Quiz

Real World Exercises


32. How to Redraw the MasterCard Logo in Adobe Illustrator CC


How to Redraw the Instagram Logo in Adobe Illustrator CC


How to Redraw the Kodak Logo in Adobe Illustrator CC


How to Redraw the eHarmony Logo in Adobe Illustrator CC


How to Redraw the Tinder Logo in Adobe Illustrator CC


How to Redraw the BP Logo in Adobe Illustrator CC


Next Steps


Cheat Sheet for Adobe Illustrator CC


Course Conclusion for Adobe Illustrator CC


Final Quiz


Final Quiz

Lesson Info

How to Save Your Illustrator Files as Jpegs for Websites

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

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

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!!


Such a great course! Daniel made learning easy and fun. Can't wait to go on to the Illustrator Mastery course next!

Student Work