Exporting for Web


How to Create an Animated GIF in Photoshop®


Lesson Info

Exporting for Web

I'm gonna take this happens to be my niece's paisley and I am going tio go under the image size here make sure it's seventy two pixels per inch and there it is reduce it down now I'm going to go into my safe for webb I'm gonna check out and see how my safer webb is going to work so this is my original one I'm gonna zoom in really big just for display purposes when I'm doing safe for the web I never usually go in and zoom in larger than actual size and there's I'm at two hundred percent right now that's one hundred percent is highlighted because when I'm viewing this I'm never going to view it larger than a hundred percent on any of my final devices so if I'm really getting picky about the detail on the quality I'm not going to zoom in any bigger than it's actually gonna be displayed at I'm doing this for purposes you can actually see this is what happens to a j peg okay this is a seventy two pixel prince j peg so when I compressed this down to equality of zero this is what happens not ...

a problem great for mosaic tile floor horrible for displaying an image but keep in mind that we see this all the time you just don't see it in this level of detail if I zoom back out here and I see these two images you'd be hard pressed to really see that much different at that particular size okay that's why the j pegs work keeping wine? This is two megabytes with my original and this is fifty eight k this is very important whenever you're designing web banners or your design an entire website, you want to make sure that the images there are going to be under a certain size if you're designing a huge website with forty products on there, you want to make sure that all the images look good, load fast and don't go past a certain threshold of download size and this is where you figure out her sizes so it's always a compromise between though I have a good enough image and I'm a meeting the criteria for having the image be small so I can't reduce it down in pixel size any marcus seventy two pixels per inch is the standard for any light emanating device, so I have to keep it there so I'm gonna zoom in for display purposes here and what I want to do is I want to be able to adjust this so that it looks good but no better than that because every time I adjusted to be a higher quality I am going to lose space they're going to get bigger and they're going to take longer to download don't want that so instead of starting off with maximum here and saying, oh, yeah, that's great, well, that's almost a megabytes worth of information to download their I don't have that kind of bandwidth. I need to make this smaller. I'm going to start all the way back on my quality down zero here, I'm not going to use that hot, maximum high, low medium for all I care about this could say sausage, pepperoni mushroom on it. It really doesn't mean anything whatsoever because what does maximum really mean? The top of whatever? I don't care, I care about the quality, I don't even care about the number, okay? I'm looking at this image and I'm going to have it into up form hat here so I can actually see the image next to each other, so there it is. I'm gonna start with my quality, I'm going to keep upping my quality on here and I keep looking at my image and I'm going to see where this is going to come together, where it looks just right and again, I'm zoomed in a three hundred percent, I really want to be at one hundred percent here because that's exactly how I'm going to see it. So obviously when I look at this whole zoom in a two hundred just so I can show you the dramatic effect here. And it's a zero I'm gonna bump this up a bit and once I get to the point where I think it's going to look acceptable on his own back, too one hundred percent, I look at that and it looks just fine. I'm not going to go anymore, it's one hundred sixty three k, which is actually a fairly large file if I want to do that, so I'm going to keep it fairly low and I just want to get past that threshold where I don't see this kind of horribleness at all just to that point and then I'm good right at that point done, and I'm ready to go ahead and save this j peg, so there it is, one hundred percent and I look and it's like, ok, there's, a slight color shift here, but there's, not much I can dio every single device is going to display color differently, ok, all I know is she has a turquoise shirt on and a pink and purple scarf that's what is going to show up like so once I'm done with that? Okay, so I have a low setting there and it's a quality of twenty three every image is going to be different, and I'm going to do this based on every single information, every single image. And the information that I get there is no set size there is no set number everyone's going to have it so when I do that and I click ok right there I want to be able to save this of course I need tio zoom back out here want to go in and okay do that and then I'm going to save right there and click safe and there's my image if I open it up for my hard drive here um it is on I look at my image and it looks just fine I'm ready to go now if I don't you say for the web and I just go on to the file menu choose save as I just say save is ajay peg right here I go in and save for the j peg and it says ok how do you want to do this low medium high and of course we want the best quality ever right but like I said we have no idea what this is going to really look like here and the numbers and the settings here don't mean anything that's why I want to go through and you say for the web but if I have anything that has a transparent background I can't save it is a j peg so this is great it works it looks just fine at that size if I zoom in here clearly I can see all those jpeg compression lines so I'm not going to use this for print this is just for web display no it's not great that keep in mind when you save any j peg file whatsoever and you compress it down there is no getting this back once you close that file your done that information has been taken away and that great has been turned into a raisin you're finished so whenever you do something like this never save over your original ever of a question here for convert srg be should you uncheck that when you're saving for web or should you convert us rgb you certainly can't so when you do say for webb we have the s r g b which is going to be basically the color standard and here's the thing people like you definitely want to do that because you want to make sure the color is perfect well you always do but you know how many we have like six hundred million people that are going to view this image when they downloaded on there ipad their you know their phone their television there you know computer monitor everything do I know that their monitors and everything is color correct no so trying to make this color corrector color perfect you make it look good I can't control the end use I do what I can here that's it a lot with creative live where you know we are displaying images on screen it's like well, we can color correct as much as we want, but it depends on your monitor. So it's going to bring that up? A quick question from cassandra. What about the quality difference for a retina display? I recently got a retina display, and now half of the web looks awful and pixelated. Uh, is there? Is there anything different that you would do other than what you've described? So the interesting thing with retina display is everything is actually made twice the size it's still seventy two pixels per inch. It's just made twice the size and then it's reduced down because what happens is when you and I'll show you this in the image dialog box here. So if I go under the image size here my image is three hundred pixels per inch, but it's two and a half by three and a quarter inches. If I were to go in and I were to sacrifice resolution and I click off the re sample button, I am going to trade file size for the number of pixels. The amount of information is exactly the same. I have one hundred dollars bill or one hundred one dollars bills. The denomination is exactly the same it's, just that I have more of one and less than the other. That's all so with this, if I were to go in here and make this seventy two pixels branch, the pixels become smaller picks will become much larger because they have fewer per inch, which increases the size of the file. So if I were to go ahead and view this on a retina display at seventy two, it would come across this five inches because it just takes it and it reduces it down in size, which gives you the impression that you are having mohr information so the pixel everything looks better, we're just simply taking the information, reducing it down in size, and it just gives a higher quality because higher resolution means more pixels per inch more pixels per square inch, the smaller they are, the more they're packed in the finer the quality. That's what it is so it's interesting because I teach classes on in design, and one of the things we do is we do a lot of interactive publishing within design. So when we're going through and we're doing these big in design documents and you've got all these catalogs we can actually build for the retina displays and literally everything just gets built twice the size and it gets reduced down and gives you the impression that it is much sharper it is, yeah, but really we don't change much of anything. So I wouldn't go build these one hundred forty four pixels per inch because it doesn't work seventy two, but they're just get built twice the size. So that's. Why? When you look at that online, you get horrible ones and great ones. That's. How it's built. Okay, so saving is a j peg. Drawback is, we're going toe. Always sacrifice the quality of the image. When we say it is j peg, we get the jaypee compression lines, and we can't have transparency.

Class Description

GIFs are a lot of fun and you’ll learn how to create one and what they are used for in How to Create an Animated GIF in Photoshop® with Jason Hoppe.

GIFs can be static or animated and are most-commonly used to display images and graphics on websites and mobile devices. In this class, you’ll learn how to create animated GIFs in Photoshop® that are easy to build and is widely supported on all devices.

Software Used: Adobe Photoshop CC 2014.2.2