So, I see a lot of games come in without chapters headers, and I think this is a missed opportunity, because good looking chapter headers don’t have to be difficult. In fact, you can probably do them yourself for free! So, because I wanted to, I drew up a quick and easy walkthrough of how to make a good looking chapter headers in GIMP.
For information on color in headers, see this post.
First, you’re going to want to download GIMP. I recommend GIMP because it’s free, it’s available for Windows, Linux and Mac, and it’s got just about everything we’ll need. (Of course you can use any image editing software you have, but this tutorial will focus on GIMP.) I’ll be showing the demo on a mac because it’s easiest for me, but this should generally be the same experience on Windows and Linux.
After downloading and opening GIMP, you’ll see a blank screen. The first thing you’ll want to do is select File > New for a new image, then you’ll need to make sure you get the settings right. First, the size you’ll want is about 500px by 125px. Depending on how exactly your image comes out, you might want to change that a little, maybe it needs to be a little shorter, or even a little taller, but that’s a good starting place. Second, you’ll want to select Advance Options, and make sure two things are set. First, you’ll want to make sure the color space is RBG (this should be the default), and—this is important—second, you’ll want to make sure to Fill with Transparency. This will make sure that your image will have the same background as the game. (See below for example.)
Next you’ll want to start with actually making your headers. If you’re the creative type, this might be where you take off and do your own thing, see what all the buttons do and start googling how to do things, but even if art is not your forte, that’s fine, just follow along and put your own touches based on your own game. (Honestly, I’m not very artistic myself.) First you’ll want some text. Select the text tool, and write out what you want the header to say. Next you’ll probably want to center it.
If you’re having some trouble, try this trick, center the text in the box (the selection in the bottom left), then use the movement tabs to stretch the box across the width of the image. There, now it’s nicely centered.
Now, we have some text, we can do some drawing. Lets cover a few basics. First, regardless of how complex what you’re drawing is, you’re going to want to make sure you draw on the background, or create a new Layer to draw on (see the Layer list, which currently lists “Chapter 1”, which is our text layer, and “Background” which is the default layer). Now draw whatever you want. As I said, I’m not very artistic, so I just did about as complex a geometric shape as I could manage.
But now we have a problem. We want our shape to be even on both sides, but it was really hard to draw the first time, let alone making a perfect copy for the second one. Well, we have the tools for this. First, we right click the layer we drew on, then we duplicate it. Once we’ve done that, we just need to select the flip tool, make sure we’re flipping just the new layer, and simply click. (See below)
And with that handful of tools, we’ve got enough to start playing around. Maybe we subtitle our chapters with a different font, maybe we go with something stylistically asymmetrical, maybe you’ll think of something I never imagined. That’s up to you. But eventually we’ll finish, and we’ll have one last thing to do, which is to export it.
Note: We strongly recommend all images be in .png format for best effect.
So now what? Well, after we export it, we put it in the same place we put all our images (in the mygame folder), then we use some specific code of headers:
*text_image chapter1.png center Chapter One
So let’s break this down. First *text_image is a special command that shows images just like *image does, but it also knows when nightmode is on, and inverts the colors. Next we have chapter1.png which is the name of the image, just like with other images. Third we make sure to center the image. Finally we make sure to type an alternate description after the alignment. This text will be accessible to users who can’t see the image, e.g. visually impaired users. (See the *image command in documentation.)
And with that, we have our chapter header.
)
