CHAPTER-START IMAGES

Today we're going to move on to chapter-start images, using the free program GIMP. (To remind yourself of all the progress you've made messing around with GIMP, check out INTRO TO IMAGES and COVER DESIGN.)

Decide how much room you want to devote to your chapters' first page. Check out some books on your shelf. Think hardback, not paperback. (Paperbacks may skimp on room for chapter-starts. Some don't even start a chapter on a new page.)

Often, half a page (or more) is given to naming (or numbering) a new chapter. That's half the size of a title page, or a canvas 600 pixels wide and 400 high.

Landscape mode, this time.

Open GIMP, select File, then New, and set up a blank canvas.



Start with the Text tool. Experiment with fonts and sizes (also, colors and patterns).

Experiment with location and spacing.

You can use the word "chapter" if you want. Or just the name of the number. Or a big numeral.

Here are some examples:

 

 

 

 

Maybe put a border around it.
 


Also, consider tinting the image with a faint background color.

The words or numbers will probably look best when they seem to float on a white background—the background of your image blending with Kindle's. But if the Kindle Fire reader selects a different BG color, what have you got: a white box on a sepia or black background. Be prepared for that.

Personally, I like the look of the "floating" chapter image so much—it mimics best a real book—that I'm willing to accept the white box on the dark background when some random reader is goofy enough to select it. But here's where a nicely sized white box works best. Too small, and it seems to crowd the text inside it. You won't notice that on a white background.

If you want, add a small image—an emblem of your novel, taken from your cover, perhaps.

Or look for fancy dividers that can be copied and pasted.

Or try some weirder combos:

  

 

 



Just remember to check the grayscale (Image, Mode, Grayscale):



Red goes too dark in grayscale, causing a jumbled look. Try yellow for the big numeral:

 



After checking the grayscale, Undo the procedure to get your colors back.

Save the chapter image as a jpeg, placing it in the same folder as the html file of your book. (Remember, GIMP will want you to Export the image before you can save it as jpeg. Just agree to it.)

Insert each image in the book just the way you did the title page. Find the anchor tag for the first chapter, then add this line below it:

    <p class="center"><img src="c1.jpg" width="600" height="400" /></p>

where "c1" is the name of the image for chapter one. (Okay, I'm not a monster: Use a different name if you want.)

Do the same for all chapters. If you've got header code already there (<h1>TITLE</h1>) with the name of the chapter, remove it. You're all about the image now.

You can fiddle with the width and height numbers if you want, see what happens. (Changing the two numbers without keeping the ratio constant makes things weird in Kindle Fire: Try it!)

Open your book in Kindle Previewer and check it across various platforms.

If you've written a book with a lot of chapters, you've got your work cut out for you. Plus something I mentioned earlier:

If you create a big sized image file for each chapter—and you happen to have written a lot of 'em—it may end up costing you some money.

Don't forget: The bigger the package, the bigger the delivery fee. (But keep in mind the delivery fees only apply to the 70% royalty.)

One way I cut back on my chapter images was to create a single design image, then images of the ten digits. I assembled each chapter heading by running the images together:

    <p class="center"><img src="design.jpg"><img src="1.jpg"><img scr="5.jpg" /></p>

creates the Chapter Fifteen image cluster.

Eleven small images instead of 38 larger ones.

Something to think about.

For clarity, note that I've removed the "width" and "height" specs. You just want to make sure the combined widths don't exceed five or six hundred pixels, so they'll all fit on a single line.

Also, you can remove the class="center" part if that works better for you. (The image will come out flush left.) If you want images to align right, create some code for that (.right {text-align:right;}) in the <style> section and call the class in the paragraph tag (<p class="right">).

You can also manipulate the space around all parts of your chapter heading (or title page image, for that matter) by creating a new paragraph class and setting the margin to something larger than zero. Remove the "in" part and the number comes out in pixels (like the margin-top spec).

You could experiment with creating a half-page sized chapter-start by using a smaller image surrounded by "free" margin space. Just remember this image will sit in the middle of this extra space, and the question of background color vs. image (background) color must be considered.

But you reap this bonus: a smaller selection of image files—which is a good way to hold down the size of your compiled book and reduce your delivery costs.

Also, building your chapter-start images from parts means you don't have create image after image after image in GIMP.

By the way, the most efficient method of experimenting in the arena of margins (indeed, in virtually ANY arena of Kindle code fiddling) is to open the html file in your browser. Every change you make in the code is instantly revealed by simply hitting the Refresh button. (Remember to save the html file first, or nothing will change during refresh.)

Just keep in mind the ultimate proof of a successful manipulation must be demonstrated in Kindle itself—presumably in Previewer. Not everything that works in your browser will work in a Kindle.

Next time: I'm going to apply some chapter-start images to various treatments of the opening lines of a chapter, as seen in different versions of Kindle.