Matching Elements to Time Fantasy (Tutorial) (Patreon)

Good morning. Today's post is an oft-requested and long-awaited tutorial.

A while ago, I shared this little color-matching tutorial for using the Time Fantasy and Elements together. Today we're going in the other direction: so it you have a project that uses the classic TF color style, you can quickly recolor the Elements pieces to fit.

If this tutorial isn't useful to your project, I'll be back next Monday with something new, from the request thread, so look forward to that.

Also, like the previous tutorial, I've made this post freely available to anybody, because it's a knowledge-resource and not an asset resource, and knowledge should be freely shared.

Hopefully this is useful for ya!

---

Note: I'm using Photoshop for this, and there are plenty of other alternatives that have similar features. When we get into specific numbers, it might be different depending on the software you use, so you'll have to trust your eyes when adjusting value sliders. tbh... trust your eyes and aesthetic taste over the numbers anyway! That's what makes art art :)

---

The previous tutorial was illustrated with tilesets, so today we're gonna convert some character sprites!

Let's take a look at the set of premade NPCs from the Time Elements Character Core:

(Note these images are cropped screenshots from a working file. If you need the original 100% spritesheets, they're in the Elements set.)

Here they are on a Time Fantasy-style test map (using the Faerie Forest tileset). You can see how the Elements characters stand out with mismatched colors:

So our goal will be to recolor the full character sheet to match.

The easiest/fastest way to recolor is to replace the darkest color (the black), and then with the updated baseline, adjusting the rest of the colors to match is straightforward.

The process will be pretty much the same as the previous tutorial, so I'll go through the steps quickly to demonstrate the settings that I'd use:

Step 1: Replace the Black(s)

The Time Fantasy "black" (Hex: #354048, RGB: 53/64/73) is much more muted than the pure black used to ground the Elements style.

(For me using Photoshop, the fastest way is to use the paint bucket with zero tolerance and contiguous unchecked. There's a bunch of ways to do recolor quickly depending on the software you're using, but note that you don't want to use any anti-aliasing or tolerance, because then the replacement might bleed into other colors. With pixel art, we want color replacement to be "perfect".)

Here's how they look with the pure-black replaced:

Clearly the rest of the colors are now out of sync with the baseline:

Step 2: Color Adjustment

Now that the base black is replaced, we want to select every color on the sheet EXCEPT the black that we just placed. This way we can adjust all of the other colors at the same time.

Here's a video clip:

Unfortunately looks like it didn't capture my mouse cursor. So to clarify, the clip shows this:

Using the magic wand, we select the TF "black" color,

then invert the selection so it's the only color NOT selected.

Then we can play with color sliders: Shifting the "output levels" works like placing a cap on the color range, so you can use it to set the whole color palette in relation to the TF-black.

Note (again) that personally I don't put much stock in the specific numbers settings, and go by how it looks. That said, the "41" that I used in the video above will probably work just fine for most assets in this style, so if your process needs a specific value (like to to make a consistent action or script for bulk processing), that'd probably be a good starting point.

Step 2 (Alternate): Color Replacement

Note that if you want your project to stick to a particular limited color palette, then you can do direct color-replacement instead. In Photoshop it's quick enough to use the eydropper + paintbucket just like we did for the black, but for other colors that you want to replace as well.

This method was more important in the previous tutorial (which includes an example gif of me recoloring some tiles in this way) because the tilesets specifically need to use the same colors so they can blend seamlessly.

For characters, generally, I think that this kind of direct-recoloring is less necessary, because individual sprites don't work together in the same way that tiles do, the bulk-color-adjustment method will be fine in most cases.

Note on Color Palettes:

If you do want to match a specific palette with a limited color count, I have this page with the palette file and some info about the colors, this page was set up with the original Time Fantasy release.

More recently, as we're pushing the art form with the modern holistic "hi-bit" style, I've shifted away from the obsession with a limited palette. But remember: combining colors and minimizing unnecessary colors (and thus making effective use of contrast to define clusters) remains vital for maintaining a consistent look/feel for pixel art: we simply have the luxury to be a little more loose with it because of modern technology, especially when it comes to adjustments or bulk processes like these).

Step 3: Oh, that's it! Export and replace in game:

Now they fit in with the color tone perfectly.

I hope this was useful for you and will help you on your game project. Let me know if anything wasn't clear.

Have a great weekend. See you on Monday.

Thanks.