GBA Portrait Color and Palette Tutorial

This was originally going to be a full portraiting tutorial, but the paletting part was the only part I finished.

The palette always the first thing I start with when I’m making a portrait.
You have 16 colors to work with, including the mandatory outline and transparent background color. 99% of portraits also use 5 skin shades. This leaves you with 9 shades to do whatever else you want with.
Make sure these colors are not darker than the outline color. The outline color should be your darkest color.
Using 3 colors with 3 shades each is a fairly safe option with some fair flexibility, while also being easy to recolor.
However, you can get pretty creative with your palettes through different techniques.

Palette Techniques and Color Theory
Ramping

This is a fairly recent palette of mine. On the left, it appears to have far more than 16 colors. However, on the right, shows the ramps of each of the colors, and how they intersect and share shades, saving colors. On top of the 3 sets of 3, I have another set of 4.
image
This ramping works because of another color technique called hue shifting.

Hue Shifting

This green palette has one consistent hue throughout. It looks fine and is certainly functional. However, what if we shifted the hue?
image
Here is that same green palette with hue shifting (and some edits to saturation and brightness for the sake of value consistency, which I’ll touch on later.)
It looks much more vibrant and natural, and ultimately more interesting to look at.
image
This is achieved by pushing your darker shades’ hues closer to purple and your brighter shades being farther away from it. This results in your darker shades appearing “cooler”, as shadows would. This color bar shows the dynamic range of the hues in the second palette.
image
This is a crude diagram, but these are essential how you want to shift your hues. If it is yellow or anything clockwise from it, shift to purple through orange and red. If it is green or anything counter-clockwise, shift to purple through teal and blue. Either way, you want to always shift your darker shades to purple.
image
Looking back to the palette I used to explain ramping, the green and blue meet at and share the 3rd shade. Both of them ramp down to it because their hues shifted in the same direction, albeit, the green shifted much more. In regards to the brown I used for the skin, I needed to shift the darkest skin shades pretty extremely to make room for red hair. Fortunately, because skin is orange in hue, it shifts naturally through red to purple, which worked perfectly for sharing shades to make the red hair.

Value

Value is one more bit of color theory that is helpful in creating balanced palettes. Value is how bright or dark a color appears. This is not the same thing as brightness, though it is affected by it, along with hue and saturation. Unfortunately, many programs don’t support a proper way to view the value of your colors, mine included, so this is a bit of a crash course based on my personal experience and knowledge.
The more saturated the color, the darker the value is and vice versa.
The lower the brightness of the color, the darker value is and vice versa.
Blue, purple, magenta, and red have darker values.
Orange, yellow, green, and teal have lighter values.

These diagrams help visualize this a bit.



These diagrams are from this video, which explores this topic in depth: https://www.youtube.com/watch?v=gJ2HOj22gDo

Some helpful general tips for colors:

Yellows used for blonde hair or for golden trims can often use skin colors for the darker shades to save colors, especially because many yellow unique yellow shades may be too similar to the skin shades and make anti-aliasing, especially around the bangs, very messy and difficult to work with.

Bright colors can make use of an extra shade if you have room in your palette. I often make 5 shade white-to-black palettes in my portraits to get extra detail in things like armor. Hair is often very detailed, and can make great use of a fourth shade for extra detail.

5 shades is realistically the most you will need for a single color from top to bottom. If you have more room in your palette or you want to challenge yourself, feel free to do more if you’re comfortable with it, but don’t feel pressured to do so. Most of the time, 3 shades works perfectly fine.

If you are trying to make something very dark, like black hair or clothes, using 2 shades and then outline as a third shade still gives you enough shades for detailing and can save you a whole color to allocate somewhere else.

Useful Links

Hue Shifting and Ramping: https://www.youtube.com/watch?v=PNtMAxYaGyg
General Color Theory: https://www.youtube.com/watch?v=Qj1FK8n7WgY
Value: https://www.youtube.com/watch?v=gJ2HOj22gDo

Thank you for reading, and best of luck! Hope this helped!

49 Likes

the fe spriter bible written by busk

4 Likes

Which Evangelist am I?

1 Like

Evangelion Unit 1 piloted by Shinji Akari.

4 Likes

I came across this page when a pixel artist I follow posted about it online a week or two ago. While it’s not something that really helped me at my present stage of my art “career”, it covers quite a few fundamentals that should be useful for others: https://pixeljoint.com/forum/forum_posts.asp?TID=11299

It’s a decade old, but still very useful.


Also, for ideas for what to include, I think the biggest topic that this tutorial should cover is anatomy and size/proportions. 99.9% of fully custom portraits that have issues with them are, to me, largely because the artist doesn’t seem to have enough of a grasp for how the features of the body and FE-style portraits are mostly structured, leading to portraits that frankly look worse than a splice would - bodies or arms too small, head too small/big, the head lacking volume and depth, etc. If the goal is to allow people to hone their artistic skills enough to forego using splices in their projects, then I feel like covering this is paramount to making that a reality. Understanding angles is probably right up there with anatomy and proportions, too.

(This is historically why it was often suggested for most people to start with splices so that they can learn these fundamentals through experience before starting into doing custom work and diving into the deep end without what amounts to a safety net. I understand wanting to be able to create the vision in your head, but it really helps to have some kind of base and foundation to start with before getting to that point.)

6 Likes

I think this thread is more dedicated to teaching the idiosyncrasies of pixel art and the fire emblem style rather than a broad art guide on anatomy, posing, and proportions. Although the thread you posted is a very good start for people to look into, I find that there are many things specific to the FE GBA restrictions that you see in a lot of well crafted sprites but aren’t discussed about often or documented in great length.

1 Like

I don’t think the guide needs to go terribly in-depth with it, but I have seen a fair share of portraits made from scratch from artists just starting out doing it that way that all had similar problems related to those kinds of issues. It’s easy enough to fix shading or palettes, but when the underlying base that you’re working from has structural problems and the like, it’s very hard to fix it without significantly redoing everything.

3 Likes

Yeah, I was definitely going to include this link somewhere. I remember AK linking it in Salvaged, and it covers a lot of stuff well, just wasn’t sure where to put it because of how general it is.

As for anatomy and proportions, its difficult to address in GBA because the portrait window is just the top of the chest and up. I can definitely give general pixel distance between things, like 4-6 pixels between the bottom lip and chin on males, but with angles and different body shapes/sizes, its a very specific thing that boils down to studying and practice that I’m not exactly sure how to give a crash course tutorial on. If you have any more ideas regarding it or even want to help write something, that would be greatly appreciated!

1 Like

Might be convenient to have a link to the spritans pin dump thread.

3 Likes

Portraits aren’t exactly my forte when it comes to pixel art, so I might not be the best one to really contribute a written portion to the tutorial.

But, honestly, the best things I can say when it comes to anatomy and proportions (and angles somewhat) is that there’s an element of common sense to just keep in mind while you’re working on something. (Maybe this is easier for me to say than for others to do since I have more of a math-leaning brain and visualizing things in 3D in my mind comes pretty easy for me, but…)

Obviously, it goes without saying that having references on hand, especially when someone is learning, is probably priority number one. While I don’t consider the official works to be unimpeachable works of perfection, there are certainly plenty of them to get a good baseline for size and ratios and there are a ton of works by well-regarded artists to also use as visual references, especially with the work that Klok is doing in reorganizing the portraits on the Repo. And, it’s also very important to consider scale not only between, say, a portrait’s shoulder width and the size of its head, but the scale of these elements between multiple portraits. For example, it would look very awkward for a 25 year old woman to have the shoulder width of a typical FE child character compared to a 16 year old girl that is a splice with more normal widths. While the canvas is small and focused on the upper chest, shoulders, and head, and a given portrait can be in almost infinite angles within that space, I feel like it shouldn’t be too difficult to come up with a guideline of rough example ranges (an average with +/- “deviations” for smaller or larger characters?) for canvas length of pixels for frontal, 3/4s view, and side view for shoulder space and for head height, width, volume, etc., maybe with specific example outlines for each of those three “standard” pose orientations.

And, circling back to the common sense thought, I think the last bit is to try to judge your work objectively, especially if you have used references while making it. If it doesn’t feel like what should be a rounded surface has any contour and looks flat, then it might need some attention brought to the shading or the shaping. If, with the direction the face is turned, you can’t see enough of the head behind it, it might not have the correct amount of volume to it. If you compare the finished product and you’re shooting for having the same type of style as the official portraits and they don’t evoke the same look, then that might be a red flag as well. I don’t want to call out specific examples from the community out of respect so as to not be rude, though these were some issues I noted when I dove through some topics.

I think you’re right that it does boil down to study and practice and/or analysis, but I do think that this really does illustrate just why starting out with doing custom portraits isn’t always the right course of action for someone. Being able to have that experience (as well as helpful critique from fellow artists) and working your way up to a level where you feel comfortable with doing pieces from scratch helps to build fundamentals - it’s easier when you have pieces already assembled for you and you just have to connect the pieces together. I don’t necessarily mean this in a gatekeep-y way of “well I had to do it that way, so you do too!” - if someone has those fundamentals already or is a quick learner, then they might be able to jump right in with doing pieces from scratch.

4 Likes

So this is what came out of the last discussion where people got you wrong. Beautiful! :slight_smile:
Thank you for doing this @BuskHusker

1 Like

If anyone is interested in contributing to this with insight into your own workflow or certain techniques you use, regardless your skill level, feel free to DM me on Discord @ Dominique#4712. I would really appreciate it!

The next entry will be in regards to general shaping, and how to draw either through blocking out the shapes or using outlines as linework. As I’m not especially familiar with outline/linework for shaping, people that have experience with that would be super useful for the insight mentioned above. I will start writing parts of it tomorrow.

And finally, I think instead of placeholder text, I’ll just reveal which topics I’ll explain, that way people can let me know what topics they want me to add an entry for. So if you have an idea you’d like me to touch on like Glenn did about anatomy, just let me know, along with some brief reasoning.

This is the current planned list of topics:
Color (Complete)
Shaping
Anti-aliasing (May combine with shaping, as they are very intertwined.)
Heads / Faces
Hair
Armor
Cloth
Anatomy

Anyways, apologies for the wall of text. I really hope this manages to be a useful resource to everyone, so I definitely appreciate any help people are willing to offer to help achieve that! Thank you for your time!

10 Likes

This looks like it will be a really comprehensve guide! Good luck with it.

You should add the basic frames template at the top of your post imo and maybe a couple of example portraits to entice the reader. :+1:

1 Like

I am terribly sorry for the radio silence, but I promise I plan on continuing this.

I’ll (try to) keep things brief. I recently lost my grandfather, and I’ve been struggling with my motivation and sleep, making it difficult to work on both this tutorial and my portraits and other hobbies. I ask that you do not worry about me, as I’ll be fine with time and space, but that you have understanding and patience.

I would love nothing more than to help people in their spriting endeavors, and I am trying as much as I can to help out in Spritans at the very least, but for now that seems the most I’ll be able to do for a while.

Another bit of a roadbump is the tutorial itself. The next topic I want to explore is shaping and lines, which is admittedly extremely daunting to tackle. Not only is it a complicated topic, it also feeds into many other fundamentals and aspects of character portraiting. If anyone would be willing to offer their processes or general tips they follow when roughing out their shapes, either through blocking or outline linework, that would be extremely appreciated regardless your skill level.

Sorry, that was a bit longer than I intended. Thank you for your time.~

16 Likes

I’m going to be straightforward and just say I’m not going to be finishing this.

I would really love to help more people get into/improve at pixel art and the GBA style, but it’s not probable I’d ever finish this for many reasons, though I’ll list the main ones.

  1. Balancing my personal life/mental health with my hobbies
  2. My growing distaste for the Fire Emblem community as a whole
  3. My growing distaste for my own pixel artwork and the general process behind it

If someone wants to use my colors/paletting tutorial (the only finished part) for their own tutorial, by all means do so. Don’t even worry about credit or anything, though it would be appreciated.

Sorry for those who were looking forward to this.

(I’ve edited the original post to only include the palette tutorial, so its less cluttered.)

7 Likes