GIFs for Logos, Type, & Icons


How to Create an Animated GIF in Photoshop®


Lesson Info

GIFs for Logos, Type, & Icons

So I've got a whole bunch of images here I've got some ones that I brought in from illustrator I've got pictures that were taken and I've also got animations too because we can do animated ifs as well so I would start off with going through and actually saving particular images here as in if now I opened these up is j pegs and I also have a png here is well one thing I'm not going to do want to go in and I save this for the web it's just go under my final menu and she was saved or save as and then run down my list of items here and says ok, there it is and there is my if now that's not really right that's where it is but we do have a name for matt by the way did you know that yes, so we're going to say this is a compuserve if well when I say this and I go ahead and I choose to save as an ef right here I click ok and then I get this dialogue box which I know nothing about local selective color, adaptive whatever you know forced black and white transparency two hundred fifty six colors w...

hat does this mean? How do I know how big is this going to be? How fast is it going to load and what's for dinner doesn't tell you anything so what I want to do is I want to spend a little bit of time on how we're actually going to save things for the web and what's going to be the best format for our best picture or image or logo, or for type, and also how we create animations. So I'm never going to go and take a file that I've created for the web, and just simply do is save as in a particular format, since the gift is always going to end up on the web or some type of elektronik display, I want to go, and I want to choose safer web and safer. Webb is going tio allow me to open up my image is open up my logos, type whatever and be able to walk through and a whole lot more robust fashion all the options that I need. So if you never you say for the web, here is what we're going to do, and if you use this before, it looks very much like image ready was years and years and years ago, yes, so to start off with deal with the safer the web right here, what is going to be the best formats? Well, when we're saving for the web, this is more than just about saving as a gift, this is also saving. Everything in very different formats for the web what you say for the web I've got gif j peg png png twenty four and windows bit map so one of the difference between all of these well, what I have is gifts will you see them all the time we use them all the time we all cj pegs jay pegs work png eight p m g twenty four I don't know whatever it's for all I know is that when he saves something I'm going to put this into a format and then I'm gonna upload it because they tell me to do it this way so here's the rundown of how we're going to go through and pick what format is going to be best for the image so what? I'm dealing with an actual photograph here anything that is going to be a continuous tone photograph I want to savor the j peg and that j peg is going to allow me to keep the full range of colors and it allowed me to go ahead and compress that file so I can make it as big is necessary or small is necessary to load very quickly I don't want to get rid of the entire range of colors in here because I really want to show how nice this photograph looks online but there's a couple things that I have to dio in order to do this one anything that we display online through tablet or phone it's always going to be through a light emanating device. So it's always going to be in rgb. So we want to make sure it's in rgb and also too, when we go through and we save these files here, I also want to make sure that my image is going to be seventy two pixels french because that's the standard resolution for anything it's going to be displayed on the web or any light emanating device. Now you can go through what I can do this right here before I go through safer web or else I can do this actually in the safer web feature and it's going to take care of all this stuff for me. But it's also good to know that just offhand so that you, when you're talking about this kind of stuff, you know what you're talking about? So rg b seventy two pixels per inch that's going to be the standard for what we're going to dio. So any image that we have is going to be perfect for j peg that's great. One of the limitations of a j peg what's. I go on to the file menu and I choose save for the web. I can look at my image here but I know it's a pixel based image and its huge like a forty megabyte image right here great benefits of a j peg I can make a j peg have take up much less space on my hard drive so it's going to load very quickly here's my image I'm going to choose by j peg over here and I get to see everything that's going on with my j peg now what I pay attention to well if you've ever saved a j peg before you have a number from one to twelve in the dialog box comes up and says one to twelve and that shows you poor quality good quality excellent quality or maximum quality quality with a j peg is actually a misnomer okay quality with a j peg always gets compromised no matter what absolutely now we have other types of j peg that we can't save through safer web here but we have j peg two thousand which is a non destructive compression but j peg is actually a destructive form of compressing so when I go and I choose low quality medium high quality very higher maximum quality maximum quality isn't going to give me the best picture ever it's going to give me the maximum quality that a j peg can give me which is still going to be compressed by compressing this this is going to save space cause everything to load a whole lot faster now down here in the lower left hand corner of are safe for the web my image right now is five point seven five megabytes course ridiculously too big for my for anything that I'm going to load it's going to take one thousand sixty seven seconds if I was using in dialect modem and fifty six k ok and it's like well that was really relevant back in the day but I also want to make sure that it's going to load very quickly so I can set those parameters by clicking on the little cheese grater here and most people are going to have at least one megabit per second upload download if you know nothing about what that is just choose this it doesn't affect the quality of the image or anything. It just tells you how fast this is going to upload or download. So with five point seven five megabytes is going to take sixty seconds for me to download this right here and this is at maximum quality maximum quality, meaning that I'm going to get the best image that I can out of this jpeg compression if I set this to be very low and my quality is down a ten it compresses the file down from five and three quarters meg's two u five hundred twenty four k and now it takes six seconds people like get that's great that's exactly what I want to do I want to load it really, really really fast and have that so it loads quickly and by doing that you're going to sacrifice quality once I saved this file and close it it's gone I can't get that quality back it's completely finished so if I take this file and I set the quality all the way down to really low quality of zero right here I'm not saying what's actually going on on the screen so I'm going to do to up here but I'm going to see the difference between my original image which of course is forty megabytes because this was shot as a high res photo and now I said it to his low quality is possible so forty megabytes worth of information is now coming down to three hundred ninety one k what happened to the file? Well it basically took a grape turned into a raisin that's exactly what it does it just sucks the life force out of it but it makes it load really quickly and it's like well you know that looks totally fine. Well if I zoom in on this and I look at this you can see some some noticeable degradation between the quality of this year but not so much so I say wow that's absolutely great and then I can save my file and that's going to work but I really don't know what low, medium and high actually looks like and what's going to work a couple other things dealing with a j peg here jay pegs do not support transparency I have nothing that can be transparent and a j peg so if I ever want to lay this over something on a website I can't do it so it's always going to be a solid image and I could also do progressive back in the day when we had very low download speeds you see them come in on the screen and you see them build very slowly that's progressive ok now it's an insurance company whatever okay don't know where that came from so that just allows it to download you know, so you see it and then begins some browsers have it come into focus other browsers just kind of section it out and then war comes up so they're having it be progressive really isn't that big of a deal at all and there it is progressive down note in multiple passes right there and so I saved my j peg and I'm going to click save and I'm going to go ahead and give this a low name right there and we're going to see how this absolutely looks ok, so now I'm going to open up this one that I saved with a really low quality when you open this up and I'm going to zoom in here and I'm going to see how this looks and this doesn't look too bad, which is fine for a continuous tone image it's like great j pagan really work here's how a j peg doesn't work for you I'm going to take another one of my files here and I'm going to take a logo because of a picture is good enough for j peg, why wouldn't a logo be so I'll take my low girl file save as and you notice this logo is on a transparent background and I have a transparent background and I know in photoshopped having it being transparent background I can see things through and I don't want to save as I wanted to say for the web, I call this up and I'm going to zoom out here and I'm gonna see by file and I'm going to say this is a j peg because somebody told me to say this is a j peg because everything gets saved us a j peg because they're miraculously right? Absolutely so I'm going to zoom in here on my show you what a j peg does to the images and you'll see along my lines here we get all these little crusty bits when these crusty bits are the j peg compression so think of jpeg compression is you take a sheet of paper and you wrinkle it all up and you try to smooth the whole thing out. You can never smooth it all out needs to do that with tinfoil. You can never smooth it out completely. So you're left with those little crinkly bits and that's. What happens with the j peg? There is no smoothing it out. So when you get these large areas of color, what j peg wants to do is it wants to take all the similar colors, and it wants to put them together into very large groups. And you can see here we get what's called j peg compression lines, their groups of pixels that are very large. And when we do this to an image here and we reduce it down in size considerably, we get all these big jake bed compression lines. He wants to group as many pixels together. Is it possibly can in that same area in the same color? Because it's going to save space if all the pixels of the same color because you have different colors there it's going to take up more room? So going in and using a j peg for graphic or type is absolutely awful, and we see that and it just takes it and it completely destroys the image. Now it does the exact same thing to a photograph a cz well, it's, we just don't see it as much ok, so going in if I'm doing type a logo. A graphic. Leinart. I'm going to stay away from using a j peg.

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