1
00:00:00.00 --> 00:00:01.06
- [Voiceover] Alright,
now we're gonna begin

2
00:00:01.06 --> 00:00:03.07
our tour of the various file formats.

3
00:00:03.07 --> 00:00:05.05
Starting with the pixel based formats,

4
00:00:05.05 --> 00:00:08.05
which include PNG, GIF and JPG,

5
00:00:08.05 --> 00:00:11.08
as well as the vector based SPG.

6
00:00:11.08 --> 00:00:13.08
Now we're gonna start
things off in this movie

7
00:00:13.08 --> 00:00:16.09
with the best file format
there is for images

8
00:00:16.09 --> 00:00:19.09
that are bound for mobile
devices or presentations,

9
00:00:19.09 --> 00:00:23.08
and that's PNG, which stands
for portable network graphic.

10
00:00:23.08 --> 00:00:26.02
And the reason it's so great is because

11
00:00:26.02 --> 00:00:28.08
it applies lossless
compression, meaning that

12
00:00:28.08 --> 00:00:32.02
it doesn't re-write a single
pixel inside your image.

13
00:00:32.02 --> 00:00:35.06
It supports up to 16.8 million colors,

14
00:00:35.06 --> 00:00:39.04
along with 256 levels of translucency,

15
00:00:39.04 --> 00:00:42.01
and it's universally compatible.

16
00:00:42.01 --> 00:00:45.00
Now the only reason I don't
recommend it for web graphics,

17
00:00:45.00 --> 00:00:48.03
is because of results
in the largest files.

18
00:00:48.03 --> 00:00:51.01
Alright so I'll go up to the
file menu, choose Export,

19
00:00:51.01 --> 00:00:53.07
and choose Save for Web,
or you have that shortcut

20
00:00:53.07 --> 00:00:58.04
of ctrl+shift+alt+s or
cmd+shift+opt+s on the mac.

21
00:00:58.04 --> 00:01:00.06
Alright, so notice currently
we're viewing the image

22
00:01:00.06 --> 00:01:04.00
as a GIF file, and so that
we're seeing that our shadows

23
00:01:04.00 --> 00:01:05.06
blend with the white background

24
00:01:05.06 --> 00:01:08.01
until things abruptly turn transparent.

25
00:01:08.01 --> 00:01:10.05
That's obviously not
what we want, so let's

26
00:01:10.05 --> 00:01:12.06
turn off the transparency checkbox for now

27
00:01:12.06 --> 00:01:15.06
so we get some nice smooth shadows.

28
00:01:15.06 --> 00:01:19.00
Next I want you to
switch from GIF to PNG24,

29
00:01:19.00 --> 00:01:22.03
and by the way, the 24 is an exponent.

30
00:01:22.03 --> 00:01:24.06
So in other words, for every pixel,

31
00:01:24.06 --> 00:01:27.03
you take two to the 24th power,

32
00:01:27.03 --> 00:01:30.09
which equals 16.8 million colors.

33
00:01:30.09 --> 00:01:33.05
And so I'll go ahead and choose PNG24,

34
00:01:33.05 --> 00:01:36.06
and we end up with this
beautiful image here.

35
00:01:36.06 --> 00:01:39.00
Now you want to leave
Interlace turned off,

36
00:01:39.00 --> 00:01:41.04
because otherwise if you were to view this

37
00:01:41.04 --> 00:01:44.06
inside of a web browser, it
would write line for line

38
00:01:44.06 --> 00:01:47.03
as it uploads to another person's machine,

39
00:01:47.03 --> 00:01:50.00
which is generally not something you want.

40
00:01:50.00 --> 00:01:51.05
But I do think I want to see this image

41
00:01:51.05 --> 00:01:53.06
side by side with the original.

42
00:01:53.06 --> 00:01:55.09
So I'll switch to two-up like so.

43
00:01:55.09 --> 00:01:59.01
And then notice, if I were to
click in the original preview,

44
00:01:59.01 --> 00:02:00.07
over here on the left-hand side,

45
00:02:00.07 --> 00:02:03.05
I don't really have any options any more,

46
00:02:03.05 --> 00:02:05.02
although I could if I want to,

47
00:02:05.02 --> 00:02:09.08
compare the PNG image on right
to some other file format.

48
00:02:09.08 --> 00:02:12.01
But I'm gonna leave it set to original.

49
00:02:12.01 --> 00:02:14.00
I also want you to notice down here,

50
00:02:14.00 --> 00:02:16.07
the relative sizes of these two images.

51
00:02:16.07 --> 00:02:18.07
So if we were to save the images

52
00:02:18.07 --> 00:02:20.04
with no compression whatsoever,

53
00:02:20.04 --> 00:02:23.06
it would weigh in at 3.82 megs,

54
00:02:23.06 --> 00:02:26.02
so pretty big for a mobile graphic.

55
00:02:26.02 --> 00:02:28.01
Whereas the compresses
version of the image

56
00:02:28.01 --> 00:02:32.02
is several times smaller, at 1.1 k.

57
00:02:32.02 --> 00:02:34.04
Now the thing is, you can see over here,

58
00:02:34.04 --> 00:02:36.07
on the left-hand side, that our shadow

59
00:02:36.07 --> 00:02:40.05
blends in beautifully with
the transparent checkerboard.

60
00:02:40.05 --> 00:02:42.09
And I was telling you that PNG supports

61
00:02:42.09 --> 00:02:46.09
up to 256 levels of translucency, and so

62
00:02:46.09 --> 00:02:49.04
it might be worth turning
that transparency checkbox

63
00:02:49.04 --> 00:02:54.07
back on, at which point we
do get a nice blended shadow.

64
00:02:54.07 --> 00:02:56.03
So the shadow that we were seeing

65
00:02:56.03 --> 00:03:00.09
subject to the GIF format,
is not representative of PNG.

66
00:03:00.09 --> 00:03:02.06
But also notice that our file size

67
00:03:02.06 --> 00:03:05.08
jumped up ever so slightly, to 180 k.

68
00:03:05.08 --> 00:03:08.08
But to me the results
seem well worth the price.

69
00:03:08.08 --> 00:03:10.08
Alright now, even though this text

70
00:03:10.08 --> 00:03:12.06
has been converted to path outlines,

71
00:03:12.06 --> 00:03:13.09
you might want to go ahead

72
00:03:13.09 --> 00:03:16.06
and change the anti-aliasing method

73
00:03:16.06 --> 00:03:19.03
from Art Optimized to Type Optimized.

74
00:03:19.03 --> 00:03:22.06
And that might end up giving
you slightly better results.

75
00:03:22.06 --> 00:03:24.08
At which point I'll click the Save button,

76
00:03:24.08 --> 00:03:26.07
in order to save out my image.

77
00:03:26.07 --> 00:03:29.01
And I'm gonna save over
this guy right here,

78
00:03:29.01 --> 00:03:31.09
Translucent-shadows.png, and then

79
00:03:31.09 --> 00:03:34.00
I'll go ahead and click the Save button,

80
00:03:34.00 --> 00:03:35.05
and I'll say that sure enough,

81
00:03:35.05 --> 00:03:37.03
I want to replace that graphic.

82
00:03:37.03 --> 00:03:38.06
Alright, now let's take a look

83
00:03:38.06 --> 00:03:41.00
at that image inside Photoshop.

84
00:03:41.00 --> 00:03:44.01
And you can see that we
end up with a single layer,

85
00:03:44.01 --> 00:03:46.04
which has no real name, by the way.

86
00:03:46.04 --> 00:03:49.02
Photoshop just assigns
it the name Layer zero.

87
00:03:49.02 --> 00:03:51.02
And our shadows are blending beautifully

88
00:03:51.02 --> 00:03:53.01
with their checkerboard background.

89
00:03:53.01 --> 00:03:54.07
Although your checkerboard might

90
00:03:54.07 --> 00:03:56.04
look a little different than mine.

91
00:03:56.04 --> 00:03:57.09
Alright, now let's see how the shadows

92
00:03:57.09 --> 00:03:59.08
fare against a real background.

93
00:03:59.08 --> 00:04:01.06
And just for the sake of demonstration,

94
00:04:01.06 --> 00:04:03.09
I'll drop down to this
black and white icon

95
00:04:03.09 --> 00:04:05.06
at the bottom of the layers panel.

96
00:04:05.06 --> 00:04:08.04
I'll click on it, and
I'll choose Gradient.

97
00:04:08.04 --> 00:04:11.00
And then I'll click the
down pointing arrowhead

98
00:04:11.00 --> 00:04:13.04
next to the gradient bar right here,

99
00:04:13.04 --> 00:04:16.01
and I'll select this guy,
whose name is Chrome.

100
00:04:16.01 --> 00:04:17.09
And then I'll click off
the panel to hide it,

101
00:04:17.09 --> 00:04:19.05
and I'll go ahead and set the angle

102
00:04:19.05 --> 00:04:22.00
to negative 90 degrees let's say,

103
00:04:22.00 --> 00:04:23.08
and I'll click OK.

104
00:04:23.08 --> 00:04:26.02
Now of course, my fill is
in front of the art work.

105
00:04:26.02 --> 00:04:28.02
So I'll just go ahead
and drag it and drop it

106
00:04:28.02 --> 00:04:30.05
down here inside the layers panel,

107
00:04:30.05 --> 00:04:32.09
and we get this absolutely
seamless interaction

108
00:04:32.09 --> 00:04:35.08
between the shadows and
their new background.

109
00:04:35.08 --> 00:04:38.02
And so, just so we can
take it all in here,

110
00:04:38.02 --> 00:04:40.06
I'll press shift+f here inside Photoshop

111
00:04:40.06 --> 00:04:44.02
to switch to the full-screen
mode, and I'll zoom on in.

112
00:04:44.02 --> 00:04:46.06
And that's how you export a PNG image,

113
00:04:46.06 --> 00:04:48.08
which is gonna give you
lossless compression,

114
00:04:48.08 --> 00:04:54.04
up to 16.8 million colors,
256 levels of translucency,

115
00:04:54.04 --> 00:04:57.01
for absolutely flawless shadows,

116
00:04:57.01 --> 00:05:00.01
and universal compatibility
with mobile devices,

117
00:05:00.01 --> 00:05:02.04
presentation applications, and

118
00:05:02.04 --> 00:05:04.09
web browsers across the world.