steph (radar) wrote in stilljane,
2010-09-11 22:57:00

gif tutorial





STEP ONE.
1. Open Adobe CS4. Go to File > Open > and choose your media file that you want to create a gif from. In this instance I'm using Britney Spears Toxic.mp4.
2. Make sure that your Animation toolbar is open in Adobe. It will look like the bottom strip on the above picture. If you don't see it there, go to Window > Animation.




STEP TWO.
3. Now to select that part of the movie you want to turn into a gif, you will move bar from the very left to the part of the movie you want to select. As you move the bar, it will grey out the area that WILL NOT render. You will then move the bar from the right to end point of the are you're wanting. This should leave a little white space that you can preview by pressing the play button in your animation toolbar that sits at the bottom left.
4. Now you will go to File > Export > Render Video... A little Save As box will pop up on your screen. Name the file to whatever you want and save it. I save my files as Mov because I'm on a Mac. If you are on Windows, you may want to save it as something else. When you've adjusted the settings to their best quality, select Render and wait for it to do it's thing.
5. Once it's done, go to File > Open > Open your newly rendered video.




STEP THREE.
6. Now you should be able to see your newly rendered video. If you see anything that has rendered that you don't want, use the bars to grey out the areas you don't want again.
7. This is the stage where you will want to do your coloring and sharpening.
HELPFUL TIP: IF YOU ARE TRYING TO KEEP YOUR FILE SIZE LIMIT DOWN BELOW 500KB [AS TUMBLR DOES NOT ALLOW GIFS LARGER THAN 500KB IN SIZE AND 500PX IN WIDTH], DARKER TONES WILL ALWAYS BE LESS KB THAN LIGHTER TONES.

Here's how I got this coloring:

  • Duplicate the first layer and set it to screen. Go to Filter > Sharpen.
  • Layer > New Fill Layer > Solid Color > Color Burn > Fill with #e2c8c8
  • Layer > New Adjustment Layer > Gradient Map > Black/White
  • Layer > New Adjustment Layer > Color Balance (Midtones: -100, -42, +18/Highlights: +5, +7, +12/Shadows: +19, -14, +25) > Set to Soft Light > Opacity 20%
  • Layer > New Adjustment Layer > Color Balance (Midtones: -13, +8, -3/Highlights: 0, 0, +1/Shadows: 0, -9, -6)
  • Layer > New Fill Layer > Solid Color > Multiply > Fill with #e5d9c6
  • Layer > New Fill Layer > Solid Color > Darken > Fill with #e5d9c6
    credit to coloring_help for this


    • 8. When you've finished your coloring and sharpening, re-render the file, the same as you did the first time.




    STEP FOUR.
    9. File > Import > Video Frames to Layers
    10. Most of the time, you're going to want to select that box that says "Limit To Every __ Frames" (this will limit the frames that are processed by skipping every other frame, depending on the number you enter - keep in mind that Tumblr does not allow gifs over 500KB and more than often you will not be able to save a gif that has more than to 10-15 frames if it is 500PX in width).
    11. Now you're going to want to set the speed of your frames. You can do this by selecting the small icon on your animation table in top right (see above picture) and "Select All Frames".
    12. After you do that, all the frames should be highlighted. You'll click on the down arrow right next to the frame frame second and click on "Other".
    13. A new box should pop up asking you to enter the second you want. Depending on how many frames you have, the normal rate should range from .08-.12. In most cases, if you're doing a 500px gif with 10-15 frames, I've found the best second to input is .12.
    14. Make sure that in the bottom left corner it says "Forever" and "Once". If it is set to "Once", the gif will only play once. You can preview your gif by pressing the play button.





    STEP FIVE: SAVING THE GIF
    15. Go to File > Save for Web & Devices.
    16. You should see a preview of a frame of your gif. In the above picture you can see the settings I've used to save this gif. If you're saving this under a certain KB amount, you will want to change the numbers where you see Colors: ___. As you do, you will see the KB amount go up and down in the bottom left hand corner (I've highlighted that in red).
    17. When you've got the KB amount you're looking for, you'll click Save and voila! You should get something similair to this:



    Tags: * tutorials
    • Post a new comment

      Error

      Anonymous comments are disabled in this journal

      switch
      default userpic

      Your IP address will be recorded  

      Help
    • 101 comments
    Previous
    ← Ctrl← Alt
    Next
    Ctrl →Alt →

    hjfrappucino

    September 12 2010, 04:40:59 UTC 2 years ago

    Thank you SO much! I love how mine came out!

    radar

    September 12 2010, 05:08:26 UTC 2 years ago

    You're welcome and yay! I'm glad it worked. :D

    imissculleni

    September 12 2010, 06:03:10 UTC 2 years ago

    oh this is so cool. thank you so much!
    I have a question, does it change a bit if I'm using cs4 extended? I try to select to render the video, but... i think its converting the whole thing :O

    radar

    September 12 2010, 06:45:02 UTC 2 years ago

    I don't have CS4 Extended so I can't be sure, but are you sure that you're dragging the bars so that you're selecting one area? You have to be sure to drag the bar for the left to your starting point and the the bar from the right to your stopping point. If you don't, it will convert the whole thing.

    loretta

    September 12 2010, 06:58:38 UTC 2 years ago

    this was very helpful, thank you so much for this.

    radar

    September 12 2010, 07:07:11 UTC 2 years ago

    You're welcome! :)

    stellaaad

    September 12 2010, 07:50:04 UTC 2 years ago

    i'll try to make a gif although i have cs5.

    thank you anyway ♥

    radar

    September 12 2010, 18:29:44 UTC 2 years ago

    You're welcome.

    minutesaway

    September 12 2010, 10:26:34 UTC 2 years ago

    i've been wanting to make gifs for ages. thank you so much for this tut, it came out perfect :)

    radar

    September 12 2010, 18:30:32 UTC 2 years ago

    Yay, I'm so happy it worked!

    lovaleei

    September 12 2010, 10:51:40 UTC 2 years ago

    i adore you. thats exactly what ive been looking since forever!!

    radar

    September 12 2010, 18:30:45 UTC 2 years ago

    Thanks! :D

    bekkiglitz

    September 12 2010, 15:48:29 UTC 2 years ago

    Thanks, it's so helpful~ :]

    I really like your GIF's. How did you get this effect if you don't mind?
    Thank you.

    radar

    September 12 2010, 18:31:26 UTC 2 years ago

    I screened a couple of the base layers and then set the top one to soft light and then used a yellow gradient that was set to soft light. I didn't save the PSD for that one so I can't remember exactly.

    xmisstwilight

    September 16 2010, 16:24:14 UTC 2 years ago

    Hi! Love this tutorial, but I'm having some trouble :S When I open the file (video) the screencaps are white... There's no pictures, only white screencaps... Do you know what I mean? And I'm using Photoshop CS5.

    x

    cachettes

    October 5 2010, 18:15:08 UTC 2 years ago

    Same! Idk what to do :(

    escapingtourist

    2 years ago

    • New comment

    cachettes

    2 years ago

    • New comment

    escapingtourist

    2 years ago

    • New comment

    xmisstwilight

    2 years ago

    • New comment

    cranmers

    September 20 2010, 20:37:08 UTC 2 years ago

    THANK YOU SO MUCH XD

    One weird question...how do you make it so that the GIF repeats? Whenever I do mine they black out and end.

    gleefulvall

    September 22 2010, 18:32:27 UTC 2 years ago

    Step 14: Make sure that in the bottom left corner it says "Forever" and "Once". If it is set to "Once", the gif will only play once. You can preview your gif by pressing the play button.

    :)

    cranmers

    2 years ago

    • New comment

    stops

    September 24 2010, 14:08:21 UTC 2 years ago

    THIS IS AMAZING thank you ♥

    slowlyspills

    September 24 2010, 16:04:20 UTC 2 years ago

    I'd reaaaally like to try this out but when I try to open my video, ps says I can't open that type of file! Anything that can fix that?

    tell_a_tale_4_u

    September 24 2010, 22:25:36 UTC 2 years ago

    TY so much - I am still working with Image Ready CS2 because CS4 confused me. ♥

    sestiere

    October 3 2010, 02:57:57 UTC 2 years ago

    I just got linked to this, and I want to say thank you! :)

    d_obsessed

    October 3 2010, 05:43:30 UTC 2 years ago

    THANK YOUU!<3
    I REALLY NEEDED THIS SO MUCH :D

    ( just one question, when I try to save
    on the KB part instead of saying KB it shows a M
    do you know how to change it? )

    burningbeacon

    October 6 2010, 21:04:36 UTC 2 years ago

    Awesome! I haven't tried this out yet but I definitely am memming this. ♥

    headband

    October 7 2010, 01:45:17 UTC 2 years ago

    YOU ARE THE BEST PERSON IN ALL THE WORLD! Seriously thank you so much for doing this! The whole process of making gifs on a mac has been frustrating me for months!

    mine came out like this:

    ♥

    radar

    October 10 2010, 21:22:44 UTC 2 years ago

    It looks awesome! Thank you for showing me. ♥

    nastyposition

    2 years ago

    • New comment

    milesofsmilesx3

    October 7 2010, 23:08:37 UTC 2 years ago

    thank you so much for this!
    <333

    escapingtourist

    October 8 2010, 16:27:09 UTC 2 years ago

    This is awesome! Thank you so much (:

    lattekissesx

    October 11 2010, 10:56:05 UTC 2 years ago

    when i try to open a video file it says
    "could not complete your request because it is not the right kind of document"
    idk what to do? & i opened a .mp4 so..

    lattekissesx

    October 11 2010, 10:56:52 UTC 2 years ago

    wait never mind fixed it :L

    anelesalyak

    2 years ago

    • New comment

    lattekissesx

    2 years ago

    • New comment

    xo_indecisive

    October 14 2010, 04:18:54 UTC 2 years ago

    I seriously owe you! I've been trying to figure out how to make gifs for so long, and your tutorial is the only thing that truly helped me. Thank you so much! :D

    switchbladegrin

    October 14 2010, 17:54:31 UTC 2 years ago

    Does anyone else have this issue: I try to edit the coloring during that one step and it only does like one part of the video but when it keeps playing its the regular color.

    How do I apply the coloring changes to the whole thing?

    iluisaaa

    October 16 2010, 06:11:42 UTC 2 years ago

    thank you so so much! this was so helpful :D

    one quick question though, how do i make aaallllll the layers change colour? i want to make it black and white so it'll fit on tumblr, but only the first layer changes and every other layer stays the same. i'm probably missing something really simple lmfao, but your help would be so great, thank you!! ♥

    imagine_52

    October 16 2010, 07:27:00 UTC 2 years ago

    haha, i'd appreciate the tip too. i'm having the same issue!

    iluisaaa

    2 years ago

    • New comment

    meezardra

    October 16 2010, 21:38:14 UTC 2 years ago

    Saved this to my memories! Thank you for writing this. ♥

    xo_indecisive

    October 21 2010, 23:01:32 UTC 2 years ago

    This probably sounds like a stupid question, but I'm trying to upload the gifs I make on tumblr, but after they've uploaded they don't move. I know it has something to do with the size, but I can't figure it out. It's set as 500x300 in pixels. Am I doing something wrong? If you can help me, I'd much appreciate it. But I know you're probably busy, so no worries. Just thought I'd ask.

    apeshit_x

    October 22 2010, 14:39:42 UTC 2 years ago

    Not the OP but for your gifs to move on tumblr it has to be less then 500 kb.

    xo_indecisive

    2 years ago

    • New comment

    atomiclamb

    October 24 2010, 22:51:27 UTC 2 years ago

    Do you have any hints at getting the best quality outside of colour changing and whatnot? My .gifs are coming out all pixel-y.

    roni2727

    November 26 2010, 23:54:12 UTC 2 years ago

    Same question. I've tried several different combinations of options during the first rendering of the video but it's very pixelated. Any help would be much appreciated!
    Previous
    ← Ctrl← Alt
    Next
    Ctrl →Alt →