Ebook Covers
Here are some resources for Making an eBook Cover. See also Example ePub
Contents |
[edit] Technical Requirements
A cover image is not required according to the ePub standard but it really makes the book look much more professional. It is normally displayed as the first page of the document but a more important use is in the library shelf view or in a promotion connected with an eBook store. It may or may not be be modeled after the paper book version. Many publishing sites do require a Cover image.
Amazon requires a cover image for their eBook format (AZW) as well. It needs to be a JPG file with the smallest dimension 500 pixels or more. They recommend 600 x 800 pixels.
[edit] Design Considerations
Here are some articles about how ebook covers should be made
- 3 Part Series by Piotr Kowalczyk on Designing an Ebook Cover: 1. Designing for Device Contexts, Size and Resolution, Using Phoster on Ios to make ebook covers, Figuring out the right proportion.
- Your Cover Uncovered, a blog by artist Sarah Melville analyzing book covers. Jan 2016, Blog not found.
- Tips for designing stunning eBook covers
- Proven tips and tricks for ebook cover design
[edit] How to create an ePub Cover Image
To include a cover image in an ePub, it's best to have an XHTML file that just displays the cover image, and place it at the start of the publication. Ideally, a cover image should resize to fill as much of the display of the eBook reader as possible, without distortion or clipping. Unfortunately, there's no way to do this with XHTML/CSS.
But there is a method that works using a very simple SVG wrapper around your cover graphic.
<?xml version='1.0' encoding='utf-8'?> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="../styles/style001.css" type="text/css" /> <title></title> </head> <body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 573 800" preserveAspectRatio="xMidYMid meet"> <image width="573" height="800" xlink:href="../images/img0032.png" /> </svg> </body> </html>
If you want to use this technique for another image you wish you scale you can make the viewBox a little taller than the image to make room for a caption for the figure which can be entered use <text> inside the same svg structure.
[edit] OPF entries
Cover images need specialized entries in the OPF in the manifest section even if they are just regular images. Note that a cover.xhtml file is not required but recommended.
<item id="cover" href="the-cover-filename.xhtml" media-type="application/xhtml+xml"/> <item id="cover-image" href="the_cover.jpg" media-type="image/jpeg"/>
The metadata also needs an entry: (Note that the id name of the image in the manifest must match the content entry. The line can be anywhere in the metadata section.)
<meta name="cover" content="cover-image"/>The iBooks application also needs an entry in the guide section.
<guide> <reference type="cover" href="the-cover-filename.xhtml" /> </guide>
[edit] How to Create a Kindle Cover page
This section applies to MOBI and AZW formats particularly. Kindle books must have a promotional image and an internal cover image provided for use within the book content. These are expected to be JPG images.
Covers are defined in the .OPF using the following tags: (The use of name=”cover” in the metadata element name is mandatory.)
<metadata> <meta name="cover" content="my-cover-image" /> </metadata> <manifest> <item href="MyCoverImage.jpg" id="my-cover-image" media-type="image/jpeg" /> </manifest>
Cover images must not be added to the content in any other way, otherwise they will appear twice in the book. One exception is if you want to have an HTML cover page for compatibility with software from other vendors, in addition to the proper logical cover, add the following tags in the .OPF:
<spine> <itemref idref="my-html-cover" linear="no" /> </spine> <manifest> <item id="my-html-cover" href="cover.xhtml" media-type="application/xhtml+xml" /> </manifest> <guide> <reference type="cover" title="Cover Image" href="cover.xhtml" /> </guide>
[edit] Covers to use
- MobileRead thread - shows some generic cover images that can be used as a starting point.
