Exporting a GIF in Photoshop®


How to Create an Animated GIF in Photoshop®


Lesson Info

Exporting a GIF in Photoshop®

What I want to do is when I was saving this the biggest problem I had with this is it should have been seventy two pixels per inch right there before we go through and save it now if I were to take this image and I want to save this image as a gift can I do that? Absolutely but there's also a drawback to that when we're trying to save a photo as a gift so I'm going to go ahead and click save and so I don't want to say this is a j peg now I'm going to save it as a gift because somebody else told me j pegs are horrible and they compress everything so I don't want to touch him at all so now I'm on the gift bandwagon and I'm gonna save everything is a gift okay? This is my new hammer I just learned how to use it so everything looks like a nail okay so now j pegs air out because somebody told me gifts aaron so I'm going to save this is a gift right here and it's like well see that's great and so is two and a half megabytes here and now it's six hundred eight k let me see what it does with t...

he j peg it's like ajay pegs only fifty four k but the gift is going to be six hundred eight that's crazy why whatever he was a gift well, that's true, why would I use a gift if I'm using an image? I wouldn't that's the whole point, okay? Because here's, what happens with a gift and this is why we don't use an image or a gift with an image and save it in that format I'm gonna back up one second here actually we'll stay here, I'm going to show you once we get this saved is a gift so my image looks pretty good there's a slight color shift right here and I don't see much change at all, but I'm going to look inside here I'm gonna get really close up I can see I've got a really nice continuous tone here, but I got like this really splotch in this and I remember the very first time I saw a gift somebody had done an eagle and it looked awful and I'm going to show you how to make these look awful and you'll totally relate to this because then you'll be like that's. Why aunt and his website looks so terrible this is the reason why with a gift it gets broken down into eight bit color, which is a maximum of two hundred fifty six colors so it's going to take this entire image and I'm going to see the entire range of this image and it's going to break it down into my color palette right here jay pegs I can have the full spectrum of rgb and I could have millions of colors in there not a problem gifts two hundred fifty six maximum colors let me just break it down to two colors ok that's what it looks like with two colors how bout with four colors and I know you've seen images on the web that look like this this is what you're seeing you're seeing basically what's called index colors index colors take the entire spectrum and they break it down into the two hundred fifty six or less re occurring colors so it's actually indexing the colors based on the colors that are in the image so if you've ever gone under the image menu and you see rg bcm like a grey scale and index color that's index color okay we're indexing the colors that aaron their maximum two hundred fifty six so with this I clearly want to have the least number of colors possible I shouldn't be doing this with a photograph anyway but I'm going to show you because if you want to make it bad yeah you know you want to do that eagle flying across the land you know, carrying a doughnut and yeah ok this is how you could make things hideous starts off with a bad idea we make it look worse so two hundred fifty six colors is the maximum that I have but of course like anything else if I reduce the colors it's going to reduce the size and the download speeds tremendously but it completely compromises this because I don't get that beautiful spectrum of color so that's why gets really or not the best for a continuous tone photograph because we're compromising it what we're not compressing it we're just sucking the life force out of but in a different way let's just they were dehydrating it ok exactly so when we are saving something like this we've got a couple other things here we've got different types of color mode here and I can tell you quite frankly I haven't a clue which one is going to bury it or work best I just go with per sexual color simply because that seems to be the one that works best over a wide range you can disagree with me but then you have already looked through all the meetings there and you'll know a whole lot more so interesting thing is gifts khun support transparency so if I wanted to create something I wanted to put on a different color background on my website I can have transparency but again I shouldn't be using us with an image at all so I'm gonna get cancel here the jump back over to my logo and I'm now going to go under city for web but I'm going to see how this is going to look as the gift. So what you say for the web here, I'm going to do it both with a transparent background and without a transparent background, so use this down in size. Actually, I'm gonna go back here and I'm gonna change the size of this two seventy two, because that's, what it's going to be when I do say for the web, there we go and this is exactly the size I mean, looking at one hundred percent, this is exactly how it's supposed to look, so I'm going to go ahead. I don't want to do it is a j peg because of those horrible compression lines and you can just totally see how that looks with those compression lines. I mean, look at that that's a continuous color and that's how horrible that color looks bad j pig so I say this as a gift, and this is awesome right here. So now when I do this as a gift it's breaking it out into the index color here and it doesn't even have two hundred fifty six colors in it, I mean, I could make that, but the reality of it is I can cut that number of colors down substantially, and it really doesn't change this, so you would think, ok, you know, there's only two colors in here blue and yellow not quite those pixels that mean it the edge there kind of show that little bit of a fringe there's more pixels than that but even if I drop it down I'll show you two colors okay that's the two colors perception versus reality ok let me show you four colors okay that's good but now it looks like some eighties really bad video game so I'm going to go up to eight colors and the whole point is I want to have this few colors is necessary but because I wanted to load fast the more colors I had the faster this more room is going to take up slower it's gonna load so I'm going to go to thirty two colors and it kind of looks pretty good right there and then I have this and it's like oh khun support transparency I can turn that on that turn that off so how does it know what is transparent well it started off of the transparent background so it's going to create a transparent background so if I take this put it on my website are given to my web developer and they put it on a colored background everything's going to be perfect right wrong because transparency is a relative term okay and I see that the lightest part here is going to be transparent but let me just zoom in on this really really close and show you okay so up here I have what's called anti alias sing and it's the appearance of smoothing well, you never have smooth and photo shop because how do you have a smooth square? Ok it's called a circle well, we build everything and photoshopped out of pixels, pixels or square they're always square always will be square they have sharp edges, sharp edges can hurt you ok, so we do auntie alias sing gives the appearance that we're softening the edge here and it just basically fades it out if we're fighting it out into a transparent background it's just simply fades away, but if I'm doing a gift right here I have transparency when it fades out to nothing that's when it's transparent but it doesn't actually fade a total transparency until there is no information what it does is less and less information gets there just simply lightens the pixels lightens the pixels, but those pixels air still there we're going to show you a couple examples of this so it makes more sense so I'm going to go blindly float forward here because for now I think I'm doing an absolutely awesome job so I'm going to go ahead and click save and it's going to ask me how I want to save this when I save this I can say that his image only I consented whoever's doing my website or plug it in but I am going toe actually do this so I'm going to write the html and get the image here because I want to see how this is going to look in a web browser on a page with a colored background this is how I'm going to test it because I think I know what I'm doing here, what I'm going to prove myself wrong it's always fun going to save this is both the html and an image and click safe now I'm going tio go over to my finder here and this and there is my html and if I double click on that it's going to launch my browser and it's going to plug my logo right in there and it all looks good because it's on a white background, I can't tell those alleges, so I'm going to go in and I'm going to edit this and I want to go in and I want to edit this here and see I'm going to text at it here and I want to be able to edit this and just put it on a colored background I know this gets into html is not an html class right here, but just bear with me folks, so I'm gonna open this up and yes, maybe open this up, okay let's see if we can go ahead and open this up with something else text at it now let's see no idea there we go. Okay, awesome. I'm just going to change the background code here to something else hex decimal colors don't have to know anything about it folks all I know is ok yes, I want to allow editing you thought of that? Hey, c one zero I know accidents mull sixteen numbers letters anything don't worry about it, folks basically what I did is I went ahead and I saved it as html. So now what I'm going to do is just want to convert this to html I'm going to lose that one c there we go so I change the color of my background. Okay, now we'll get my logo nice little crispy fried edges all around that thing it looks good when I say this but now those a little transparent anti alias edges there or not really transparent so a transparent gift actually has to have nothing in those areas so it's like ok, I know how to work this I can go through here and I can edit my gift so that I don't have those little transparent edges okay? Because I'm getting really smart here so I've got this going to go save for the web again to get in here I'm gonna zoom in really close and now I know what to look for I see those little white boxes there those suckers need to go away so I can manually go in with my safer web and I'm going to pick all the colors that I would like to make transparent and the index color so I have a few colors here I'm going to reduce it down even more so I have less to do and I'm going to click on that one right there though the lightest one because those defending little suckers right there those are going to go away something click on that color my go down and they click on the transparent gonna make that transparent so good that one away and then I would have to do like the next lightest one and that one goes away and I see those air there too, so going to make that one go away and it's like great? Well, now I get like super sharp, anti alias edge and I've solved my problem right? Those things they're not transparent, but it also looks really bad and in the process I've now started to lose pixels in here too, because I just did it based on here you can, the results are bad and it just goes downhill from here so I can manually go in and pick all these colors here and then I'm back to nineteen eighty six all over again with basic, you know, pixel based, hard edged graphics everything's built with a brick so that's not gonna work at all because now I'm gonna have holes in everything, you know, I don't have those little french pixels and they put it on a colored background. Now I'm gonna have the color showing through and it's going to make it look really awful. So that's really great that I could go ahead and have transparency on this, but unless I actually build my logo or my type or my graphic on that same color background as my web sites going to be, I'm going to run into this problem, and so I would then have to put in that color in the background before would go ahead and make my gift in order to be able to match it with the color of the background on my page. So that's, how you get around it couple other ways we can actually look at this as well. When we're going through, I want to go in and I'm going to set this back tio like one hundred sixty four colors here, let me just hit, cancel it's a whole lot easier to do that and try to go back and turn my colors back on. If I said cullors little bit higher see this, I get really good like this, I can set this to be different ways I could go ahead and make my gift come across diffusion, dithered pattern doesn't dither and noise dither. I don't see how these work really well when we're doing single blocks of color or type or graphics or leinart, but I can show you how this looks when we're dealing with an image, because it's going to it's going to basically represent those little blocks of colors in different ways and different patterns. And once I show you, you'll truly understand. So with a gift here, this is great. If I want good quality from leinart, blocks of color type, anything is graphic oriented, horrible for image is ok. But then again, I don't want to go in, and he was a j peg in or to do this, because then it looks awful, absolutely awful, so great. Now I can go ahead, and I can use a gift for that j peg for that. Now I'm starting to get the hang of this whole gift j peg thing.

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