How to make a High Quality Gif from a Video⇨⇢

image

I’m not exactly sure how to start this, so

You want to know how to make a gif? Here’s a tutorial. I taught myself how to do all of this, so I figured it won’t be that hard if you have someone instructing you. There are many ways to customize gifs, so I’ll try and keep them simple…

What you should know about making gifs for Tumblr is that there are three basic rules to follow:
Thing's You'll Need [direct downloads, so once you click, it downloads]:

ALL ARE FREE OF VIRUSES

Tips:

Both GIMP and Winrar are simple to install. Winrar will install an annoying extension to your chrome and a file to your computer, but it’s extremely easy to get rid of it. Go to your extensions and delete it, then search Babylon and Wajam on your computer and delete those files. Problem solved.

How to install David's Batch Processor:

David’s Batch Processor, or DBP, is just as the title says: A Batch Processor. It allows you to manipulate multiple images in simple ways such as resizing, cropping, editing colors, etc. I use it to resize the multiple frames a gif requires.

How to install GAP:

I’ll have to explain GAP later because it won’t make sense at the moment

How to install Avidemux:

Avidemux allows you to open videos and select the amount of frames you want to gif. With cartoons/anime you can select more frames, but with reality and video games it’s better to select 60-80 frames.

How to install Realplayer:

Realplayer and any other video downloading tools are easy to install, so here comes the gif creating process.

-------------------------------------------------------------------------------

You must have a video downloaded before beginning the gif process. Do this by downloading videos from the internet, either by using Realplayer or another downloading tool. On certain websites the videos have download links.

To begin, open GIMP and Avidemux. 

  1. If it asks to unpack video, say yes
EXTREMELY IMPORTANT TIPS IF YOU WANT TO GIF SCENES:
CONTINUING WITH THE AVIDEMUX PART:

I would HIGHLY recommend you create a new folder for the selection of frames. What I did was create a Kingdom Hearts folder, and within that folder I created smaller folders titled after the scene I was giffing, and within those folders I would create folders for the parts of the scene [each selection of frames] and then I would save my frames into those. It’s a really organized system. You can create all of this while still in the saving process.

Now go to GIMP:

There are some VERY important things you should add to GIMP before beginning to make gifs. Here are a few:

You don’t want anyone stealing your gif, right? So you’ll have to watermark it. It’s common to use pixel fonts to do this, seeing as they take up the least amount of room. Go to a font downloading website and download some pixel fonts. Here are some: [x] To install these, unzip/right click + extract here and then drag the file that looks like this

image

into your gimp 2.6 fonts folder. This folder can be found in Desktop > User [ex. Sam] > gimp 2.6 > fonts.

Curves are another important tool if you want your colors to be much smoother, better, brighter, darker, etc. Bring life to the colors. Basically the difference is this, depending on what curve you use:
Not Curved:
image
Curved:
image
You can download curves from Deviantart. They’re free and easy to use. You go to one of the DA’s that say curves, download the file from the side, unzip it (sometimes they create folders, but you just want the files,) then drag the files [which look like the font files except without abg on them, and don’t drag the read me’s in] to Desktop > User > gimp 2.6 > curves.

Restart GIMP once you have done these HIGHLY RECOMMENDED things.

Beginning to make the gif:
  • In GIMP, open ONE of the frames from the gif you are going to make. Do this by going to Open > folder where you saved your selection of frames earlier > Double click one of the images.
  • Once the frame is open, locate the Resize tool in your toolbar. NEVER CLOSE OUT OF THESE TOOL BARS.
image
  • Assure you have ‘Keep Aspect’ checked at the bottom of the toolbar
image
  • If you want to make a 2-Column gifset, resize the photo to 245/250px width and write down the new height somewhere [You get the new height by typing the desired width into the width text box and then clicking the height text box. Pressing enter will not give you the new height.] If 1-Column gifset, resize photo to 500px width and write down new height somewhere. If you want a 3-Column gifset, resize the photo to 160px width and write down the new height somewhere. You’ll need this later.
  • DON’T SAVE THE PICTURE. Just exit out of it without saving.
Batch Process Time:

Now it comes time to Resize ALL your frames. This is where things get even more complicated than they already seem. 

  • In GIMP, in your toolbar at the top of the screen there should be a drop-down-menu that says Filters. At the bottom of filters there should be an option that says Batch Process. Click this.
  • It should look like this:image
  • Go to the Add Files button and prepare for complication.
  • Go to wherever your selection of frames is and begin selecting->
  1. If the selection is going to be a 1 column gif, 500px width, then you should only select up to around 10 frames. If it’s a cartoon/anime, you can double it. Holding CTRL and selecting every other frame is a way of making a gif longer, but not making the file bigger. If there are only 10 frames to begin with, click the first one and hold shift and then click the last gif. Add these.
  2. If the selection is going to be a 2 column gif, 245/250px width, then you should only select up to 30-45 frames. If anime/cartoon, you can nearly double it. Once again, hold CTRL and skip every other file if you have over that many gifs. If there are only 30-45 frames to begin with, click the first frame, hold shift, and then click the last frame.
  3. If 3 column gif, 160px width, you can have up to 50-60 frames. If cartoon/anime, you can have more than that. I still recommend holding CTRL and highlighting every other frame. If there are 50-60 frames to begin with, click the first frame, hold shift, and then click the last frame.

  • Once you have all your frames added, go to the resize tab. Check the Enable box and click the option ‘absolute' below it. Enter your desired width and whichever height you wrote down earlier to the boxes. Next to the word Fit, click the drop-down-menu and select Exactly instead of Padding.
  • Go to the Rename Tab and enter ccc in the Add Prefix text box [that’s what I commonly do.] If you do not rename them, it will not work correctly because it will say something along the lines of ‘Error! Output already exists.
  • Press Start and wait for the bar to fill up Green. Once it’s done, it should day —done!— above the green bar. If it says it’s done before the bar is filled with green, something went wrong. Go back to all the tabs and make sure you only have Resizing checked. Having more than one tab checked [such as Resizing and Cropping at the same time] will cause an error. Also make sure you have something in the Add Prefix box.
Forming the gif:

Now that you’ve gotten the frames resized, it’s time to make it into a gif.

  • First, you must open the first RESIZED frame to each part of the selections.
  • You should have either one or several images open in separate windows, depending on how many columns you want.
  • In each window, go to Open > Open as Layers > Select the RESIZED frame after the first resized frame, hold shift, and click on the last RESIZED frame while still holding shift.
  • Press Open
  • Do this for each part/window.
  • Each part should now have several Layers.
  • The bottom Layer will be known as the beginning of the gif, or Background.
  • The top Layer is the end of the gif.

I highly recommend saving your project as a .xcf file for now. It’s not uncommon for GIMP to crash while dithering [will need to do for high quality look] the layers.


Editing the gif/GAP (optional:)

Now I’ll explain what GAP is. It’s a Plug-In made for Animations, yet I use it for my Gifs. Same thing. It’s just like DBP, except you can do major editing to each Layer. It mostly allows you to add Filters to your layers, but also color adjustments. I use it to add curves to each of my Layers. Here are common Filters I use:

  • Unsharp Mask (Filters > Enhance > Unsharp Mask):
No Mask:
image
Mask:

image

  • Soft Glow (Filters > Artistic > Soft glow)

No Glow:

image

Glow:

image

  • Hue and Saturation (Colors > Hue and Saturation) I would recommend only using Saturation because Hue kind of messes everything up..
No Saturation:
image
Saturation:
image
  • Curves (Colors > Curves > Press the little square with a play button in it next to the ‘+’ symbol in the top right corner > Import Settings from File… > If you downloaded any curves and put them in the right folder, they should be here.) Refer to first example of curves.
  • Experiment with Filters and colors, but until you use GAP, all the filtering will only be on the selected layer. So I wouldn’t recommend saving any of the changes. Since the end, or top layer, should be the only visible frame, experiment on that one. Find what you like and then undo the changes until the frame is back to normal.
  • Once you find all the filters and curve you would like to use, go to Filters > Filter all Layers (which should be somewhere towards the bottom of the Filters)
  • Select the Filter you want
  • There are going to be several buttons, you need to choose the ‘Apply Constant' button
  • image
  • Depending on which Filter you use, it’s common for them to have previews. Play around with the Filter settings a little to get the result you want and then confirm it
  • Do the steps as proceeded
  • Repeat until the gif [project for now] looks the way you want it to
Watermarking (optional:)

I hope you took my advice from before and downloaded some pixel fonts as recommended. It’s time to watermark your gif!

image

  • Open a new image that’s the size of the frames you’re watermarking
  • In the Layers Pallette, delete the background layer by pressing the Trashcan Icon in the Layers Pallette [which should be white]
  • Now the Layers Pallette should show no Layers. Press the little page icon near the trash can to create a New Layer
  • Make sure Transparency is chosen before pressing Enter
  • The background to the Layer should be gray checkers, this means transparency. That’s what you want
  • Locate the Text Tool in your Toolbar (It’s not hard to find because it’s a giant A.)
  • First, Resize the Text down to Size 8. That’s most commonly the size associated with Pixel Fonts.
  • If the background of your frames is dark, make the font white.
  • If the background of your frames is light, make the font black.
  • Click the Font icon and Locate your Pixel Font.
  • image
Note: Your Pixel Font doesn’t have to be the same as mine
  • Once all those settings have been established, create a text box in one of the corners of your image. I usually do the top right corner.
  • Click within the Text Box and this should pop up:
  • image
  • Just type in your URL and press the Close button.
  • Now you should have your URL in the corner of your image. But, it will still be inside the little yellow/black dashed lines. To get rid of these, go to (at the top toolbar) Layer > Merge Down
Your image should look like this so far, except with your own URL: 
image
  • Locate the Eraser Tool
  • image
  • Find the Opacity option in the Eraser Settings:
  • image
  • Scale the Opacity down to around 80
  • Now, use the Eraser on your Watermark only once. That should fade your watermark, this is what you want. This keeps your water mark still in the gif, but faded so it doesn’t distract from the gif’s content.
  • Now, press CTRL+C to copy your watermark. Assure that the layer is selected and then go back to the frames you’re watermarking.
  • While watermarking, assure you have the Selection tool selected:
  • image
  • Pay close attention to the following instructions:
  1. Select the top layer in your selection of frames:
  2. image
  3. Press CTRL+V
  4. Should look like this:
  5.  image
  6. Assuming you still have the Selection tool on, click somewhere in the margin behind the picture:
  7. image
  8. This should merge your watermark with the layer. Do this for all layers until you get to the bottom. After a few layers, when you paste, the layer you pasted on will look as though it went to the top. This is just GIMP scrolling for you, so don’t worry. 
  9. image
  • Now you’ve watermarked all your layers! You’re ready to turn it into a gif now! But what if you want to add subtitles? ->
Adding Subtitles (optional, depending on video:)

Adding subtitles is different than watermarking the gif. Subtitles are solid and outlined. They allow you to know what the character is saying without having to hear it. You can use a pixel font, but I recommend not to. Here’s some tips:

  1. Outline the subtitles (I’ll teach you)
  2. Use a different colored font for each character that speaks
  3. Use an easy to read font, such as: Arial, Veranda, Myraid Web Pro, etc.
  4. Keep font size between 11-15.
  5. If there will be more than one gif with subtitles, you’ll want to have the subtitles level with each other.
  6. Keep alignment centered.
  7. Keep the subtitles at the bottom of the layer.
  • First, you want to create a new image that’s the size of the frames you’re going to be subtitling. 
  • Delete the background.
  • Make a new layer that’s Transparent.
  • Create a text box at the bottom of the layer.
  • image
My font: Microsoft PhagsPa Bold // My size: 11 // My Alignment: Centered // My color: White.
  • Alignment:
  • image
  • Locate the Paintbrush tool.
  • image
  • Set your foreground color to black (unless the font you’re outlining is black.)
  • image
  • Make sure you have Circle (11) as your brush
  • image
  • Look at the brush settings and change your brush size to something between 15-33.
  • Now RIGHT CLICK on your text layer
  • This should pop up:
  • image
  • Select the option Alpha to Selection.
  • This should select the outline of your text.
  • Create a duplicate layer.
  • image
  • Now select the Original layer
  • image
  • Right click on the text in the text box
  • This should pop up:
  • image
  • Scroll over edit and then choose Stroke Selection:
  • image
  • Now another pop up will appear. You’ll want to select these settings:
  • image
  • Click Stroke once you have those settings in. 
  • You’re text should now be outline, but it is still selected. Get the Selection tool again and click in the margin again to unselect it. Outlined text. 
  • You’ll want to merge all the layers now. Select your top layer and then go to the toolbar at the top and going to Layer > Merge Down. Do this until each layer is merged with the other. 
Repeating steps from the Watermark tutorial after you’ve CTRL+C’d the layer, except with subtitles:
  • Now, pressCTRL+C to copy your subtitles. Assure that the layer is selected and then go back to the frames you’re adding subtitles to.
  • While adding, assure you have the Selection tool selected:
  • image
  • Pay close attention to the following instructions:
  1. Select the top layer in your selection of frames:
  2. image
  3. Press CTRL+V
  4. Should look like this:
  5. image
  6. Assuming you still have the Selection tool on, click somewhere in themarginbehind the picture:
  7. image
  8. This should merge your subtitle with the layer. Do this for all layers until you get to the bottom. After a few layers, when you paste, the layer you pasted on will look as though it went to the top. This is just GIMP scrolling for you, so don’t worry. 
  9. image
ANIMATION TIME:

Now you’re ready to finish this thing. There are only a few more steps before this will become a .gif file. THE LAST STEPS ARE THE MOST IMPORTANT.

Dithering

You’ve gotten all your editing done. You’ve added your watermarks and/or subtitles. Dithering will sort of set everything in stone. You cannot edit the gif any further once it’s been dithered. Dithering is what makes the gif higher quality. The maximum amount of colors a gif can have or 256 (more in some very special and specific gifs.) There are 3 types of Dithering (technically 4, but 2 of them are the same except with very VERY minimal difference.)

  • No Dithering (Lowest Quality)

imageimage

image

  • Floyd-Steinberg (normal/reduced color bleeding) (High Quality)

image

image

  • Positioned (Highest Quality in most cases)

image

image

  • To dither your frames, go to the toolbar at the top
  • Image > Mode > Indexed
  • This should pop up:
  • image
  • Oops I spelled Quality wrong. Oh well…
  • IT IS VERY IMPORTANT TO HAVE THE ENABLE DITHERING OF TRANSPARENCY CHECKED
  • Once you’ve chosen your dithering, press OK. This is a common time for GIMP to crash, so make sure you’ve been saving your file as a .xcf up to this point!
  • Time to lower the file’s size~

Optimizing

Optimizing is how you lower the file’s/gif’s size. Since the Maximum size a gif can be is 1MB, it’s important to Optimize your gif. Optimizing erasers the colors on one layer that are the same as the colors on the layer below it. In the long run, this reduces the size of the gif drastically since transparency isn’t used in the size.

  • Go to the toolbar at the top
  • Filters > Animation > Optimize (for GIF)
  • This will create a new *Untitled window with the dithered version of your frames
  • DO NOT EDIT FRAMES AT ALL AT THIS POINT
Saving it as an Animation
  • Go to File > Save
  • Type in what you want your file to be named
  • Delete the .xcf at the end and replace it with .gif
  • This should pop up:
  • image
  • Make sure Save as Animation is selected
  • Click Export
  • This should pop up:
  • image
  • THIS IS VERY IMPORTANT
  • The default “Frame disposal where unspecified:" will be I don’t care. Change this to Cumulative layers (combine)
  • If you did delete every other frame at the beginning of batching your frames, set the “Delay between frames where unspecified:" to 90-100 milliseconds.
  • If you DIDN’T delete every other frame while batching your frames, set the “Delay between frames where unspecified:" to 50 milliseconds.
  • Make sure you have Use delay entered above for all frames checked
  • Don’t check Use disposal entered above for all frames
  • Click save

YAAAYAYYAYAAYAYA YOU MADE A HIGH QUALITY GIF IF YOU FOLLOWED THROUGH WITH THIS TUTORIAL CORRECTLY BAM IT’S OVER PREPARE TO BE TUMBLR FAMOUS ALS;DK;ALS’F;DSLS;DJFSD YOU PROBABLY FEEL LIKE YOU JUST TOOK ANOTHER COLLEGE COURSE BUT NO YOU MADE A GIF YAYAAAYAYYAYAHEYEEEYEYHAYEHYAHEY 


Actually you should probably locate the gif and make sure it’s under 1MB before uploading it. It will have to be between 1KB and .99MB if you want to upload it to Tumblr. 

If you have any further questions, ask me and I’ll answer the best I can.

1 year ago with 127 notes




  1. darkfromday reblogged this from hellyeskingdomhearts
  2. ipromiseeyou reblogged this from hellyeskingdomhearts
  3. olegon reblogged this from hellyeskingdomhearts
  4. caselope reblogged this from hellyeskingdomhearts
  5. ghirahimapologist reblogged this from hellyeskingdomhearts
  6. final-limits reblogged this from hellyeskingdomhearts
© JASON
DILAURENTS