Skip to content
This repository has been archived by the owner on Jan 5, 2024. It is now read-only.

Spriting with GIMP

MyNameIsTrez edited this page Jul 14, 2023 · 24 revisions

Introduction

This is GIMP.

gimp

GIMP is completely free and one of the few programs that can be used to create sprites for CCCP, but it's often a daunting program to learn for newcomers.

The upside is that you need less than 1% of what GIMP's capable of in order to sprite like a pro for CCCP, and this tutorial uses screenshots every step of the way. If you do manage to get stuck, please do tell me (MyNameIsTrez) where via Discord so I can improve this tutorial. :)

Why GIMP

The reason why you should use GIMP instead of MS Paint / Paint 3D / Paint.net / etc. is because those other programs don't support indexed color mode.

If your image isn't in indexed color mode, it'll look corrupted in-game.

But why does the game use indexed color mode

Pixels in most images are stored using RGBA, which have one byte (256 values) for the red channel, one for the green channel, one for the blue channel, and one for the alpha channel, totaling 4 bytes per pixel (16 million colors and 256 transparency levels).

CCCP's indexed images however only use 1 byte per pixel. This means its images take up 4 times less storage space! It also means that only the 256 colors in the game's palette can be used in sprites.

This is quite limiting because the palette wasn't made very well and misses a lot of normal colors, but it creates the CC look that we all love, and it also means that mods won't ever visually clash too much in style.

The magenta color in the palette's top-left corner is what you use in order to indicate which pixels you want to be transparent in-game.

image

Getting started

First off, download GIMP.

Let's say we want to draw this sprite.

checkbox001 - Copy

You'll need to use the game's palette, but I've written a program called Pixel Sorter which, duh, sorted its pixels.

You can choose to use either the original 16x16 palette version, the 32x32, or the 64x64 version:

Choose one of them, right-click it, and select Save image as...

Note: DO NOT use the Copy image option since it doesn't retain the image's palette, breaking the image.

16x16

32x32

64x64

Drop the downloaded image on top of GIMP to open it.

image

Zoom into the color palette area in the top-left of the image by holding the Ctrl key down and scrolling up and down with your mousewheel.

image

If you don't see a GIMP window called Toolbox yet, click the Windows button at the top of GIMP and click New Toolbox.

image

When hovering over any tool its shortcut will be displayed; it says it's O for the color picker.

Select the Color Picker Tool.

image

Click any color in your image. It will show up as the top colored rectangle, which is light green in my case.

image

Click the arrow in the top-right of this image to swap your current color with your stored one.

image

Click a different color in your image.

You have now stored two colors and can quickly swap between them by pressing X.

image

Click the Pencil Tool, or select it by pressing N, and start drawing!

image

image

After you're done drawing, make sure to draw any areas you want to be transparent with the magenta color mentioned earlier.

image

Click the Rectangle Select Tool, or select it by pressing R, and select the area of your image that you want to be your sprite.

You can drag the edges and corners of your selected area if you want to change its size.

image

image

Now click the Image button at the top of GIMP and click Crop to Selection.

image

Save the image by clicking on the File button at the top of GIMP and clicking Overwrite sprite.png.

image

You can close GIMP now. When you get this popup just click Discard Changes.

The only reason to use Save As is if you care about the GIMP-specific metadata of the image being lost, like layer information, but none of the steps in this tutorial have created any metadata you might want to keep.

image

Congratulations, you've created your first CCCP sprite! 🎉