How to make an Animated GIF in Photoshop

hi I'm mark gala Adobe Photoshop ambassador for Australia here and I want to show you how to make an animated gif inside of Photoshop CC 2015 okay now I've already created one earlier and so I'm just going to play this and hit the play button in the timeline panel here if you can't see your timeline panel you may just need to just click on that to open it up and then I'll hit the play button and we'll see this young woman spinning okay it's actually constructed from eight still images now they were captured using a tripod and I'll just stop this and we'll close the file and I'll show you how I've made this file from scratch so we'll just close this one and now we'll come down to file and instead of coming to open we're going to come down to scripts and we're going to come across to load files into stack now we have my eight still images that I prepared okay they're going to be screen resolution images we're not going to be creating animated gifs from 24 megapixel files here so you are gonna need to gonna crop these still images down to a usable size I would suggest with a height of no more than 600 pixels here so we're gonna load files into stack I'm gonna browse to the folder that I where I prepared my still images from and so this is going to be in my jiff folder here and I'll select all of these eight images and then select open now Photoshop is going to load these into one single file now if you think that you may have bumped your tripod in the capture of these still images you can check this attempt to automatically align source images here and that will align the content so the animated gif plays smoothly okay so now we'll select okay and now we can see that we have one of the images appearing this is the top frame here now in order to create the the animated gif we're gonna have to come to the timeline panel and click on the create frame animation okay this will create our first frame automatically when it can create the the subsequent frames by coming to this flyout menu here and then choosing make frames from layers each layer will become one frame inside of this jiff animation now at the moment it's only going to play once by default so the young woman will just spin once there and then stop we can change that to three times or forever or specify a number of times that we want this young woman to spin for so we're good - were just gonna choose forever and then I'm gonna select all of the frames I'll hold down the shift key and then select on the last frame and we're going to set the timing to an or point one seconds in this instance you can't speed up or slow down your animation by choosing your own time here I want her to spin quite quickly so I'm choosing the shortest duration here nor point one seconds now if I hit the play button you'll see the young woman spins and spins and spins again okay so at the moment we haven't created the jiff animation this is just a multi-layered file here we should save our master file off as a PSD so we'll just come to file save as and then we can save our master file back into the resource file here or I could choose the desktop and I'll just pour call it my jiff file here oh my jiff - because I created one earlier so we'll just save that off okay now we're going to create an animated gif that we can actually upload to the web web browsers will happily play these animated gifs we can even attach them to emails as well so we can send little animations to our friends via mail okay so what we're going to do now is we're going to come down to file now if you're working with a previous versions such as CC 2014 or older versions you'll see us save for web here now in CC 2015 it's been stacked inside of the export menu here and it's now called save for web and brackets legacy okay so we're going to choose that option and in the options here we're going to select the GF option there now I would recommend using the maximum number of colors to get a smooth gradation we're not we working with millions of colors like we're working in with JPEG files one of the quality restrictions here is we're going to work with just 256 colors so you may see some banding or stepping in smooth areas such as sky so we definitely want to choose a dealer option here and we also a chooser and we can choose different color palettes such as perceptual or selective or adaptive I probably would stick to adaptive for now okay we can reduce the size of our animated jiff obviously very large gifs will attend to a load a little bit more slowly in web browsers before they will play okay they will play quite quickly on a desktop computer however or a laptop okay so all I need to do now is make sure also you've selected convert to srgb otherwise you may notice a shift in your colors when it's playing in a web browsers you don't really want to be working in one of the larger color spaces like Adobe RGB so just remember to convert this to srgb if needed and then I'll hit save and again I'll save this onto the desktop and hit save okay now I can let's just collapse this Photoshop panel here let's come to a web browsers such as Safari here and now we can just drag our animated gif in to our web browser and you can see that it plays very well now we can upload this and have it included on websites or we could just email them to our friends as I said so there's a quick overview in just a couple of minutes of how to create an animated gifs you

Channel: Mark Galer's Alpha Creative Skills

Views: 1,096,465

Rating: 4.8463364 out of 5

Keywords: Photography, tutorial, howto, tips, techniques, learn, GIF, Animation, Photoshop, Animated

Id: Qtar5T13dt8

Length: 6min 40sec (400 seconds)

Published: Wed Sep 16 2015