How to make Animated GIFs

Hey guys, this is John with Mackins101. I already showed you how to make animated GIFs with Photoshop. Today, I'm going to be showing you how to do it with a website and with our new GIF animating app.

So, our app is called the GIF Animator. I'm going to open it up right here. Open. All right, and it's really simple to use. You can just drag your images here. I have two different sets of images; here is a globe rotating and here is some blood. They both have seven images and they're both PNGs, but it really doesn't matter what format it is.

So I'm just gonna— all you want to do is make sure that the files are in the order that you want them to be. So as you can see, it's globe one, globe two, globe three. So that's good. If you want, you can just press the arrow keys to go down and make sure that it's in the right order.

Now, this is gonna spin a little pretty quickly because the original file had a lot more pictures, but I just— for purposes of making the video be able to be in a realistic amount of time, I just lowered it to seven images. You can change the frames per second by changing— by clicking on these arrows. So I'm just going to make it two frames per second.

Actually, you should make it around 12 frames per second, but since I only have seven images, it's gonna seem to go really fast. Then I'm just going to hit export, and it'll ask me where I want to save it to. I'll just say my desktop and I'll just call it globe.

All right, and then you can have more options if you click on that. So I'm going to say globe, save. Obviously, it's going to be globe.gif, so it's just going to take a little while to load. It might look like it stopped responding; that's just because it's loading. Just be patient with it.

All right, so now as you can see, it is done, and I can open it up with preview. If I press the down arrow, you're going to see what it looks like. If I want to actually play it, I can open it up with a browser. I'll open that up with, let's say, Google Chrome.

Also, I suggest that you make your pictures really small if you use our app because our app is just a simple app, and it's not made for really high quality images. So it might take a while to load. So as you can see, here it is fully loaded, and yeah, it does spin really quickly.

But that's pretty much our little app, and it's called the GIF Animator. We're gonna have the source code, a link to the source code, and a link to the app itself in the description. I'm just gonna put Chrome, Quick Preview, and Quick GIF Animator.

Now, I'm going to be showing you a site that does this, and it's actually called gifninja.com. To create a GIF, you can do a lot of active things, actually. You can create a GIF, you can convert a video to a GIF, you can split an animated GIF, and you can resize an image.

Today, I'm just going to show you how to create a GIF image, but the site's called gifninja.com. I'll have a link to it in the description, and feel free to play around with the other things they have. So, I'm going to say create an animated GIF.

You can have up to five images. Our app lets you have more than five images, but our app also wasn't as great quality, so I'm just gonna use five images instead of all seven. All right, now you— or you can send a zip file of all your images. I should have done that, but it doesn't matter.

All right, now you can also choose the speed, and that's going to show you an example of the speed, like how fast it's going to look. Do you want to go really fast or really slow? Again, this is just the same thing: frames per second.

So I'm going to say around 2 frames per second, and then you just hit make my GIF. It's going to take a second to load, and yes, this is my GIF. Then they'll give you options; you can say yes, it's fantastic, no, it's too slow or too fast. You can change the settings also.

You see, as you can see, this image looks kind of red. The reason why is because gifninja.com doesn't really support transparency. Like, as you can see, the original image is slightly transparent. I don't know if you can see the text behind there, but yeah. That's why GIF Ninja just put red instead of that.

Anyways, this was just a quick video on how to make some GIF images. Again, you can also do it with Photoshop. I had a tutorial on that about a year ago or so.

So thank you for watching Mackins101. Subscribe for more videos and goodbye.