So, you want to make a gif? A basic gif tutorial.
AKA gif making for dummies. :P Just kidding.
This is the easiest way I know how to make gifs.
You’re going to need:
Photoshop. CS5 Download: [x] (I haven’t tested this download, but it should be working. Always download these kind of programs at your own risk.)
Youtube Downloader. [x]
And obviously the video you want to make a gif of.*
*For the purpose of this tutorial, we’re going to use one from Youtube. I’ll make a tutorial for snagging videos that aren’t on Youtube, but this is not now. x)
Step 1.
Download the programs.
Firstly we need to prepare Photoshop for making the gif.
Open your Photoshop and select Window from the drop-down menu at the top of the screen. Check Animation and Layers.
Example:
High resolution [X]
You should have a bar like this:
Example:
High resolution [X]
This lets us edit the frames of the gif.
We can minimise Photoshop for now.
Step 2.
Go to the video you want to make a gif from.
Click share, and copy the URL of the video.
I’m using this video of Danisnotonfire. I love Dan. :) Check him out.
Example:
High resolution [X]
Now we need to open Youtube Downloader.
The URL pastes automatically. Cool, huh?
Click download, and this will download the video to your computer.
It takes a few minutes, usually 3-4, but it depends on the size of the video.
(If your file is not in MP4/MOV then you need to convert. You just select where you’ve saved your file, and then click convert. Need help with this, let me know.)
Example:
Example:
Note: Save your downloaded videos and gifs in a folder specifically for them. It makes uploading and editing things much easier. I can make a tutorial about how to organise your videos and gifs if anyone would find it useful. Let me know. ^^
Step 3.
Now we’re ready to start making the gif!
To get the video into Photoshop, we need to import it.
Go to File, then Import, then Video Frames To Layers.
Example:
Load your video from where you saved it.
Step 4.
This is where the actual gif making takes place.
A box with your video should pop up. You want to change the settings as follows:
Range to import: Selected Range Only.
Limit To Every [] Frames -checked- Type in 3.
Example:
Step 5. A
This is where we select the part we want as a gif.
Scroll to the part of the video where you want your gif to begin. You can use the slider to skip to the section of video you want, and then use the arrow keys to skip to precisely where you want the gif to begin.
Example:
High resolution [X]
Step 5.B
Now we need to isolate that part of the video.
To do this, hold down shift. Scroll to the point where you want your gif to end. Click ok. The clip will be made into frames.
Step 6. A
This is where we edit the gif.
Scroll to the right. If you see any excess frames, you can delete them.
To do so, click on the fame, and then click the bin (trashcan) icon.
To select multiple frames, hold down Shift. Click the first fame you want to delete, then the last. Those frames will be highlighted.
Example:
High resolution [X]
Step 6.B
Ok, now we need to change the speed of the gif. This will stop the gif from moving too fast.
To do this, select the first frame of your gif, hold shift, and then click the last frame of your gif. This will select all of your frames.
To change the speed, click the small black arrow. I always go with .01 seconds as it looks the most natural.
Example:
Let’s check how our gif looks. Click View. Select View Actual Pixels. Press play to view your gif.
Step 7.
If you like the look of your gif, now is the time to re-size it. To re-size it, go to Image in the top menu, select Image Size.
We need to make it smaller so that it can be displayed properly on tumblr. I like to make my gif’s width 500 pixels. This is standard size. Make sure Constrain Proportions is checked, so that the height is automatically selected as best for your gif.
Example:
High resolution [X]
Step 8
This is the final step in making the actual gif!
What we need to do now is save it for tumblr to display for us. This can be the most frustrating part, as there’s a limit to how big a gif can be.
So what we need to do now is go to File, then Save, then Save For Web and Devices… Don’t just click save.
We need to make sure our gif is under 1MB. This is important as tumblr won’t play the gif otherwise.
If your gif is under 1MB, you can go ahead and save!
(NOTE: 1MB is 1024KB)
Example:
High resolution [X]
You can see in the corner that my gif is 736KB.
If yours is too big, read on.
My gif is over 1MB, help!
Okay, to make sure your gif is under 1MB, there are things we can change to make the KB size smaller. Don’t worry. :)
1. We can change the settings. Reduce the colours in the drop-down menu to a smaller number.
Change Pattern to Diffusion. Play around with the settings.
Example:
High resolution [X]
2. We can delete some of the frames.
3. We can resize the gif.
How to upload
Ok, now you’re ready to upload your finished gif!
What we need to do is to make a new post.
I’m sure you know how to do that, but if not, go to Text. (I always use text posts, they seem to upload better than uploading via picture.) Go to Browse. Find where you’ve saved your gif and click upload. Then check Create Post.
You’re done! That’s it. You just made and posted your first gif!
Congratulations! See, that wasn’t so hard, right? :)
Some tips on making gifs:
-Don’t be afraid to start over if you’re not happy with how a gif looks.
-You can delete frames that you don’t need to make your gif’s KB size smaller.
-Make sure your gif is not too short, unless that’s what you’re going for. Short gifs often look strange. Make your gif look like it has a natural start and end point.
- PRACTISE. It takes time to learn how to make a good gif. I still mess up sometimes.
The end.
So that’s it! Hopefully you enjoyed this tutorial, and I’ve explained what you need to know. I’ll have a tutorial on how to add text up soon.
If you have any questions about any part of the tutorial, please just ask. I will answer them as best I can!(I reply to all non-anon questions privately, so don’t be shy.)
If this helps you, please reblog it to share the knowledge. :P I’d appreciate it, since this took soo long to put together.
Also, If you make something using this, I would love to see it!
Thank you for reading. :)
(PS. If you have a request for a gif or tutorial, I’ll try to make it. Send me an ask)
How To Make A Gif From Your Webcam
A quick tutorial, now REBLOGGABLE. But it only works on a Mac:
Open iMovie. Make a video using your webcam/iSight using the camcorder button. Trim it to the size you want. Then choose “Share > Export using Quicktime” from the toolbar and you’ll get a box with some options. Pick these:
Export: Movie to Quicktime Movie
Use: Broadband - High (you can select lower settings! Keep in mind the lower the quality, the longer the gif you can make. I cap out at about 3 seconds long.)
This saves your file as a .mov. From here, open Photoshop and click on File > Import > Video Frames to Layers. I usually select the option “Limit to Every 2 Frames”. You can get fancy here, like using the Window > Animation panel to change the frame speed to 0.6/second instead of 0.3 or 0.4, but pretty much all you need to do from there is Chose File > Save For Web & Devices, select your file type as a .gif and play with the settings to make it look right. Generally, if your file size is too high, reduce the number of colours (to 64 or 32) or play with the Lossy slider.
Remember, tumblr won’t load gifs over 1mb or 500 pixels wide.
Then, if you want to insert the image into a text post (let’s say, a response to an ask) without it becoming a grey box, here’s how:
Open a tumblr window, and make a new text post. Above the Post box, to the right, click the ‘+ Upload Photo’ button. Select the gif you’ve made. When it uploads, click the HTML button and find the image address. It should start with http://media.tumblr.com. Once you have that address, you can insert it in any post as a URL image! Cool, huh?!
Have fun! It takes practice!
Hi Ariel! Seeing that you are master of gifs. I really wanted to ask you how to make gifs? Haha like obviously really noobish ones lol cause I am no you. ><
Hello madame, let me help you with your problem.
I use Photoshop to make my gifs. You’d need a full version of it, of course, as Elements does not have a “motion” or “animation” option.
To make my drawing gifs, I simply draw out each of the motions in a new layer, much like creating an animation. In fact, that’s exactly what it is. A very basic animation.
And when I save it it looks like this
Now I’ll tell you how I make just regular gifs. But be warned, I suck at gifs. I have no idea what I’m doing but I can help you get started at least.
I have a program called KM Player, it save screen captures. Play your episode of Vampire Diaries in the KM Player.
CTRL+G will open up this control box.
Just copy over my settings. You can change your output folder to wherever you want and change the name of your files. Find the place in the episode that you want and click “start”, and then “stop” when you’re done. Now you’re done with KM Player. You can close it and open Photoshop.
Now in Photoshop, make sure you’re on “Motion”.
It’ll make your lovely timeline appear.
Now we’re gonna go to File > Scripts > Load Files into Stack
Obviously we’ll click Browse, find the screencaptures, hold shift and select them all, then click OK.
Now you’ve got all your screen captures loaded in the stack, and you can click OK again and let them load into Photoshop layers.
Your Timeline is empty, and that’s okay. Before we put out files in the Timeline, we’re gonna delete ever other layer. It’s just a personal choice on my part, you can do whatever the hell you want. But the gif will be kinda slow if you don’t.
For these next few steps it doesn’t matter what order you do them in. But basically we’re gonna click that little arrow thing in your Timeline and choose “Make Frames from Layers”.
Now your frames are in your layer. Awesome. But they’re backwards, so we’re gonna go back to those arrows and choose “Reverse Frames”.
Sweet. Now everything is all dandy. But that CW logo is an eyesore so I’m gonna crop it out.
Now your image is gonna be kinda large, and Tumblr doesn’t take too fondly to large images, so we’re gonna go Image > Image Size
Try 400 or 300. Or whatever you fuck you want. In the end we’re gonna check the Gif’s size and it can’t be more than 1,000 KB or 1 MB. Tumblr can’t play gifs that large.
In your Timeline you can change the length that your images show for.
It’s all personal preference, try out different times and shit and see what you like. I’ve seen people do anywhere from 0.04-0.08. But I just leave it at 0 because I’m lazy and I suck. To change the length you just Shift and click, you know the dealio.
Choose that cute little arrow next to the times and you get this.
If you click Other you can put in your own time.
When you’re all done and satisfied, you’ll go File > Save For Web & Devices
And now you’ve got yourself a gif.
These are very basic directions, so try out different coloring effects and all that lovely shit. I can’t help you with any of that.
How do you make gifs using cs3? :P
1. load capture image
‘File - Scripts - Load Files into Stack’
2. change image size
‘Image - Image size’
(maximum is 500pixel)
3. check ‘Window - Animation’
4. first click ‘Make frames from layers’ then click ‘Reverse Frames’.
5. change seconds (as you want)
6. save
‘File - Save for web & Devices… - save’
(less colors, less bite.)
gif file must be less than 500kb
ensina como fazer gifs?
Vou ensinar do modo mais simples ok?
Vá em: File → Import → Video Frames to Layers
E então escolhe o vídeo que você quer usar.
Lembrete: o PS só importa vídeos se você tiver o QuickTime Player instalado no computador. E ele só aceita os formatos MOV, AVI, MPG E MPEG. Eu uso e aconselho que você use o formato MOV.
Se o vídeo que você quer usar não esteja em nenhum desses formatos, você pode usar o Atube Catcher, que é o programa que eu mesma uso, pra converter seu vídeo.
2º Então, depois de selecionar o vídeo, vai aparecer uma janelinha, na qual você escolhe que parte do vídeo quer usar pro gif.
Te aconselho a selecionar uma parte pequena, porque o tamanho máximo que o tumblr suporta pra gifs é 1000k. Se o gif ultrapassar esse tamanho, ele não se mexe aqui. Pra selecionar, você usa a tecla Shift + o mouse pra ver até onde você quer.
Bom, na maioria das vezes, eu uso a seguinte configuração
Depois clique em ok.
Agora você vê todos os frames do gif. Se tiver algum que você não quer, é só clicar em cima dele e depois na lata de lixo embaixo.
-
Pra cortar o gif, é só selecionar a parte que você quer e ir em: Image → Crop e pronto, gif cortado.
Quando for mudar o tamanho dele [Image → Image Size] tente se lembrar das dimensões recomendadas pro seu gif ficar com qualidade aqui no tumblr.
Se for usar o photoset com 3 fotos por linha
2 fotos por linha
E se for 1 apenas, 500x500. Lembrando que a altura do gif pode ser da sua escolha, apenas a largura é recomendada.
Depois de mudar o tamanho dele, você pode aplicar um psd de sua escolha. Pra aplicar o psd, abra o que você quer e puxe ele pra cima do gif
E então escolher o tempo que o gif vai rodar. Pra mudar, selecione todos os frames do gif [segure o shift → clique primeiro e no último frame do gif]. Ultimamente eu tenho usado 0,07, mas recomendo que você use 0,1. Ele fica bom!
Hora de salvar seu gif!
File → Save for Web & Devices…
E só pra lembrar: quanto mais frames tiver seu gif, maior ele vai ficar. Então fique de olho na hora de salvar seu gif. Assim que a janela pra salvar o gif abrir, olhe no canto esquerdo da dela. Lá vai estar o tamanho que seu gif ficou. Se ele tiver ultrapassado 1000k, volte e corte ou exclua alguns frames.
Antes de salvar, eu uso essas configurações
Se seu gif tiver ultrapassado o limite do tumblr, e você não quiser tirar nenhum frame ou cortá-lo, você pode mudar a quantidade de cores dele. Quanto menos cores, pior a qualidade.
Se quiser ver o resultado dele antes de salvar é só clicar no play
Enfim, depois é só clicar em Save.
Resultado:
-
Eu sei que ficou muuuuuito grande, mas eu tentei fazer o mais detalhado possível pra você entender!!!
Bom, espero ter ajudado! E se tiver alguma dúvida, é só voltar aqui ;)
How to make Animated Gifs Easy and Free with Lunapic
Want to make a video into an animated gif? Don’t have any fancy programs like photoshop and don’t want to waste a lot of time doing it? just head to http://Lunapic.com and upload your video.
There is a quick way to crop, set the duration, speed and frame rate of the video gif too!
Please post reply with some animations you’ve made!
