Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this exercise I am going to show you how to save GIF graphics, in the next exercise I will show you PNG, but in the name of full disclosure I got to tell you, I never save GIF graphics anymore. Whenever I am thinking of working with GIF, I work with PNG instead. But the good news is everything that we learn in this exercise about GIF applies to 8-bit PNG graphics as well. So here I am looking at my Martini Hour graphic inside the Save for Web & Devices dialog box and I have got all these compression artifacts as you can see, thanks to JPEG, even at the High setting.
However, it's worth noting, I am going to get a 46.71K graphics, so about 47K. I am going to switchover to GIF, because the great thing about GIF is it's going to give me much smoother results as you could see. I don't have that weird hump over the H and so on, so things are looking very good. The File Size jumps up to 64K, and we can try to work on that. Now, notice that Photoshop has automatically selected 64 colors for me, and I can see those 64 colors represented here inside the Color table, so I know exactly which 64 colors I am working with.
Photoshop selects them automatically based on this pop-up menu right there, which I will discuss in a second. But notice that that does result in some banding. So we don't have all that noise that we had before and all those JPEG artifacts, but we do have banding from one color value to the other, because where before we had access to as many as 16.8 million colors, we weren't taking advantage of nearly that many, just probably a few 100,000, but now we only have 64, which is definitely a smaller number.
So we could smooth out those transitions a little bit by increasing this Dither value if you want to. That is going to render a noisier image, because Photoshop is purposely using the noise to try to simulate more colors inside the graphic, and it's also going to increase my File Size slightly, by a little more than a K. So I could turn it off as well, if I don't want any dithering at all. But I am going to leave it set to Diffusion and I am going to keep that Dither value at 50%. Now, the other thing I can do is either reduce or increase the number of colors, and notice they go from 2 to 4 to 8 to 16.
What's with these increments? Well, a 1 bit graphic gives you to colors, because if you have 1 bit, it can either be 0 or 1, and 0 is black and 1 is white and those are your two colors. If you have 2 bits, then you have 2x2, so we have got four colors. If you have got 3 bits and you have two the third power, which is eight. Four bits, two to the fourth power is 16 and on up the list till you have two to the eight power or 256 colors inside of an 8 bit graphic. So if we take this image down to 32 colors, we are going to drop the File Size to 50K, but we are also going to lose a lot of color.
Notice this Lens Flare goes from not quite white, to gray, gray, gray, darker gray, purple, dark gray, dark gray, purple again, dark gray, that kind of thing. So we are having some uneven color transitioning at this point. Again, I could increase the Dithering. I can even nudge this value up from the keyboard by the way, by pressing the Up Arrow key and I will just add one color at a time, as you are seeing, added to the color table. And you will also add to the File Size, as you can see down here in the lower left corner of the dialog box, and you will see colors appear inside of the image as well.
But my experience is that 64 works out pretty nicely. If we go to 128, we get a smoother graphic, a more colorful graphic as well, but a much larger one at 83K. So let's stick with 64 now. Another thing you can do is give Photoshop a different way of calculating what 64 colors to use. So if you go with Adaptive, it becomes a strict popularity contest and the most popular colors get dumped in the color table and then Photoshop does its best to reconcile the differences. If you go with Perceptual, then Photoshop is going to try to give you the best colors to represent your gradients and your transitions.
So if we go with Perceptual, we may end up getting a better-looking image, certainly we have less banding, and amazingly, we have a smaller image as well. So we lopped off about 3K from our file size. Selective tries to strike a balance between Perceptual and Adaptive, and then Restrictive will only use Web-Safe colors, which is going to give us just horrible dreadful results like this here. And there's no reason to do it. The Web-Safe palette, which was designed for folks with 256 color monitors, has long since become a thing of the past.
We don't need it any longer. So what I would suggest for this image is Perceptual, ends up looking very nice, we get a smaller file size out of it. Web Snap, you want to leave set to 0%, because otherwise it's going to snap certain colors to Web-Safe colors. Right now, we only have one. That diamond indicates a Web-Safe color, which I believe is white in this case. Lossy is going to apply a lossy compression on top of the lossless compression that is part of GIF. We don't want that, because we would introduce artifacts, which is what we are trying to avoid. Interlacing draws the graphic in lines.
You don't want that, because that's ugly. Transparency, you only need if there is transparency inside your image, if you have an object on one layer set against a transparent background. But what you have to bear in mind, even though you can save Transparency along with GIF and PNG graphics, is first why would you want to? Most of the time you are not going to need Transparency when you are trying to build Web graphics. And secondly, it's going to have a jagged edge, because there is only one level of transparency with GIF or 8-bit PNG. We do want to convert to sRGB. That's fine.
The Metadata is set to Copyright and Contact Info, in my case, that's great. So I am ready to click the Save button and save out that GIF graphic. I am going to go ahead and name this image by getting rid of the 4x at the end there and instead of the word Final, I am going to enter Einstein, because Albert Einstein was our special guest that week and then I will go ahead and save the image. And we have now saved off a GIF graphic folks. In the next exercise, I am going to show you how to do the very same thing, but with a better file format, PNG.
Get unlimited access to all courses for just $25/month.Become a member
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.