re: any advice for pixel artists

It's not advice from surt, and didn't want to pollute Surts' thread, so..

i'll just ramble on and if anything is useful to anybody, that's good.

-ram your forehead bloody against nes screen tool. Use it at least 3 days a week. You'll develop a new PPU-shaped center on the artistic side of your brain in a couple of months. This is different from simply knowing the limitations and behaviours of the PPU.

-once you do, it can help to move your work back and forth between it and a more general raster editor, though i've opted to do all my backgrounds in NESST now that it has some larger than 1 screen features. Each method will take your work, especially in regards to composition, in different directions. The medium imprints itself onto the message.

-i think both surt and kasumi (both whom i admire) are very confidently using broad strokes, trusting filled areas + the shape of the sometimes unmarked border between them will convey something beautiful. Both have their distinctive style of course, but i recognize a common boldness which i find very impressive.

-One way to practice that technique is actually not in the field of low-res rasters. Vector graphics operate on this basis. An exercise could be, using illustrator:
--load a swatch with a limited set of colours (could correspond to some console, just to have a template).
--paint landscapes using only vectors, fill colours and, just ocasionally, line colours. no gradients, special brushes, textures or effects.
--i sort of did this a lot as a kid, although with raster graphics in windows 3.11 paint.
--the advantage of vectors is you're less destructive and are allowed to play around with positioning of lines without deleting any information
--the advantage of raster is it is closer to low res pixel art.

-i'm addicted to pointilism and minute details. it's my buoy. This was something i started doing at the same age, coming up with patterns with 1px or max 2px width using only a handful of colours. A way to practice this kind of expression: As a kid, i'd toggle zoom back and forth between every other edit to develop a feel for how minute patterns on a micro level affects the visuals when zoomed out/normal. Steadily, as the confidence grew, more edits went between toggles. Today, i still feel a detailed view like the chr editor in nesst is helpful, but i also have a sort of mental projection how things look at different zoom levels that i can trust for quite a long string of edit actions.

-oh yeah, and use black as an instrument to coax the viewer into believing. The viewer will psychologically fill in the gaps whenever a black field is used wherever there'd otherwise be details in an omnilight setting. Spaces of void means space for fantasies and illusions to operate. Sometimes other colours can be used for the same effect, but black is extra potent.

-have patience. it may take years to develop a style.

-any form of visual, creative work helps build up a knowhow. sketching, drawing, painting, animating, filming, photography, photoshoping raster photographs, product format & layout, poster making.
For a period ranging elementary to the end of high school, i tried making comics. Never got good at it but it's a craft and a practice that develops a sense of narration and guidance through positioning and direction of objects. Very useful skill to have developed at least some. Without it, i think i'd be half as okay when doing level design (which is the macro scale of pixel art - composition).

Good thread!

Step one: Actually learn to draw. And paint. High resolution. Paper, digital, whatever. You'll get way more skills for time spent. There are no shortcuts.
Step two: Read this: http://pixeljoint.com/forum/forum_posts.asp?TID=11299
Primarily just to learn basic terms and techniques that you can apply your art skill to. Remember step one?!
Understand that pixel art is a very varied thing. It's not just "retro". There's this:

(Six colors!)
Source: http://pixeljoint.com/pixelart/65301.htm
And then there's this:

61 colors.(!) But every pixel is still very carefully placed. (!)
Source: http://pixeljoint.com/pixelart/117215.htm
Another good retro pixel artist is this guy:

Source: http://pixeljoint.com/pixelart/96094.htm
Here's a picture from his instagram:

Source: https://www.instagram.com/p/BUP9mbNFFU5/
I don't want to be as good as this guy at pixel art. I want to be as good as this guy at art.
I can't stress it enough. Learn to draw! Learn to paint! This is a hill I will die on, because it makes me sad when I see pixel artists with weakness in drawing. I don't claim to be the greatest at drawing myself, (I've really split my time between art, programming, music... etc and am only average in all rather than strong in one...) but I absolutely work on it.

Already know how to paint?! Neat!
I'm personally team anti-dither. It adds a gritty texture to things. A single pixel that is unconnected horizontally or vertically to another of its color adds visual noise. It makes your art harder to read because it doesn't describe shape, it describes texture. There's... less room to describe texture in pixel art.

(Outlines/antialiasing are an exception, to me personally.) For Dark Souls, for Batman, dithering is okay... But I always prefer to do without. I understand that it can give the appearance of more colors, but make sure you really understand the readibility trade off that comes with it.
A couple of artists with good pixel "clusters", are
vagrant ("The finest clusters, at your service."): http://pixeljoint.com/p/43310.htm


OCEANSCENTED: http://pixeljoint.com/p/30349.htm


Is it harder to apply techniques like this on NES than it is when totally unrestricted? Sure. I usually go out of my way to avoid dithering because it creates a mood that doesn't match most games I make. (Which is closer to Kirby's Adventure/Gimmick.) I'd probably avoid it myself in dark games, too, though. We'll see.

Much like dithering, I like to avoid black as my universal color because it also tends to suggest a mood that doesn't match most games I make. (I'm not saying you should avoid it too! Black as the universal color is a very powerful technique on NES.) Because that's what I wanted to do, I tried to study things that were successful without. (I said I would probably avoid dithering in in dark games. I would absolutely not avoid black as the universal color in dark games, it's SOOOO good.)

I actually created a palette study document. I guess I'll share it:

Non animated large version: https://i.imgur.com/xROSty0.png
Some basic stuff: You can't rely on the relative brightness of your colors across emulators and TVs. Here's an image I share a lot:

A pixel artist friend actually recently shared an image with even more extreme differences, but I can't share it fully yet... Here's a portion of it:

THESE ARE THE SAME THREE COLORS IN DIFFERENT EMULATORS!
$30, $23, $1C
(I realize this is dithered, by the way. I didn't make it!)
Your NES art is gonna look different everywhere. It's just a fact. Too bad. How do you mitigate the effects?
1. Do not pick colors from the same row on the NES palette and expect them to keep their relative brightness.
Here's an NES palette.

In it, $08 looks darker than $09. But I guarantee somewhere $09 is gonna be darker. If you want a color to be darker, pick it from a higher row. If you want a color to be lighter, pick it from a lower row. If your art can't work with this rule, you must either rethink it, or accept that somewhere it's gonna look way weird.

Slight exception: If you want to throw a red in with a blue from the same row (different hues, basically), the contrast might be kept. But picking hues that are close together on the same row is a recipe for disaster.

2. The "SAME THREE COLORS" gif really demonstrates it. You can't even really rely on colors from different rows retaining their relative brightness. (But that's a less common problem.) So colors are usually best picked close to each other on the palette "grid."

You can safely break rules 1 and 2 with white, and black. (Black will always be darker than the $0X row, and white will always be brighter than the $3X row.)

What later Mega Man games learned to do is pick three colors from any given column (maybe with white or black instead) (+Universal color.) The Centaur Man Stage's starting palettes are:
$38, $28, $18
$20 (white), $21, $11
$2C, $1C, $0C
$20 (white), $23, $13
With black as the universal color. Notice anything?

Another reason this is powerful, (in particular, having all your palettes arranged from brightest to darkest in the same way) is that you can use multiple palettes to display the same tiles, and it doesn't cost you anything extra.

With two more palettes, one could combine the four in all kind of ways with zero tile cost.
Image source: https://twitter.com/not_surt/status/957427454448099328
But one of the more clever things I learned is from looking at surt's palettes. Here is a portion of my palette study image:

source: https://opengameart.org/content/darknes
He applied the hue shifting pixel art concept to the way the NES palette is arranged. This palette walks down to brighter rows, but also walks right to (slightly) different hues. $05, $16, $27 is a GOOD palette which may or may not be in Indivisible.

tl;dr: To have the best bet at your colors looking alright across many emulators, walk the palette to pick colors. (Move one column up or down, and optionally one row left or right.)

Another surt technique is using the sky color as a highlight:

Source of image: https://opengameart.org/content/plattoon

This works because colors that surround other colors affect how they look. There's this famous optical illusion (A and B are the same color): https://i.imgur.com/uzNS4fZ.png

Another piece of non NES pixel art I've always liked that demonstrates this concept:

Source: http://pixeljoint.com/pixelart/18818.htm

Those trees look ever so slightly green, but the green color actually has more red than green and is basically gray. (332F2F)

Although I am team anti-dither, I also need to share this image by Helm:

http://pixeljoint.com/pixelart/12082.htm
This is a four color image. Black, Red, Green, and Blue.

Though it's not my bag, let's take a look at why black as the universal color is so powerful.
I said earlier that you need to pick colors on different rows for best results. But black is always guaranteed to be darkest. And shadows are a real thing that really exist!

NES can only have about 1/4 of the screen be unique (without bank switching whatever, let's not be pedantic). 32x30 tiles = 960. 256 tiles in the set. 26% unique. If you start with a black screen, and build things out of the shadows, you're implying details and connections between things without needing to spend tiles on them.

All those highlighted pink tiles in this door from Batman Returns are solid black. That's eight tiles saved for that ONE structure. It really adds up. Two things with savings like this essentially gets you one new type of decoration to add to the level!
Only one quarter of the screen can be unique?

(Shatterhand)
No problem, just use black. You don't need a tile for the left middle side of that window, it's implied. You don't need to put windows or detail on that pyramid roof building on the left, it's implied. You don't need a bunch of brick tiles on the castle, they're implied.
It saves you tiles to an extreme degree, but it also hides the 16x16 palette borders. Need to change colors in a not grid aligned way?
Fade into black, and come out another color!

(Mega Man 6)
Fade into black, and come out another color!

(Robocop)
Those red diagonal awnings are meant to be over a blue building. Can't do that. Fade red to black, and come back from black into blue!
Yellow sign over blue building! No problem! Fade yellow to black, come back from black blue.
Note the protective barrier around the second story windows on the left. It's basically entirely black, allowing it to safely cross the two different blue palettes.
This isn't even that dark a scene! Black as the universal color is super powerful.

"But Kasumi," you say. "You don't like black as the universal color. What tips do you have for that?"
Minish Cap also uses this technique, with twist. It fades from texture into a flat color. (CLUSTERS!)

A crack in the floor! -> solid color. A leaf! -> solid color. Moss -> solid color. They could have had a repeating, tiling pattern across the floor that the leaf and moss were drawn on top of, but I think it would have been visually busy. You don't need texture everywhere. You don't need detail everywhere. The flat areas give the eye a place to rest. (I probably should have avoided the repeating brick pattern in the Indivisible temple.)


Leaf texture->flat color on top. Primarily single color grass with small detail. Holes to interrupt an otherwise solid color dirt path.

Too many colors for you? Here's Beyond Oasis for Sega Genesis:



Beyond Oasis was a pretty game, y'all. Especially for its time.

Here's Indivisible's mid area:

I didn't fade to black, I faded to green. The "door" on the tree fades to green, fades in yellow once it comes out of the shadow of the leaves. I used the surt technique of using the surrounding color as a highlight on the palm tree. (Not very successfully, though.) This is a piece of the image I'm proud of:

"Where's the palette boundary for the eight pixel wide spire?!"
Here are that image's palettes:

(Well it doesn't exactly match because one's from an emulator, but it should be enough to get the idea.)
Notice that there are basically two universal colors. (Really, almost three!) Green, which is the ACTUAL universal color. And light blue. (And a darker blue, almost.) With colors repeated across multiple palettes, I can transition to another palette boundary using a sloped decoration rather than just a solid color tile. You get fewer colors on the screen, but you can transition between them in a less jarring way. I'm working on a game with slopes as terrain, and I will probably use this technique a lot in it.

Well, it's kinda jarring on the top right there... >_>

Another thought that helped me out is thinking of things as sets of fewer than four colors.
Check this out:

That's one palette, but it's pretending to be a blue palette transitioning into a green. This scene does have fewer colors than your average Mega Man level, but it doesn't look that grid aligned.
But here's a surt example of it, used in a different way.

$0F+$05 is the darkest subpalette.
$05+$16 is next.
$16+$27 is brightest.

But you could also do the darkest three colors, or the lightest three. Or just the lightest one, or just the darkest one. Using your "ramps" effectively, you get huge control over how out of the shadow something is with just one palette.

This image by ptoing:

Demonstrates this concept well. The blue water is darker than the blue rocks, is darker than the blue sky. But it's just one palette. The green tall grass is brighter than rubble underneath the gray rocks.

Another drive by tip: You get just four palettes. Try to use them all on every screen or your game will end up looking very monochromatic. (If you're finding it hard to use them all, pick different palettes. I'm serious!)
Here's a scene from Mother:

vs

Mega Man 6

Little Samson.

One final tip. Don't always make art in something that restricts you to the limitations. That might sound like backwards advice. But here's why I say it.
It is very clear these tiles were drawn on a grid:

(Star Tropics)
It is way less clear that this was:

(Mighty Final Fight)
A fences is overlapping a garage, it's not all 16x16 repeating. Unless your game relies heavily on an actual grid (like Chess), it's worth trying to hide it. (Especially for cutscenes and things. For a level, I totally get the need to keep tile use down while working.)

For the Indivisible mid area, I drew everything having an idea of where the palette boundaries would go, but not really checking. When it came time to put the stuff in the game, I was hundreds of tiles over, and some things had to be shifted to fit in the boundaries. But where's the grid?! For the temple I checked a bit more often.

The first version of Indivisible's temple was made with WAY too much thought given to reducing tile counts.) Here's a comparison.

Yes, the game could have looked like that monochromatic mess. Based on this:

I was so worried about the lion statue being too many tiles, so I made it super small.

So I made the palette study document. I dissected graphical styles that were close to what I wanted. And it was WAY easier to get everything from 500 whatever tiles to 256 than it was to work so entirely within the restraints.I'm not as good as many examples I've shared, but my next thing will be better. And the thing after that will be better too.

Practice. Study. Get better.

Aw shucks. I'll throw love to
surt,
ptoing,
you (FrankenGraphics),
M-Tee,
and
Justin Cyr
as far as NES retro art. (I'm missing people >_> I might revisit this list.)

As far as pixel art in general... that'd be way too hard for me to do. It's probably clear I consume a lot of pixel art.

This post was an adventure. I still want to write Indivisible devlog posts, but posts like this... they take... a whole day.