Commodore 64 graphics tutorial

How to make Commodore 64 graphics in Photoshop

Trying to make some retro pixel graphics to look exactly like they did back in the old Commodore 64 days? It’s easy! The secret is the double-squared pixels together with commodore 64 color table. Let’s get on with it!

Part 1: Commodore 64 color table

First of all we need to define the correct color table of the Commodore computer. Obviously we couldn’t be using colors the C64 was (is) unable to display. It had 16 pre-defined colors available. This is one of the reasons why many if its games had quite similar graphics.

The easiest way to obtain the color table is to download this adobe color table file I made ready for you. Download commodore 64 color table

(You can then skip the rest of this step if you grabbed the file)

If you wish to make your own color table you can use some C64 screen dumps to extract the colors. It is important they come from the same source, as you want the colors to be absolutely identical. The screen dumps you extract from must be in 320×200 pixels, GIF or PNG format, as you don’t want JPEG and interpolation noise.

You can find lots of game screen dumps at It is important that all the colors are represented in the same screen. A good example is the game ‘Creatures’ looking like this:

1. Copy the image and paste in a new Photoshop document.

2. Merge layers [ctrl/cmd + e].

3. In menu choose [Image > Mode > Color table…]

4. Click [Save] and save the file as Commodore64.act on your desktop.


Part 2: Scale your image

Now you need to find the image you wish to use for the conversion. I found an image of a nice UFO house which I’ll be using.

4. Click [Save] and save the file as Commodore64.act on your desktop.

5. Make sure your image is in sRGB color space.
Now click [Image > Image size] and scale your image to 25% width and 50% height using ‘Nearest neighbor (hard edges)’ resampling. Remember to unclick ‘Constrain Proportions’.

6. Your image should now look something like this:

Part 3: Adding the Commodore 64 color palette

7. Now click [Image > Mode > Indexed color]. Choose [Custom palette] and click [Load]. Locate your Color table file. Click [OK].

Choose [Dither: Diffusion 8%]. A high dither number will make the image look too perfect. Almost every images on the Commodore 64 was hand-drawn (with joystick or keyboard) and dithering nearly impossible.

8. This is what your image should look like:

Part 4: Scale back up

9. Now scale your image back up using [Image > Image size]. Choose 400% width and 200% height. Scale using ‘Nearest neighbor’ resampling.

10. Voilà! You’re done. Your image should look like the one below. You can experiment with different scaling percentages depending on the purpose of your image. If you use a high-res image, you might want larger pixels. Remember that you should try to end up with the right amount of pixels in order to keep the effect realistic.

Our final result! Neat, isn’t it?