TT Lily Posted October 7, 2021 Report Share Posted October 7, 2021 Quote Link to comment Share on other sites More sharing options...
RandomDesign Posted October 15, 2021 Report Share Posted October 15, 2021 So this will be an interesting one. I have already a couple ideas in mind. Will start sharing some progress as soon as possible. :D Quote Link to comment Share on other sites More sharing options...
Jason Simm Posted November 2, 2021 Report Share Posted November 2, 2021 Good luck Stefan 👍 RandomDesign 1 Quote Link to comment Share on other sites More sharing options...
RandomDesign Posted November 10, 2021 Report Share Posted November 10, 2021 So lets go, Hi everyone, I’m Stefan, a PC modder and prop maker from Germany who currently lives in Michigan, US. Some of you may know me and my wife Kathrin as RandomDesign from building custom, extraordinary PCs. Now, I’m happy to tackle this new challenge for the Thermaltake Ultra GIF Design Invitational and make some custom animations for the Floe RC Ultra 240 CPU & Memory AIO Liquid Cooler. I like to try out different ways on how to create animations and short videos, which hopefully will inspire you to also customize your CPU and Memory displays. Here are the ideas we gathered so far (just working titles to keep you curious ^^). I’m planning on using mainly Adobe illustrator, After Effects and Premier to create 2D key frame animations. If I got some time at the end, I also will work on some 3D animations using Cinema 4D and I’m looking forward to sharing my progress with you: 1. Kittimania (2D animation) 2. Hamsters in my PC (2D animation and/or Stop-motion) 3. Submarine/Birdseye (Video/drone footage editing) 4. Think Tank (3D animation) MERRICK 1 Quote Link to comment Share on other sites More sharing options...
RandomDesign Posted November 25, 2021 Report Share Posted November 25, 2021 1) Kittimania My idea is to make a simple 2D animation of a claw machine grabbing toy kittens - Why kittens? Well, it was the first thing that came to our mind. They are cute and fluffy and look great in a crowd! I also hid a small Easter egg among the kittens. Did you find the invader? I created the picture as a RGB vector file in Adobe Illustrator (Ai). I made sure that every single element, that should be animated later on, like individual kittens, the two claws and the arm of the grabber, was put into a single layer. Also, don’t miss to rename the layers accordingly! It will make your life so much easier later on. I saved the Ai file already in the right format of the displays. You can change the format under “Windows” à “Artboard” CPU: 480 x 480 px (RGB) Memory: 480 x 128 px (RGB) The Ai file can be directly imported into After effects (Ae). Just select “Composition” and “Layer size” for the footage dimension. You see it in the project window and can open it by double clicking. You will see that the layer structure is as in your Ai file, which makes it super easy to pick and animate the individual elements. For animating the scene, I used key frame animation, which is an easy and fast way to animate objects. I started by animating the grabber. Since I want the two claws to open and close later on, I already moved the anchor point of the two objects to the axis of rotation, right in the middle of the sphere holding both of them. You can change the anchor points with the “pan behind” tool. Next, I changed the “position” of the grabber and the two claws by using key frames. Just go to the “transform” option of the layers or select the three layers and press “P” on your key board. Make your key frames “easy key frames” by selecting them and press “F9” (can be reversed by “Strg right click” on the key frame). The movement will slow down a bit towards the end of the key frame which makes the whole movement look more smooth. Quote Link to comment Share on other sites More sharing options...
RandomDesign Posted November 27, 2021 Report Share Posted November 27, 2021 To animate the claws, I select both layers and press “R” for rotation. Now, I can change the angle a bit and since I moved the anchor point of both objects to the rotation axis, they will rotate round that axis. When a cat gets grabbed, it also should tilt a bit and become squeezed. I used the “Puppet Position Pin tool” and set to pins at the left and the right point where the two arms of the claw are touching the cat and moved the position of the pin accordingly to the movement of the closing claw, so it looks as the claws are squeezing the cat. I thought that when the cat gets pulled out, it might wiggle a bit and also some of the other toy cats around will be moved. So, I changed the rotation “R” and position “P” of the cats and adjust the key frames that they move by a few degrees as soon as cat #1 gets pulled out. To fine-tune the animation, you can always go back to the key frames and simply move them to get the perfect timing. When a kitten falls back into the crowd, I also made all the other cats to move a bit like they got bumped by the impact. Since this animation is going to become a GIF, which should run as an endless loop, I made sure that all kittens are at the end of the animation in the exact same position and rotation angle (0 °) as at the start. The kittens that had been successfully grabbed (three in total) should also find their way down to the “exit” of the machine. I decided to show them in the display of the Memory AIO Liquid Cooler (480 x 128 px), just as they are falling down a narrow tube. I also thought that it would be quite boring if they are just falling. So, I gave every cat a special expression/move. Therefore, I needed to animate individual parts of the cats, like the arms, eyes, … Every object that should be animated in Ae was again put into an individual layer in the Ai file. In Ae, I first of all moved the anchor points of all rotating parts, e.g. the two arms, to the point where they should rotate around. While the cats are falling (by changing the position “P”), I changed the position of the arms by rotating them “R”. To make the smile of cat #1 to become broader, I used again the “Puppet Position Pin” tool and set the pins on the left and right edge of the smile and drag it more to the outside. This tool was also super helpful to animate the slight wiggling to the cape of cat #2. Things that just showed up during falling, such as the tongue or the white sparkles in the eyes, where simply animated by changing the scale “S” at the key frames from 0% to 100%. In this way I also made the green color of cat #3 appear, while its’s getting motion sick during the fall ^^ Quote Link to comment Share on other sites More sharing options...
RandomDesign Posted November 27, 2021 Report Share Posted November 27, 2021 And here is the final gif for the CPU and memory Quote Link to comment Share on other sites More sharing options...
RandomDesign Posted November 27, 2021 Report Share Posted November 27, 2021 2. Hamsters in my PC For the CPU display, I designed a cartoon hamster wheel with a hamster running inside – just as the hamster is firing the engine ^^. I drew the image again in Adobe illustrator and imported it into After Effects for animating. The wheel was fairly simple to animate and I just used the “rotation” (R) tool, making it rotate around its own axis. I moved the key frames until the speed of the wheel was just right. The animation of the hamster was a bit trickier. Again, I made sure that every part I wanted to animate, like the tail, ear and the two legs, was put into an individual layer in the illustrator file. For the front and back leg, I also used the rotation tool (R). However, I first moved the anchor point, around which each leg is supposed to rotate, using the “pan behind” tool (Y) (shown on top in blue in the image below). I moved the anchor point to the position, where I imagined the joint of the leg. Then, I used just a few degrees (like 15-20°) to move the leg back and forth. I copy/pasted the key frames to repeat the movement and adjusted the speed (distance between two key frames) to the rotation speed of the wheel. To animate the tail and the hamster’s body which should move and slightly bend while running, I used the “Puppet position pin tool” (Strg+P). For the tail, I put two fixed pins on the edges (see below, open yellow circles) and one pin that I can move around a bit to make it look as the tail is moving slightly up and down while running. For the body, I placed multiple pins all over the surface (15 in total) and adjusted their position, so the whole hamster will bend a bit while running. This step just took some time to play around with the pins until the changes in the body shape looked good and not too exaggerated. The key frames were synchronized to the key frames of the legs. So, the whole movement looks smooth. For the memory cooler display, I was long time undecided what to do. So, I just thought, ok, a hamster should not come single. So, I wanted to place another one and while Hamster #1 (let’s call him Puk) keeps the PC running, why not hamster #2 (called Fops) being counterproductive and chewing some cable inside your PC. I drew another cartoon hamster sitting on some cables and having one cable in his mouth in illustrator. On top of the hamster, I added a layer having the hamster’s shape and showing only the skeleton of him. I also created some zick-zack stripes which are supposed to represent some electricity – I guess you know what’s coming. Every single part was again put into individual layers for the After Effect animation later on. The skeleton and the electricity layer were not visible at the beginning. The hamster is not moving, but just cawing on that cable in his paws. I used again the “Puppet position pin” tool to set defined pins at the mouth and cheeks which are supposed to move slightly up and down by changing the position of the individual pins. After a while, the whole hamster will move up and the skeleton-layer, laying on top of the other layers, appears together with the electric zick-zacks. The hamster-layer below just disappears at the same time, because I wanted the hamster to shake a bit. Using the puppet position pin tool, I put multiple points (9 in total) around the hamster’s surface. Because I wanted to create a more random, shaking pattern, I just used the command line for the position of each pin. You just have to press “alt” and click on the position stop watch and the command line will open. I just typed in “wiggle(15,29) with 15 being the speed of the random movement and 29 the magnitude. I tried out different combination of speed and magnitude until I liked the outcome. After electrocuting for 3 sec, the hamster just moves back to its normal position continuing chewing on the cable (who else ever had a hamster knows that they just never learn ^^). The “wiggle” command (alt click on “Position” stop watch) is really cool for random movements and saves you a lot of time. MERRICK 1 Quote Link to comment Share on other sites More sharing options...
RandomDesign Posted November 27, 2021 Report Share Posted November 27, 2021 And the final Hamster animations! MERRICK 1 Quote Link to comment Share on other sites More sharing options...
RandomDesign Posted November 27, 2021 Report Share Posted November 27, 2021 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. Quote Link to comment Share on other sites More sharing options...
RandomDesign Posted November 27, 2021 Report Share Posted November 27, 2021 And my last gifs Rob "Deblow" Deluce 1 Quote Link to comment Share on other sites More sharing options...
Rob "Deblow" Deluce Posted November 27, 2021 Report Share Posted November 27, 2021 Great job with the animations, I was going to try a crash course in animation myself but glad I didn't now because they would suck compared to yours lol Quote Link to comment Share on other sites More sharing options...
RandomDesign Posted November 28, 2021 Report Share Posted November 28, 2021 Haha thx. Was actually also the first time we did animations this way. Was a lot of fun, even though just scratching on the surface of the abilities of After Effects. Rob "Deblow" Deluce 1 Quote Link to comment Share on other sites More sharing options...
RandomDesign Posted November 28, 2021 Report Share Posted November 28, 2021 Also made a short video and tried to capture how the gifs look in "real" life MERRICK and mainframe 2 Quote Link to comment Share on other sites More sharing options...
MERRICK Posted November 28, 2021 Report Share Posted November 28, 2021 The hamster gif looks so cute. 😊 Quote Link to comment Share on other sites More sharing options...
RandomDesign Posted November 28, 2021 Report Share Posted November 28, 2021 1 hour ago, MERRICK said: The hamster gif looks so cute. 😊 Thanks! Its also my favorite. Quote Link to comment Share on other sites More sharing options...
Sanjaya Posted November 29, 2021 Report Share Posted November 29, 2021 I love the hamster one too RandomDesign 1 Quote Link to comment Share on other sites More sharing options...
Tony Vincent Martin Posted December 4, 2021 Report Share Posted December 4, 2021 The Grab and drop cat is brilliant RandomDesign 1 Quote Link to comment Share on other sites More sharing options...
jhond1762 Posted December 6, 2021 Report Share Posted December 6, 2021 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. Quote Link to comment Share on other sites More sharing options...
RandomDesign Posted December 9, 2021 Report Share Posted December 9, 2021 On 12/5/2021 at 11:53 PM, jhond1762 said: 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. Thanks a lot. Was actually our very first try for completely self-made animations. Still so much to learn, but it was great fun. Quote Link to comment Share on other sites More sharing options...
kenth Posted July 21, 2022 Report Share Posted July 21, 2022 That's great I want to ask a question regarding to participate in these type of seasons. Basically I create animated characters professionally. I have also five years of experience in this field. I want to show my creativity in different platforms that's why I ask you what's the criteria for join seasons? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.