How to Create an Animated GIF in Photoshop®


How to Create an Animated GIF in Photoshop®


Lesson Info

Placing in an HTML Background

If I got a gift and I've got a j peg here, I've got like this kind of middle ground here, what happens if I take my logo and I want to put a drop shadow on my logo here? Of course go in he was my layer effects, which I just taught myself on wednesday wednesday when I taught my layer affects class drop shadow put that on there, make it gorgeous because every designer know if you love it, give it a drop shadow, I'm going to say fur web and I'm gonna have no transparency so I can see my drop shadow, but if I did do transparency and they didn't zoom in on it, I have the same thing I have all this and it's even worse because I've now I've got these white halos around the transparency and it looks awful, but, you know, I have to add dimension to my logo. I love this, I don't like this at all, so it's like, ok, if I do that and I use that any other color than a white background, I would have to build that background into my file to make this work no transparency it's going to be just fine eve...

rything's great, so now we're going to throw a little twist into this whole thing. P m g eight's what's that well png eight is actually pretty much the same thing is a gift the biggest difference is when the gift was invented by compuserve compuserve wanted a royalty and every place that it was used so if you went ahead and you put it into photo shop where you put it anywhere they wanted a royalty because they had developed it you're going to use their format and you now have to pay the price so people decided no we're gonna have a different format and we're going to call it png and so your people refer to it as a ping yes but actually it's a stunning okay because you know how peace can be have the f right like pharmaceutical see it's just it's a whole wild web really so we can have a lessening eight or thinning twenty four okay so the png is going to allow us to do the exact same thing as a gift but when it first came out web browsers didn't support it so it was a bit slow to come on and now people use it out of principle because they're like I am not going tio you know have compuserve get the money every time we use it but gives her pretty much standard along all the graphic format so we have to continue using it so there is no difference between a p and g eight and a gift it's universal and now it's pretty much supported through all the different web browsers everything else the difference which is why we use a gift over a p n g eight is a gift we can actually have animation so we can string frames together you've all seen these the string all the frames together so it's basically frames all put together to make it look like a video but saves lots of space so png eight yep just a basic gif but with no royalties attached somebody decided you know what let's make it royalty free so because we have all these great things that we can do with photo shop how do we take this and actually make the image so that I can have not just a transparent background which gives me this right here? How can I make this a translucent background now transparent is totally different than translucent this is transparent okay where the pixels or solid white it becomes transparent but where the pixels have one percent of color they're not transparent I want to make it translucent so then when it hovers over anything or rebuild the website here it literally takes this drop shadow and it multiplies over the surface so it goes right down to the surface so I'm gonna take this and I'm going to turn this into a p and g twenty four on a p and g twenty four gives me the full range of color like ajay peg would okay j pigs don't support transparency png support transparencies give support transparencies png twenty four's support transparency the way that we think of transparency and I'm going to call it translucent so we actually have varying degrees of transparency with those pixels so this is how I can create a transparent graphic that has a drop shadow that allows me to see through based on the opacity of my pixels j pegs no way no transparency p ngs gifts there is no transparency of any of the pixels unless they are pure white that's the only time the transparency can work I know some people have questions online don't they arrest you know you're doing what you usually do, which is people that's a good question and then you kind of answer it yes s o I think we're still pretty good okay? And one of the things folks you can't see the ok button or the cancel button down here it actually is there but because of the way our graphic format is I just when I'm done with us I simply hit return and it's the save button down there okay just to let you now so it's not like I'm hitting return it's like how is he doing that the saving cancel button are down here see them they're an inch below my screen okay there their trust so I just hit command period for cancel or return to go ahead and click save so when I say this is a p and g twenty four that's great, now I get total transparency so could I say even images of png twenty four sure I totally could so what's the difference between saving and images of j peg and saving it as a p n g twenty four well let's find out shall we? So here it is obviously this is saving it as a gift from gonna zoom in here to show you the difference between diffusion dither pattern dither and noise dealer on a gift right there it's all the way the pixels are arranged sometimes with a pattern dither there you can see it's very much kind of like a counted cross stitch kind of thing with a diffusion together it's all over the place and breaks it up and then a noise dither does it slightly different but gifts not for an image out. So that's what it looks like with the j peg and I know j pegs are going to go ahead and compress my file but well png twenty four compressed my file and it won't but it also creates a very large file it's going to create the largest file out of everything so what I go through and saving images of png twenty four no there's no distinct advantage the reason wide savings of png twenty four is because I would specifically want transparency or translucency for what I'm doing so with this largest file size slow is download right there with no distinct time savings whatsoever so images jay pegs are still gonna win graphics we're going to go with gifts or png twenty four's so that's what we have now as we go through what happens if we have something like this? I have an image and then I decided to put some type on my image and there's some type of a go select all that change the colors so we can see it something that's going to be deliciously awful and we're going to read with a devlin in boston a drop shadow around it here we go got some type and that looks great I think that nice and big font right there ultra cool wonderful thing sure select all the type yeah, that looks pretty hideous there it was going and dark in that up that there we go type on there that looks great we need definitely need an outer glow around the whole thing in order to show that. Okay, let's see how much we have because of course don't change the color of the type if it's hideous at effects to it absolutely how about a bubble in in boss to boston at bad boy? Oh yeah way yes you want drop shadow you gotta drop shadow yes drop shadow ok big drop shadow here way d'oh change the direction of our light delicious stroke because it's not bad enough you stroke of course meaning a complimentary color here. Yeah. Mmm yeah so that's great. I did learn something from my other class turning was not one of them air we go much better so now I'm caught between a rock and a hard place not a good place to be how do I rent or something like this? Does it become a png? Because it's got type? Does it become a gift? Has become a j peg has become a hybrid don't just saved his photo shop and try to attach it html stencil spray painted I don't know what to do yeah start all over him so now I've got this I want to go in and I want to be able to take my type and I want to be able to render my type correctly because I know that if I save things a j peg it's going to look terrible but if I go in and I save things he's as a gift it's going to go ahead and do all weird stuff to my image so I'm going to go in and if I choose safer the web gonna look at my different options that I have here and so I look at that and there's a j peg on dh I said it really low and my type just looks terrible, especially if they've really thin type it'll have all this, you know, toe jam all over the edges there and you can see all that stuff, I mean, kind of stuff that you can trip on, but if I go in, they say this whole thing is a gift then and I look at my image here, then I really compromise the gift to go ahead and save the type now I'm stuck in neither of them is going to look good, so what I do well, what we're going to do here is I'm actually going to go in, and I'm going to slice this image so that I can actually save certain portions as a gift as a j peg so they can render these things as best I can and have the best of both worlds now slicing it still exists, but you're going to have to use it every once in a while, not very common at all. So what I want to do is I want to go in, and I want to slice this all up here and of course, there's my slice tool right there, where is my slice tool? I haven't used slicing and quite sometimes lies tool here we go always helps us right now where they are and so I don't actually break up the entire image here I'm just going to take my slice tool and I'm going to just draw over those areas like so and I'm going to break this up and basically define these areas you can see those guides I want to make sure I do it in block so that everything is kind of like neatly put together because each one of these slices here is going to be an actual image that's put together in the html and if you ever get thes and I know people will in photo shopped there like you know when I started up sometimes I see those little things right here and it's like what is that? It must have clicked on something I can't get rid of them yeah I'm going to the view menu oh and you can hide your extras those air your extras it's one of many extras but if you ever get that you see those things people like I've been waiting years you know it comes up there yeah that's just previewing as a slice now if I go in and I choose save for the web those slices will come up and I can actually see what I'm doing and all I do is I simply click on that particular slice area and I'm then going to render that based on what type of image that I have content, so I've got my image so that's going to be a j peg, so I'm going to actually make this at one hundred percent, so I can see, and there it is, here's, my hand tool to move that down, I'm going to do my jay peg here, and I'm gonna just the quality until I think the quality looks decent, great, and so there's, my j peg portion of that slice, I'm going to select my type, and I can't render that as a j peg that looks terrible so that I'm going to go in, and I'm going to render as a gift, but if I rendered a too low of a number of colors here, I get this kind of crunchy background, so I want to be able to render that well enough that it's going to pretty much pick up those colors so I can see those colors good enough between there and not have too few colors because you're going to have a full range of colors where you're rendering a jpeg and only two hundred fifty six maximum when you render as a gift, so I'm just going to go, and I'm gonna render that up to fifty six, so that's going to give me the most and I'm gonna zoom back out again, saying with this one, this one is going to be a gift as well. This one is going to be a j peg, and because I've used this setting before on this image, it keeps that setting, and I just click on everyone and make sure those settings are done. And now I now how this rendered as both a gift and a j peg where I need them to be click, save and hear it knows that it's like, ok, so you're slicing this all out here? Do I just output this kind of like puzzle pieces? And you get to figure out how to put it together? Sure, but it doesn't do very good, because putting a puzzle together with no box top you can see what's going on is a bit difficult. So what I'm going to do is when I click my saved it automatically were reverted to writing the html and having my images together so I don't even have to write the html it already did that for me, so I'm gonna click, save and writes the html, and now I'm gonna bump over to buy browser, and I've got my images right here, there is everything put together. There it is, there's, about all my images put together a swell and there's my html file. Okay, so really each one of these is its own separate image, broken apart right here, each and everyone and I can see that gifts, j pegs everything. And now when I opened up by html file it's going to go, and this is how it's going to look like in my web browser. You can see but that's an image that's that one's right there, that one's right there, and it all looks really good. So I rendered the images as a j peg. Anything is going to be continuous tone looks good, I was able to adjust it, and I was still able to keep my type lookingood graphically nice. And so whenever you're dealing with images with type or graphics that air intertwining into each other, this is how you're going to break it apart for safer web and what's great is that those slices stay with the file. So with this, I'm going to say, this is a photo shop file, so I have the editing capabilities later, and I'm then going to take this, and when I say that all my slices are already there, so when I open it up again, if I want to edit anything, I certainly can I can also go into my slice select tool and I can select each slice separately here and I can just right click and I can delete a slice if I want to or make another slice or slice other things here and when they click on this there we go I can just delete those slices and it just keeps up so that if I now rendered this whole thing is a j bigger gift, it no longer breaks up into multiple pieces. The one right here just simply means it's one whole image ok, so if you see that again, I'll turn that off or you're going to the extras here turn that off see a little slice disappears it's all because you've clicked on your slice tool the second you click on your slice tool or click on your image and you show your extras there that comes up that's all by clicking on the slice tool I know people there in the chat room or like I knew it I knew there was a way that's the way to do it so now we can take logo's and we can very easily take the logo we can add any type of effect that we want to make it transparent go in and take this file and be able to get any drop shadows and save it with the drop shadow is a p and g twenty four weaken don't say what's a j peg and say it is a gift, but we run into that crispy crunch of the transparency edge and here's one thing that's completely outside the realm of what were ever thought we're going to talk about here, and I want to show you this really cool feature. So this really cool feature a lot of times I'll get graphics that have solid white backgrounds, and I need them to have a non white background, and here I'm not going to use my magic one tool or my select or my quick selection tool or anything like that. I'm not going to try to get rid of that white background at all. I'm going to make that background magically disappear. I want us to be transparent and I wanted to be transparent so I can save it with the drop shadow on my object as a p and g twenty four and make it look awesome, so pay attention closely, folks. Closer, closer. Okay, when we go in, I just turned this into a layer and I double click on my layer. We get this layer style and people always call this up in there like, whoa, I don't need this and I click cancel here is the trick, the best trick effort over this hour anyway I want to get rid of this white background. Somebody's given me this logo. I don't have the native logo. I need to get rid of that white background, so I'm going to use the blend if command makes no sense whatsoever. I don't understand why it's named this way. All I know is it works blended what? Who cares? Here's, how it's going to do it? White background. So I'm going to go ahead and I'm gonna blend this layer and I would take my highlight here and I'm going to slide it off ever so slightly and all of a sudden what's that my checkerboard, transparent background? No way. But when I look at this really close, if I were to click ok here and every resume in, I would see that I also had those little edges right there. Okay, so why was able to kind of get rid of that? I now want to make those almost white pixels become not just disappear. I want tio blend them in so they're basically anti alias in so they're not solid pixels. I want them to become transparent and this is the wacky, crazy cool part. Ok? Because they're going in, they split it off white there, now anything, it was white disappears. But if I keep doing this, you can watch and you can see those edge pixels right here. You can kind of see those edge pixels disappear until I slide it too far and then everything goes away so my slide it off until I get there transparent background and then makes total sense. I know you'd all figure this out. Hold down your option key an option click to split your slider. Okay, now check this out. Pay attention to this right here as I slide this slider, I am now making those pay exel's translucent see that look at that right there, right there and I can do that and I can make those edge pixels translucent and I want to go too far because you'll see I start to make everything translucent, but now I can get those translucent. So now I have that kind of soft anti alias edge and now I have this, but I'm not done yet. Look at my layers panel right here. Okay? It shows a transparent background here, but it shows that white being here so while it is transparent, it isn't so I need to make this transparent. So got that and it's like, wow, that's looking really good, but, you know, it's funny because my actual checkerboard transparency is looking kind of funny okay, it's not transparent here on my layer, but it is here and by what I see on screen should exactly reflect my layer. So in order to go ahead and make this entire background transparent, don't ask me how this works. I'm just going to show you how it works. I'm going to create a new blank layer, okay, this layer you can see here if I go in and I go ahead and make my options extra crispy, but there you can see that my layer is showing that that background is still white because that's, how photo shop is seeing it. But I want to make this so it's all transparent when it created transparent layer, I'm not select both layers, and I'm going to merge both layers together, and if I go in and I emerged these layers together, everything we know about layers when it merged them together, we're baking them together and putting all the pixels together. This does the exact opposite by merging a blend if layer with a transparent layer and I merged them together, it makes that non transparent layer transparent. Yes, now I have a transparent layer that if I then go in and do a png twenty four, I'm gonna get those beautiful, translucent edges and I feel really good.

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