Creating the Animated Gif | Sarah Zucker | Skillshare

Creating the Animated Gif

Sarah Zucker, Screenwriter

Creating the Animated Gif

Sarah Zucker, Screenwriter

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (38m)
    • 1. Trailer

    • 2. THE GIF: What is it and Why Make Them?

    • 3. Making a Gif in Photoshop using Timeline

    • 4. Making a Gif in Photoshop using Frames

    • 5. Making a Gif in Photoshop from a Video

    • 6. Gif Styles

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


The Animated Gif is more popular and prevalent than ever, with practical applications in the tech, fashion and art worlds. Named “word of the year” by Oxford English Dictionary in 2012, the humble graphic interchange format has been part of our cultural vernacular since its debut in 1987.

This class, taught by LA-based Web Agency THE CURRENT SEA, will show you the basics of constructing different types of animated gifs in Photoshop.

Through the course of our five learning units, you will create an animated gif portfolio, which you will hone through peer and instructor feedback. 

Not only will this portfolio give you a leg up as a designer, it will help you glean the very building blocks of animation itself!


Meet Your Teacher

Teacher Profile Image

Sarah Zucker



Hello! My name is Sarah Zucker. I'm a screenwriter, filmmaker and visual artist based in Los Angeles. I'm a co-founder of The Current Sea, a design team that specializes in Animated GIF.

I am also a JEOPARDY! Champion.

Originally from Canton, OH, I earned a BA in Theater and Creative Writing for the Media from Northwestern University, and an MFA in Dramatic Writing from NYU, where I was the recipient of the Venable Herndon Award for Excellence in Graduate Screenwriting.

I served as the Program Administrator for the Writers Guild of America, East Foundation from 2009-2010, and am a professional reader for The Black List, Hollywood's premiere Film and TV script repository.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


2. THE GIF: What is it and Why Make Them?: - Hello, - I'm Sarah Zucker, - and I'm Brian Griffith, - and we're two of the co founders of The Currency, - a Web agency based in Los Angeles. - Before we begin our first lesson, - we're gonna give you a little background history. - An animated GIF. - In 1987 CompuServe released a file format called 87 A. - It allowed for 256 colors and a series of still images shown in a loop, - creating an animation. - The format was renamed GIF, - or graphics interchange format, - and the history of the Internet was forever changed. - Steve will light. - The inventor of the gift pronounced it like Jif peanut butter. - The matter is still up for debate, - though many designers thes days like to pronounce it gift with a hard G, - however, - you choose to say it is certainly all right. - The gift is enjoyed longstanding popularity as the primary means of displaying simple loop - animations on the Web. - It had a big boom in the mid nineties Geo City's era, - and it survived through the rise and fall of the dot com through widespread use on MySpace - and other early social media. - It's used continues to be widespread and relevant and has even turned into an art form of - its own, - thanks in part to platforms like Tumblr and Reddit and its applications just keep growing. - We're now seeing the use of animated GIF arts spreading like wildfire throughout the - fashion world currently enamored of Internet culture. - And it is practical applications as well. - You've seen animated Web banners and news outlets have even started using the animated GIF - to illustrate their stories. - In fact, - for some of our handouts will be using the animated GIF to help illustrate our points So - you can see it's no wonder that Gift was named Word of the Year by Oxford English - Dictionary in 2012. - The gift is arguably the defining visual form out of the millennial generation and in this - course will be teaching you. - The basics of creating the animated GIF in photo Shop will also teach you tips and tricks - for creating some of the more popular styles of gift that we see around the Web. - Once again, - I'm Brian Griffith and I'm Sarah Zucker and where the currency we'll see you in our next - lesson 3. Making a Gif in Photoshop using Timeline: - In this lesson, - Brian will be showing you how to create an animated GIF and Photoshopped using the timeline - method. - The timeline view is most useful when creating motion animation, - fading certain layers in and out, - adjusting certain layer styles and affecting the global light. - In short, - this is the best method to use. - When you're composing an animation from scratch, - we'll show you how to use frames in our next lesson. - For when you're editing a pre made gift or compiling still images into a gift. - Let's get started. - All right, - so we have our photo shop document opened. - Um, - what I have here is a 300 pixel by 200 pixel window. - You're free to use whatever size you would like. - I'm just using this just for simplicity sake. - So never Photoshopped document opened. - And today we're just gonna be talking about the timeline. - You are free to use whatever image you want, - but I'm just gonna go ahead and drag this open image. - I have already oven ice cream. - Look at that. - Beautiful. - Um, - but we want something a little, - uh, - more pleasant in the background. - I'm gonna hide that real quick, - and I'm just gonna go ahead and open up or grab my Grady int tool by hitting g. - Of course. - Make sure that you have the ingredients setting edited. - That's what I'm doing now. - All right, - They're going. - Look at that. - Isn't that just beautiful secret universe that, - however area like that just a little bit better? - All right, - so we have our Grady in background again. - You're free to use whatever kind of background you want. - Um, - And now that I have this up here, - let's bring in our friend ice cream. - That wonderful. - Okay, - so if you're using CS six, - you just saw me sort of bring up the timeline view. - Um, - it only gave you two options. - Either create a frame or timeline. - I went with timeline. - And so it brings up this view which hit space bar for playing it. - You can see the time indicator moving. - It's going. - It's going is rather long, - though, - like if we were to save this right now would be a very, - very long file. - So we're gonna go ahead and parse it down a little bit, - and we want this thing to repeat forever. - So let's go ahead and adjust that as well looped playback. - All right, - so I'm going to make it no longer than this year. - 20 F 20 frames, - if you will. - So you noticed in the timeline view, - the two layers that we have aptly named ice cream and then layer to which go ahead and - rename background pretty easily, - um are are shown here. - They're too little arrows by the titles which just expand a few options which showcase or - hide our parameters. - Um, - each layer is gonna have three different parameters. - We have position, - capacity in style. - Position is going to change the location of the image or layer that you're adjusting. - Capacity is going to be how much you can see it, - and style is going to edit a variety of different things. - So the first thing we're going to do is just do something very, - very simple. - We want our ice cream to move across from this area over to this side. - So the first thing that we do for that we see this little, - uh, - this little stopwatch thing right here. - And, - um, - we're just gonna go ahead and position are sure we have our ice cream later selected, - and we're gonna go ahead and position are ice cream exactly where we want it. - I'm going to have it pretty much where it was. - Maybe slightly down, - over like that. - With my ice cream in place, - I click this that locks that key frame into place, - and that's going to lock in the position of the layer, - that editing in this case of the ice cream. - So whenever it hits here, - the ice cream is going to be so we'll see this illustrate a little bit easier if I move - this indicator when he wanted to move across the new one to back pretty seamlessly. - So I am going to about the middle, - which is around 10 F, - give or take, - and then from there, - I'm going to actually make physical adjustment. - If you hold down shift as you move, - it's going to lock the X and Y axes, - so you're not going to have anything float off. - So hold down shift while you're clicking, - drag over the ice cream over to this side. - Let go and you'll notice that it made a little ding right here, - made a key frame point right there. - So if we move the time indicator back, - you saw right there, - moved it moves, - it moves. - But that looks kind of weird, - right? - So we want to go ahead and add another point of motion because we want to be pretty - seamless. - We wanted to move back and forth. - So the simplest way to do that is just move it to the end. - Holding shift, - click again. - We go ahead and adjust this back to just about where Waas Maybe just a little bit further, - Okay? - And then So we have space bar to let it go. - It's moved back and forth, - back and forth, - back and forth, - back and forth. - Look at that nice, - seamless motion. - And let's say you want to move it to other places you can. - You can do that as well. - This is just again a very simple, - basic way to showcase how to edit the position. - So let's say we wanted Teoh have this beautiful ice cream cone fade in and out as well. - So we're gonna go ahead and adjust the opacity. - I'm of a little bit quicker, - since you probably understand what interface looks like a bit. - So we wanted at, - um, - let's go ahead and make it. - Let's adjust this layer and make the opacity for the ice cream. - Let's have it at about. - I'm gonna put mine at about 5% so you can still kind of see it. - Maybe we'll bump it up to about seven or 10. - Yeah, - bump it up to 10. - So that's where it's going to start. - Go ahead and our starting point. - Let's move this. - Let's have it. - Let's have it fade in. - By the time it gets over to the right hand side of our screen, - sort of lining up with their position, - we'll go ahead and just the opacity. - And since we have already the A pass ity highlighted, - we have already told Photoshopped that we're working with this by adding the key frame as - soon as I adjust this up to 100%. - It makes a key frame right there, - too. - They're just the A passage again. - 10. - But we hit play. - It's in and out. - And and and and and now let's go ahead and, - uh, - mess around with this style. - So there are many, - many options to do with this stuff, - and this for style in particular, - all you have to do is go to layer go to layer style, - and then you have all of these options. - You can see this. - See this more laid out, - and let's give Let's give this guy a nice drop shadow because everyone likes a drop shadow - . - So let's go ahead and make it. - Ah, - a nice contrast in color. - We have some. - We have cool colors, - kind of a warm PCI. - Let's go with, - like, - a very bright, - vibrant lime green, - because that's gonna be that's going so you can barely see it. - That's why I left the capacity at 10% so that as we're adjusting this, - we can see a little bit, - Um, - and for exaggeration, - you probably want to do something a little more subtle, - depending on what you're doing. - But, - um, - let's go ahead and make this really bright, - really big, - Really bold seconds. - Kind of see the glory there awful hit. - Okay, - a lot of key frame locking that into place. - We'll move our indicator over to here, - and you can see that bright, - beautiful glow. - So we hit play and it is going pretty fast. - You'll notice that is going pretty fast. - Um, - don't worry about that as we get when we save it. - It actually will get changed a bit. - Um, - because as it gets converted into gift file format, - it will actually slow down quite a bit. - All right, - so the last thing that we're going to effect is gonna be the global light. - If you don't see it and see a six to go over to this old guy, - go over to cover, - to show and go down to global light tracked go ahead and click that they're that happy - little guys right there. - So let's go ahead and add are key frame here will keep the global I track words at. - And as it comes in, - let's just go a little crazy with this global light, - shall we to go to layer style, - go down to global light That's gonna bring up this little dialogue. - So right now it's a 120 degrees, - so let's change that a little bit. - And as we move it, - you'll see that our drop shadow also moves. - So let's move fat over to here, - Okay? - Now, - this makes a key frame. - No, - just go ahead. - We'll keep on doing this until I personally want something toe rotate around. - So I'm just gonna go ahead and make all these little tiny adjustments. - It's just to show you what you can do. - We're certainly not saying that you have to adjust all for these parameters. - Chances are, - you know, - given a project you might only play with one for or maybe bits and pieces of several at the - same time. - But go ahead and try to use all four. - It doesn't have to be the most beautiful thing in the world. - I'm sure it will be wonderful, - but it's going to give you a a good a good sense of how to use this program, - in particular, - how to use it to create animated GIFs. - If your hip space farm play, - we have a glowing thing that subtly moves around our ice cream account, - and now we want to save it. - So the easiest way to do that is, - um, - and the only way. - Actually, - if you're saving an animated GIF is to save for Web and devices going to go to file safer - Web and this brings up our save for Web dialogue s, - it's gonna have the image size again if you have anything super big. - If the if it's anything in the thousands resize it instantly. - If anything is over 800 I would also suggest re sizing it to something smaller. - This sometimes will default toe once the animation and looping options we want toe klik - that drop down one. - Make that forever. - Because otherwise is just gonna loop one, - so look kind of weird. - Um, - there are a couple other parameters here that you don't really have to worry about. - Um, - some of this stuff eyes a little bit more advanced. - If this happens to be up, - I would bring that down to zero. - The lawsuit is gonna make it look more pixelated. - Or or not sometimes toe cool effect. - Um, - so we have everything set up pretty, - uh, - pretty perfectly, - just to test it. - We have a going forever right here that's going to show all of your different frames. - Let's go ahead and play to see what it looks like. - You notice it's quite a bit slower than what it was in the photo shop program, - which is good. - All right, - so that looks that looks all well and good. - Um, - just to give you a little comparison, - if you wanted to mess around with this at all it really distorts it And, - uh, - you know, - just sort of. - I think it makes it look kind of cool. - But many will disagree, - so you'll also notice that makes the final size a little bit small. - So if for whatever reason, - that is beneficial to you. - Great. - Um, - however, - we're gonna go ahead and keep that lawsuit down to zero. - It's still pretty small file size, - getting looking at that. - Great. - So let's go ahead and save our beautiful ice cream cone. - You say that on your desktop. - All right, - there's your timeline, - and that's how you do it, - folks. - Your project step for this lesson is to create an animated GIF, - using all three of the parameters recovered as well as affecting the global lighting, - you'll create a gift where there's an image object or shape moving across the canvas - position, - fading in and out, - opacity, - changing style style and also including a shift in the global lighting. - Please refer to the visual walk through for complete instructions. - We'll see you in our next lesson 4. Making a Gif in Photoshop using Frames: - In this lesson, - Brian will be showing you how to create an animated GIF and Photoshopped using the frames - Method Frames method is best used for editing a pre made gift or compiling still images - into a gift. - If you'd like to know how to create an animated GIF from scratch, - please refer back to our lesson on timeline animation. - Let's get started. - We have our open Photoshopped document again. - If you want to go ahead and do a similar similar sized document as you had in the past, - I'm again going to do a 300 pixel by 200 pixel photo shop doc. - We should already have our animation frame opened up here. - If that is not showing up for CS six, - you go to you just get a window and then timeline, - and that should pop up. - If using CS five, - it'll be window and animation. - So we have our document here. - Let's go ahead and changes from timeline to frame animation Liquori All right, - and you'll notice that they went ahead and changed it just a little bit. - So for this project, - we want to just do a simple 10 frame animation, - so the first thing we'll do is we will go ahead and add 10 frames just to give us a - framework to work with. - If you hit this little guy right here, - it will add a new Frank. - So just go ahead and keep hitting that until you get to 10 and we'll go ahead and leave it - a 10. - Um, - go ahead and change quickly. - It goes, - as always, - it's best to start in the background and work your way front. - So we're gonna go ahead and make a nice little background. - I'm going to use the same colors I use in the last one, - and I'm just going to have I'm gonna have ingredient yet again, - and I'm just gonna have it move ever so slightly from the right to the left. - Eventually, - it's going to turn from a nice peach to a nice fuchsia. - So we have this peach and it's going into fuchsia. - So when the animating frames, - you want to go ahead and actually mess around with this visibility, - turning it on and off for each individual frame. - So that means that we're gonna have to make nine additional background layers that change - ever so slightly. - Um, - so we have one. - We need nine more. - 12345678 And so for the 1st 1 we have our background, - which is background. - It's already showing Let's go ahead and have his peach move across the screen a little bit - . - So we highlight frame number two. - We'll turn the visibility of our first layer off. - You'll notice it's only affecting the second grab our radiant tool again. - Highlight the layer that we're going to have show in the second frame. - And we're going to add another greedy in, - which is slightly ever so slightly different from the 1st 1 you'll notice you can see Uh, - a B. - It is the first. - There's the second, - so we're just gonna keep doing that for each and every one of these friends. - All right, - so we have our grading background layer. - However, - that is not enough to run a gift alone. - So let's go ahead and add our favorite, - our favorite trope, - which is ice cream. - I have. - I have an image off here off the screen. - You can add whatever you like. - I would suggest using something that has a transparent background very similar to my ice - cream um so I'm gonna go ahead and drag that into here. - Oh, - look, - we have a beautiful ice cream object at our disposal. - So as you start animating the foreground and adding more and more things, - one thing to make sure that you have checked is, - uh, - when you bring in your thing, - make sure you have the first thing the first key frame already highlighted. - And make sure your propagate frame one is checked. - Otherwise the changes aren't gonna be made in each frame, - and it's just gonna be really, - really frustrating. - So that's going to save you a bunch of headache. - So what I'm going to suggest and what I'm going to do for this? - Um, - because I'm actually going to build up my animation in the first frame and then sort of - assemble it as I go. - I'll show you what I mean. - Right, - right, - Right now. - So what I want my ice cream to do is I want to have four different ice creams. - I want them to all layer on top of each other. - And so I'm just gonna go ahead and make four different just off the bat, - I'm gonna make four different ice creams. - So you go ahead, - duplicate layer, - you right click on this and you can just go ahead and make many copies as you like if he'd - command J while highlighting the later That's a shortcut. - All right. - Nice toxic neon green ice cream cone de licious in our final ice cream cone. - It's going to just sort of pop up out of here. - So I did this all on frame one simply to save me the headache of having to address - something in an individual frame. - So what I'm going to do now says amount Frame one I wanted to animate. - I'm gonna hide the three additional ice cream comes. - I go to layer to showcase the 2nd 1 layer three. - Should the 2nd 3rd 1 layer four. - Second, - third, - fourth the fifth. - I kind of wanted to just sort of hang out like that. - I am going to have no ice cream cones and this one going all the ice cream cones in this - one. - None in this one on all the ice cream cones in this one I left. - These blank is one of the objectives I want you guys to Hit is toe. - Add some text so we'll do that in a second. - Um, - but first, - let's see what our animation looks like. - All right, - so we have ice cream piling on top. - We have a Grady in, - moving slightly from peach to purple, - and, - uh, - the ice creams flash. - Kinda cool. - Kinda cool. - I'm gonna go ahead and make a new layer. - I'll add some text. - You can choose whatever fund you'd like. - I happen to be choosing this melty font to go along with our ice cream, - of course. - And let's have it contrast this peach. - Nice fuchsia. - We have a nice will add for buying some ice cream. - You'll notice when I added this on layers. - Six. - It just assumed it's going to be on all of them. - This is one of the downsides of it. - It can be kind of frustrating, - but, - um, - no worries. - Just go ahead and go back to the first thing. - Click that off and it removes it from all of them. - Huge timesaver. - That's why we had propagate frame. - One clicked. - That's why we make sure we do everything on the first frame because that typically is going - to make our jobs a little bit easier if something's gonna go back to my sixth frame. - Buy ice cream for that eighth frame by ice cream time frame, - also by the screen. - Let's take a look into it we got. - So we have a simple, - pretty awesome advertisement for ice cream that is fit for any sort of Web application. - It looks really good, - I think. - Ah, - and our last step. - As always, - go to file safer Web. - The only way you can save a gift in photo shop and make sure looping is forever. - Play it real quick. - Looks great. - And there you have it. - We have our ice cream gift, - all ready to go. - That's how you can mate with frames. - Your project step for this lesson is to create a custom 10 frame animation where the - background changes a foreground, - images manipulated and text appears by using multiple layers and the visibility toggle, - he will create the effect of change. - Please refer to our visual walk through in the Project Guide for complete instructions. - We'll see you in our next lesson 5. Making a Gif in Photoshop from a Video: - in this lesson, - Sarah is going to be showing you how to create an animated GIF from a video file using the - import video function in photo Shop, - I'll talk about ways of optimizing the gift for the Web and making the most out of your - source video. - Let's get started. - Now that we have Photoshopped open, - we're going to make an animated GIF from a video, - which is actually one of the simpler functions in photo shop. - In order to make an animated GIF from a video, - we goto file import and we import video frames toe layers. - Once we go import video frames, - toe layers, - we get our our finder dialogue here. - I know that I have my video here in a folder I've called videos to play with, - and I'm going to open it up just like so. - Now that we have our video in here, - you can kind of run through it and see, - just like magic, - uh, - one of our one of our skill share videos right here. - The key to importing a video into photo shop and making an animated GIF is isolating - movements. - As you can see, - we have this whole video on I want to pull out an interesting little snippet that we can - turn into a GIF. - I want to use my my interesting little peanut butter gift jar here. - So I'm gonna find the beginning of this piece I see right here by scrolling through with my - little arrow here that this is where I want to start. - So we have these little bookmarks that allow us to select a piece of our video. - So I'm gonna move this opening bookmark to write about there and then if you want, - you compress play and it's gonna play right through. - You can hear our lovely voices there as we're as we're talking as it plays. - So that that is helpful because sometimes you use audio cues in the video for where things - begin and end So I can see that right about here is gonna be the end. - So I'm gonna take my end marker, - and I'm gonna put it right there. - If you If, - for example, - you've already chosen the beginning and end and you want the entire video to be your gift, - you can select from beginning to end. - I'm doing a selected range only because I know I pulled in a much larger video. - Another piece that's important is limiting the frames. - This is something you're kind of gonna have to eyeball. - It really depends on how big a chunk of video you're bringing in. - I know that this is This is quite a lengthy little little snippet here on this might end up - being 70 to 80 frames if I don't limit the frame number. - So I don't mind if this is a little chunky. - I'm gonna try limiting this toe every three frames again. - This is something you just need to experiment with. - Sometimes you're going to keep importing videos in over and over and over again just to - find that sweet spot of how many frames you want to limit it to. - Another thing to take note of, - I automatically have make frame animation checked. - If you uncheck this, - it's gonna import your video as a timeline. - Now, - depending on what you're more comfortable with, - the timeline could be very useful If you want to do some actual video editing to the video - itself. - I know that I am only going to be editing this on a frame by frame basis. - So I leave. - Make frame animation checked. - So now I'm gonna say, - OK, - now, - as you can see, - it has brought that little section in. - And if we scroll over here, - we see it's it's 31 on these last few at the end are actually very similar. - The last frame is exactly the same as the first frame. - So again, - using your discretion, - you compare it down a little bit based on what you want the looping to be. - So I'm gonna delete 31. - And as you can see, - I use the little delete button down there and even these here at the beginning. - I don't need these to be These are all exactly the same. - So I'm gonna delete all but one of them. - And I selected those all by clicking and holding shift. - And then if I hit, - delete it, - deletes them. - So if I do want number one to kind of linger there longer similar to what we showed you in - our frames animation video, - this is where you set the frame delay. - So let's say I want this one to be one second long and then I'm going to say that all of - these other ones should be only 0.15 seconds. - So now if we just play this through, - you can see it opens with the 1st 1 and then it goes to these other ones. - I actually might set this delay a little longer. - Now that I look at it, - I want that one Teoh toe. - Hold up there and be there for a little a little while before the other things come in. - It has its five seconds, - and then these others pop up. - It's gift, - not Jif. - As you can see, - each of these frames correlates to a different layer that's visible. - As I move along here. - You can see the visibility toggle lights up for a different a different layer. - Since this is video, - we tend to want to make edits that applied to everything. - So the way to do that is select all of these again by holding shift, - and then I'm also going to select all my layers, - and this will just ensure that anything I apply is going to be applied to. - All of these are going to go up to my layer menu. - I'm gonna say new adjustment layer. - This is a little different if you're used to working with Photoshopped, - you often just go to the image and the adjustments panel. - But as you can see, - adjustments is great out. - We work in layers when we're working with animations. - So if we go to new adjustment layer, - uh, - actually, - let's say Let's just adjust the levels Let's say we want it. - We want to get as down and dirty as possible and we want to bring out some some shadows - here. - I might take my my mid range Hughes and bring those down a little bit, - and then maybe I'll make my black a little darker there and then bring my white and make it - really pop like that, - using my my levels adjustment. - As you can see, - that adjustment layer appeared the very top of my layers dialog. - If for some reason this doesn't appear there, - if it appears down there, - um, - you'll see it's only going to apply to the layers below it on. - We wanted to apply toe every layer in the animation, - so it's just a simple is grabbing it and moving it to the top. - What is more important is making sure you have all of your frames selected when you do that - so that that is the same for every frame. - So now when we play through it, - we can see it holds on this for about five seconds, - and then it goes through to these other ones. - And now that I've adjusted my levels, - they pop a little bit more. - It's really a simple Is that just some tips and tricks for optimizing for Web? - I have this right here in my sweet spot, - somewhere between 20 and 30 frames. - The rule with gifts is often the fewer frames You could make it, - the easier the file will be toe load. - I always find that between 20 and 30 frames is a good, - manageable file size. - Anything bigger than that, - and you're gonna have a hard time making it a decent size. - Let's go to our file, - uh, - save for Web dialogue and, - um, - in this now, - this now is where we can see this is are already over two megabytes. - So that's pretty big. - And part of the reason why is I didn't resize this. - This was a high def videos. - When you bring these things in there going to be at their full size, - I only want this to be 500 pixels wide. - So as we can see when we make it go down to 500 pixels, - it's now much, - much smaller size. - I do not need this to be a transparent GIF. - It's not going to. - I don't want it to show through on anything on. - There is no transparency in this video. - It defaults to 256 colors. - You can play around with that again, - I say. - Anything under one megabyte is good to aim for. - It's always good to play through it just to make sure it's exactly how you want it. - And so, - yes, - there I have my my gift jar and then these others pop up, - Um, - and so that looks good to me. - So I'm gonna save it, - and it will go right in here. - Gift, - not Jif dot gif. - There we go. - Save that is how you create an animated GIF from a video in photo shop, - and that's how you make a gift from a video. - Your project step for this lesson is to create an animated GIF from a source video of your - choosing. - Try to keep the gift between 20 and 30 frames for Web optimization, - you can refer to the visual walk through on the Project Guide for complete instructions. - We'll see you in our next lesson. - Will will show you different types of animated GIFs styles. 6. Gif Styles: - in this lesson, - we're going to talk about some of the more popular styles of gift we see around the Web - today. - Keep in mind the Internet is still the wild, - Wild West, - and some of these more standardized than others in some cases, - these air terms that we've come up with to help classify this ever expanding art form, - take a look at a resource list in the Project Guide to start experimenting with these - styles. - The first gift style is one I personally work a lot with the glitch gift glitch takes - encoding errors, - artifacts and other digital bugs and elevates them to the level of art form. - His beauty in the broken. - The fun of experimenting with glitch is playing with all of the wrong ways to create - digital art. - It's a true transitional art form. - It highlights the divide between the analog era of the past and the digital era of the - future. - Another style is the three d or stereoscopic GIF thes gifts, - or sometimes called wiggle gifts due to the wiggling motion they use to convey their three - D effect. - These gifts are created with analog film using three D cameras such as the name Slow or - Nishioka. - These cameras use a principle called parallax, - which is the change in the position of an object seen in two different lines of sight. - It's the same way are two eyeballs allow us to see in three dimensions thes gifts used to - or sometimes four still images with objects and slightly different positions shown in rapid - succession to create a three dimensional effect. - Their iPhone APs that achieve the same goal. - Please refer to our resource list if you want to play around them. - The next style of gift is the chroma GIF, - a term we've come up with for any gift that cycles through the color wheel. - There are several formulas for the chroma gift, - but the simplest one is to adjust the hue slightly for each frame of the animation. - The chroma gift is one of the signature styles of the currency, - and we encourage you to experiment and think outside the box and use every color of the - rainbow in your gift making for a truly trippy effect. - Animated GIF taxes A true throw back to the nineties still easily employed today. - While you can create a stunning tech start in photo shop there are any number of free - online animated text generators that could be a lot of fun to play with. - The early Internet look has made a true comebacks and more geo cities. - You can make it, - the more it will resonate with people. - Last but not least, - we have the cinema graph, - a gift style that took the Internet by storm in 2011. - Created by a photographer is Jamie Beck and Kevin Berg. - The cinema graft takes minor, - repetitive motions and uses the gift format to animate them in an otherwise still - photograph. - This style had a huge hand and reinventing the gift as we know it, - and it's often very elegant in its application there now, - even iPhone app, - such as Can a Topic and cinema Graham to create cinema Graphs We've included a walk through - for creating cinema graphs and photo shop on the project guide. - If you're interested, - that's all for us folks. - Please post your gifts in the Project Gallery on the skill share. - Make sure to give feedback to your peers and we'll do the same. - Thanks for taking our class. - We'll see you on the Web