Lessons

Lesson Info

Save Files as GIF or PNG

So what happens if I have a logo? Now I did this in Illustrator, and I actually brought this right into Photoshop, but I would like to go and I would like to save this. So, bring it in from Illustrator, we'll talk about the whole vector qualities, but at this case, I need to put this on my website and I need to save this. So, I'm gonna go back into the file menu and I'm going to choose Export, and then Save for Web, and when I call this up, I see this and I go in, and I click on this image and rule of thumb, JPEG's only for photographs. What I have, a logo here, this is what a JPEG does to a logo. Now, we have a quality of 30 but I'm gonna set the quality down at zero, just to accentuate the fact of what happens when you take any graphic. Fill, stroke, type, fine detail, whatever it may be, and it pretty much ruins it. So, you get all this horrible popcorn all over everything, and you've seen this. This type is one solid color, okay? And now I'm getting all of this compression dandruff...

all over the place, we always have to throw in some weird little jasonisms here, that's just they way it goes, and this is a great way to ruin a perfectly good logo, but a lot of people are like well my blah, blah, blah, told me I need a JPEG, so I have to send 'em as a JPEG and it's like, so the first thing I ask is why? What are you using it for and no to a JPEG, regardless of what it is that you want, 'cause I have a logo. So with the Jpeg, that's that, right, it just ruins the whole file. I mean, look at this banding right there too, and the more I compress it and it's like yeah, but if I do a really high quality one, you know, I can get that, and it's like you sure can, but it's also 40K, and this essentially has two colors in it. I have this golden yellow and a black, and that's it. So, why would I say this is a JPEG with all these colors in it and take up this amount of space, seems like a small amount of space to do that, I'm not going to, so, this is where a GIF or a PNG comes in, and a GIF or a PNG is going to break it down into what's called index color, a maximum of 256 colors, that's all I can go ahead and do, I have no choice, I can go less colors, I can't go more than 256. So that 40K as a JPEG is now a little over 9K as a GIF or a PNG, and it looks exactly the same. So now, it's a quarter of the size, which is huge, well, no, it's not huge, it's a huge difference, but now I get something here that looks exactly like I'm looking at over here, and this is what I want. So, with a GIF or a PNG, this is exactly what I'm going to see, and you'll notice when I change between a PNG and a GIF, none of the information really changes here, because they're virtually identical. So, people just tend toward PNG's now and I'm good, this is my entire color pallette right here, and you wouldn't think that this logo was actually made up of all these colors, but if you look really close, the anti-alias thing here, where it kind of softens right there, those are pixels that are filled with different colors, so they're really are a lot of different colors in here, and I have a maximum of 256. I can cut down the number of colors, which is gonna substantially cut down on my size of my document, but as I cut down on those colors, if I go down to two colors here, this is what my image looks like. Four colors right there, and of course the less colors I have, the more it saves space. But clearly, there is a certain amount of colors I can get down to and still make it look good. 16 colors, and at 100% size, that looks great. 6K. So it's eight times smaller than a JPEG. That's a lot of space when you're talking little bits of information. The huge thing with a GIF or a PNG, you can have transparency. JPEG's do not support transparency no matter what. If it's solid, it's solid, it's solid, if you start off with a layered Photoshop file with a transparent background, save it as a JPEG, there is no transparency. But I have my transparency button checked right here and it's like oh, I can get this to be transparent. You can turn a GIF or a PNG into transparency, and typically you get a logo that's on a white background, and if I have a GIF or a PNG, I can take my logo, go into my color table, and you'll see pure white is actually indicated by this little dot. If I click on that white and I turn it transparent, all of a sudden, that goes transparent, it's like wow, isn't that awesome? (laughs) Not quite. Let me just show you folks. Let's just zoom in on this right here. So, we did a transparency, but do you see those little slightly colored pixels right on the edge there? If you were to take this logo and put it on a colored background, that gold color wouldn't come right to the very edge, you would start to get lighter and lighter pixels to visually smooth it out. So while it's really cool that you can go in and force the transparency here, you put this on a colored background in HTML, and it doesn't look very good. So people will then start going in and say well you know, this color's fairly light, I'm gonna click on this color too and turn that transparent, and Ima take that light color and turn that transparent and you'll see we started to eat away at the edge, and it's like oh, I could just make all the light colored pixels transparent all the way through and it's like oh, this is easy, oh my gosh this looks great. I'm just gonna keep going here, get rid of all of my light colored pixels, and then when I look at it, it's like oh, now it looked like somebody went ahead and hacked it with a dull machete, that's what happens. So, transparency is great, but forcing the transparency on a GIF or PNG, and by the way it works the same, either one, if I switch this over to a PNG, the exact same thing happens, no difference whatsoever. But, it's forte, it's 10 times smaller than my JPEG, so clearly I wanna have it this way. I wouldn't wanna go in and have all this transparency here, not what I would want. But, I could do that. If I truly want a transparent PNG or a GIF here, I need to start out with a transparent, and in my Photoshop file, I put a white layer behind there just for you to see, but I brought this right in from Illustrator, so it's a completely transparent background, which means when I zoom in here and I actually look and see, do you see those pixels how they're actually translucent? Because I start out that way when I save this as a PNG or a GIF, those won't be solid color, those can also be translucent. But there's always a catch. So I'm gonna take this transparent file, go into the file menu and choose Save for Web, go back into my GIF or my PNG right there, and because I started out with transparency, I get transparency, it's like wow, isn't that great? But then I look in here and it's like, wait a second, I have that exact same problem. It was transparent, it looks transparent, but I get that little white fringing edge and it's like well why would I use this? Say I try this and it doesn't work. Yeah, we have issues. There's always a way to solve it. So if I start off with transparency, but I don't have to go in and actually make the white transparent, it did it for me. But those nice translucent edges in my Photoshop file don't come through, because a GIF and a PNG 8 supports transparency only when those pixels are totally white. If you have 1% color in those pixels, they will no longer become transparent, and the web will then display that color specifically. And it's like oh, but it looks white to me. If it isn't white it will not be transparent, end of story. Now if you're using this on a white background, you're golden. But if you're using this on a color background and you set your HTML file to have a slightly colored background, this would be a problem. In most cases, it's not going to be. Lot of websites just have a white background, that's great, you put it in there, done. You would never even see this, everything's fine. So, this could work just fine. But here's the great part, any one of these files that I have here, if I would like to go in, and I've got this and I thought ya know, this could look really really really good with a drop shadow on it, and I'd like to go in and make this the drop shadow, so I've got this in Photoshop, go under my Layer Effects, and I'm gonna take my drop shadow, right there, there's my drop shadow, see how this looks, that's a little bit far, there we go. Ooh yeah, great. That's gonna look stunning, lemme throw the white background in just so you can see. I think I need to bring that in a little bit more, I don't think I want that much on there. That just looks, words can't describe it. Mhm, we'll leave it at that. Okay so, we see this and it's like this is exactly how I'd like it to be, and if I go in and I do my Save for Web, and I see this as a JPEG of course and I set the quality down, this is gonna look terrible. Just awful so, no-go 'cause it's not an image. I do my PNG 8 and it's like oh, there we go, but I get transparency only for the perfectly white pixels. Now this looks even worse, and with a PNG 8 or a GIF, I get the same thing and it's like I thought you said a logo, that is what you need to do. Here's the beauty of it, this is why we have a PNG 24. Now a PNG 24 is very much like a PNG, but very much like a JPEG as well. It's kinda the best of both worlds. The one sacrifice with a PNG 24 is that you are going to go ahead and have a larger file size, probably larger than a JPEG, definitely larger than a GIF or a PNG 8 but, PNG 24's support full transparency, or what I say is translucency. If I have a drop shadow on this, which is transparent in Photoshop, I want that to be transparent in my HTML so that any time I put this file on an HTML background that has color, I wanna make sure that this drop shadow actually goes over that color and comes through that color. PNG 24 will do that. If I save it as a JPEG, it flattens the file, and I get no transparency. If I save it as a GIF, I am going to have transparent whites, but no other color will be transparent. PNG 24's, I get full transparency. So let's take a look at the file size here. This is 33K at PNG 24. At a PNG 8, it's 16. So it's twice the size as a PNG 24, but I save it as a JPEG at it's lowest quality, it's five. Clearly the lowest quality wouldn't work, so I'm gonna bump it up there until it looks halfway decent right there, and then it's 15K. So you can see a PNG 24 is gonna be a larger file size, but it also gives you what you're looking for. So, this is the interesting thing, how do I take an image that has type on it, and find details, a photograph, and actually make it work? Well you could conceivably do it as a PNG to keep the values of both of them where you want them to be, and it kinda balances the need for the full color spectrum, and when we have a PNG 24, you'll notice that there is no color table here. There is no color spectrum, it is the entire visible spectrum, which is one of the reasons why the file size is larger, because we have all the colors in here, and it's not limiting it to 256 colors. That's what you have. So, if you have type on a photograph, and a logo in fine detail, and you would like that balance between the two, you could save that photo with that logo on there and that type as a PNG 24. The sacrifice is it's gonna be a larger file, but you're also gonna get the benefit of having something that's going to render very nicely. So, we have our GIF or our PNG, and if we were to save this and put this on an HTML background, that soft drop shadow would then get applied too, and let the color of the HTML file show through on the background. So, could I go in and could I save a file, an image file, as a GIF then? So, if I have my image here, could I go in and save this as a GIF or a PNG? Certainly. And here's what happens. Now, this is pretty much blues and grays here, so I have a very narrow spectrum of color here. So, I'm not gonna see much of a difference if I save this as a GIF or a PNG, but I'm gonna show you what happens. So I'm gonna bring my file in here, and heres my file, and saving it as a JPEG here, I can't really see much difference at all. But if I go in here and save this as a GIF or a PNG 8, it's like oh wow, not much has changed. Okay, and it's like I don't see what the difference is. Let me cut down the number of colors here, and you'll begin to see very quickly what that is. And here in this file, you'll begin to see this. And you may see this from time-to-time on a website on an image, and it's like wow, what is that weird thing? Why does it look like that? Well that's called dithering, and dithering is basically trying to take the hundreds or thousands, or tens of thousands of colors and blend them together using a very limited number of colors, and when you have a very limited number of colors, you're going to get very strong pronounced steps, and it's going from one color to the next color to the next color. So, when you have this diffusion or pattern or noise, this is dithering. This is taking the continuous tone of color, and I can turn it into a pattern, I can turn it into noise to kind of break it up, but the reality of it is is that I'm still limited to the number of colors. So, I can dither it whenever I want to, but I'm still going to compromise the image, which is the reason why we don't normally save an image as a PNG or a GIF, simply because it severely cuts down the range of color. Now because this bottle is blue, you know, we have just the blue color range, we're not dealing with a background and people and clouds and sky and water and flowers in a full range of color, which would look even worse if we saved it here, but nonetheless, this is definitely a compromise. Yes, you get a smaller file size, but you also don't get the full color range, and you get this very choppy blending made worse by the number of colors here, and you can see if I set it down to eight colors, even just the sections on the bottle here get all dittered, so, that's one of the reasons why you would not save an image as a PNG or as a GIF file. But if you save this as a PNG 24, it's going to render beautifully. But, check this out. 876K right there, a GIF file, looking terrible, 318K or a JPEG here, probably saved at a medium quality or some place around there, 62K. So, huge huge huge difference, it's like 15 times the size if you save it as a PNG 24. So, things to consider as you go through and save your files. I did have a question earlier, a couple people had asked when we were saving for the web, and somebody said wasn't there something about not doing saving for the web anymore, because Adobe isn't supporting it now? Yes, so, when you go onto the file menu and you choose Save for web, Export, Save for web, you'll see it says legacy. They're no longer doing anymore development because there is a known problem with the color-shift in our GB mode. So, which is a great thing because now what they're doing is they're doing the new Export As, so it's interesting, and it's a great Segway. What's interesting when I do a Save for Web, we talked about GIF's, JPEG's, PNG's, but I also talked about SVG's, scalable vector graphics. And you'll notice that when I go in here and I save for this there is no SVG, so it's like hmm, there is no scalable vector graphic here so, maybe if I go into the File menu and choose Save As, I can get in here and I can find my SVG file here and it's like, hmm, I don't see scalable vector graphics either, and it's like maybe it's the file type that I have, so I'm gonna jump over to my Photoshop file here where I actually brought this in from my Illustrator file.