Creating Animated GIF from Video in Photoshop®


How to Create an Animated GIF in Photoshop®


Lesson Info

Creating Animated GIF from Video in Photoshop®

Now I want to create those awesome little gifts that we see on there that are animated you know and you do those atlanta mated gifts where people see reason why they do that is because videos take up a lot of band with animated gifs and everything you want so I'm going to go and I'm going to take my gifts and I am going to let's get back tio go ahead I just want to go back to my finder right here and I've got this great little video right here of course of I double click on this video that's going to launch flash and I can play the whole thing but I can't play flash anymore, okay, so many things don't support flash so it's like great what good does that do you know I could open flash try to learn flash and get something about that no way I'm going to open up this video right in photo shop take a few seconds here comes the video reading video format what's gonna happen what's gonna happen? I hope something good. Okay, so there it is and all of a sudden my timeline pops up now my timelin...

e here is basically my video timeline did you tell that total shop can do video as well? Now you d'oh this isn't a video class, we're just going to do an animated gif so I was able to open up any type of video, take video from your cell phone, just save it and then open it up in photo shop and there's my video timeline now I'm not going to any eddie a video editing here, it could go in, they could press play too kind to see what it looks like there it is great, you know who knows what it is? Yeah, but it sure looks cool and I want to turn this into a gift because, you know, I don't know this maybe ten megabytes and I can't upload it because trying to watch it on my iphone when I'm driving and drinking coffee can't do it, you know? I need something it downloads a lot faster, so I'm going to I'm going to take this and I'm going to save this as an animated gif only way I could go through and I'm is going to break out these video frames and it's going to save it as an animated gif, so file save for web and of course, having is a j peg doesn't do any good because I'm gonna pay attention to buy animation right down here on leeway and get animation when they have a video is doing if right there he got a weight because it's got a process the videos ago possum okay, so there's my gift and of course it still breaks it down into index colors and so if I break it down to two colors here it'll really save the quality of the video and now it's all green um could do this because really what it's doing is it's just putting a siri's of flat images or static images together and of course as they change it appears that we have movement let's say it was a lot of time so with this I'm just going to render it with the full number of colors and the reason why this takes so long and between changes here is it has to go in and has to render every frame so it's not just like we go in and sweet instant response here now I can actually go in here and I can render this in different sizes okay because how do you render a video to fit a certain size you know somebody says I needed you know, four hundred pixels it's like ok children were taken a ruler out measured your video you know never well here I can go in and I can actually control the size by the way you can do this too with a gift for jay peg as well but if I need to have in a particular size it's always going to be expressed in the number of pixels so I can set my looping options right there and then if I want to see I can actually press play and I can see it go it's going to stutter at first here because it's processing everything as we go but when we save it it's gonna work a whole lot better than this ok and you can see it's three hundred frames and it's basically working through every single frame and rendering that okay this is the slow process this is not indicative of how it's actually going to be when you load it up to your website so give it time little patients in the meantime do we have any questions? Sure, I would actually like to ask a couple from a little bit earlier in the segment l killian says when you were kind of slicing the image up tio render individual sexual section how would this work in mobile viewing though since their technique or separate images technically where they show up one on top of each other no it's when you're doing mobile view and you're actually looking at everything with html anyway so it's going to put it all together it actually creates a table and puts it all together so I know what you see on mobile is just formatted for mobile that's all right with you great on then we've got a couple questions about pings which people seem to be less familiar with casey photo one what does interlaced do or mean in a p and g oh so interlaced png we'll get to that but it interlaced png is just like a progressive j peg where it loads and loads more on it loads more png is load so fast there's no need for progressive but that's what it is yeah and then one other it just is a png supported on all web browsers that universal format today it isthe years ago it wasn't but now png is pretty much all over the place cool okay so I got my three hundred frames here I have no idea how many frames they're worried just pulled this so I'm going to go ahead and I'm going to click save and it's going to go ahead and give me my html is well settled right t html and you just double click on this and it'll open up in my web browser and so I click save it's going to run through save the everything right there and they're going to jump over to my web browser open this up and find out where my safer web is. Check this out right here there is my orange strokes and there is my animated gif right there just like that looks like a video it was a flash based video certainly looks like that but now which has been converted into multiple frames that are just literally playing one right after another after another there is my gift right there now another cool thing. If you ever want to test an animated gif or you want to see how any of this stuff works, one of the things we can do is actually just drag anyone of your files into accounts. A lot of flash here are not going to be using that. You can always drag any of your files directly into an open browser. Okay. Any gift? Any j peg? Any html file? I don't have to go through the file and then open it here. So if I wanted to just see this animated gif here without anything attached to it, I'm not having to write the html file. I could just go in here and I could find my animated gif right here and there is my give file right there. Just drag it right under the browser and it just simply plays in the browser. It does not require you to write in html file. Here's, my j peg, if I take this and just drag it into my browser, it will go ahead and do that. Um, you know anything else? So here is my png right there. Film. There it is just like that. You make it loop yes, you can make it loop and looping comes in photo shop and so when we were in the safe for the web here and we did that, we can loop it once or weaken loop it forever, right down there at the bottom there's our looping options. And we can also do other so we can loop it three times if we want tio yeah, yeah, so one, two, three, seven times or just go forever and it continues to play and play and play parks pretty easy way to put the html into, like, dreamweaver, muse or something like that. Any html file you can open up directly in those applications. It's just through? Absolutely. If it is about html or not htm briefing or some fix on the end there you just open up their program, click open and you're going to get that in there. So this has taken an existing video. You shoot video with your cell phone, just save it, drag it on your photo shop icon or just going to the file menu. Choose open, open your video, your timeline comes up, you can press play to see what it is. If you know nothing else about video, just watch it play ok? We're not going to get into video editing here, but that's how you take an existing video and turn it into an animated gif

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