1
00:00:00.03 --> 00:00:02.03
- [Voiceover] In this movie,
we'll take a look at the two

2
00:00:02.03 --> 00:00:05.05
8-bit file formats which
are .gif and an alternate

3
00:00:05.05 --> 00:00:09.03
version of .png and the idea
behind these 8-bit formats

4
00:00:09.03 --> 00:00:13.03
is that they support a
maximum of 256 colors,

5
00:00:13.03 --> 00:00:17.00
which provides us with a
big savings in file size.

6
00:00:17.00 --> 00:00:19.04
And so, I'm going to advance
to the second artboard

7
00:00:19.04 --> 00:00:21.03
by pressing shift + page down,

8
00:00:21.03 --> 00:00:23.05
and then, I'll go up to
the file menu and choose

9
00:00:23.05 --> 00:00:26.04
Save for Web or press
Control + Shift + Alt + S

10
00:00:26.04 --> 00:00:28.05
or Command + Shift + Option + S on a Mac.

11
00:00:28.05 --> 00:00:31.01
And you can see that where
this document is concerned

12
00:00:31.01 --> 00:00:33.07
the transparency checkbox is turned off,

13
00:00:33.07 --> 00:00:35.06
which is exactly what I want.

14
00:00:35.06 --> 00:00:37.08
I want to go ahead and
keep this white background.

15
00:00:37.08 --> 00:00:40.07
And now, I'll go ahead and
click on a format option

16
00:00:40.07 --> 00:00:42.09
and choose .gif from the list.

17
00:00:42.09 --> 00:00:45.08
And you may wonder why I'm
calling it jif in stead of gif,

18
00:00:45.08 --> 00:00:48.09
it's because that's what
CompuServe, which is the company

19
00:00:48.09 --> 00:00:51.07
that created .gif, that's
what they call it, and so,

20
00:00:51.07 --> 00:00:54.01
I figured I oughta call it
what the originators called

21
00:00:54.01 --> 00:00:56.04
the format, even if it
sounds a little strange

22
00:00:56.04 --> 00:00:58.00
to some people's ears.

23
00:00:58.00 --> 00:01:00.03
Now, notice that we have a
bunch of controls up here

24
00:01:00.03 --> 00:01:02.02
in the upper right corner of the window,

25
00:01:02.02 --> 00:01:04.04
which I'll come to in a second, but first,

26
00:01:04.04 --> 00:01:06.09
I want you to see the file size listings.

27
00:01:06.09 --> 00:01:10.06
The original is 2.58MB uncompressed,

28
00:01:10.06 --> 00:01:15.01
whereas the .gif file is just 97.22K,

29
00:01:15.01 --> 00:01:16.08
so, it's a heck of a lot smaller.

30
00:01:16.08 --> 00:01:20.02
But the thing is, .gif doesn't
offer anything over PNG-8,

31
00:01:20.02 --> 00:01:25.02
and yet, if I choose PNG-8, we
see the same options up here,

32
00:01:25.02 --> 00:01:29.08
but we also see the
file size drop to 75.35K

33
00:01:29.08 --> 00:01:32.05
and that's because .png is
a more modern file format

34
00:01:32.05 --> 00:01:35.03
with better compression and
so, if you're gonna create

35
00:01:35.03 --> 00:01:39.00
8-bit images, I suggest you
go with .png instead of .gif.

36
00:01:39.00 --> 00:01:41.06
All right, now, you can see
we have this big palette

37
00:01:41.06 --> 00:01:43.08
of colors down here that Save for Web

38
00:01:43.08 --> 00:01:45.06
has generated automatically.

39
00:01:45.06 --> 00:01:47.02
And while things look pretty good

40
00:01:47.02 --> 00:01:48.09
over here on the left side of the image,

41
00:01:48.09 --> 00:01:52.02
that has a huge impact on
this hue wheel right here.

42
00:01:52.02 --> 00:01:55.06
And I'm gonna make it bigger
just by pressing Control + Plus

43
00:01:55.06 --> 00:01:57.08
or Command + Plus on the Mac to zoom in.

44
00:01:57.08 --> 00:01:59.07
And you can see, right here, that we have

45
00:01:59.07 --> 00:02:02.04
a bunch of colorful pixels
that are trying to split

46
00:02:02.04 --> 00:02:04.07
the difference between the various colors.

47
00:02:04.07 --> 00:02:07.07
And this is what's known
as a dither pattern.

48
00:02:07.07 --> 00:02:10.06
Right now, the specific kind of pattern

49
00:02:10.06 --> 00:02:13.01
is a diffusion pattern,
but you can change that

50
00:02:13.01 --> 00:02:15.09
to no dither if you want to,
in which case you're just

51
00:02:15.09 --> 00:02:17.09
gonna get a bunch of blobs of color,

52
00:02:17.09 --> 00:02:20.04
or you can go with a pattern
dither which is going

53
00:02:20.04 --> 00:02:22.08
to arrange the pixels in regular patterns,

54
00:02:22.08 --> 00:02:26.02
or if you want the most random
effect, you can choose noise,

55
00:02:26.02 --> 00:02:28.01
like so.

56
00:02:28.01 --> 00:02:30.06
I'm gonna go ahead and
switch back to diffusion

57
00:02:30.06 --> 00:02:32.07
because it offers an additional option

58
00:02:32.07 --> 00:02:35.01
in the form of this dither value.

59
00:02:35.01 --> 00:02:37.07
And so, if you want to save
a little bit on file size,

60
00:02:37.07 --> 00:02:41.04
notice it's 75.35K right
now, you can take that dither

61
00:02:41.04 --> 00:02:45.03
value down to, say, 50%, in
which case you're gonna get

62
00:02:45.03 --> 00:02:48.03
larger blocks of color
with less diffusion dither

63
00:02:48.03 --> 00:02:53.00
in between, and the file
size drops to 47.73K,

64
00:02:53.00 --> 00:02:55.01
so it drops by quite a bit.

65
00:02:55.01 --> 00:02:58.01
But that's pretty ugly, so I'm
gonna take the dither value

66
00:02:58.01 --> 00:03:01.09
up to 100% where this
specific image is concerned.

67
00:03:01.09 --> 00:03:05.00
You also have control over
how many colors you want

68
00:03:05.00 --> 00:03:07.02
and notice that they go in bit order,

69
00:03:07.02 --> 00:03:09.04
meaning that we start with a 1-bit image,

70
00:03:09.04 --> 00:03:12.02
which is two colors, black and
white, essentially, like so,

71
00:03:12.02 --> 00:03:15.03
and then we have two to the
second power, which is four,

72
00:03:15.03 --> 00:03:17.02
two to the third power, which is eight,

73
00:03:17.02 --> 00:03:20.05
two the the fourth power,
which is 16, and so on,

74
00:03:20.05 --> 00:03:23.03
all the way up to 256, which
is pretty much what I think

75
00:03:23.03 --> 00:03:25.01
we want for this image.

76
00:03:25.01 --> 00:03:27.03
All right, if you want to, you can snap

77
00:03:27.03 --> 00:03:29.05
to the web safe colors,
I don't recommend you do,

78
00:03:29.05 --> 00:03:31.01
it doesn't really serve any purpose.

79
00:03:31.01 --> 00:03:33.04
And then, finally, there's
this option that determines

80
00:03:33.04 --> 00:03:35.05
how Save for Web auto-selects colors.

81
00:03:35.05 --> 00:03:37.06
And so, you can go with restrictive,

82
00:03:37.06 --> 00:03:39.06
which is the web safe colors.

83
00:03:39.06 --> 00:03:41.05
Again, there's no reason to do that.

84
00:03:41.05 --> 00:03:43.04
Your image is gonna look cruddy if you do.

85
00:03:43.04 --> 00:03:46.03
You've got adaptive, which is
a strict popularity contest,

86
00:03:46.03 --> 00:03:49.00
by the way, it's just gonna
find the most popular colors

87
00:03:49.00 --> 00:03:51.01
inside the image and go with them.

88
00:03:51.01 --> 00:03:54.00
Then we have perceptual
up here at the top,

89
00:03:54.00 --> 00:03:56.07
which tries to do the
best job of preserving

90
00:03:56.07 --> 00:03:59.06
the gradient transitions, and
then, if you want to split

91
00:03:59.06 --> 00:04:02.03
the difference, which is
generally the best way to go,

92
00:04:02.03 --> 00:04:04.00
you want to go with selective.

93
00:04:04.00 --> 00:04:06.03
In our case, however, since
we've got this rainbow gradient,

94
00:04:06.03 --> 00:04:08.04
I'm gonna go with perceptual.

95
00:04:08.04 --> 00:04:10.09
And then, I'll go ahead
and click the save button

96
00:04:10.09 --> 00:04:13.08
and I'll go ahead and save
over this image right there,

97
00:04:13.08 --> 00:04:16.03
8-bit-hue-wheel.png and I'll
click on the save button

98
00:04:16.03 --> 00:04:20.00
and then click yes in
order to write over it.

99
00:04:20.00 --> 00:04:22.07
All right, now let's take
a look at the image inside

100
00:04:22.07 --> 00:04:25.07
of Photoshop and you can
see that it comes out

101
00:04:25.07 --> 00:04:27.00
pretty darn good.

102
00:04:27.00 --> 00:04:29.00
The text looks great, for example.

103
00:04:29.00 --> 00:04:30.06
The gradient's a little bit noisy,

104
00:04:30.06 --> 00:04:34.07
but if we zoom out to 100%,
it doesn't look half bad,

105
00:04:34.07 --> 00:04:38.01
even though we're limited
to just 256 colors

106
00:04:38.01 --> 00:04:39.02
and nothing more.

107
00:04:39.02 --> 00:04:41.08
Now, this is a great
demonstration, at least

108
00:04:41.08 --> 00:04:44.08
of how the dithering works,
but it's not an ideal candidate

109
00:04:44.08 --> 00:04:46.09
for saving as an 8-bit image.

110
00:04:46.09 --> 00:04:49.09
So, let's go ahead and return
to Illustrator and switch

111
00:04:49.09 --> 00:04:53.07
to this low color, highly
graphic file, right here.

112
00:04:53.07 --> 00:04:56.05
This is perfect for 8-bit PNG.

113
00:04:56.05 --> 00:05:00.01
And so, I'll go up to the file
menu and choose Save for Web.

114
00:05:00.01 --> 00:05:03.06
And now, notice, if I switch
back to .gif, the file size

115
00:05:03.06 --> 00:05:08.04
goes from 2.58MB all
the way down to 30.38K,

116
00:05:08.04 --> 00:05:11.06
which is nothing, by the way,
it's a very, very small image,

117
00:05:11.06 --> 00:05:15.04
but we can get even smaller
by switching to PNG-8,

118
00:05:15.04 --> 00:05:18.04
which gives us a file that's about 22.5K,

119
00:05:18.04 --> 00:05:20.01
so, very dinky indeed.

120
00:05:20.01 --> 00:05:22.06
Also, notice that even
though we've got the colors

121
00:05:22.06 --> 00:05:26.00
cranked up to 256, the
color table doesn't contain

122
00:05:26.00 --> 00:05:27.08
nearly that many colors.

123
00:05:27.08 --> 00:05:30.09
In fact, I've figured out
that I can take this colors

124
00:05:30.09 --> 00:05:34.09
value down to 82 and the
colors here inside this palette

125
00:05:34.09 --> 00:05:36.09
aren't gonna change one wit.

126
00:05:36.09 --> 00:05:40.03
And so, that's all Illustrator
needs in order to represent

127
00:05:40.03 --> 00:05:42.00
this graphic.

128
00:05:42.00 --> 00:05:44.02
However, we're probably
better off, where this graphic

129
00:05:44.02 --> 00:05:47.02
is concerned, switching
from perceptual to adaptive

130
00:05:47.02 --> 00:05:50.01
so that we just get the
most popular colors.

131
00:05:50.01 --> 00:05:52.04
All right, so, it shouldn't
make any difference

132
00:05:52.04 --> 00:05:54.06
if I crank this back up to 256.

133
00:05:54.06 --> 00:05:57.02
And, sure enough, our file
size is exactly the same

134
00:05:57.02 --> 00:05:59.05
and I can see the number of
colors down here in the lower

135
00:05:59.05 --> 00:06:03.02
right corner of the preview,
we have just 81 colors in all,

136
00:06:03.02 --> 00:06:05.04
so I stand corrected.

137
00:06:05.04 --> 00:06:07.08
All right, now, I'll go ahead
an click the save button

138
00:06:07.08 --> 00:06:11.02
and I'll call this guy
Just 81 colors, let's say,

139
00:06:11.02 --> 00:06:14.00
and then I'll click on
the save button in order

140
00:06:14.00 --> 00:06:16.01
to save off that .png file.

141
00:06:16.01 --> 00:06:18.06
All right, and finally, I'll
go ahead and switch over

142
00:06:18.06 --> 00:06:20.03
to Photoshop so we can check it out.

143
00:06:20.03 --> 00:06:22.04
And despite the fact
it's a low color graphic,

144
00:06:22.04 --> 00:06:24.05
it looks absolutely great.

145
00:06:24.05 --> 00:06:27.06
And that's how you save off
an 8-bit screen graphic,

146
00:06:27.06 --> 00:06:31.08
preferably s a .png file using
the Save for Web command.