1. Konoha Library has been renamed to New Leaf. Konoha TV will soon be (or has been) archived. For Naruto/Boruto manga AND ANIME discussion, go to

    New Leaf
  2. 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.
  3. 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.
  4. Avatar upgrade for members!
    All normal members can now have 175x250 avatars.
    Read more about it here.
  5. "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 :) .
  6. Our latest NF Newsletter is out (November), read it here!
  7. It's that time of the year when everyone spreads good and magic things, to enter in the Christmas Spirit full of art HVoA invites you to

    ✵ Join the NF Christmas Extravaganza ✵
  8. 。◕‿‿◕。 Gobble gobble! Turkey day is nearing fast so hop on by to NFs Thanksgiving Raffle and give thanks to those that matter the most to you, win some goodies in the process too!
  9. It's that time again, where a certain lazy rodent refuses to host a wonderful NE-centric game. Come play the 2nd Mafia Game

    in the Nigerian Embassy (formally known as the Chatterbox) hosted by the one and only WAD! Test your skills, shitpost like no tomorrow!

    ...There's a prize if you win.

Tutorial Milk's High Quality Gif Tutorial

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

  1. Milk ミルク

    Messages:
    17,567
    Likes Received:
    177
    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
    • Like Like x 2
    • Informative Informative x 1
    • Useful Useful x 1
    • List
  2. Milk ミルク

    Messages:
    17,567
    Likes Received:
    177
    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 2
    • Informative Informative x 1
    • Art Pimp x 1
    • List
  3. Milk ミルク

    Messages:
    17,567
    Likes Received:
    177
    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 5
    • Informative Informative x 3
    • Friendly Friendly x 1
    • List
  4. Milk ミルク

    Messages:
    17,567
    Likes Received:
    177
    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 Espada Knights of Ren

    Messages:
    1,891
    Likes Received:
    222
    Trophy Points:
    63
    Reputation:
    Nice tutorial and this is very helpful.
     
  6. Milk ミルク

    Messages:
    17,567
    Likes Received:
    177
    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 fgt

    Messages:
    701
    Likes Received:
    58
    Trophy Points:
    28
    Reputation:
    Thanks milk chan
     
  8. Bontakun Plushy Mecha

    Messages:
    3,313
    Likes Received:
    191
    Trophy Points:
    64
    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. Milk ミルク

    Messages:
    17,567
    Likes Received:
    177
    Trophy Points:
    64
     :
    I'm with Nighty
    It's surprising how well it can do so much to the gifs.
     
  10. Bontakun Plushy Mecha

    Messages:
    3,313
    Likes Received:
    191
    Trophy Points:
    64
    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. Milk ミルク

    Messages:
    17,567
    Likes Received:
    177
    Trophy Points:
    64
     :
    I'm with Nighty
    Everyone loves Nanana :pimp

    Seriously though I want to see your results
     
  12. Bontakun Plushy Mecha

    Messages:
    3,313
    Likes Received:
    191
    Trophy Points:
    64
    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. Milk ミルク

    Messages:
    17,567
    Likes Received:
    177
    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 Plushy Mecha

    Messages:
    3,313
    Likes Received:
    191
    Trophy Points:
    64
    Reputation:
    Catdank Faction:
    Alright let's see. This was my old set:

    Spoiler:

    _ _ _ _ Much difference?





     
  15. Milk ミルク

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

    Messages:
    5,361
    Likes Received:
    533
    Trophy Points:
    113
    Reputation:
    Now if only something could fix the horrible artifacting from the gif format...
     
  17. Milk ミルク

    Messages:
    17,567
    Likes Received:
    177
    Trophy Points:
    64
     :
    I'm with Nighty
    Usually with a little compromise you can negate to a degree
     
  18. Bontakun Plushy Mecha

    Messages:
    3,313
    Likes Received:
    191
    Trophy Points:
    64
    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.
     

Share This Page