So you want to make pixel art for an Apple II...

I'm so sorry someone put you up to this. But I'll provide some tips that can maybe help out. I'm going to cover what a pixel artist needs to know and try to avoid any technical explanations for *why* things are such a pain (*cough* NTSC) (and I guess Woz isn't entirely blameless here).

Update! Was not expecting this to be so popular, sorry I don't have the screen captures ready. I don't have a working CRT anymore so captures are just with a capture card. Applewin does a really good job with the actual colors (it matches what you'd see on a CRT better than the capture device does). The "real world" capture will mostly show how the aspect ratio is a bit more squashed horizontally. This is most noticeable if you're drawing circles (and this is another case where it's adjustable on a real TV so there's not necessarily a "right" answer to what the value should be). Capture card output is important in one case: if I am capturing for a demoparty it's going to look like it does from the capture card so keep that in mind.

Anyway, these are your pixelart options, roughly ranked in level of complications you'll encounter trying to make things work. (Honestly if you're making art for me it might just be easier to make ZX Spectrum or IBM CGA art as those convert relatively easily to Apple II).

Monochrome hi-res 280x192

This is the most straightforward. Just black and white, 280x192.

But there will be fringing when viewed on a color monitor. If a single white pixel is alone with black on either side, it will end up purple/green depending if it's in an even or odd column (optionally you can set things up so it's blue/orange fringing if you prefer that for some reason).

Example: ycity by grongy (converted from ZX Spectrum by deater)

ImageViewed in AppleWin EmulatorCaptured from real Hardware
TODO


Example: by @StuntmAEn_Bob

This is a 280x192 image, so note the alternating black/white stipple pattern got turned to purple/green. Which might be an OK compromise, but be aware it will happen. You can avoid this effect by doing your art at 140x192 and then expanding it to 280x192 and your pixels will stay (mostly) black and white.
ImageViewed in AppleWin EmulatorCaptured from real Hardware
TODO

Here is a detailed view where you can more easily see how the single-width white pixels get turned into purple vs green depending on odd/even row.

Four-color hi-res, 140x192

This isn't a different mode, it's just easier to explain the limitations. The screen is still 280x192, but you can paint in 4 colors (black/white/purple/green) or (black/white/blue/orange), just be sure the colored pixels are two columns wide. So think of it as 140x192 but stretched twice as wide. On a better paint program you can probably configure an aspect ratio like that; when I do things I either just do 140x192 and scale, or else do 280x192 but set up a 2-wide grid and manually keep things aligned. IBM CGA graphics often map well to this type of mode.

If you want to be fancy, black and white areas of the image can still be one pixel wide but will end up with fringed colors.

Here are the two palettes I use, my tools recognize them when doing image conversion. There's a lot of debate of exactly what the *actual* colors are, but since most Apple II people were viewing on a poorly adjusted TV you couldn't really guarantee exact values.



Example: based on Hires Rootbeer Logo, by Deater

This shows blue/orange palette, with lots of black spacing which reduces chances for fringing. Note the black and white parts get away with non-multiple of two spacing, though it leads to extra fringing (this is primarily in the "Genuine" text in the image).
ImageViewed in AppleWin EmulatorCaptured from real Hardware
TODO

Example: based on Peasant's Quest II, by @strongbadactual

This one is blue/orange as well, but shows colors touching each other and the weird artifacts you can get at the interfaces.
ImageViewed in AppleWin EmulatorCaptured from real Hardware
TODO

Example: "Lake Cabin" by @starmanpixel, converted to Apple II by deater

Note this originally was blue/green but I converted it to purple/green here because I don't have any good purple/green pictures. It's not as popular a combination. Note that where colors meet up you get some slight gaps.
ImageViewed in AppleWin EmulatorCaptured from real Hardware
TODO

Six-color hi-res, 140x192

Most people assume this should be easy to do, but you have color-clash sort of like on ZX Spectrum (but on Apple II it's horizontal only, no vertical clash). The clash happens every 7 pixels (so every 3.5 "wide color pixels"). Skilled artists can do amazing things in this mode, but it has a distinctive look as clashing colors will often have black or white padding to keep them apart to avoid clashes.

Also be aware switching palettes shifts the pixels by a half-pixel amount so if you look at the columns on the edge you can see it looks like the line bends, that's why. There's technically two blacks and two whites (one for each palette) so you can intentionally use one or the other to avoid this. My tools recognize 0x010101 and 0xfefefe as the black/white that go with the orange/blue palette.

Example: Scientist by dman for ZX Spectrum (converted to Apple II by deater)

Note that while I attempted to avoid all the color clash (often by hand, slapping a 7 wide grid on it and adjusting as best I can) you can still see some places that I missed.
ImageViewed in AppleWin EmulatorCaptured from real Hardware
TODO

Here's a more zoomed in view of a location I didn't enforce the 7-pixel wide palette switch, and while my "png2hgr" tool does its best to pick the correct palette you'll see on the left you can't have green/orange together so it picks one or the other causing a stair-step effect rather than the original diagonal edge. Something similar happens on the right side where some green in a majority of blue area and also got switched to orange.


Example: Dating XR by @strongbadactual
This is an example of a project I am currently working on showing some of the challenges. The vertical lines on the side are white, but when then change from being in blue/orange to purple/green domain you can see they bend outward due to the 1/2 pixel shift. Trying to get clashing colors too close to each other leads to glitches. Even complementary colors next to each other can have white/black gaps. And at the top the text that's too close has fringing.
ImageViewed in AppleWin EmulatorCaptured from real Hardware
TODO

A zoom in on the jagged edge, showing the problem comes when a palette 1 white color is above a palette 0 white color, and they are 1/2 pixel off each other. The bumps at the top are because my "png2hgr" tool uses palette0 by default, it should be smarter and take neighboring columns into account when trying to figure out which black/white colors to use. As said previously you can fix this manually by explicitly using the "other" black/white values (0x010101 / 0xfefefe) when the tool isn't smart enough to figure it out.


One more example, even when using the same palette there will often be unintentional borders when two colors meet up. See this example of the purple/green on marzipan's dress. In hi-res graphics two off subpixels next to each other will make black, and two on subpixels will make white, no matter what the color is supposed to be. (so in this case 101010 is purple and 010101 is green, and when they meet in this way you get 10/01 at the boundary, and the double 0 turns into a thin black line).


Example: Apple II hires dithering patterns

You might note there are some common dithering patterns I use. Here's a table that I use for reference, and what it looks like in emulator. Note that alternating rows of purple/green are often used to approximate grey, green/orange can be used to attempt yellow (but it's really an ugly gold color), blue/green is a sort of blue-green color, and blue/purple can give a darker blue:
ImageViewed in AppleWin EmulatorCaptured from real Hardware
TODO

Fifteen-color lo-res, 40x48

I'm partial to this mode, though a lot of people think it is ugly. It's really nice to program in because it's not much RAM and you can actually update it at 60Hz, something that's not possible in the hi-res modes.

It's 40x48 but the pixels are again twice as wide so the aspect ratio should be stretched and I often draw the images 80x48 instead but just made sure everything is two wide. To confuse things my samples below I have things at 320x192 but that's just so it's big enough to see, my tools generally expect 80x48.

Note there are weird NTSC color effects here, when you have two colors side by side you'll usually get a weird unintended line of color in between. A super skilled artist could maybe take this into account but that's rare.

Here is a rough approximation of the available colors, or at least the ones the tools I write recognize. Note there are 16 colors, but 5 and 10 are both grey and on most Apple IIs (excepting the IIgs) they display as the same color, but they are actually 1/2 pixel shift off so can have artifacts if they are next to each other. I often use color 10 for transparency because it's redundant.



Example, from Apple II Mode7 demo by deater:

Note the edges and where colors join there are slight artifact colors. Also some color pixels are slightly wider than others and tend to bulge out if you look at a multi-color vertical line (like the 'L' in APPLE).
ImageViewed in AppleWin EmulatorCaptured from real Hardware
TODO


Example, from Apple II Lo-res Escape demo by deater:

This is a boring example, but it's showing how you can use the two greys here with the artifact clash to get sub-pixel effects. Note that on the emulator view there are ridges in the columns which aren't visible at all in the raw image. This is grey 5 and grey 10 being drawn next to each other.
ImageViewed in AppleWin EmulatorCaptured from real Hardware
TODO

Text Mode, 40x24 (or 80x24 with 80-column card)

With text mode on older Apple IIs you're stuck with just plain ASCII (though you can inverse or flash it). To make things annoying when they added lowercase on the Apple IIe they shifted the pixels up to make room for descenders so ASCII art ends up looking slightly different. You can't reprogram the font, not a lot of opportunity here.

The enhanced Apple II added "mouse text" characters designed to make text-based GUI interfaces. This adds the potential for better ASCII art, but in practice the new symbols are not really good for much.

Example: "Notamoon" demo by Deater, using mousetext.

ImageViewed in AppleWin EmulatorCaptured from real Hardware
... TODO

Fifteen color double lo-res (80x48) (needs Apple IIe/IIc/IIgs)

This is a mode only available on Apple IIe and newer machines. Same colors as regular 15-color lo-res but twice the horizontal resolution. It's actually a nice compromise in a lot of ways, but it was rarely used. It's also a bit of a pain to program but that's beyond the scope of this.

Example: original ZX Spectrum art by helpcomputer0 converted by Deater

Note that though 80x48 is a nice resolution, the pixels aren't always the same size (notice the grey columns, some are wider than others). Also you'll still notice some NTSC color fringing at edges and where colors meet.
ImageViewed in AppleWin EmulatorCaptured from real Hardware
TODO
Example: by @phubans (?) (I need to be better at documenting sources of images)

ImageViewed in AppleWin EmulatorCaptured from real Hardware
TODO

Fifteen color double hi-res (140x192) (Needs Apple IIe/IIc/IIgs)

This mode lets you get all 15 lo-res colors, but in hi-res! Amazing! Technically it's 560x192 monochrome, but with colors you only get (double-width) 140x192.
This is a *huge* pain to program, and takes up 16k of RAM. Also despite some of the screenshots you see of the Dazzledraw Butterfly, there's even more NTSC fringing so don't expect your nice 140x192 raw image to look exactly the same on an actual machine. If you're clever you intentionally pick colors to include the NTSC fringe colors but that's a bit over the top. See here for tables showing what exact artifacts happen when colors are next to each other.

Example: Butterfly from Dazzledraw Slideshow Disk

This is the most famous piece of Double Hi-res art. An expert did this, people are often demoralized trying to make something that looks this good.
ImageViewed in AppleWin EmulatorCaptured from real Hardware
TODO


Example: A New Clown in Town by thUg

This artwork was drawn in 280x192 so half the columns got lost because the mode really is only 140x192, double-wide. In addition if you look at things like the lights on the buildings you can see that thin bands of color and boundaries where colors touch can have unexpected artifact effects.
ImageViewed in AppleWin EmulatorCaptured from real Hardware
TODO

Fifteen color cycle-counted mode (40x96)

This isn't really a mode, it's two screens of lo-res interleaved. I have some demos that use this mode, it's done via cycle counted mode switching using the "vapor lock" technique and takes up essentially all the CPU. It also is only so useful because of the weird rectangle shape of the pixels, though the Atari 2600 people get by with that so maybe this mode could be used for more.

Example: Apple II from "Apple II Cycle-Counting Megademo" by Deater

ImageViewed in AppleWin EmulatorCaptured from real Hardware
See my Demoscene Demos
To my Demakes Page
Back to Apple II Page