1. AAB SEASON THREE

    Sign up now!
    Dismiss Notice
  2. Welcome to the forums! Take a second to look at our Beginner's Guide. It contains the information necessary for you to have an easier experience here.

    Thanks and have fun. -NF staff
    Dismiss Notice
  3. Stop Scrolling!
    Attention - When discussing new chapters of an anime or manga, please use a source from the official list of approved sources. If you would like to contribute to the list, please do so in the suggestions section.
    Dismiss Notice

Tutorial Milk's High Quality Gif Tutorial

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

  1. D.Va .

    Messages:
    18,459
    Likes Received:
    242
    Trophy Points:
    419
    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 .

    Messages:
    18,459
    Likes Received:
    242
    Trophy Points:
    419
    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 .

    Messages:
    18,459
    Likes Received:
    242
    Trophy Points:
    419
    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 .

    Messages:
    18,459
    Likes Received:
    242
    Trophy Points:
    419
    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 Pirate King

    Messages:
    2,664
    Likes Received:
    340
    Trophy Points:
    238
    Reputation:
    Nice tutorial and this is very helpful.
     
  6. D.Va .

    Messages:
    18,459
    Likes Received:
    242
    Trophy Points:
    419
    Thanks, hope it helps a lot more people.
     
    • Like Like x 1
    • Friendly Friendly x 1
    • List
  7. Mei Who the fuck is cardio

    Messages:
    2,406
    Likes Received:
    373
    Trophy Points:
    263
    Thanks milk chan
     
  8. Bontakun ♪ oo ee oo ♫ Moderator

    Messages:
    7,643
    Likes Received:
    1,070
    Trophy Points:
    1,019
    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 .

    Messages:
    18,459
    Likes Received:
    242
    Trophy Points:
    419
    It's surprising how well it can do so much to the gifs.
     
  10. Bontakun ♪ oo ee oo ♫ Moderator

    Messages:
    7,643
    Likes Received:
    1,070
    Trophy Points:
    1,019
    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 .

    Messages:
    18,459
    Likes Received:
    242
    Trophy Points:
    419
    Everyone loves Nanana :pimp

    Seriously though I want to see your results
     
  12. Bontakun ♪ oo ee oo ♫ Moderator

    Messages:
    7,643
    Likes Received:
    1,070
    Trophy Points:
    1,019
    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 .

    Messages:
    18,459
    Likes Received:
    242
    Trophy Points:
    419
    I need to learn how to script. A delete every other frame script would be amazing for making gifs
     
  14. Bontakun ♪ oo ee oo ♫ Moderator

    Messages:
    7,643
    Likes Received:
    1,070
    Trophy Points:
    1,019
    Alright let's see. This was my old set:

    Spoiler:

    _ _ _ _ Much difference?





     
  15. D.Va .

    Messages:
    18,459
    Likes Received:
    242
    Trophy Points:
    419
    Yeah, I can definitely see the difference.
     
  16. Unlosing Ranger Rebirth and destruction, again and again

    Messages:
    6,488
    Likes Received:
    708
    Trophy Points:
    593
    Reputation:
    Now if only something could fix the horrible artifacting from the gif format...
     
  17. D.Va .

    Messages:
    18,459
    Likes Received:
    242
    Trophy Points:
    419
    Usually with a little compromise you can negate to a degree
     
  18. Bontakun ♪ oo ee oo ♫ Moderator

    Messages:
    7,643
    Likes Received:
    1,070
    Trophy Points:
    1,019
    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 Well-Known Member

    Messages:
    4,614
    Likes Received:
    1,042
    Trophy Points:
    493
    Reputation:
    is there a photoshop that is free to use cause the one you are using, you have to pay i think?
     
  20. MO Well-Known Member

    Messages:
    4,614
    Likes Received:
    1,042
    Trophy Points:
    493
    Reputation:
  21. D.Va .

    Messages:
    18,459
    Likes Received:
    242
    Trophy Points:
    419
    Just want to say this isn't a cure all sometimes other settings are better
     
  22. Bontakun ♪ oo ee oo ♫ Moderator

    Messages:
    7,643
    Likes Received:
    1,070
    Trophy Points:
    1,019
    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 ♪ oo ee oo ♫ Moderator

    Messages:
    7,643
    Likes Received:
    1,070
    Trophy Points:
    1,019
    I tried it and it looked like shit -__-

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


    to
     
  24. Don King Pirate King

    Messages:
    2,664
    Likes Received:
    340
    Trophy Points:
    238
    Reputation:
    There was but you need to pirate it.
     
  25. Bontakun ♪ oo ee oo ♫ Moderator

    Messages:
    7,643
    Likes Received:
    1,070
    Trophy Points:
    1,019
    The GIMP seems to have some animated GIF functionality.


    But the process will of course be different from Photoshop.
     
Loading...