1. Stop Scrolling! We changed our address to narutoforums.org

    Please add the URL to bookmarks on your PC and phone.

    More details can be found here. Feel free to ask any question.
    Dismiss Notice
  2. Give your waifu the ultimate gift - being crowned the most popular waifu on NF by helping her win in Senjou’s “NF Waifu Popularity Contest”

    Feeling extra confident? You can now bet on your Waifu as well for fun forum prizes here

    Come on with everything your waifu does for, you should do this for your waifu.
    Dismiss Notice
  3. "Are you a Messi or Ronaldo fanboy? Come and nominate them and more of your favourite players in NF's UEFA Champions League Awards!

    If your nominees win, you could win points for cool forum prizes!

    Click here to play :) .
    Dismiss Notice
  4. Arcade is hosting " The 2017 Arcade GOTY Awards "

    Click here to know more ᵔ.ᵔ .
    Dismiss Notice
  5. Greetings and Welcome to the forums! Please we ask you to lose some of your time and take a look at our " Beginners Guide " that contains the information necessary for you to have an easier experience here.

    Thanks and have fun around - NF staff

    Click here: " Begginers Guide " .
    Dismiss Notice
  6. It's time to vote for " The 2017 Ohara Awards "✍

    ❆ Click here to know more ❆
    Dismiss Notice
  7. "Check out the latest edition of the NF Newsletter."

    Click here .
    Dismiss Notice
  8. !(☆`ω゚) The New Year comes with a battle, come and join the first ever Naruto Forums Post Rush:

    ~New Year Post Rush~
    Dismiss Notice
  9. You ever wanted to feel the rush of watching some totally whacky anime but missed it? A once-in-a-lifetime event? Now's your chance to participate in it, grab some popcorns and :

    Join the NF Community Watchalong: Kill La Kill event ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ
    Dismiss Notice
  10. Come be part of another forum event:

    ❣ Mafia section is hosting " The 2017 Mafia Awards " and is calling the community to become part of the event.


    Click here to know more
    Dismiss Notice

Tutorial Milk's High Quality Gif Tutorial

Discussion in 'Art 101' started by D.Va, Nov 8, 2017.

  1. D.Va I Play To Win

    Messages:
    18,396
    Likes Received:
    233
    Trophy Points:
    64
     :
    I'm with Nighty
    Hello everyone you may have known me as Oreo before. I am back with an updated, and much more streamlined tutorial for making very high quality gifs sure to impress everyone!

    For the purposes of this tutorial we will be focusing on the Photoshop parts of this only. This tutorial will be sure to be easy to replicate if you're a novice, or an expert with the software guaranteed.

    Step 1: After opening Photoshop you will go into the file menu, and from there the import sub menu then select import video frames to layers. You will get a window like this.



    Step 2: Select the video file clip you made for making your Gif. Once you do so you will get this menu: For the purposes of making a gif avatar we will tell it to limit the output to every 2 frames. This means it will only allow 2 frames of the same animation, cutting down on the inbetween frames that make the animation a bit smoother at the cost of file size.



    Step 3: Next we will enable the animation timeline in your photoshop. This is done by going the window menu, followed by timeline. This will allow us to manipulate the animation, and it s a vital step.



    Step 4: Now that we have our workspace all set up, let's get that whole image on screen. Right click on the image, and click fite to screen. Now it will be easier to manage everything.



    Step 5: We're going to use our Crop tool to clip the part of the video we want to be our avatar. This tool is much simpler than my previous process. I'll show you where the tool is located in the toolbox on the left side.



    Step 6: Also note we will be using 175x250 now that it is the base avatar size as the dimensions.



    Step 7: With the area you want to use selected simply double click on the box to make it apply the crop, this will delete the unwanted portions and automatically resize our workspace.



    Step 8: Let's resize it to be properly 175 by 250. This is done by going to the image menu, and then clicking image size to get this.



    Step 9: make the first dimension 175 and it will automatically put the 250 into the other dimension.



    Step 10: Your workspace will now look like this roughly. Now we can get into the best part, which is actually setting the timing for each frames, and getting it to animate.

     
    Last edited: Nov 8, 2017
    Tags:
    • Like Like x 3
    • Informative Informative x 3
    • Useful Useful x 1
    • List
  2. D.Va I Play To Win

    Messages:
    18,396
    Likes Received:
    233
    Trophy Points:
    64
     :
    I'm with Nighty
    Step 11: Let's select all of those layers. Do this by starting on the first one, and scrolling up the list, holding shift then clicking the last one. This will be explained in a minute why this is vital.



    Step 12: Same idea with the frames, repeat the process explained above with them.



    Step 13: Now let's set a time frame for each and every frame, this takes a lot of experimenting and depends on the alterations you've made to the frames, right click on the frames to change their timing.



    Step 14: We will be doing 0.06 seconds to each frame.



    Step 15: With all those frames and layers still selected let's turn them into a video timeline. This is the reason why we took the time to make them all selections so that they interact nicely later on.



    Step 16: It will appear like this.



    Step 17: We will convert our new timeline for smart filters, this saves a lot of time as we can apply effects to every single frame. This is done by going to the filter menu, and then selecting convert for smart filters.



    Step 18: Let's apply smart sharpen to the image, this makes it look much more cleaner, and has the added effect of fighting off the dithering that may be applied later on when converting the images to a gif.



    Step 19: Playing around with the sharpness is a great idea, but usually 100% is more than enough.



    Step 20: A little color enhancement also goes a very long way for making gif pop out. Let's saturate the images by going into images, then adjustments finally doing hue/saturation.

     
    Last edited: Nov 8, 2017
    • Like Like x 3
    • Informative Informative x 2
    • Art Pimp x 1
    • List
  3. D.Va I Play To Win

    Messages:
    18,396
    Likes Received:
    233
    Trophy Points:
    64
     :
    I'm with Nighty
    Step 21: Once again experiment with the setting you want. I'll be using +20 saturation for a nice color enhancement to make everything stand out more.



    Step 22: Now we're almost done, let's get this into the gif format. Go to the file menu, export, then the export for web & devices selection. This will optimize it for the web, and allow you to see what the size of the file will be before fully exporting it. You may have to go back into the earlier steps and remove frames as necessary to make it suitable.



    Step 23: Play with the settings here, but make sure the lopping option is set to forever, and that the transparency settings are like mine. The dithering is highly dependant on what looks best at the time. As a rule of thumb no dither will always be the best option when available.



    Step 24: When saving it use the same name as the input video file, it may say that it will be an avi but there's a trick to make it automatically save as a gif for the file type.



    Step 25: Just click the empty white space, and it will convert to .gif format.



    Step 26: Congratulations, you now know hoe to make perfect HQ gifs with some additional flair. Hope you all like this tutorial, it took a while to make. :catsun



    Feel free to leave some rep if this helped you, feedback is very much welcomed!.

    You can check out the old tutorial .
     
    Last edited: Nov 8, 2017
    • Like Like x 6
    • Informative Informative x 5
    • Friendly Friendly x 1
    • List
  4. D.Va I Play To Win

    Messages:
    18,396
    Likes Received:
    233
    Trophy Points:
    64
     :
    I'm with Nighty
    Also check out my gif shop if you just want some high quality gifs made for you. :ano
     
    • Friendly Friendly x 1
    • Optimistic Optimistic x 1
    • List
  5. Don King Knights of Ren

    Messages:
    2,156
    Likes Received:
    270
    Trophy Points:
    83
    Reputation:
    Nice tutorial and this is very helpful.
     
  6. D.Va I Play To Win

    Messages:
    18,396
    Likes Received:
    233
    Trophy Points:
    64
     :
    I'm with Nighty
    Thanks, hope it helps a lot more people.
     
    • Like Like x 1
    • Friendly Friendly x 1
    • List
  7. Mei El Hermano

    Messages:
    1,085
    Likes Received:
    128
    Trophy Points:
    63
    Reputation:
    Catdank Faction:
    Thanks milk chan
     
  8. Bontakun Combat Android Moderator

    Messages:
    3,856
    Likes Received:
    345
    Trophy Points:
    84
    Reputation:
    Catdank Faction:
    Sharpness eh? Never thought of that but it's a good idea considering how our gifs come from compressed video sources. Thanks!
     
  9. D.Va I Play To Win

    Messages:
    18,396
    Likes Received:
    233
    Trophy Points:
    64
     :
    I'm with Nighty
    It's surprising how well it can do so much to the gifs.
     
  10. Bontakun Combat Android Moderator

    Messages:
    3,856
    Likes Received:
    345
    Trophy Points:
    84
    Reputation:
    Catdank Faction:
    Works too well, unfortunately. I can't pay much attention to the rest of the lesson because I just can't focus. My vision seems to have been distracted:
     
  11. D.Va I Play To Win

    Messages:
    18,396
    Likes Received:
    233
    Trophy Points:
    64
     :
    I'm with Nighty
    Everyone loves Nanana :pimp

    Seriously though I want to see your results
     
  12. Bontakun Combat Android Moderator

    Messages:
    3,856
    Likes Received:
    345
    Trophy Points:
    84
    Reputation:
    Catdank Faction:
    Well, I'll see about unblurring Bonta-kun this weekend. I hope I saved it in a format such that it can be done.

    On another note, thank god for scripts huh? Been making use of them since I started making my own gifs.
     
  13. D.Va I Play To Win

    Messages:
    18,396
    Likes Received:
    233
    Trophy Points:
    64
     :
    I'm with Nighty
    I need to learn how to script. A delete every other frame script would be amazing for making gifs
     
  14. Bontakun Combat Android Moderator

    Messages:
    3,856
    Likes Received:
    345
    Trophy Points:
    84
    Reputation:
    Catdank Faction:
    Alright let's see. This was my old set:

    Spoiler:

    _ _ _ _ Much difference?





     
  15. D.Va I Play To Win

    Messages:
    18,396
    Likes Received:
    233
    Trophy Points:
    64
     :
    I'm with Nighty
    Yeah, I can definitely see the difference.
     
  16. Unlosing Ranger Transcending Time

    Messages:
    5,406
    Likes Received:
    560
    Trophy Points:
    113
    Reputation:
    Now if only something could fix the horrible artifacting from the gif format...
     
  17. D.Va I Play To Win

    Messages:
    18,396
    Likes Received:
    233
    Trophy Points:
    64
     :
    I'm with Nighty
    Usually with a little compromise you can negate to a degree
     
  18. Bontakun Combat Android Moderator

    Messages:
    3,856
    Likes Received:
    345
    Trophy Points:
    84
    Reputation:
    Catdank Faction:
    For my set, using 256 colors and setting it to pattern interlace seems to have been the best compromise. It's a pretty big file but we have a whopping 3 MB limit for sigs so it's still under.
     
  19. MO :catsleep

    Messages:
    2,499
    Likes Received:
    491
    Trophy Points:
    83
    Reputation:
    is there a photoshop that is free to use cause the one you are using, you have to pay i think?
     
  20. MO :catsleep

    Messages:
    2,499
    Likes Received:
    491
    Trophy Points:
    83
    Reputation:
  21. D.Va I Play To Win

    Messages:
    18,396
    Likes Received:
    233
    Trophy Points:
    64
     :
    I'm with Nighty
    Just want to say this isn't a cure all sometimes other settings are better
     
  22. Bontakun Combat Android Moderator

    Messages:
    3,856
    Likes Received:
    345
    Trophy Points:
    84
    Reputation:
    Catdank Faction:
    One thing I see people do is narrow the curve so much that all the bright colors become uniform and dark colors become uniform, then you can reduce the color palette.
     
  23. Bontakun Combat Android Moderator

    Messages:
    3,856
    Likes Received:
    345
    Trophy Points:
    84
    Reputation:
    Catdank Faction:
    I tried it and it looked like shit -__-

    But I found a workaround. Use the cutout filter on the background:


    to
     
  24. Don King Knights of Ren

    Messages:
    2,156
    Likes Received:
    270
    Trophy Points:
    83
    Reputation:
    There was but you need to pirate it.
     
  25. Bontakun Combat Android Moderator

    Messages:
    3,856
    Likes Received:
    345
    Trophy Points:
    84
    Reputation:
    Catdank Faction:
    The GIMP seems to have some animated GIF functionality.


    But the process will of course be different from Photoshop.
     

Share This Page

Loading...