Lessons

Lesson Info

Save Images for Web

We have four file types for the web, I'm going to talk about three of them. We have JPEG, GIF... And it's "JIFF," it's not "GIF." The man who invented it said it's a soft G like the peanut butter, can't tell you how many arguments I have about that. I was around when it was invented, I know it's GIF. All right. And we've got PNG. We actually have two types of PNGs, we have PNG-8 and PNG-24. And we have SVG, Scalable Vector Graphics, which we are not going to use and talk about because they're not quite ready for prime time, it's not supported fully yet, so we're going to put that on the future burner. Okay. So let's go ahead and talk about those things. And I happen to have...I made you guys, using my fancy little artboards because I hate slides. They made me make you those slides and I was like, "Don't make me make slides." So I did it my way, and I used artboards instead of making slides, how cool is that if I can find them? There they are. Is that cool? So I used artboards instead o...

f slides, this is way more fun. Way more fun to use Photoshop, right? Okay. So let's talk about these different file types, okay? So JPEG. JPEGs are millions of colors. It is a lossy compression, which means that as soon as you save a JPEG, whatever format, whatever's saving it, whether it be your camera or Photoshop or whatever, is literally taking gobs of information and throwing it away forever and ever, you can never get it back, right? So that always begs the question and my students are like, "But what about all of my precious pictures I take on my phone?" I'm like, "Yeah, they're JPEG'd," right? But not all is lost. So what I always say and what I do is I save everything in Lightroom, and Lightroom is non-destructive. And I can make edits over and over in Lightroom because it's not resaving the file. But if you need to bring a JPEG into Photoshop and make a change, only do it once, don't JPEG a JPEG. So back in the day, remember when we had the 14 inch monitors, the internet looked like somebody threw up all over it because people had to steal other people's JPEGs. And then they would do things to it, and then they would save it again, and again. And the JPEGs got JPEG'd and JPEG...it was horrible. So just saying, it's better today. But that being said, there's lots of different compressions for JPEG. So in Photoshop, you have Save As JPEG. It thinks you want to print it, so it's going to save you a nice big high-quality file for printing. And it's going to be large in size and it's going to have image previews and all kinds of information in there that you might need. Whereas, if instead you go Export, Save for Web (Legacy)...it's making me feel older, and save it as a JPEG that way, it's going to make you a nice, small compressed file, super-compressed. No image previews, you don't need that. It's going to be sitting on a server, nobody is looking at that thing, right? So it strips out all the information that you don't need and it compresses it down to a much smaller file. So don't use Save As, okay, for the web. Always Save for Web (Legacy) or we have some other options in here. Okay. So that's JPEG, good for photos, good for images with gradients, right? GIFs. So for years, all we had was JPEG and GIF, those were our only options. So a GIF file is between 2 and 256 colors. You can have one color of transparency. So also back in the day, back when that web was really ugly, we used to have nasty white halos of stuff, because people would just take a magic wand and go, "Boop, delete the white," so they'd leave a nasty white halo, right? That's bad. So, the one-color transparency was nice back then but it's not really helpful today. But the one thing that is still helpful today is you can animate it, it's the only one that can be animated. You saw my hokey little thing on my WebWitchery site, right? But we can animate better than that, that was with web safe colors way back then. So you can animate it which is tons of fun. And a GIF file, things that are solid colors look so much better as a GIF and people still save them as JPEG. And I'm like, "No," because the problem is, that's why you use these graphics, right? So that doughnut, I made that doughnut in Illustrator and that's a newer version of the logo, which we're also going to do tomorrow, that I did in Illustrator. And because those are nice, solid colors, they just look better as a GIF. When you save it as a JPEG, JPEGs, what they do is, it's called artifacting, JPEG artifacting. So if you zoom in, you see all these little boxes everywhere, right? And when you save a JPEG like an image like this, it's horrible. It's all around the white... Let me show you guys. All around the edges here would be horrible. There would be all these little tiny boxes everywhere. And then, all around in here, there would be these little boxes everywhere, so it's just going to look bad, okay? So not only is your file size going to be smaller if you have solid colors and you're using a GIF, but it's going to look way better, okay? That old WebWitchery site I showed you, the reason why I keep it is because a million years ago, I wrote an article JPEG Versus GIF. And then, a million years after that, I added in PNG when that came into being. And it talks about that and it shows some different...but it references Netscape, so you know how old it is, right, for those of you who remember Netscape. Okay. So that's our GIF. So sometime in the late '90s, this is my story, anyway, and I'm sticking to it, this is what I've been telling for years. So sometime in late '90s, CompuServe decided that they were going to start charging royalties for GIFs. And the design community were like, "No, we're not paying you people royalties." So somebody came up with PNG. So PNG is actually the best of both worlds. PNG, remember we got PNG-8 and PNG-24, right? So let's talk about PNG-24 first because that's what we've been using for forever. So PNG-24 is millions of colors like a JPEG. Not a lossy compression, it is compressed. However, it's not lossy like JPEG and you can't visually see the compression. Millions of colors and has alpha transparency, what the heck does that mean? That means it has the same transparency as a Photoshop layer. So it has 256 levels of translucency from completely transparent to completely opaque, and 254 levels in-between, okay? So you're like, "Why would I use anything else? That sounds like the best thing ever." Well, because the file sizes are huge, okay? And you're like, "Yeah, but everyone's got fast internet connections today." I travel a lot to teach, let me tell you, if I'm in a hotel lobby and I can't get your website, I am cursing your name. Why is this website not loading? So we still want to keep everything nice and small, as small as we can, so we use PNGs sparingly. As you can see, if I have a fancy drop shadow that needs to go over a pattern or a background that's not solid, right? Honestly, this guy here, this would make a great GIF if I knew it was going to be on a white background all the time, totally cool. But this doughnut with that drop shadow, I need to have that be a PNG, right? That's not going to work on those two colors. Okay. So that's the PNG-24. Then we have the PNG-8 which is newer. And a lot of you might be wondering, "Well, what the heck is a PNG-8 anyway?" I know I did for long time and I was like, "What is this PNG-8 that people speak of and how come I'm not using it?" And I looked into it and I was like, "Oh, I don't use it because nothing can make one." Because you couldn't make them, you would try and make them and I don't know, it would be bad. I was like, "That's not good." Well, last June, Photoshop can now make you a pretty PNG-8, okay? I know, it's amazing, right? So we get pretty PNG-8s. And the difference between a 24 and an 8 is the 8 is like the GIF, it's between 2 and 256 colors. However, just like its big brother, it still has the alpha transparency. So it's like the holy grail, right? It's awesome, awesome, awesome, but the files are still big. Okay. Just one more thing, I think it's called TinyPNG and you can feed it images, any kind of image, it doesn't have to be a PNG. But you feed it your images and it will take your images and make them the smallest that they can be, and it doesn't ruin them. And you can save, it's really cool, it's really cool. So go check that out. Okay. So that's my overview of all of the image types that we're going to use, okay? So how the heck do we get from artboards and layers and these fancy Photoshop documents, to these three little file types? Well, let's talk about that. So we can go up to File. Under Export, I've got a bunch of different options. I have options. I have this weird thing called Quick Export As PNG, and you're like, "Okay. I don't know what that is but all right." Then we have Export As, then we have Export Preferences. And then we have Save for Web (Legacy). Okay, cool. So Export Preferences, I'm going to click on that because it's just going to take me to my Preferences file, my actual preferences, right? On the Mac, Photoshop Preferences, on a PC, Edit Preferences is in the bottom of the Edit menu. So I'm in my Export Preferences. So I can set this up to be whatever I want. I'm not stuck with PNG, okay? I can make it a PNG, a regular PNG, or if I click the little checkbox, I can make them PNG-8s. I can do JPEG, GIF, or SVG, this is great, it is. But the problem is, I think it makes people think, "Oh, I could just save everything as one file type and I'm good." You can't. You can't. You got to do the work and save it as different stuff, okay? So while this is cool and it's fast, and it's easy, I don't use it because I'm saving all different types of files, right? So I'm going to cancel, I'm going to get out of that. And plus, I'm usually doing more than one file at a time that I want to get out of there, right? So then we have Save for Web (Legacy), I didn't even know it was going to show up in here. Nothing, perfect. There we go. Okay. So that got everything, everything is showing up in here. It's okay, I'm not going to do anything with it, I just want to go through the dialog box with you. So on the right-hand side, you can see, I can choose, right? I can do a GIF, I can do a JPEG, PNG-8, PNG-24, WBMP. I don't know why that's in there, that's a Windows file format. Well, and it's for Windows and it's on my Mac. I don't know, just ignore that, pretend it's not there. But then, what you do, so if I save it as a GIF, you can see, it gives me a color table, okay? And years ago, I used to manipulate that color table by hands. I used to do banner ads that had to be less than 10K animated. Yeah, we're talking way before. "Obviously, I do that with Flash all the time." No, no, no. No, no. We're talking animated GIFs in the '90s, okay, long, long time ago. So I can control the color table, you can see, I can control how many colors. I would always have 16 colors for these weird little banners that apparently people loved and clicked on, I don't know why. Anyway, I've got all that in there. We can dither. Dither, it's going to make a larger file size, it means it puts pixels of the same color next to each other to simulate a new color. So no dither is going to be more straight colors and a smaller file size, right? But you have a lot of control over here. I've had to learn over the years to give some of that up, it's really hard. Like with that automatic save thing, I'm like, "How are you saving it? How are you compressing my JPEG? How are you saving my GIF? How are you choosing what colors I want?" I don't know. Do I trust Photoshop? I do actually trust Photoshop. So I had them like, "I do trust Photoshop. I have to let that go." Okay? But I can come in here and control everything, right? So my JPEGs, when I switch to JPEG, I can control my quality. And this all has previews, by the way. So I'm going to switch to 4-Up so you guys can see how this works, just in case you've never been in here before. So you can see, I have my original, I have my JPEG. And if I wanted to check them all out at the same time, actually, let's just do that. I'm going to cancel. I'm going to pick something that should be a GIF, select all, copy, new, paste. Oh, it's in there, it's hiding. So now, I'm going to go up to File, Export, Save for Web (Legacy). Okay. So I've got my original, I've got my GIF. And it's making it transparent. I can change this to JPEG. I can. Why is it not letting me change it to JPEG? Actually, let's click on this one. We'll leave that one GIF. So I've chosen another area. I'm going to choose JPEG. There we go. So now, you can see, I have my GIF up here, my JPEG here. And I'll pick this one and I'll do PNG-8. So I still have my transparency, let's do PNG-24 just for file size difference. So now, I can come in here and I can see the file sizes, right? So I'm going to pick the one that looks the best and the smallest file, at the smallest file size. Sometimes they're sacrifices, right? Sometimes it's like, "Well, it really looks good here and it's a little bit bigger, I can live with that." So you just go through and decide in this. I hope they don't take this out. They call it legacy, that means that might be going the way of the dodo, I hope not, because I actually still like this dialog box. Anyway, you can come in, I don't have to have transparency. You can see I'm on PNG-24, if I unclick Transparency, it's no longer transparent, okay? So I have lots of control in this legacy box, and yeah, it's old-school but it does come in handy, right? So I'm going to cancel out of this guy and I'm going to go back to our other one. So what is new, what is the new, better, bestest way to do this? Anyway, okay, we covered everything in that. I got this thing called Generate, what the heck is that Generate thing anyway? And I've got... You go to Generate and it says, "Image assets," and mine happens to be checked. And you're like, "I don't know what that is." And if I check it and I go back in again, I'm like, "Now it's not checked, I don't know. I don't know what it's doing. How does that work?" And then I come over to my layers, and you will notice in my layers, I have some layers named. There's one right there, look at that. I named it, I just named the layer. You can also name groups, okay, which I have. Look, there's a group, Hero_BG.jpg, and then I have Logo.PNG. So I have all these things named. Why would I name my layers that? That's weird, right? Well, I did it on purpose. I layered my layers and my groups that way based on how I wanted to save them because, if I go out here, I'm trying to think where this is. You know what, I'm just going to do it on my desktop. I'm going to save this page. I'm going to do a File, Save As. I'm going to save it on my desktop. Okay? Now, just to show you, let's go here. Here's my desktop, so all I have on my desktop, I have that webpage I just saved in Photoshop, that Photoshop document. I have website resources, Dreamweaver, clean desktop, that's it, right? Nothing else up my sleeve, there's nothing else on there. So now, if I go back into Photoshop, and I've already named all my layers, I took care of all that, right? I'm going to go up to File, Generate, and I'm going to check it. And you're like, "Okay, what happened?" "Nothing happened. I don't know how this works, nothing happened." Then you go up to Finder. And you're like, "Oh, wait, what's that?" It's like magic, they're all there. Nobody knows how to use this, nobody knows it exists. They're all like, "What is that?" It's cool, you just have to trust it's there. So if you're working on a Photoshop document and you haven't saved it and you do that, it will still work, it will save it all to your desktop for you automatically. So it'll go in a folder on your desktop. If you have it saved, buried way deep down in your hard drive somewhere. Wherever that Photoshop file is saved, that Assets folder will show up on the same level as your Photoshop document, okay? Isn't that cool? That's really cool. I think that's pretty cool, too. All righty, you guys had enough Photoshop? I think that's all I wanted to show you in Photoshop. Now we have our images and ready to go, I'm going to quit out of Photoshop. Oh, you know what I forgot to do? I forgot to take my little sticky. But look, it's like magic. I don't have to finish it. All my colors that I made, I forgot to show you. What do I do with this? I got distracted because you asked me a question. We stick that baby right there, okay? And you have it right there. And now, if you're somewhere and you're like, "What was that color?" It's right there, right? So every time you create a website, create a new sticky. The other thing I like to do with stickies, just a little little side note because I know I haven't started keyboarding yet, but you guys did see me do that one thing where I'm like Speedy Gonzales. Okay. So the first thing you want to do with keyboard shortcuts is, you want to learn all the basic keyboard shortcuts. You need to know New, Print, Open, Close, those are universal, right? CMD+P is CTRL+P on the PC, universal. Memorize those. Once you have those memorized, start figuring out what keyboard shortcuts you're going to be using over and over. They're right there. I don't know where anything is. Let's do Transform, I think it's under the Edit menu. Really? Come on, it's in there somewhere. I think I need to have something selected. I don't ever go up there, that's why I don't know where any of these are. Let's me click on this guy. I wanted Transform, it is. There it is, Transform. Okay. I do this all the time, CMD or CTRL+T, so easy to remember, CMD or CTRL+T. Transform, T, Transform. CMD or CTRL+T, memorize it, okay? And if you can't memorize it in your head that way, take a sticky, CMD or CTRL+T and stick it on your monitor and work on it all week. And pretty soon, you're like, "I know that I'm good. I can do another one." Toss the sticky, make a new sticky with a new keyboard shortcut, memorize another one. And I'm telling you, pretty soon, you'll be as fast as I am.