If a picture says a thousand words, then an animated GIF probably says about a million … Or maybe more like 50,000. I guess it just depends on the number of frames you’re using, but whatever, you get the metaphor. The point is GIFs are amazing. They’re like the flipbooks of the Internet – great for conveying thoughts and emotions that words can’t describe, showcasing the antics of your adorable household pets, making abstract art, or just giving you a good chuckle.
But I’m preaching to the choir: If you’re reading this, you already know how awesome animated GIFs are. Chances are you have an idea for one stewing in your brain, you just don’t know how to make that idea a reality. Not to worry. We’ve put together this super simple tutorial to guide you through the process and get your GIF up and looping in just a few minutes.
Before we dive right in to the tutorial, we’ll address the elephant in the room. You need Photoshop. There are other ways to do it and other programs that can make GIFs, but few can compare to Adobe’s industry-leading software. If you don’t have Photoshop, we recommend checking out ImgFlip, GifMaker, or Gimp. If you’re on an iOS or Android device, check out Cinemagram or GifBoom. Also check out the website GIFYoutube, which can convert Youtube videos into GIFs, as well as our comprehensive guide on the best applications for making GIFs. But if you want to get serious about making GIFs, Photoshop is the way to go.
Step One:
Find a good video sequence with which you want to make a GIF. This can be practically anything, but try to opt for a clip that’s not too long, as longer video generally leads to a larger file size.
Step Two:
Download/upload the video clip you’ve chosen to your desktop. Check out our guide on how to download YouTube videos if you need guidance on ripping footage from the Web, or check out our tutorial on how to rip a DVD or Blu-Ray disc if you’re looking to pull a clip from your movie collection. Trim the footage down to only the length you want the GIF to play. Two or three seconds is great, five is pushing it, and 10 or more is possible with the right chopping, but the file will be massive and hard to work with.
If you’re ripping from YouTube, I recommend using ClipConverter.cc to rip the clip, since you can designate which segment of the video you rip prior to actually downloading it.
Step Three:
Open the video with Photoshop. To do this, just navigate to File > Import > Video Frames to Layers. Select the video file you want, and it’ll be sucked into Photoshop and transformed into a series of still images. You can choose to import the entire video from beginning to end, or use sliders to select a smaller portion of the clip. Limiting the frames will make the file smaller, but will also make the video more choppy.
Step Four:
Mess with the settings. You can adjust color balance and whatnot with Photoshop at this point if you’d like. When you have everything looking perfect, head to File > Save for Web. You’ll then be met with a window that looks something like this:
All of these settings can be tweaked to make your GIF smaller. Ideally, you’ll want to make it no larger than 1MB so that it won’t take ages to load on webpages. Play with all of these until you find a sweet spot.
Colors: This limits the number of colors used to create the image, so the higher the better. Only drop down to 128 or lower if you must, or if your GIF doesn’t have much color to begin with
Dither: Dithering scatters different colored pixels in an image to make it appear as though there are intermediate colors in images with a limited color palette. Higher settings will yield better looking images, but will also make the file larger
Lossy: Use this setting to apply an intentional drop in quality. A lower setting is better, but some lossness might be necessary to make your file small enough
Size: Changing the dimensions of your gif can have a huge impact on the size of the file
Step Five: Save and Share. Hit the save button to finalize your creation and save it to your folder of choice. Once that’s done, you can upload it to a free image hosting site like Imgur to share it with your friends and embed it into blogs and websites.
How to make an animated GIF with still images:
You can also create animated GIFs in Photoshop by stringing together still images. This process consists of layering each frame the bottom up and then sequencing the layers using Photoshop’s animation/timeline tool.
Step one:
Collect the still images that you want to sequence for your GIF and put them in a single folder. Check out our guide on how use a Mac or a PC to take screenshots like a pro. Then open File > Scripts > Load Files into Stack. From there, click Browse and select the images on your desktop that you want to string together into a GIF. Select “OK” and a new composition should open with these stills now rendered as individual layers in a single image. Arrange them accordingly; your first frame should occupy the very bottom layer and so forth.
You can also create each layer individually in Photoshop itself, rather than simply batch uploading your stills as layers. Run Photoshop and create a new image by clicking File > New and then selecting “OK.” Then, unlock the background layer by double-clicking the lock icon, create a new layer by opening Layer > New… > Layer and design each frame accordingly. Again, string your animation from the bottom up. This process works if you are using an older version of Photoshop that does not feature a “Load Files into Stack” option. Simply load your stills into Photoshop, drag them into your new project, and resize the newly created layers accordingly using Photoshop’s free transform tool (edit > free transform or Ctrl + T, then drag the corners to resize the object).
You want your end result to look like this, with each frame of the animation separated as a layer and arranged chronologically from the bottom up:
Step Two:
Now that you’ve arranged your layers accordingly, you can began sequencing your layers. Again, this process will vary depending on what version of Photoshop you are using. For Photoshop CS5 and lower, access the animation window by opening “Window” + “Animation.” Likewise, click “Window” + “Timeline” in Photoshop CS6 and Photoshop CC to access the Timeline window. For Photoshop CC, click the drop-down menu in the middle of the Timeline window and select “Create Frame Animation.”
Once you’ve opened Photoshop’s sequencing tool, click on small, right-facing arrow in the upper-right hand corner, and then select “Make Frames From Layers.”
You can also click on the right-facing arrow to create a new frame manually (or you can simply use the hot-key command Ctrl>Shift>Alt>F). From there, use the eye icon next to each layer to hide the layers you don’t want to appear in the frame you’ve created.
From here, use the menu underneath each frame to toggle its duration. The menu in the bottom left-hand corner dictates how many times your GIF will replay — set it to “Forever” if you want it to loop endlessly.
Step Three:
Congratulations! You’ve created an animated GIF using still images and now all you have to do is export it out of Photoshop using the process outlined above. For a quick recap:
Head for File > Save for Web. Remember to keep your GIF no larger than 1MB. If necessary, tweak the color, dither, loss, and size settings until your GIF has been resized accordingly. Once you’re happy, save your newly minted GIF.
...culled from digitaltrends
Remember, at 360talkatives you should always leave a comment...
0 comments :
Post a Comment
The 'Name/Url' option is advisable. You can fill in just 'Name' and ignore the 'url box'.