#sprite making

First, you pick the sprite sheet you want. I’ll use... this one! It’s sufficiently complicated enough I should be able to cover everything necessary.

Then, create a new “canvas” for the minisprite. Normally for these minisprites I use 100x180, and that seems to fit them well, but since Kay’s got her scarf here I’m going to make it 180x180 for now... we can always resize it later if necessary.

I should note here that I’m not an artist and hence I’m probably missing some super obvious features that make this super easy haha.... but, oh well, this is at least my process.

Next, pick your “starting sprite”. This can be kind of difficult on some of the sheets... but if you know what the sprite’s supposed to look like at the end it helps a lot. There are youtube playthroughs that can help you find it! It also helps to know that in this case, maybe because it’s originally Japanese, but the sprite sheets are often read right->left (at least in this case.)

 In this case, the full animated sprite is actually on the wiki so I can reference that -- it’s not always an option, though, so you’d have to hunt it down somewhere in a playthrough if you remember where it is.

We’ll pick the sprite on the bottom that actually has her scarf in the air as our first sprite. I was going to use the one in the top right corner, but her leg is actually cut off in the image... so we’ll move that one in later. Carefully select and then copy+paste it onto the canvas. Also, make sure you put it on a new layer and not the background layer - once you make the new layer you can delete the background, it makes things a pain later.

The workstation now kind of looks like this. I definitely made the image too wide so I’ll crop it down a bit to 150x180 using the “Canvas size” tool under Layers, just be careful that you offset it properly so it doesn’t crop the image you actually want, and to resize the layers so things look nice. It shouldn’t actually affect the image if you do it right. ... I’ll probably have to crop it again later haha, but.

Now things get difficult, because this is the only completed sprite of Kay that’s in there. All the others are limited to her head or head+torso with the legs off-center for some inexplicable reason, which is why I picked this to account for that.

Let’s deal with the sprite we wanted to use first. I’m going to carefully select the part on the legs where it cuts off, and then copy+paste it onto a new layer. In this case I’ll call it “layer 0″ just so I don’t forget I wanted to put this one first.

It now looks like this. I already did this, but carefully position it above the old sprite so that the similar parts line up. In this case it’s pretty easy since the only thing that changes is the scarf, so I matched up the hair.

To check, you can put the visibility of both layers on and turn the visibility of the top layer on and off repeatedly using that little eye you can see to the left of the layer name, and all it should be able to show is the scarf moving - or whatever you want to change between frames. I definitely recommend this step because even if it looks right... it might not be.

Now, GIMP works in a weird way where each layer can be a new “frame” in a GIF, so we want to make that layer 0 look like layer 1. This is a pain and probably why it’s better to use a program like photoshop haha but we can pull it off anyways. To do this, we’ll first duplicate layer 1. This will be our “base layer”.

The top layer is Kay’s head+torso, which is the part that changes in the frame. So we’ll carefully select that part, move to the base layer, and then press “delete” to get rid of everything except for the legs, which are all we need from that sprite.

Then merge the two layers together by right-clicking on layer 0 (whichever the top layer is) and selecting “merge down”. This will make it into 1 layer. (I renamed it to layer 0 again, too.) As long as both layers are visible and you don’t have any weird effects like transparency or something on them (which you shouldn’t, since it’s not necessary for a sprite edit) it should look the same as the original.

The difference isn’t super visible here but it will be for the later ones.

... Next, this sprite is kind of complicated because the rest of these are just headshots. The one to the left of the top-right sprite is the base sprite, as far as I can tell, so we’ll pick the next one over, the one which is third from the right.

I rearranged the layers so 0 was on the bottom for the GIF process later, and made a new layer 2 for the next “frame”.

Things... get kind of weird here because the scarf kind of goes below the neck cut-off point, so when repeating the process I did above with copying the base sprite + cutting out the replaced parts, I’m using the neck as a base guideline instead of the lowest point of the scarf, so that the sprite doesn’t end up looking weird.

Normally when I do these, I use the frame just before the current one as the “base”, so that I conserve as much as possible. In this case, though, I’ll keep using frame 0 as the “base” sprite because the scarf stays above the neckline, so it’s much neater to cut out than the ones where the scarf goes below.

Lots of times you’ll just have to use your best judgement on where to cut things so that you keep what you need. Sometimes I’ve had to just take out an eraser and erase some of the sprite where there’s no easy way to do it haha. Anyways, here’s the third frame.

I’m not going to show it because this went on long enough, but by repeating the process, I get the next frames for all the little headshots there.

Now we thiiink we have our frames in place, so we’ll export it as a GIF! Once you do that (you go export, change the file type to GIF, and then add .gif at the end just to be safe) this pops up.

Since I already was working on these before it’s already filled these in haha. If it’s not checked already, check the “As animation” box. Make sure “loop forever” is selected. Then, you add in the “delay between frames where unspecified” - an earlier sprite had 130 as a walking speed, but the scarf animation I got from the wiki had the frames at 100, it honestly depends. Use your best judgment by eyeing the originals as best you can where a source doesn’t exist.

I tend to find that 100-150 works for most little actions. You can change the individual timing of the frames by adding ([x]ms) to the end of any individual layer name. (For instance, (100ms) if you want that one frame to be 100 milliseconds long. The layer name would then be something like “1(100ms)”.)

The “replace” option is there because otherwise the layers would just pile on top of each other which doesn’t look good. “Replace” treats each layer as a new frame, which is what we want. For some, you might want to use cumulative, but I’ve yet to figure out where to use it haha. If you need it changed between different frames, you can add (cumulative) or (replace) beside each of the layer names in a similar manner you would with the milliseconds.

Once that’s all done, you export, then check out the gif! Here’s ours.

... And thinking about it, I think I might’ve actually messed up a bit. I don’t think that frame at the bottom was supposed to be there, and the one I thought was identical actually wasn’t. By replacing that one with the other frame we get this...

Which looks similar? But a bit better? It’s hard to actually tell the difference. I highly doubt anyone would notice unless they actually know how sprite sheets work - I don’t! I really don’t! That’s why I’m suffering here haha.

I genuinely don’t know how to get the timing perfect - referencing the original sprite or similar sprites is the only advice I have here. I’m sure someone who knows more about this than me can give a better answer.

This is one of the trickier sprite sheets to do, I think.  Some of them are much easier... like the walking sprites. You just overlay them as necessary. And some of them I genuinely have no clue how to work out... just look at this mess that is Gumshoe and the metal detector.

Half the struggle is deciphering what is going on with the sprite sheets actually. Looking back I kind of wish I picked a different example because I’m not confident on this one... but I’m not redoing this tutorial haha.