All language subtitles for 2. Exporting for Web

In this video we’re going to look at
exporting Illustrator files for Web.

We're going to look at JPEGs and PNGs.

Doing full Artboards,
and little individual things as well.

All right, let's get started.

First up, we've got a file open...

called 'Exporting-Web.ai',
which is in your 'Exercise Files'.

We're going to do two things.
I've got this Artboard over here.

I've got two Artboards, I'm going to click
on my Artboard2, there's 1 and 2.

We're looking at two kind
of versions of exporting.

This one, I just want to pick JPEG.

I just want a JPEG that I 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.
There's two different techniques.

We're going to go to 'File', 'Export'...

and we're going to go to
this one that says 'Export As'.

Export As, allows us to--
down the bottom--

Let's move it up a little bit.

I'm going to put it in my
'Desktop', 'Illustrator Files'.

And in here, I can pick a format, so PNG.

JPEG's probably the best for
this particular image...

because there's no transparency.

It's just a nice flat rectangle,
lots of colors.

JPEG is perfect.

I'm going to say, 'Use Artboards'.

Without that it just exports
everything that you can see...

which you might like.

But I'm going to say, 'Use Artboards',
I'm going to say, just the Range of '1'.

Just the first one.

Click 'Export'.

Now, another option here,
you can decide on the quality.

Now, have a look,
you want to be around the 10 to 8 mark...

but just look at the file sizes
at the end of it.

It's huge, you're like,
"Man, I'm going to have to lower it down."

It's just the balancing act
of file size versus the quality.

So, right down here,
it's going to look pretty bad.

So my advice is, around that 8.

Gives you 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...

but if it's going to a traditional,
kind of screen, or a website...

72 will work.

Because screens are changing quite a bit...

there's Hi Res, and Retina,
and High dpi, there's some other things...

you might kind of cut
in the middle, and go 150.

That's what I would typically do.

So, have a little look,
see what you've got as a result.

Every usage is a little bit different.

Click 'OK', kick back, relax,
it will make you a JPEG.

Let's have a little look.

And in my 'Desktop'...

'Files', and here's my 'Web'.

Let's call it 'Web01', and yes, looks good.

File size, it's a really small file size.

So that works for that.

These guys are a different story.

If I use that same method,
I'll get this whole Artboard...

and all of these guys together.
I want them as separate icons.

I might have designed it for a website,
or for an iPhone app.

I want them all to be separate.

What we do is open up something called
'Window', and go to 'Assets Export'.

This is really handy.

I'm going to move it over here.

So what I'd like to do is, watch this,
if I drag the owl...

there he is there, he's kind of like
his own individual asset.

I can click on him.
Call him 'Owl'.

Same with the crown, easy peasy.
I'll call him 'Crown'.

You get the idea here.

We're going to run through
a problem in a second.

I'll show you what it is.

An alien.

Can't spell alien.

It's this guy here, I'm going to say,
all of you guys, I'm going to drag them in.

Whoah! You get kind of four parts.

I'm going to undo that.

What happens is, if they're not grouped...

they assume that they're
all separate objects.

This guy here is getting dragged in...

and because they're not grouped,
it's kind of exporting an eye, and an eye.

That's the kind of middle bit of this hood,
and everything separate.

So you get the idea.

So, with them 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.

Now, with them all selected--

Actually, with them selected in here...

you can see, it's blue, clicking on him.

Blue, blue, blue.

I was selecting lots of them
by holding down the 'Shift' key.

They all go to blue,
so I click on the first one...

hold 'Shift', click the last one,
they're all selected.

Now I can decide what kind of format.

You can export them as PDFs here,
which is cool...

but in our case,
a JPEG won't work for us...

because a JPEG will put in a background,
we want a transparent background.

So we're going to go to 'PNG' or 'SVG'.

SVG is kind of new,
so talk to your Web Designer...

or App Developer, if they want SVGs.

It's getting more and more popular...

but PNG is most probably
the most typical.

But you might decide, actually I'm
not sure, I'm going to send them both.

Click on this thing,
that says 'Add Scale'...

and instead of Scale, we're going to say...

actually I just want an SVG as well.

So you're going to export two versions.

Let's click 'Export'.

It's going to ask you where you want it.
I'm going to stick it on my 'Desktop'.

'Illustrator Class Files', I'm going to
make a folder in here called 'Web Export'.

Click 'Choose'.

Off it goes, and let's see what we got.

So, in 'Finder', 'Web Export'.

Cool. Let's go to 'Icons'.

I've got two aliens.
One's a PNG, one's a SVG.

You might also want a JPEG.

Say you're not sure,
just put them all in there.

I've got a crown, I've got my Ninja,
and I've got my owl.

The naming came through
from the Asset Panel.

You can decide on what kind
of formats you want.

All right, that is exporting for Web
from Adobe Illustrator.

I will see you in the next video.