The Great UE4 Pixel Art Experiment! #7 - How to create higher quality gamedev GIFs!

I managed to get a new gif of better quality, hopefully Blogger doesn't trash it during upload:

Now you may be thinking, how did you manage to make a GIF so crisp, so fine?!

This actually involved using Photoshop, using the following method could create a crisp, clean gif without making the pixel art look all completely horrible.

The Process

1. Use ScreenToGif (Click to open website) to record the GIF
2. Save the project out as a sequence of images in it's own folder
3. Open Photoshop and go to File > Scripts > Load Files into Stack
4. Find the folder with your images and load them in.
5. Wait a very, very long time for Photoshop to process all of your frames. (¬_¬)
6. Go to Window > Timeline, you should end up with a new panel at the bottom.
7. Click the little panel options button in the top-right of the window and select 'Make Frames from Layers'
8. Play through your animation using the controls at the bottom, if the animation appears like it's going in reverse then go into the panel options again and select 'Reverse Frames'
9. Select all your animation frames, then select an arrow pointing down next to one of the '0 secs' Enter in a time, this will be the time between frames, I set this to 0.05 which was a decent number. With all of the frames selected it should apply the same time to all the frames. Keeping your GIF framerate consistent.
10. Do any image touchups, cropping, add a layer on top of everything for a watermark or border.
11. Go to File > Save For Web. You should automatically get the settings for a GIF.
12. You can try altering the settings and quality if you need to reduce memory, but photoshop does a pretty good job from the get go. Let me know if you find any magic settings that doesn't reduce quality!
13. Hit Save and salivate at every frame of your brand new GIF! 

via GIPHY

Enjoy!
-James