Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
All right, I'm still working inside the Final MH banner 4x.psd file. This time we're going to downsample the image and save it out as a PNG graphic. I'll go to the File menu. And choose the Save for Web & Devices command, Ctrl+Shift+Alt+S, or Command+Shift+Option+S on the Mac. You get the whopping big dialog-box of course. The Image Size is its original Image Size. So you're going to have to change those values again by entering 590 and pressing the Tab key to get it down to its final Web dimensions. I'm going to go ahead and zoom in on the image so we can keep an eye on it. You know what? Let's go to 2-Up display, why don't we? That'd be crazy.
I'll go ahead and zoom out and click to, so that we can see more of the image at a time. So notice that the bottom preview retains the last settings we applied. So GIF Perceptual, Color 64, Diffusion, Dither 50, and so on and so on. Let's go ahead. Select the top graphic. I'm going to click the Preset and change it to PNG-24, just so that you can see that PNG-24 is an option, that is we're going to save a 24-bit PNG image. That would give us access to the full 16.8 million colors. We have no color lookup table this time, because all of the colors are available to us.
But the Size of the image is going to grow up to 206.1K. Now that's pretty good. It's doing a good job of applying lossless compression. As a result we have some very smooth transitions inside of this image and no banding inside of the lens flare. But that's a whoppingly big image. And I'm certainly not going to post anything like that to my Web site. So I'll switch to PNG-8. Let's go ahead and try those exact same settings, because notice, we had the very same settings available to us as we did last time.
I'll switch from Selective to Perceptual, and you'll see that Perceptual with PNG is the exact same thing as Perceptual with GIF. That's a very same color lookup table. So that isn't a function of PNG-8 versus GIF. That's just a function of Photoshop doing its thing to try to find the best color table it can. I'll raise the Dither value to 50% just so that we're comparing apples to apples. We've got Colors, 64. The Dither is set to Diffusion. Transparency should be off. Interlaced is off. Web Snap is zero.
We're converting to sRGB and we're saving the Copyright and Contact Info, and notice the PNG graphic is much smaller. Instead of being 61K, we got it down to less than 55K. So at this point you might say, well, is it always that way? Does PNG always give you smaller files? And the answer is yes, it does. In my experience, I haven't ever seen it deliver a larger file as long as all the settings are the same than GIF does. So the second question becomes, well, then no duh, of course I would use PNG versus GIF which is my point.
But the only reason you would ever use GIF is because you're concerned about a very old browser. I'm talking alas like about 10 years of browsers have supported PNG, but going back to very old versions of Internet Explorer and Netscape and that kind of thing, they didn't use to support PNG, they only supported GIF. So if you're concerned about some very, very, very old browsers out there then you'd use GIF instead of PNG. But if you're pretty certain that every body is more or less on the ball and has been paying attention to the last decade, let's say, then PNG is your better choice.
All right, and that's it. I'll go ahead and save off that image like so. And let's go ahead and name it that same thing, I'll get rid of that 4x, because it no longer is. I'll call this Einstein Martini Hour banner (Einstein-MH-banner.png). Click Save. And we have saved off our final Web graphic. Not only that folks, we have finished off the final movie and the fundamentals portion of this series. But please realize that we have only touched the tip of the proverbial iceberg. There is so much left to talk about inside of Photoshop. You are now prepared to take on some of its most exciting features believe you me.
Please join me then for Photoshop CS5 One-on-One advanced here in the lynda.com Online Training Library.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 64601 Viewers
119 Video lessons · 71886 Viewers
125 Video lessons · 32500 Viewers
84 Video lessons · 18977 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.