How to make quick and easy chapter headers

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.)

47%20PM

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.

32%20PM

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)

44%20PM

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.

39%20PM

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.

17

58 Likes

Very helpful!! The walkthrough was great for non-technical folks.

3 Likes

Awesome, thanks! I’m gonna have to do this for TMB and all my WIPs.

1 Like

I think tomorrow I’m going to add how to handle color in images tomorrow (which there is like 3 different ways to do).

9 Likes

Hmm… chapter header, ey?

So, during my "hiatus", I've been experimenting with both GIMP and Inkscape. Here, we got 2 images.

Result Main_Menu2

8 Likes

@Szaal Those are super cool! Were they made in GIMP or Inkscape or both?

Both.
The curved line in the Result header is made by GIMP’s simple brush. As for the glow/bloom effects, I used Inkscape since it’s easier to tune up the intensity and shape, IMO.

2 Likes

Inkscape is another great tool, although I’ve fallen out of regularly using it because it’s Mac implementation is, we’ll say less than ideal, and most things I can readily do in GIMP. (Although I’m a fairly big proponent of SVG as a file format.)

Those look very good. The only thing I’d note is that as chapter headers, I feel that transparent backgrounds go a long way to making them look more cohesive with the rest of the app. (Maybe that’s just a personal taste, but I just think the edges of a colored background look a little harsh. Or maybe it’s just that I’ve seen enough on a plain white background that I just flinch at the idea of an opaque background now. :stuck_out_tongue:)

Ironically, I’d probably prefer to use Inkscape to make something like the curved line, because it’s a lot easier to look at/edit the numbers directly (which as AFAIK, unfortunately not an option with GIMP), while I find GIMP is easier to do simple bloom effects with a quick mask and a grey pour (but that’s just comfort with tools).

2 Likes

Really cool idea! I did chapter titles in mine, but just with bold text and a page break. This is way better.

1 Like

Huh, quite the opposite, then.


I still remember the old times where I was given a ditigal art assignment in high school. Using alpha-transparency mask, I basically combined all 3 Assassin’s Creed Unity, Sword Art Online: GGO, and my friends’ images to create an assassins in desert thingy. Their portraits also match perfectly with the assassin’s body frame.

Good 'ol times. Wonder if I still got the image.

Just if anyone is interested, it is possible to import new fonts into programs like GIMP or PS if you want a particular style via sites like this: https://www.1001fonts.com/ (There’s others out there as well.)
Just be careful with the licences if you’re going to put them in a game. Some are free for commercial use, but others are only for personal use.

5 Likes

This is a tiny bit confusing. Can you go further into detail or provide an example of what you mean by this? Thank you!

Also, thank you for sharing GIMP with us! :smile:

I think it’s exactly as it looks. You type the text after the image. (So if your heading says Chapter one, you type “Chapter one”. I actually had no idea you were meant to do that. (Haven’t been in my existing ones with headers.)

2 Likes

@RETowers - Why do we have to input text after the image? Would it break the code if the text wasn’t there?

I think it’s for people who use screen readers, since the programs can’t read the text on images.

2 Likes

I’m getting an error message about the alignment:

41%20AM

Except my code looks like this:

50%20AM

Anybody got an idea of what went wrong? Thank you!

Edit: wait. I missed the text_image. Just a moment.

Edit: Nope. NVM. I’m still getting the same error message.

I’m not sure if you can have gaps in the image name. Try renaming it to chapterone.png (both in the file and on your game.)

2 Likes

It works now! Thank you! :smiley:

1 Like

I changed it to the text we use in the documentation, as @EclecticEccentric mentioned, it’s because our games are otherwise accessible by visually impaired users, and including the text maintains that.

2 Likes

Thank you so much for this post. I want to make a flying bullet chapter header for Hong Kong Blood Opera now.