- [Voiceover] Alright, now we're gonna begin
our tour of the various file formats.
Starting with the pixel based formats,
which include PNG, GIF and JPG,
as well as the vector based SPG.
Now we're gonna start things off in this movie
with the best file format there is for images
that are bound for mobile devices or presentations,
and that's PNG, which stands for portable network graphic.
And the reason it's so great is because
it applies lossless compression, meaning that
it doesn't re-write a single pixel inside your image.
It supports up to 16.8 million colors,
along with 256 levels of translucency,
and it's universally compatible.
Now the only reason I don't recommend it for web graphics,
is because of results in the largest files.
Alright so I'll go up to the file menu, choose Export,
and choose Save for Web, or you have that shortcut
of ctrl+shift+alt+s or cmd+shift+opt+s on the mac.
Alright, so notice currently we're viewing the image
as a GIF file, and so that we're seeing that our shadows
blend with the white background
until things abruptly turn transparent.
That's obviously not what we want, so let's
turn off the transparency checkbox for now
so we get some nice smooth shadows.
Next I want you to switch from GIF to PNG24,
and by the way, the 24 is an exponent.
So in other words, for every pixel,
you take two to the 24th power,
which equals 16.8 million colors.
And so I'll go ahead and choose PNG24,
and we end up with this beautiful image here.
Now you want to leave Interlace turned off,
because otherwise if you were to view this
inside of a web browser, it would write line for line
as it uploads to another person's machine,
which is generally not something you want.
But I do think I want to see this image
side by side with the original.
So I'll switch to two-up like so.
And then notice, if I were to click in the original preview,
over here on the left-hand side,
I don't really have any options any more,
although I could if I want to,
compare the PNG image on right to some other file format.
But I'm gonna leave it set to original.
I also want you to notice down here,
the relative sizes of these two images.
So if we were to save the images
with no compression whatsoever,
it would weigh in at 3.82 megs,
so pretty big for a mobile graphic.
Whereas the compresses version of the image
is several times smaller, at 1.1 k.
Now the thing is, you can see over here,
on the left-hand side, that our shadow
blends in beautifully with the transparent checkerboard.
And I was telling you that PNG supports
up to 256 levels of translucency, and so
it might be worth turning that transparency checkbox
back on, at which point we do get a nice blended shadow.
So the shadow that we were seeing
subject to the GIF format, is not representative of PNG.
But also notice that our file size
jumped up ever so slightly, to 180 k.
But to me the results seem well worth the price.
Alright now, even though this text
has been converted to path outlines,
you might want to go ahead
and change the anti-aliasing method
from Art Optimized to Type Optimized.
And that might end up giving you slightly better results.
At which point I'll click the Save button,
in order to save out my image.
And I'm gonna save over this guy right here,
Translucent-shadows.png, and then
I'll go ahead and click the Save button,
and I'll say that sure enough,
I want to replace that graphic.
Alright, now let's take a look
at that image inside Photoshop.
And you can see that we end up with a single layer,
which has no real name, by the way.
Photoshop just assigns it the name Layer zero.
And our shadows are blending beautifully
with their checkerboard background.
Although your checkerboard might
look a little different than mine.
Alright, now let's see how the shadows
fare against a real background.
And just for the sake of demonstration,
I'll drop down to this black and white icon
at the bottom of the layers panel.
I'll click on it, and I'll choose Gradient.
And then I'll click the down pointing arrowhead
next to the gradient bar right here,
and I'll select this guy, whose name is Chrome.
And then I'll click off the panel to hide it,
and I'll go ahead and set the angle
to negative 90 degrees let's say,
and I'll click OK.
Now of course, my fill is in front of the art work.
So I'll just go ahead and drag it and drop it
down here inside the layers panel,
and we get this absolutely seamless interaction
between the shadows and their new background.
And so, just so we can take it all in here,
I'll press shift+f here inside Photoshop
to switch to the full-screen mode, and I'll zoom on in.
And that's how you export a PNG image,
which is gonna give you lossless compression,
up to 16.8 million colors, 256 levels of translucency,
for absolutely flawless shadows,
and universal compatibility with mobile devices,
presentation applications, and
web browsers across the world.