(intro music)
- There are a number of different file types
you can actually export your illustrator file to.
To see them, we need to go up to the 'File' menu
and down to 'Export' and then choose
how you want to export them.
But to 'Export As' this is where we get our other options.
And you can see here that we can send this out as
a 'PNG', a 'BMP' as a 'CSS' file.
That's interesting, but you can do it.
You can send it as a couple
of drawing formats, 'DWG' formats, 'Enhanced Metafile'
if that's even still in use, I have no idea,
please somebody let me know.
'Flash' as well, if that's still in use, please let me know.
I know we have animate, but there you go.
'JPEG' 'Macintosh PICT'.
I don't even know if that's still in use,
that's super, super old.
'Photoshop', now you can do that with layers,
but once you get I think it's over four layers,
it just doesn't like it and stops doing it.
I don't know why, I wish they'd remove that limit,
it would be really useful.
'TIF' file, 'Targa' 'Text Format'.
That would be good for things that you need in text,
I guess but you can actually do it because Illustrator
under the hood is actually 'XML' and 'Text'.
'Windows Metafile' Is that still in use as well?
Wow, crazy.
And 'SVG' of course.
So there you are.
Those are the different options you have for exporting.
Just so you know, you can also do a 'Save As'
operation and save it as a 'PDF'.
Which is super handy because it can be read back in
by Illustrator as well, provided you keep the
Illustrator editing capabilities intact
and you'll see that in a dialogue.
'Asset Export' is a very useful panel especially
if you're in the whole, UI slash UX
or UX UI, however you want to say it,
'UX Way' how about that?
If you're in that game
the 'Asset Export' panel is very, very useful, indeed.
It's also useful, of course for the rest of us.
To use it, all you need to do is to 'Add Assets' into it.
Now it tells me here to drag these
in and to option drag artwork to add a single asset.
But do you know what I'm going to ignore that?
I'm just going to drag this in.
Let me just group these two things here just to
make sure they are actually grouped.
Okay, and I'll drag this in, like so
in fact hold on a second, I'm just going to undo that.
So I'll get rid of that asset.
Okay, so I'll select both things
and drag them both in and you can see
that it generates me individual assets.
This time I'll hold down the 'Option' key
there to add that in.
So I could, for example, now give that a name.
So we'll call that 'LuvVectors'
spelt in a very childlike way.
And we'll call this one 'Heart'
and we'll call this one 'Banner'
or 'Scroll' however 'Banner's' there now.
So let's deal with that.
Then you can determine how you're going to export them.
Now, if you're exporting for iOS,
you'll need certain different variations.
And if you're exporting for Android
you will need even more.
Although you can also cook up your own formula.
If I hit 'iOS', you can see
that I get 'PNGs' at three different resolutions.
So one times, two times and three times.
You don't need to worry about resolution
by the way, with vector graphics,
and an SVG.
I'm just going to remove all of those.
If I go for Android, then I've got a bit
more scrolling to do
because you get them from point seven five times,
right the way up to four times from there
and the SVG on top.
You can also use other formats,
so here you can see,
I can save it as two different kinds of 'PNG'.
So old-school PNG and new slick PNG
and then different flavors of 'JPEG'
with different quality settings, 100 being the highest.
SVG scalable vector graphics, and PDF from there.
So maybe I determined
that I actually want one at a hundred percent here.
Going to add a scale.
I'm going to have one at four hundred percent there.
Okay, the name here will be attached to the file name.
And I'll just call this '@1',
or in fact, if I go '1X', there we go.
Just to not confuse anything there.
I can even put the '@' in, the other one feels left out.
There we are.
I can add a scan and say this one
I want to export a 'SVG', which doesn't
have any scale at all.
And then I can simply click 'Export'
and determine a location
for where these are going to go.
Okay, if I choose that, then you can see all
of those have now gone to that folder and they
can also be in their own folders.
You can actually set that up in the 'Format Settings'.
So that's for the individual format.
Okay, in fact, if I go here again and choose 'Open
Location After Export', do it one more time.
Just here, here it is.
And you can see I've got a '1X' folder, a '4X' folder
and an 'SVG' folder just there in case you're wondering why
it's that way.
It's because developers like it that way.
And like I said, the whole 'UX Way' or UX UI thing there
and we've got this small panel down here, okay,
for the export for screens dialogue.
And this is where you determine whether something
will create sub folders, okay, for each scale
or each format.
Some people like that.
Few other things you can do to tune the files
and here are your 'Assets'.
And if you've got multiple 'Art Boards'
you can export those as well.
So it's all going on, saving what used to be multiple trips
back and forth between the safe or web dialogue.
Now you can do it all in one click.
(outro music)