1
00:00:00.08 --> 00:00:01.08
- [Instructor] Now, you may recall,

2
00:00:01.08 --> 00:00:04.03
in one of the earlier
movies of this chapter,

3
00:00:04.03 --> 00:00:06.05
I was telling you that Save For Web

4
00:00:06.05 --> 00:00:09.08
can only accommodate a
single artboard at a time.

5
00:00:09.08 --> 00:00:11.06
But, nowadays there is a command

6
00:00:11.06 --> 00:00:13.06
that can export multiple artboards

7
00:00:13.06 --> 00:00:16.08
and it's known as Export for Screens.

8
00:00:16.08 --> 00:00:19.07
So, here I am looking
at three iPhone designs

9
00:00:19.07 --> 00:00:22.01
on three separate artboards.

10
00:00:22.01 --> 00:00:25.01
And so, if I wanted to export
all three of them at once

11
00:00:25.01 --> 00:00:28.07
to multiple image sizes
and formats as well,

12
00:00:28.07 --> 00:00:32.00
then I would go up to the
File menu, choose Export,

13
00:00:32.00 --> 00:00:34.03
and then choose Export for Screens,

14
00:00:34.03 --> 00:00:37.01
which has a keyboard
shortcut of ctrl + alt + e

15
00:00:37.01 --> 00:00:40.08
or cmd + opt + e on a Mac.

16
00:00:40.08 --> 00:00:42.09
And notice that each one of my artboards

17
00:00:42.09 --> 00:00:44.09
is assigned to an independent image.

18
00:00:44.09 --> 00:00:46.09
And if you're not seeing the artboards,

19
00:00:46.09 --> 00:00:50.03
then you're probably looking
at the Assets tab instead.

20
00:00:50.03 --> 00:00:53.07
And we'll be reviewing this
option in the very next movie.

21
00:00:53.07 --> 00:00:56.01
But for now, go ahead
and click on Artboards,

22
00:00:56.01 --> 00:00:58.02
and then notice you can specify

23
00:00:58.02 --> 00:01:00.02
how you want to export your artboards,

24
00:01:00.02 --> 00:01:02.03
whether you want to export all of them

25
00:01:02.03 --> 00:01:04.07
or whether you want to specify a range

26
00:01:04.07 --> 00:01:06.09
and so, for example, if I only wanted

27
00:01:06.09 --> 00:01:09.06
to export artboards one and three,

28
00:01:09.06 --> 00:01:12.02
I would put a comma in
between them like so,

29
00:01:12.02 --> 00:01:14.07
or I can export all three artboards

30
00:01:14.07 --> 00:01:18.06
into a single image
file à la Save for Web,

31
00:01:18.06 --> 00:01:21.07
in which case I'm also going
to pick up a few path outlines

32
00:01:21.07 --> 00:01:24.04
that are sitting out in the pasteboard.

33
00:01:24.04 --> 00:01:26.01
Obviously, that's not I want,

34
00:01:26.01 --> 00:01:28.05
so I'll just go ahead and select All,

35
00:01:28.05 --> 00:01:30.02
to export all three of them.

36
00:01:30.02 --> 00:01:32.09
Your next step is to specify a folder,

37
00:01:32.09 --> 00:01:34.09
the place where you want
to export these files

38
00:01:34.09 --> 00:01:36.08
because it's all going
to happen automatically

39
00:01:36.08 --> 00:01:38.02
in one fell swoop.

40
00:01:38.02 --> 00:01:41.01
And so, I've already created
a Multiple artboards subfolder

41
00:01:41.01 --> 00:01:43.03
inside of my 15_web folder

42
00:01:43.03 --> 00:01:46.00
and so I'll go ahead and select that.

43
00:01:46.00 --> 00:01:49.02
Next, you probably do want to
open the location after export

44
00:01:49.02 --> 00:01:51.03
to review your files and then you

45
00:01:51.03 --> 00:01:54.01
can see your formats down here.

46
00:01:54.01 --> 00:01:56.09
So, by default you're going to see 1X,

47
00:01:56.09 --> 00:01:59.00
which means no scaling will occur.

48
00:01:59.00 --> 00:02:01.00
You can add a suffix if you want to,

49
00:02:01.00 --> 00:02:03.02
although it's really not
necessary at this point

50
00:02:03.02 --> 00:02:06.06
and then you have the option
of selecting a file format.

51
00:02:06.06 --> 00:02:09.08
And PNG, by the way is the same as PNG 24.

52
00:02:09.08 --> 00:02:13.00
In other words, you'll have
up to 16.8 million colors

53
00:02:13.00 --> 00:02:17.02
along with 256 levels of translucency.

54
00:02:17.02 --> 00:02:18.08
Now, you can add your own

55
00:02:18.08 --> 00:02:21.05
by clicking on the Add
Scale option right there.

56
00:02:21.05 --> 00:02:24.03
And so, for example,
I could stick with 1X.

57
00:02:24.03 --> 00:02:27.08
But this time I could go with JPG 100.

58
00:02:27.08 --> 00:02:29.07
So, the highest quality setting.

59
00:02:29.07 --> 00:02:31.06
In which case, Illustrator goes ahead

60
00:02:31.06 --> 00:02:34.06
and suggests a suffix for
me, which is just fine.

61
00:02:34.06 --> 00:02:38.01
Another option is to
click on iOS or Android,

62
00:02:38.01 --> 00:02:41.05
which are going to add a bunch
of additional scales for you.

63
00:02:41.05 --> 00:02:44.00
So, for example I've
scaled all these artboards

64
00:02:44.00 --> 00:02:45.04
for an iPhone 6.

65
00:02:45.04 --> 00:02:47.09
So, I'd go ahead and click on iOS

66
00:02:47.09 --> 00:02:50.02
to add a bunch of additional items

67
00:02:50.02 --> 00:02:53.02
and notice that gets
rid of my JPG settings.

68
00:02:53.02 --> 00:02:54.05
So, if I wanted to bring it back,

69
00:02:54.05 --> 00:02:57.08
I'd have to click on Add Scale once again.

70
00:02:57.08 --> 00:03:00.04
And as you can see here,
in a couple of cases,

71
00:03:00.04 --> 00:03:03.01
we're scaling the graphic by 200 percent

72
00:03:03.01 --> 00:03:05.02
and by 300 percent.

73
00:03:05.02 --> 00:03:08.04
The idea being that creates
the ability to zoom.

74
00:03:08.04 --> 00:03:10.03
And if you're just creating a design,

75
00:03:10.03 --> 00:03:13.03
it gives the person the
chance to see in detail.

76
00:03:13.03 --> 00:03:16.01
Alright, you can also edit the
specific settings if you like

77
00:03:16.01 --> 00:03:18.04
by clicking on this little gear icon.

78
00:03:18.04 --> 00:03:20.04
And so for example by default,

79
00:03:20.04 --> 00:03:24.02
the Anti-aliasing for PNG
is set to Type Optimized.

80
00:03:24.02 --> 00:03:25.04
If you don't want that,

81
00:03:25.04 --> 00:03:27.00
and you're mostly working with graphics,

82
00:03:27.00 --> 00:03:29.06
you could instead choose Art Optimized.

83
00:03:29.06 --> 00:03:31.04
But my artboards contain type.

84
00:03:31.04 --> 00:03:33.09
So, I'll go ahead and stick
with the default setting.

85
00:03:33.09 --> 00:03:36.00
Now, you can also change
the background color

86
00:03:36.00 --> 00:03:37.05
from Transparent to White,

87
00:03:37.05 --> 00:03:39.09
and you can experiment with
these settings as you like,

88
00:03:39.09 --> 00:03:42.01
but I'm going to go ahead and cancel out.

89
00:03:42.01 --> 00:03:43.03
And I'm now ready to click

90
00:03:43.03 --> 00:03:47.02
on the Export Artboard
button with one exception.

91
00:03:47.02 --> 00:03:50.02
The problem is, notice
the names of my artboards.

92
00:03:50.02 --> 00:03:52.08
I never got around to
giving them custom names

93
00:03:52.08 --> 00:03:55.02
inside the artboards panel.

94
00:03:55.02 --> 00:03:57.03
So, you might figure
you have to cancel out,

95
00:03:57.03 --> 00:03:59.07
and then name the artboards,
and then come back.

96
00:03:59.07 --> 00:04:01.07
But you can actually name them right here

97
00:04:01.07 --> 00:04:04.00
just by clicking on an existing name.

98
00:04:04.00 --> 00:04:06.08
And I'll go ahead and call
this one Purple Design.

99
00:04:06.08 --> 00:04:08.04
And then I'll click on this guy

100
00:04:08.04 --> 00:04:10.02
and change it to Orange Design,

101
00:04:10.02 --> 00:04:11.07
so it's pretty easy to pull off.

102
00:04:11.07 --> 00:04:13.00
And I'll click on this guy,

103
00:04:13.00 --> 00:04:15.00
and you probably are seeing this coming,

104
00:04:15.00 --> 00:04:18.04
but I'm going to call it, quite
surprisingly Green Design.

105
00:04:18.04 --> 00:04:22.00
Alright, now I'm ready and so
I'll click Export Artboard.

106
00:04:22.00 --> 00:04:23.03
And you can see that it actually

107
00:04:23.03 --> 00:04:25.00
happens pretty darn quickly.

108
00:04:25.00 --> 00:04:27.05
Especially given that we're
blowing up these graphics

109
00:04:27.05 --> 00:04:29.05
to very large sizes.

110
00:04:29.05 --> 00:04:31.08
And a moment later,
you should see a folder

111
00:04:31.08 --> 00:04:33.06
full of your new image files

112
00:04:33.06 --> 00:04:36.05
as well as vector-based SVGs.

113
00:04:36.05 --> 00:04:38.02
And so, I'm just going to go ahead

114
00:04:38.02 --> 00:04:41.02
and double-click on Orange Design.PNG.

115
00:04:41.02 --> 00:04:43.08
And I've set PNG files
to open in Photoshop,

116
00:04:43.08 --> 00:04:46.02
which is why we're seeing this file here.

117
00:04:46.02 --> 00:04:48.06
And just to confirm that
everything is the way it should be,

118
00:04:48.06 --> 00:04:49.08
I'll go up to the image menu

119
00:04:49.08 --> 00:04:52.01
and choose the Image Size command.

120
00:04:52.01 --> 00:04:55.02
And notice, I'm seeing the
pixel dimensions right here.

121
00:04:55.02 --> 00:05:00.00
And sure enough, they measure
750 pixels by 1334 pixels.

122
00:05:00.00 --> 00:05:02.05
Which is exactly the way it should be.

123
00:05:02.05 --> 00:05:04.07
Alright, I'll go ahead and cancel out.

124
00:05:04.07 --> 00:05:06.01
And I'll switch back to my folder.

125
00:05:06.01 --> 00:05:07.09
And this time, I'll double-click

126
00:05:07.09 --> 00:05:11.03
on the Purple Design at 3X.PNG.

127
00:05:11.03 --> 00:05:14.04
And I'll zoom in on it
a little bit as well.

128
00:05:14.04 --> 00:05:15.08
And now, I'll return to the Image menu,

129
00:05:15.08 --> 00:05:18.07
and choose the Image Size command.

130
00:05:18.07 --> 00:05:22.09
And I'm now seeing 300 percent
sizes in both directions.

131
00:05:22.09 --> 00:05:26.02
So, in other words 750 x 3 is 2250,

132
00:05:26.02 --> 00:05:30.05
and 1334 x 3 is 4002.

133
00:05:30.05 --> 00:05:32.05
And so, I'll just go ahead and cancel out,

134
00:05:32.05 --> 00:05:34.08
just so we can see them side by side,

135
00:05:34.08 --> 00:05:36.03
I'll switch to the first image,

136
00:05:36.03 --> 00:05:38.06
go up to the Window menu, choose Arrange,

137
00:05:38.06 --> 00:05:41.00
and choose 2-up Vertical.

138
00:05:41.00 --> 00:05:42.03
So, there you have it.

139
00:05:42.03 --> 00:05:45.00
Two of three artboards,
that I was able to export

140
00:05:45.00 --> 00:05:48.02
at multiple sizes and in multiple formats

141
00:05:48.02 --> 00:05:50.05
in one easy operation.

142
00:05:50.05 --> 00:05:53.01
Thanks to the Export for Screens command

143
00:05:53.01 --> 00:05:56.09
in the most recent
version of Illustrator CC.