Gadgetory


All Cool Mind-blowing Gadgets You Love in One Place

How to make your own GIF in Photoshop

2018-10-11
you probably see it use gifts online every day whether it's to share your reaction of something or to spice up your Instagram or to argue online about how it's pronounced but what if there's no perfect gift out there that expresses how you're really feeling easy you just make one yourself there's a lot of different ways to make gifts now and it's actually easier than it's ever been using a YouTube video takes the least amount of effort because gif II has online tools that lets you cut out specific parts you can also use their desktop app to drag the part of the screen you want to capture and recording the clip you need to your computer but if you wanna expand past this and stand out with something more original you'll want to make your own to begin you need a basic understanding of animation a gift is nothing but a sequence of frames it's like a digital version of a flipbook if you take any gift from the internet and open it in Photoshop you can see all the individual frames it's made of this short gif is 41 frames each frame is showing one layer of the image at a time and when you put it all together it creates a tiny story we can see that it takes about 20 frames from the doc to walk up to the gate and maybe 10 frames for the doc to actually pass through but your gift doesn't need to have a lot of frames to make sense it can be as basic as 2 or 3 frames and that'd be enough to get the point across like this drawing I did of me typing away on a keyboard which is just two frames looking at frames can be helpful if you want to study motion and timing like an animation you're creating an illusion of movement through a bunch of still images put together the more frames you have in your file the smoother the motion will be and the more complex your animations can get not to mention your file size gets bigger too here's one that's made of 5 frames so let's make a gif I'm going to open up this gif in Photoshop and use it as a guide to draw a version of yourself breakdancing and I'll have a link to this gif in the description box below basically you're going to draw over this using it as a guide and it's kind of like a technique called rotoscoping in which animators draw over live-action footage now we have our gift opened up in Photoshop and you can see I have the five layers here and the animation timeline on the bottom and the layers panel is where you can see which layers will be visible in each frame so I'm going to use this as a stencil and create a new kit so I'm going to create a new layer here and adjust the opacity of the bottom layer so I can use that as a guide and I'm just gonna draw maybe like a bear over this so now that we've drawn our five layers we're gonna go back and delete the original stencils that we worked off of just to clean up now go to the timeline and set it so that each frame is showing one layer at a time so we're gonna start on the first frame and make it so that the first layer is the only layer that's visible and do the same for the second frame but we this time it's the second there that's visible and you're gonna do this for each frame in the timeline just make sure that only one layer is being shown at a time so now that we've cleaned up everything let's test this out and press play by pressing the spacebar and it looks like he's going kind of slow so we can address the speed of the animation here you can go to the bottom of the frames in the timeline and this panel shows exactly how long each frame will be shown so I'm gonna change this to 0.1 seconds and you can do this for each frame and let's test that out so that looks great so now let's talk about how we're going to export this so you can actually use it on the web so before we go to export make sure you go below the timeline and set looping to forever because you want to keep dancing forever and then you go to file export save for web and make sure the looping options here are also set to forever and here in this window you can set your gif file size keep in mind that most platforms have file limits of like 5 megabytes and it looks like we're way under that so we're in the clear so just hit save and you're ready to have so now let's take a look at our finished products I'm just so filled with pride looking at me dancing there son I think I would use this to express like a victory dance or I'm like TGIF whatever I'm just really happy to see it go thanks for watching for more videos like this make sure to subscribe to the verge and let me know in the comments how you pronounce gif is it gif or gif its gift either way I expect all of you to be tweeting me your gifts
We are a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.