A Case For Graphical Elements and Ornaments in Ebooks

LB coverI finished up two big projects yesterday. Not just word count big (100k and 160k), but big in the sense that the authors are NYT best sellers and award winners, and so their ebooks better look GOOD. (Granted, making an ebook look better than offerings being released by the BPHs isn’t hard. They’ve set the bar pretty low.) I also pulled double-duty as art director, and did the ebook covers and interior graphics.

CG Cover(To all you cover designers out there, a big salute. That shit is hard!)

This leads me to today’s topic, which involves a big fat WHY? Why spend so much time designing interiors and creating graphics and ornaments when the words are the star of the show and who cares what it looks like anyway, right? (And yes, I do admit that in the past I have gotten carried away just because I really like the fancy bits and love playing with Paint.net, but I’m over that now. Honest.)

LB 1It boils down to the fact that humans are visual creatures. We tend to pass judgment based on appearances. There is a reason mass market paperbacks are considered pulpy and cheap while the exact same text in hardcover is considered important. Trade paperbacks fall in between and tend to be better designed and much better looking than mass market editions. “I’m important, but reasonably priced.” The packaging sends a powerful message to the reader and influences their reading experience before they even begin to read.

CG 2I pay attention to my reading experiences with ebooks, trying to pinpoint exactly what influences me and why. Here is a short list:

  • Covers lose their impact and influence after I buy the book. While the covers display on my Paperwhite and Kindle Fire, when I actually open the book the cover becomes a non-issue just because it’s not handy in the way a print book cover is.
  • Well-designed and visually interesting title pages and section beginnings shut off my inner-editor.
  • Good design increases my confidence in the prose. It also makes me more forgiving. If I find a typo my tendency is to just pass it off as a mistake instead of thinking the writer and/or producer is a slob who can’t be trusted.
  • Ornaments and illustrations give me a little lift. If I’m in a bad mood, it’s harder to enjoy a story.
  • Good design and graphical elements make an ebook stand out from the pack and hence, make it more memorable. I’m more likely to remember the author’s name and book title.

LB 2Does all this mean that every ebook requires graphical elements and ornaments? No. If the producer pays proper attention to overall layout–use of white/negative space, paragraph indents, first line treatments, navigation and front/back matter–they can create a professional looking and reader-pleasing ebook. My suggestion, examine better quality mass market paperbacks. Study those that appeal to you and emulate their design. The less-is-more camp can generate a beautiful product.CG 1

In fact a book I did recently had minimal design elements (visible elements, anyway). For this project the writer wanted it very simple, sleek and clean. I used only one simple ornament on each chapter head just to add some visual interest and make the chapter titles stand out from the text.

CD 1

I wish I'd done this cover. Derek Murphy is the star here.

I wish I’d done this cover. Derek Murphy is the star here.

As always, go for functionality first.

  • Test your graphics at different sizes because you don’t know what size screen the reader will be using.
  • Don’t be afraid of color. Colors render beautifully on tablets and other color readers. Sometimes just a spot or a dot of brightness can take an ebook from blah to wowza!
  • Test your colors to see how well they render in grayscale. (In Paint.net I can view the images in black and white and that gives me a good idea how they will render on a non-color ereader.)
  • Fonts are a wonderful design element. You can find hundreds to use for free at such sites as dafont.com and fontsquirrel.com.*
  • For good ideas, study expensive hardcovers. A lot of skill and artistry go into their design. Examine the balance and tone of the design elements and how the most effective designs enhance the reading experience.

So go forth and experiment. If you come up with something very cool, send me a link so I can see what you’ve done.

* I am so NOT a fan of embedded fonts in ebooks. They add a lot of bloat to the file size for what I consider very little benefit. Plus, they don’t always render properly, especially on older ereaders. If you do want to embed fonts, do your research, read and heed the font developer’s licensing agreement, and test test test to make sure it works.

 

 

More Fun With Formatting: Why Not Illustrated Fiction?

One of my pleasures when reading is learning something new or unusual (I collect odd factoids the way trash hoarders collect empty soda cups). I truly appreciate writers who extensively research. Some of my finest obsessions (Vikings, forensic science, birds, etc.) spring directly from fiction. Even when my obsessions aren’t triggered, temporary fascination with people, places and things often send me haring off on Google expeditions to learn more about what the writer is talking about.

I’ve often wondered why more writers/publishers don’t indulge such reader impulses with their ebooks?

I had a project recently that did just that. Eye Sleuth, by Hazel Dawkins, and Eye Witness by Hazel Dawkins and Dennis Berry, are mystery novels that feature a sleuth with an unusual occupation–behavioral optometrist–set in visually interesting locations–New York city, coastal England.

The writers wanted a gallery with images of those visually interesting places along with images relating to the sleuth’s occupation. There are also illustrations for the chapter heads. A challenging project, but a lot of fun, too.

SOME TIPS

Manage your image sizes. I have found that using percentages to declare image sizes is a good way to make sure images aren’t cropped on small screens and don’t sprawl on large screens.

images1

One of the sad facts of ereaders is that because of the way they are set up, it’s damned difficult (and impossible for the likes of me) to wrap text and to make sure text stays with an image. Depending on the device, images can be “orphaned” on a screen, which isn’t a good look. Two ways to make sure such occurrences don’t interfere with the text are to (one) give each image its own page; (two) create a gallery with links from the text.

internal linkInternal links in ebooks are easy. I have found that using a div id for the bookmarks reduces the chances of blown formatting. One thing I highly recommend when doing a gallery of images is to insert a link from the image back to the text. Even though ereaders allow a reader to Go Back, sometimes a reader will decide to browse a bit, then suddenly they’ve lost their place. (okay, maybe not all readers, but this reader does) Eliminate that annoyance with a link.

color image1Also, because of how I read–Now where was that cool picture of the whatsit?–I included all the images in the table of contents. It takes some extra time and effort on my part, but it makes navigation and referencing easier for the readers, so that makes it all worth it.

tocIt’s also important to check the quality of images. Black and white photos, crisp and sharp, look fabulous on all ereaders. Color images need to be checked lest what looks okay in color turns to a gray blur on an eink screen.

bw imagesAnother big consideration is overall file size. Amazon charges .15 cents per MB as a delivery fee. You don’t want to eat up your royalty with those fees. Lowering the resolution on images to around 77 to 96 pixels per inch reduces file size a lot without affecting the display too much. Keep track of image sizes and be prepared to trim if necessary.

Illustrating fiction isn’t difficult, but it does require some planning and organization. Put yourself in the reader’s place and consider how the book will be read and how to best use the device features to enhance the experience.

Fun With Formatting: Making Ebooks Pretty

SS2I’ve loved romance novels ever since I was a kid and devouring my grandmother’s subscription Harlequin’s. Now that I’m producing ebooks, I love them even more. Doesn’t lush, lyrical prose just cry out for lush, pretty treatments?

Here’s the thing. Ever since I got my Kindle Fire tablet, I’ve been enthralled by the possibilities. It displays color beautifully. It’s fast! Sometimes large graphics can lag in eink readers, but I’ve yet to run into that problem with the Fire. So when Katherine O’Neal, historical romance writer, asked me to help her bring out books as ebooks, I found a kindred spirit. She loves beautiful books, too.

SS3Some of the ebooks use black and white graphics, but they’re still pretty. With others we went full bore and over the top. Why not? As a reader, a visually interesting book is a pleasure to read. As a formatter, well, it’s fun.

SS8I use a free program called Paint.net for the graphics. It’s powerful and there’s a lot to learn, but with the help of Plunder Bunny (and a lot of time fooling around, er, practicing, I’m learning enough to produce some very slick graphics. Through trial and error I’ve learned some useful tricks and have some tips for you.

SS1Test your color graphics. Paint.net allows me to turn an image to black and white, which gives me a good idea of how it will look on an eink reader. For the book with the Taj Mahal image we found a gorgeous red graphic, but unfortunately in b/w it turned into a dark gray blob. So we found the orange and yellow graphic that works beautifully.

Watch the sizes. Because graphical elements can quickly increase a file size into the unmanageable range, I keep careful track of image sizes. I can safely degrade most images to around 77-96 pixels per inch and it hasn’t been a problem with them looking sharp. I tend to make sure they are never bigger than the standard eink reader screen–600×800 pixels.

Unfortunately, as of this writing, ereaders don’t use vector images. I kind of hack my way around that by using percentages to set either the width or the height of the image so that it stays proportional to the text. For instance, with a rectangular header, I will size the graphic so it is 800 pixels wide, then set the width at 80%. That way, it enlarges easily and also shrinks, and maintains its crispness no matter the size of the screen or if the reader is reading in portrait or landscape mode.

Where to find images? I like dreamstime.com and shutterstock.com, both of which offer a huge variety of stock photos, illustrations and clip art. Some are free, others can be had for a small price. There are also free clipart sites. Sometimes I make my own images.

SS4I made the “playing cards” with Paint.net and I think they turned out great.

Fonts are another good resource. For the book with the Celtic theme, I used a free wingding font from Dafont.com to make the purple “frame.” Another terrific font resource is fontsquirrel.com. If you’re interested in embedding fonts in your ebooks, fontsquirrel has a lot of embeddable fonts, free to use.

SS6So, experiment, have fun. Make your ebook stand out from the crowd. It doesn’t have to cost you a fortune (especially since there are no printing costs!). With a little practice and a bit of imagination, your ebooks can be things of beauty (and extra fun for me to read!).

Fun With Ebook Formatting: First Lines

One of the easiest ways to make your ebook stand out is to use first line treatments. By making the first lines of chapters or scenes after a break look different from the rest of the text you add visual interest to the “page” and (more importantly) you lessen the risk of confusing readers.

Text in an ebook “flows” to fit the screen. Plus, users can adjust the size of the display. If you use an empty line, for instance, to indicate a scene break–with no other visual clues–the page could break at the break and your readers could end up deeply confused about a point-of-view, time or setting jump.

Besides, first line treatments are fun. Here are a few screenshots off Lucy the Paperwhite Kindle.

first2Ever since I acquired a Fire tablet, I’ve been playing with colored images (I’ll try to get screenshots off a tablet–you’ll know I succeeded if color images show up here.)

Screenshot_2013-04-01-15-00-51 (2)

first1

(Did I actually write “expecially” in the sample? Crap...)

Screenshot_2013-04-01-15-02-14

Another trick is one I don’t care for myself, but a lot of people do like it. With ereader devices improving their displays, the drop cap looks better, too. (much thanks to William for this screenshot) Notice he used an embedded font for the heading and the drop cap. Embedding fonts is tricky not because the coding is difficult, but because fonts are creative property and there are/can be restrictions on their use. Always make sure you read the license agreements and follow the terms of use.

first3

Most of these first line treatments were created with paragraph styles that can be emulated in Word or Scrivener. (Not that I advocate using either program to format ebooks, but let’s get real, many of you do.) If you want to play with first line treatments, be sure you create a style sheet rather than using tabs, spaces or centering.

Realize, too, that different readers handle html coding in different ways. Not every device will display small caps, for instance. My oldest Kindle is flaky about displaying bolded fonts. You need to experiment and make adjustments.

A few tips:

  • Be very careful with first line treatments if you are using Scrivener or Word. Changing font sizes to make small caps can trigger bugs in eink Kindles and play havoc with the user’s ability to change display sizes.
  • Also, be careful when using Word to submit to Smashwords. If you are using a no-indent style, make sure to use a style-sheet instead of backspacing to delete the indent.
  • Experiment with your image sizes. Percentages work better than pixels.
  • Don’t be afraid of color. More and more readers are using devices with color displays and that can make your ebook look fabulous! Check how your graphics look in black-and-white to be sure there is enough contrast in grayscale so the image looks good on an eink device.
  • You can learn how to do these tricks in html by going to w3schools.com and searching for information on small caps, drop caps, embedding fonts and other goodies.

So what about you, readers? Any fun tricky-tricks you’d like to share?

Scene Breaks In Ebooks: Giving Readers A Clue

You fiction writers out there. I bet the majority of you love scene breaks. Dispense with boring transitional passages and maneuvering to shift seamlessly character points of view. Hit a paragraph return or two and start the new scene. I’m sure readers appreciate them, too, seeing as how they don’t have to slog through transitional passages and the writer’s effort to shift POV. (I know I appreciate them)

In printed media scene breaks rarely present a problem–even when the book design doesn’t have actual scene break indicators such as asterisks or graphics. A reader sees an inch of white space on the page and that’s the perfect clue that a shift has occurred. Print book designers can also manipulate the amount of text on a page and lessen the chances that a scene break occurs at the bottom of a page, losing the white space and its visual clue that a new scene has started.

Ebooks don’t work that way. (I’m talking about flowable text and not fixed layout) All too often white space looks like a mistake. There is no way to ensure that the break never occurs at the end of the “page.” If it looks like a mistake or if the scene change seems to happen without any clue, the reader is forced to pause to figure out what is going on. If those stutter-pauses build up it can wreck the reading experience and leave the writer with an unhappy reader who will not buy their next book.

Take a look at the following screen shot. Scene break or mistake?

scenebreak1Kind of hard to tell without a real visual clue, isn’t it? The simplest solution is to use a indicator to make it clear that This Is Not A Formatting Error:

scenebreak2No confusion there.

But, what if the writer doesn’t want scene break indicators? What if asterisks or graphics don’t fit the effect he is going for? A simple and effective method is to drop the first line indent.

scenebreak3There are all sorts of ways to indicate scene breaks. Me, being me, I like the fancy stuff. I often use graphics to add visual interest to the page.

scenebreak4

I do a lot of reading on my Kindles and “text-fatigue” can be a problem. Kind of like driving through Kansas where it seems the landscape never changes.  “Oh look! More cornfields! Zzzzzzz…” I can only assume others feel the same way. Using a graphic mixes it up a bit, gives my eyes a slight change of scenery. It doesn’t take much.

The important thing to consider is that ebooks don’t offer the same visual clue opportunities as print books, so it’s up to you to come up with something so your readers stay in the story rather than in a state of confusion.

Fun With Graphics: Make Your Images Fit The Screen

For those of you who are whizzes at computer stuff and html and css, do not laugh at my puny efforts. Go look at this video of great social significance instead. I’m talking to the folks like me–who believe our computers are plotting against us when we’re not looking.

You all know that ereaders can play havoc with your graphic images, right? Depending on the device, they can shrink or expand or get cut off in inconvenient ways. The way to make sure your images stay the size you want them to is define the size in the coding. So a line of html for a scene break glyph might look like this:

graphic8

I needed to insert a graphic that ideally should fill the screen, no matter what size screen was displaying it. I knew how to do this thanks to Paul Salvette (and if you are really serious about formatting ebooks, you must get his book for your resource library) and my partner-in-obsessanating Jon Westcot. Change the size to a percentage–in this case I needed the width to always be 100% of the screen.

graphic7Do that and the image will expand or shrink depending on the screen size. Never have to worry about it being cut off.

That’s when it hit me I could do something cool with chapter heads and scene break indicators.

I had a project with a noir-ish theme and I made graphics with a grayscale fade. The problem with locking the image sizes, though, was that on some screens the fade effect was lost and the graphic looked like a block–too graphic-y. That’s when it hit me that I could use percentage coding to make the graphic fill the screen width no matter what size the screen–even a full-sized computer screen.

graphic5How it looks on the Kindle Previewer for the iPhone app–a very small screen.

graphic6How it looks on the iPad screen–very wide display.

I also did the same with the scene break indicators. For this series I wanted a simple grayscale fade line instead of a glyph, but I wanted to always fill the entire line. Setting the width at 100% did exactly that. Here’s how it looks on Lucy Light the Paperwhite.

graphic2If you happen to have an image you want to fill an entire screen, top to bottom, you use the same trick, except you set the height at 100%. That way you can manage the size of your graphics, but still make sure your book illustration or chart gets its own screen “page.”

Nifty trick, eh? Thanks, Paul and Jon.