[[Germany] Stefan Ulrich]

On 11/27/2021 at 1:21 PM, RandomDesign said:

3 .Submarine

The idea for the submarine came after visiting the aquarium in Chicago this fall. Kathrin and I were sitting hours in front of some of the tanks, watching all colorful fish. So, I thought that would be a cool idea to have for the CPU and memory display, just as you have fish in your water cooling

Friends of ours have really impressive fish tanks and we got the chance to take some nice shots of the colorful underwater worlds. I took the videos in high resolution (4K) that I had the chance to crop them without losing quality (not that it really mattered for the animated GIF). In addition, I wanted that the CPU and memory displays look like two window next to each other. Therefore, I cut the video and used the left part for the CPU display and right part of the same footage for the memory display (see below). I also kept in mind that the actual size of the LCD memory display is longer than the one of the CPU. That is why I zoomed about 1/3 in for the video of the CPU. So, the fish will have the same size later on, when the GIFs are displayed next to each other. For video editing, I used Adobe premiere. 

 

Exporting files as animated GIF

I imported all After effects videos into Adobe premiere to make final adjustments, such as changing the overall speed of the animation and matching the two videos for the CPU and Memory display in case of the toy kitten claw machine.

Next, I wanted to export the video as animated GIFs which turned out to be more challenging than expected. The difficulty is to get a nice small size for your GIF animation without making it look shitty. The GIF needs to be smaller than 20 mb, so you can upload it using the TT RGB PLUS Software.

For the two hamster animations, this was fairly easy, because both clips are pretty short (only 5-8 seconds). In Adobe Premier, you can just animated videos as animated GIFs. In the settings, I just changed the frame size to 480 x 480 for the CPU and 480 x 128 for the memory. I kept the frame rate at 25 fps and didn’t change any of the presets for animated GIFs.

For the claw machine animation, it was trickier, because the clips are about 30 sec long. After adjusting the frame size, the GIF was still way too big. Therefore, I went down with the frame rate to 12.5 fps and was able to export the GIF with a size of about 18 mb.

Most challenging was the fish tank video for the CPU. The GIF got really big (~40 mb), even when I exported it with only 12.5 fps. I also didn’t like that the GIF run no longer smooth because of the low frame rate. One reason, why the fish tank GIF got so much bigger compared to the rather simple 2D animations, is the huge number of colors. One can, however, restrict the number of colors. I rendered the video in Adobe Premier as MP4 (1080 x 1080) and just opened the file in Photoshop. Then, I went to “Export” à “Save for Web (legacy)…” to export the video as a GIF. In the menu, you have different settings to adjust the GIF. One is the frame size, which I changed to 480 x 480. The other one is to reduce the colors to 256 (or even lower). In addition, you can increase Lossy a bit (to 20-30), which will also slightly lower the size of your GIF. Of course, the GIF doesn’t look as great as the MP4 video, esp. not on a big screen, but it will be fine for the small LCD screen of the cooler.

I have seen this custom animation. That looks so real and attractive. You did excellent work once again. I also design the most challenging short 2d animation ideas and videos for many clients. Animation design is the biggest challenge for new animators. But, You did great work.