As I said, today I’ll be answering the question, “What if we add color to our image?” And the short answer is, well, it depends on the image and what effect you’re going for. Okay, so it’s impossible to offer a catch all, but here we’ll cover a range of options, along with some tricks to getting the best looking chapter headers when you add color.
First, of course, is the very simple, “just go with it”. If a chapter header has color, but still looks perfectly fine with the colors are inverted, you can always just leave it. For this choice, I’m just going to borrow the headers from Werewolves: Haven Rising for an example. We can see that, when inverted, we aren’t using the very werewolfy browns, but the blue with the yellow on the bottom looks very much like an implicit skyline in the country or something similar. It may not carry the same connotations, but it doesn’t detract from the game.
Next, we have another simple option, which is to make sure to use colors which work well on both the light and dark backgrounds. In this example, we’re making a vampire game and we want a few drops of blood on the chapter header. After making those, we realize we can’t invert the colors, so we pick a silvery grey for the text, since that should be readable on both the standard and black backgrounds. Then, rather than using *text_image, we just use *image so that it doesn’t invert on the black background.
Third, if we have a chapter header where the text is unreadable on one of the backgrounds because it blends in, we can add a border to the text so that the text is always over an appropriately visible color. For this example, we’re making a cutesy game with a pastel rainbow chapter header, that doesn’t show up on the standard background.
Now, the first thing we do is select the area we want to make the border. To do that with text, we right click on the text, and select Path from Text, then we go to the menu bar and click on Select > From Path. This will mean we have the text itself selected. Next, to get select the right space for the border, we click on Select > Grow… to open the grow menu. Here I’m using a border of 3px, which will be on the thinner side for smaller devices, but should still be enough. See below for an example.
Now that we have the border area selected, we want to actually make the boarder. But before we can do that, we need to make a new layer so that the border can be moved. Here I’m doing so by right clicking on the layer list, then selecting New Layer…, and as with creating the header, it’s important to remember to make sure the Layer Fill Type is set to transparency. After we have the new layer selected, we can use the Bucket Fill Tool, and pour the border black. You may notice that covered the text. Well, we made sure to create the new layer just for this. We just need to move the border layer under the text layer in the layer list, and then you should have your header.
And there we have it. We just use *image (as above), and on the black background, the border is hardly noticeable, while on the standard background, you can see it makes the pastels pop.
And just for example, this is a header with a dark text that we put a white border on. Now, lets cover a couple of things that I didn’t mention above. First, to color the text like these two headers I used essentially the same method as the borders to create the colored text. Just select the text as you did before, without selecting Grow, then use the Blend Tool on a new layer to make a gradient version of the text. Second, in the below chapter header, you may notice there is a feathering effect on the border. To accomplish this, rather than select Grow, we just select Border instead, up the selection by a few pixels, then select Feather border. You can play around with various options to get some very complex looking text.
Now, for our final method of handling colored headers, we found we’ve made something which just can’t be inverted, and can’t be made to be legible on both a light and dark background. For this example, we have a game set on Mars, and so we have a prominent red planet which needs to stay red, and our text is split by a thin line, which we can’t add a border to (at least without ruining the aesthetic). Well for this, we just make two different headers, one for a light background, and the second for a dark background.
Now that we have those, we use one of the special choicescript variables: choice_nightmode. We make sure to put both headers in, and just use this:
*if choice_nightmode
*image chapter1_nightmode.png center Chapter One: Landing
*if not(choice_nightmode)
*image chapter1_daymode.png center Chapter One: Landing
And we display the appropriate header for each background.
