- [Instructor] Now, you may recall,
in one of the earlier movies of this chapter,
I was telling you that Save For Web
can only accommodate a single artboard at a time.
But, nowadays there is a command
that can export multiple artboards
and it's known as Export for Screens.
So, here I am looking at three iPhone designs
on three separate artboards.
And so, if I wanted to export all three of them at once
to multiple image sizes and formats as well,
then I would go up to the File menu, choose Export,
and then choose Export for Screens,
which has a keyboard shortcut of ctrl + alt + e
or cmd + opt + e on a Mac.
And notice that each one of my artboards
is assigned to an independent image.
And if you're not seeing the artboards,
then you're probably looking at the Assets tab instead.
And we'll be reviewing this option in the very next movie.
But for now, go ahead and click on Artboards,
and then notice you can specify
how you want to export your artboards,
whether you want to export all of them
or whether you want to specify a range
and so, for example, if I only wanted
to export artboards one and three,
I would put a comma in between them like so,
or I can export all three artboards
into a single image file à la Save for Web,
in which case I'm also going to pick up a few path outlines
that are sitting out in the pasteboard.
Obviously, that's not I want,
so I'll just go ahead and select All,
to export all three of them.
Your next step is to specify a folder,
the place where you want to export these files
because it's all going to happen automatically
in one fell swoop.
And so, I've already created a Multiple artboards subfolder
inside of my 15_web folder
and so I'll go ahead and select that.
Next, you probably do want to open the location after export
to review your files and then you
can see your formats down here.
So, by default you're going to see 1X,
which means no scaling will occur.
You can add a suffix if you want to,
although it's really not necessary at this point
and then you have the option of selecting a file format.
And PNG, by the way is the same as PNG 24.
In other words, you'll have up to 16.8 million colors
along with 256 levels of translucency.
Now, you can add your own
by clicking on the Add Scale option right there.
And so, for example, I could stick with 1X.
But this time I could go with JPG 100.
So, the highest quality setting.
In which case, Illustrator goes ahead
and suggests a suffix for me, which is just fine.
Another option is to click on iOS or Android,
which are going to add a bunch of additional scales for you.
So, for example I've scaled all these artboards
for an iPhone 6.
So, I'd go ahead and click on iOS
to add a bunch of additional items
and notice that gets rid of my JPG settings.
So, if I wanted to bring it back,
I'd have to click on Add Scale once again.
And as you can see here, in a couple of cases,
we're scaling the graphic by 200 percent
and by 300 percent.
The idea being that creates the ability to zoom.
And if you're just creating a design,
it gives the person the chance to see in detail.
Alright, you can also edit the specific settings if you like
by clicking on this little gear icon.
And so for example by default,
the Anti-aliasing for PNG is set to Type Optimized.
If you don't want that,
and you're mostly working with graphics,
you could instead choose Art Optimized.
But my artboards contain type.
So, I'll go ahead and stick with the default setting.
Now, you can also change the background color
from Transparent to White,
and you can experiment with these settings as you like,
but I'm going to go ahead and cancel out.
And I'm now ready to click
on the Export Artboard button with one exception.
The problem is, notice the names of my artboards.
I never got around to giving them custom names
inside the artboards panel.
So, you might figure you have to cancel out,
and then name the artboards, and then come back.
But you can actually name them right here
just by clicking on an existing name.
And I'll go ahead and call this one Purple Design.
And then I'll click on this guy
and change it to Orange Design,
so it's pretty easy to pull off.
And I'll click on this guy,
and you probably are seeing this coming,
but I'm going to call it, quite surprisingly Green Design.
Alright, now I'm ready and so I'll click Export Artboard.
And you can see that it actually
happens pretty darn quickly.
Especially given that we're blowing up these graphics
to very large sizes.
And a moment later, you should see a folder
full of your new image files
as well as vector-based SVGs.
And so, I'm just going to go ahead
and double-click on Orange Design.PNG.
And I've set PNG files to open in Photoshop,
which is why we're seeing this file here.
And just to confirm that everything is the way it should be,
I'll go up to the image menu
and choose the Image Size command.
And notice, I'm seeing the pixel dimensions right here.
And sure enough, they measure 750 pixels by 1334 pixels.
Which is exactly the way it should be.
Alright, I'll go ahead and cancel out.
And I'll switch back to my folder.
And this time, I'll double-click
on the Purple Design at 3X.PNG.
And I'll zoom in on it a little bit as well.
And now, I'll return to the Image menu,
and choose the Image Size command.
And I'm now seeing 300 percent sizes in both directions.
So, in other words 750 x 3 is 2250,
and 1334 x 3 is 4002.
And so, I'll just go ahead and cancel out,
just so we can see them side by side,
I'll switch to the first image,
go up to the Window menu, choose Arrange,
and choose 2-up Vertical.
So, there you have it.
Two of three artboards, that I was able to export
at multiple sizes and in multiple formats
in one easy operation.
Thanks to the Export for Screens command
in the most recent version of Illustrator CC.