1
00:00:00.05 --> 00:00:02.05
- [Voiceover] In this movie,
I'll show you how to export

2
00:00:02.05 --> 00:00:05.04
multiple graphics in a single operation

3
00:00:05.04 --> 00:00:08.04
using the Asset Export panel.

4
00:00:08.04 --> 00:00:10.04
And this is another
feature that's available

5
00:00:10.04 --> 00:00:13.09
in the most recent
version of Illustrator CC.

6
00:00:13.09 --> 00:00:16.03
And so for starters, I'll
go up to the window menu

7
00:00:16.03 --> 00:00:19.07
and choose Asset Export and in my case,

8
00:00:19.07 --> 00:00:21.05
that brings up a floating panel.

9
00:00:21.05 --> 00:00:24.04
And now what you want to
do is just grab a graphic

10
00:00:24.04 --> 00:00:27.04
or a text object or
anything for that matter

11
00:00:27.04 --> 00:00:31.06
and drag it and drop it
into the panel like so.

12
00:00:31.06 --> 00:00:34.06
Another option if dragging
and dropping is inconvenient

13
00:00:34.06 --> 00:00:37.04
as with this gear that's
now in back of the panel,

14
00:00:37.04 --> 00:00:39.06
you can select a graphic and then click

15
00:00:39.06 --> 00:00:42.04
on a little page icon to add it.

16
00:00:42.04 --> 00:00:44.09
And then finally, I'll go
ahead and grab this guy

17
00:00:44.09 --> 00:00:47.03
and drag it and drop it into the panel

18
00:00:47.03 --> 00:00:50.01
so that we have a total of three graphics

19
00:00:50.01 --> 00:00:51.08
that are available to us.

20
00:00:51.08 --> 00:00:54.06
Now bear in mind that these
guys are gonna get exported

21
00:00:54.06 --> 00:00:57.02
with whatever name appears below them.

22
00:00:57.02 --> 00:01:00.04
And so it's a good idea to
name your assets as you go.

23
00:01:00.04 --> 00:01:03.07
So I'll call this guy
"Home" and this one "Gear."

24
00:01:03.07 --> 00:01:06.06
And so all you have to do is
click on a name to replace it

25
00:01:06.06 --> 00:01:08.09
and then I'll call this guy "Play."

26
00:01:08.09 --> 00:01:11.02
Alright now, for the next
step you wanna make sure

27
00:01:11.02 --> 00:01:14.08
this area of the panel is
open and so go ahead and click

28
00:01:14.08 --> 00:01:17.04
on the triangle to twirl it open if not.

29
00:01:17.04 --> 00:01:19.09
And this time let's say I
want to export these graphics

30
00:01:19.09 --> 00:01:22.04
for an Android device and
so I'll go ahead and click

31
00:01:22.04 --> 00:01:26.06
on Android and I get a whole
slew, as you can see here,

32
00:01:26.06 --> 00:01:28.08
of different re-samplings.

33
00:01:28.08 --> 00:01:31.02
And so once I've got
everything figured out,

34
00:01:31.02 --> 00:01:33.01
I'll go ahead and click on this icon,

35
00:01:33.01 --> 00:01:36.07
which launches the Export
for Screens dialogue box.

36
00:01:36.07 --> 00:01:39.01
In a moment later you'll
see that same dialogue box

37
00:01:39.01 --> 00:01:40.09
that we saw in a previous movie,

38
00:01:40.09 --> 00:01:44.03
but this time we're looking
at the assets panel.

39
00:01:44.03 --> 00:01:46.06
And so in my case, I
wanna go ahead and export

40
00:01:46.06 --> 00:01:49.09
all the assets, so I'll
turn on that check box

41
00:01:49.09 --> 00:01:52.04
and I'm gonna select a
different folder this time.

42
00:01:52.04 --> 00:01:54.08
I'll go ahead and switch
out to the 15 web folder

43
00:01:54.08 --> 00:01:58.09
and double click on Icons this
time around and select it.

44
00:01:58.09 --> 00:02:01.05
And now, assuming that
everything's ready to go,

45
00:02:01.05 --> 00:02:04.03
go ahead and click the
Export Asset button.

46
00:02:04.03 --> 00:02:06.06
And after a few seconds of progress bar

47
00:02:06.06 --> 00:02:11.01
you'll see everyone of
those ping and svg files.

48
00:02:11.01 --> 00:02:14.00
And now if you wanna get a
sense for how one of them looks,

49
00:02:14.00 --> 00:02:15.09
just go ahead and double click on it.

50
00:02:15.09 --> 00:02:18.03
Again, I set things up
so my ping files open

51
00:02:18.03 --> 00:02:22.09
here in Photoshop and
you can see that at 100%

52
00:02:22.09 --> 00:02:26.09
this is definitely a very large image.

53
00:02:26.09 --> 00:02:29.07
Now you may notice that I kind
of forgot one of the graphics

54
00:02:29.07 --> 00:02:31.06
and that's this guy right here.

55
00:02:31.06 --> 00:02:33.05
But rather than adding it to the panel,

56
00:02:33.05 --> 00:02:35.01
I'll just go ahead and close it

57
00:02:35.01 --> 00:02:38.01
and then after selecting
the command key character,

58
00:02:38.01 --> 00:02:41.07
I'll go up to the File menu
and choose the Export Selection

59
00:02:41.07 --> 00:02:45.03
command and that will go
ahead and add that guy

60
00:02:45.03 --> 00:02:48.06
to the list of assets here
inside the Export for Screens

61
00:02:48.06 --> 00:02:52.08
dialogue box and notice now
it's the only one selected

62
00:02:52.08 --> 00:02:54.06
although, of course, I
could select the others

63
00:02:54.06 --> 00:02:57.06
if I wanted to, but since
they've already been exported

64
00:02:57.06 --> 00:02:59.06
there's really no sense in doing that.

65
00:02:59.06 --> 00:03:01.05
And so I'll just go ahead
and turn off everybody

66
00:03:01.05 --> 00:03:04.03
but asset four, which of
course, I need to rename.

67
00:03:04.03 --> 00:03:07.06
So I'll call this guy "Command"
and then I'll once again

68
00:03:07.06 --> 00:03:09.07
click on the Export Asset button

69
00:03:09.07 --> 00:03:12.06
because otherwise everything's
set up and ready to go.

70
00:03:12.06 --> 00:03:15.06
And then a moment later,
I will see that asset

71
00:03:15.06 --> 00:03:19.01
added to my Icons folder, at which point,

72
00:03:19.01 --> 00:03:22.03
I'll once again click on
the highest resolution

73
00:03:22.03 --> 00:03:26.03
of those images and as you can
see, if I press "shift + f"

74
00:03:26.03 --> 00:03:28.08
in order to switch to
the full screen mode here

75
00:03:28.08 --> 00:03:32.05
inside Photoshop that this
should be enough resolution

76
00:03:32.05 --> 00:03:34.05
to satisfy anyone.

77
00:03:34.05 --> 00:03:36.03
Alright now, I'm gonna
switch back to Illustrator

78
00:03:36.03 --> 00:03:38.05
for a moment because I want you to see

79
00:03:38.05 --> 00:03:42.06
that if I go back to the window
menu and choose Asset Export

80
00:03:42.06 --> 00:03:45.00
that the command key has now been added

81
00:03:45.00 --> 00:03:48.07
to the list of assets
inside of this panel.

82
00:03:48.07 --> 00:03:52.07
And this is something that gets
saved along with your files.

83
00:03:52.07 --> 00:03:54.04
So if I go up to the File menu

84
00:03:54.04 --> 00:03:56.05
and choose the Save As command

85
00:03:56.05 --> 00:03:59.06
and then I'll just go ahead
and call this guy "With Assets"

86
00:03:59.06 --> 00:04:03.00
this time around and
click Save, of course.

87
00:04:03.00 --> 00:04:04.09
And given that this is a recent feature,

88
00:04:04.09 --> 00:04:07.08
I'm gonna save this as
an Illustrator CC file,

89
00:04:07.08 --> 00:04:11.05
but I'm also gonna turn
on Embed ICC Profiles

90
00:04:11.05 --> 00:04:16.01
and then I'll click OK in
order to save off this file.

91
00:04:16.01 --> 00:04:18.02
Just for the sake of comparison,
I'll go ahead and open

92
00:04:18.02 --> 00:04:21.06
the original file, Common Symbols.ai,

93
00:04:21.06 --> 00:04:26.00
and a moment later you'll see
that it contains no assets.

94
00:04:26.00 --> 00:04:27.09
So assets, like swatches,

95
00:04:27.09 --> 00:04:31.04
are saved along with the active file.

96
00:04:31.04 --> 00:04:34.04
And that's how you export
multiple graphics at a time

97
00:04:34.04 --> 00:04:37.05
using the quick and
easy Asset Export panel

98
00:04:37.05 --> 00:04:41.07
here inside the most recent
version of Illustrator CC.