PixelArt production record "snow station"(5/6) (Patreon)

"PixelArt  production record 01". This is a $4(japanese) or $7(translated) article on shopify. 

But we will translate it into English and publish it in 6 articles on patreon. This is a patron benefit.

I will be posting the first chapter, "Until I Started Drawing Pixel Paintings.

This is a readable The technical discussion begins at part 3/6.

Reason: English translation takes time. Patron benefit is needed. I do not yet have a standard to distinguish patrons by amount, etc.

Previous : PixelArt production record "snow station"(4/6) 

Next : PixelArt production record "snow station"(6/6)

4 Let's Move It

4-1 How Animated GIF Works

Next, I make a looping animation from this static GIF. I will explain briefly, "What is a GIF?"

About Image Format

GIF is a type of "image storage format" like PNG and JPG. Extensions attached to file names such as Photo.jpg and Image.png indicate this storage format. This file was 01aa.gif. It's improvised.

PNG is a format mainly suitable for illustrations and websites, and JPG is ideal for photographs and print data. Photos on your smartphone and pictures on SNS are usually PNG or JPG. There are various other image formats not to be seen on the Internet, such as RAW of raw image data on digital cameras, PSD of edited data from Photoshop, and ERI of compressed format for game images.

What is an Animated GIF?

GIF has a unique function among the image formats used on the Internet, which is a sort of foul play as "images." One Gif file can store many images, show them in the set order and speed, and make it look like a movie. These are called animated GIFs, GIF videos, and so on.

On the other hand, a GIF with only one image is a static image. Static GIFs are also used for buttons, icons, etc., on websites that we usually see, although GIFs are often thought of as moving.

By the way, animated "GIFs" we see on Twitter are not strictly GIF format image files. Those are converted to MP4 format video and played in a loop. The moving images used in this article are actual GIF files.

Dissect the GIF

We can set "display order" and "display time" for each image stored in animated GIFs. Lesser known is that we can also turn off loops or specify the number of times to loop. Shown below is a screen of Giam, a tool that displays the contents of animated GIFs. It's helpful to use such tools in addition to pixel art editors.

”Giam” Create and edit animated images in GIF/MNG format - WINDOWS FOREST

4-2 How to Make Animated Loop GIFs

2, 4, 8, 16 Cycles

My landscape animated loop GIFs are created by repeatedly copying and pasting in principle. Specifically, I copy and paste the original drawing of one frame into two frames and process the 2nd frame. Next, I copy and paste these two frames into four frames, process the 3rd and 4th frames, and then copy and paste these four frames into eight frames ... These repeating end when the required length is met and completed.

Image A

Image B

I made the above GIFs in the past. Image A has a 32-frame cycle composed of 16 frames for the water surface and 32 frames for the rain. It has so many numbers of frames because the raindrops move finely. Image B has an order of magnitude frames, a 160-frame cycle, and it's not a power of 2. Because not only are many frames required for each with and without a train in the background, there are also irregular frames when the train appears. Those are examples of odd GIFs. I hope I can explain those someday.

This snow animated GIF is simple and has a 32-frame cycle. 16 images for snow, 8 for a parent and child, 4 for a snow plume underfoot, and 2 for the lights of a train flashing though it's hard to see.

Needless to say, you can't draw a 16-frame animation when the total is 8 frames. On the other hand, drawing an 8-frame animation when the total is 16 frames causes more unnecessary work. I work systematically, thinking, "Draw what I can while the total frames are still tiny."

Unbalanced Move Comes Unnatural

Moving only one part of an image gives a strange impression. In particular, if it is smooth (i.e., fast) animation with many frames, it may have a somewhat unnatural and eerie appearance. If motions are dispersed throughout an image, time appears to be moving even in parts of static. This time, snowing helps me not think deeply about composition and the balance of where I should animate and enables me to disperse movement throughout.

If you do not know Cinemagraphs, please search for it. It’s a type of looping animated GIF in which a beautiful scene from a movie or live-action video is cut out as a static image, and only some parts are moving. These look very strange to me. Of course, I know Cinemagraphs are comfortable for someone and have a unique charm, but they are unbearable and uncomfortable for me, like a nightmare with a high fever. Probably because the objects are moving while the air is stationary. Expressed in my own words, it looks like "Contrived stagnation" or "Solitary activation." One of the reasons for the discomfort I feel is that some parts of the realistic scenery are permanently looping at a high frame rate. Putting aside my taste, I imagine these unique impressions occur because of distorted shapes and time of a scene already completed for a new purpose. Some people may become addicted to this strangeness, and perhaps I become to need them when I'm feeling too sad.

Cinemagraphs can show small dust but can't move the whole air. On the other hand, Pixel animation can't express small dust but have "Possibility of Movement" throughout the image. Therefore, dispersing movements on the screen can avoid the strangeness peculiar to Cinemagraphs. Conversely, pixel animation can express its strangeness depending on how it is drawn and moved. I have some favorites for this type of animation. I will introduce them someday.

The Choice Not to Move

I thought it would be good not to move the train conductors for this time, so I didn't. It's just simply because I prefer static images rather than videos. It's too difficult to explain more here, so I'll spare you; it's deeply related to linking my hands and eyes mentioned in 1-3. Although, it might have been fun to draw the actions of the train conductors breathing white and setting a misaligned mask.

4-3 Carrying Out

Finally, let's animate the static image created so far. The specifications depend on the editor you use, but they are essentially similar. As long as the extension is GIF, "moving out" is easy, so trying various editors for the same image is good. If you are in trouble, use EDGE2. Please read below in place of your situation and the functions you use.

The static image created so far will be the first frame of animation. In EDGE2, it's displayed “VIEW / PAGE WINDOW.” In Pixaki, it's shown at the timeline on the bottom of the screen. Copy and paste this first frame to create the same second frame.

Blinking Light by Two Frames

I represent a blinking light by painting the lights in the 2nd frame darker. It's easy to create the 2nd color; Copy and paste the 1st color and slightly darken it on the pallet. You can see the lights flickering in the preview function. Change the speed setting if it's too slow or too fast. As a side note, the actual lights don't flash like this. This is one of the tricks to express the glare of luminous objects. The two-frame animation is complete once you have confirmed that the lights are blinking enough to make your eyes moderately twitch in the preview.

It can be called a bit of a "GIF movie," but it's almost a static image, so I will increase the number of frames to show more animation. Copy the 1st and 2nd frames and paste them into the 3rd and 4th frames. It’s successful when "the light turns on twice in one loop." If not, review whether the frames are alternating. Be careful not to repeat the same frame unnecessarily. It may cause mistakes at work.

Snow Plume by Four Frames

I had not planned to draw the snow plume, but I wondered, "Is there anything to draw at the stage of four frames..." and did it. As completion approaches, I work without thinking deeply. The snow plume looks complex, but once it starts moving, it works surprisingly well. It's more enjoyable for me to get over at ease than to care about correctness.

I drew mountains with the pen tool and filled them with the same color. "One mountain and one valley" moves within four frames to look like "smoke in motion." It was appropriate, but it looked like it. I have a bad habit of getting excited when the end is in sight and running through it without proper details. After confirming that the snow plume moves in the preview, I copied and pasted it so that the snow plume does two laps in eight frames.

Parent and Child by Eight Frames

The child looks small in perspective, so one pixel makes a big move. Please note that making a move in all eight frames will be annoying. I make the child still from the 1st to 5th frames, squeeze in the 6th frame, bounce in the 7th frame, and return the posture in the 8th frame. The backpack falls in the 1st frame to loop.

The parent moves its arms up or down once while two frames. After repeating it three times, one move in one frame twice. Monotonously stylized movements would have been fine, but something was missing, and here's what I did.

After confirming that the parent and child work well in the preview, I copied and pasted it to be 16 frames. Next is the last process, making snowfall.

Snow by 16 Frames

Drawing with distinction, the snow in the foreground and the back makes perspective. The snow in the foreground is large and deeply colored and moves a big. The snow in the back is small, pale, and moves one pixel per two frames horizontally and two pixels per one frame vertically. Snow is a bit transparent, so the darker the background, the darker the white snow color. I created one or two colors for this snow as there weren't any suitable colors on the palette, making the snow looks more natural.

It's easy to display a 2*3 or 3*4 grid and draw snow based on it. My drawing style is pretty simple and quirky, and to be honest, it's not suitable for textbooks. I intentionally erase the smoothness to make it laggy. Many people are looking for a way to express more realistic and quaint snow, and it might be good to think about your drawing.

I add snow in some frames and positions steadily, and the screen will eventually fill up with snow naturally, so I have to care about the placement as the number of snow increases. Otherwise, it will be a strange GIF such as "a lump of snowfalls in every few seconds" (It happened).

4-4 Finishing Work

Well, now it's completed. However, I can't let my guard down.

Check Playing Speed

Reviewing the speed is essential. An accidental upload of an explosively fast GIF often happens due to the preview speed adjustment. A slight difference in speed can change the visibility dramatically. I take time to check the differences at each rate.

Expand Four Times or More for SNS

Pixel art is a tiny image, so enlarge the size with "no interpolation" when posting to SNS. It's often recommended to enlarge two times, but I recommend four times or more as long as the upper limit of the size is not exceeded. For example, GIFs on Twitter are strictly GIFs converted to MP4. Therefore, if the resolution of the original GIF is below a certain level, the converter underestimates the image quality and degrades it after conversion.

Watch the Extension When Saving

I have experienced a tragic accident where I lost all the data I had drawn. It was that I saved a GIF as a PNG. Some editors will announce a warning message, but it's useless if I ignore it with momentum. I want to be sincerely careful when saving.

Be Aware of Mistakes

When I make an animation with pixel art, there is sometimes an unnecessary one pixel left that I don't even notice. Those who can find this are fine, but it isn't easy for me.

There are many mistakes in my drawings that I knowingly allowed to happen. For example, in this GIF, there is snow consisting of 4 pixels flying in the left margin of the screen. I noticed this first when I started writing this document, but I thought it was OK because the snow looked so cute coming out of the screen. Also, there are many "I don't know why I made" mistakes in past drawings.

The episode below represents my personality. Once I lived in a dilapidated house as it is, even though a typhoon had hit, leaked, and the floor fell through. Those who saw me were amazed. Of course, this personality that doesn't care about details causes many troubles. Still, as I look at and touch interesting holes or lovely raindrops, I become attached to them and don't feel the need to fix them. This snow is like that.

Overlapping with what I mentioned in 3-4, it’s important to calm down once it appears to be complete. To find mistakes, it's worth leaving it for half a day or a few days and rechecking it with various media, such as smartphones, PCs, or projectors. It's also good to ask a severe person to find fault.

Next : record (6/6)