Today, I’m going to show you how to make a 3D version of your ebook cover–so that it looks like a real, physical book with pages.
You might be asking, why even bother with a 3D ebook cover? (Especially if you’ve already spent good money on a professional ebook cover by a graphic designer.) The thing is, people like to touch things, like to feel them in their palms.
Readers are especially so. One of the pleasures of reading is feeling the weight of a good book in your hands. That’s an experience that’s definitely lacking from reading an ebook on an ereader.
Consumers know that when they’re buying an ebook, they’re not buying a physical object they can touch. They know too, that the words in an ebook are the same as the ones in a hardcover. But by putting a 3D version of your ebook on your website, you’re making the ebook seem more real.
It’s hard to explain, but if I had to sum it up in one sentence, I’d say that: a two-dimensional image comes across as a JPEG, but a 3D ebook cover comes across as containing an entire reading experience.
I don’t have any concrete data on this, but I suspect that an image of a 3D ebook cover on a website would make more sales than a regular, two-dimensional ebook cover. Assuming that you agree, you’ll want to know how to turn your two-dimensional ebook cover image into a 3D work of art. That’s what this tutorial is all about.
I want to make it clear though that I am not a graphic designer. I’ve self-taught myself some basic Photoshop skills so that I could have the ability to make ebook covers whenever I had a novel or short story ready to be sold.
There might be better ways to make a 3D ebook cover, for example one which shows the spine of your book with the title imprinted on it. The method I’m about to describe is just one way which works–it’s also simple enough that a Photoshop novice should be able to follow it easily. (No need to learn how to use the Pen Tool for this one!)
In case you were thinking, “Whoa, I can’t believe that girl CindaFern spent $700 on Photoshop…just in case she wanted to make an ebook cover for a short story…”
I studied a bunch of online tutorials (mostly from Photoshop Essentials), and then I rented Photoshop from Adobe for $50/month. 50 bucks and I got a customized cover looking exactly the way I wanted it! It seemed like a good deal to me.
Okay, so without further ado, here’s an easy, step-by-step tutorial on how to create a 3D version of an ebook cover…
[Note: For reasons explained in Cover Size Requirements for Amazon, Kobo, Apple & More, I made minor modifications to the ebook cover used in the screenshots below, so you won't see it in the sidebar of this site. Nevertheless, the tutorial still holds true!]
3D Ebook Cover Step #1: the Front Cover
Open up a new Photoshop file. For our purposes, the canvas size doesn’t really matter, just as long you have some room to add the back cover and inner pages to your 2D image.
My 3D ebook cover is based on a small version of my 2D ebook cover, which is 180 pixels by 225 pixels, so a canvas size of 300 pixels by 300 pixels is plenty. Make sure the resolution is set to 72, which as I understand it, is best for viewing images online.
Next, you want get your 2D cover image (either one you made yourself in Photoshop or had a professional artist design for you) onto your new canvas. Since I designed mine, I just opened up my original Photoshop file and used the Marquee Tool to select my ebook cover. Below is a screenshot to illustrate what I mean.
Then I selected COPY MERGED from the Edit menu, and pasted it onto my new canvas. In case you need it, here’s an overview of how to use the Marquee Tool.
Note: If you don’t have the original Photoshop file of your 2D cover, you can just open the JPEG image (or whatever image format it’s saved as) in Photoshop itself, and then use the Marquee Tool to copy and paste it onto your new canvas. I strongly urge you NOT TO USE THE ORIGINAL JPEG FILE in case you make a mistake. Save it under another name, and open up this second file instead.
Before we can modify the front cover and add some depth to it, we have to take a few “slices” from it. First, we need to make a copy of the right edge of the front cover to create the illusion of a back cover.
To do so, with the Marquee Tool, select a thin vertical strip from the right edge of your 2D ebook cover. (I chose a strip about 5 pixels thick. If you need to, press CTRL++ to zoom in. Also, using the ruler guides makes it easier to select such a thin slice.)
From the Edit Menu, select copy. Then click paste. Photoshop will automatically paste this thin slice in a new Photoshop layer exactly above the layer below it. With the Move Tool, click on the thin slice and move it to the side of your 2D ebook cover.
We’re also going to copy a thin horizontal slice from the top of the 2D ebook cover with the Marquee Tool, like so:
From the Edit menu, click on Copy, then select Paste. With the Move Tool, click on the copied slice and move it to the right until it intersects with the “back cover” slice so they form a nice corner.
Next, we’re going to use the Bevel and Emboss feature (we’ll be using it a lot in this tutorial) to give the front cover some more dimension. Make sure the layer with your 2D ebook cover is highlighted in your Layers Palette. At the bottom of your Layers palette, look for the FX button, which adds layer styles.
When you click it, a menu of options appears. From it, choose Bevel and Emboss…
…then use the following settings:
Note: If your original ebook cover image is significantly larger than mine, you’ll have to play around with these settings to achieve the effect you want.
3D Ebook Cover Step #2: the Back Cover
In the Layers Palette, click on the layer with the thin slice of your ebook’s right edge, the long, vertical one which represents the back cover. Now select FX at the bottom of the Layers Palette, and again choose Bevel and Emboss. Use the following settings (keeping in mind that if your book cover is larger, you’ll have to make adjustments):
3D Ebook Cover Step #3: the Top Corner
Before we add layer styles to the top of our ebook cover, we need to make sure its layer is BELOW the one containing the 2D ebook cover image. Click on the top slice layer, and while still holding the mouse key down, move it so it’s underneath the layer with your ebook image.
If this sounds confusing, read this tutorial on how to move layers in Photoshop’s Layer Palette.
Make sure the layer for the top slice is highlighted in the Layers Palette. Then click on FX, and select Bevel and Emboss from the menu. Apply these settings:
At this point, your cover should look something like this:
Next step…adding the pages.
3D Ebook Cover Step #4: the Inner Pages
Using the Rectangle Tool, draw a rectangle between the ebook front cover and the slice representing the back cover. Look at the picture below for guidance. Don’t worry about the color–we’re going to change that.
To change the color of the rectangle, look at its layer in the Layers Palette. Double click on the square representing the color:
Change the color setting to #cccccc.
3D Ebook Cover Step #5: the Hardcover Ridge
With the Rectangle Tool, draw a rectangle at the left edge of your ebook cover. This rectangle is intended look like the ridge you see in hardcover books and thick paperbacks.
Make sure that in the Layers Palette, the layer for this rectangle is ABOVE the one containing your front cover. Again, don’t worry about the color.
Next, we’re going to change the color settings of the rectangle, using the same process as before. With its layer highlighted in the Layers Palette, double click on the square representing the rectangle’s color, and change it to #ffffff.
Then, lower the opacity of this layer to 20%.
Now, change its bevel and emboss settings. This is what I used:
We’re almost done!
3D Ebook Cover Step #6: the Final Touches
We’re going to add an internal drop shadow, to represent the shadow of the front cover over the pages inside. To do that, draw a rectangle between the right edge of the front cover and the gray rectangle which forms our book’s pages.
Change the fill settings of this rectangle to 0%. (The opacity level should still be 100%).
Note: Photshop might add a Bevel and Emboss layer style to this rectangle. To get rid of it, just click on the “eye” next to the layer style. (It’s highlighted in the example below.) When the eye disappears, those effects won’t be visible.
While we don’t want the Bevel and Emboss style to be applied to this layer, we do want to add a drop shadow. Click on FX at the bottom of the Layers Palette, then choose Drop Shadow from the menu. Use these settings:
Now, move the resulting drop shadow to the left until you achieve the effect you want. This is one way to do it:
If you’d like, you can create a shadow to represent the shadow of the pages against the back cover. To do that, duplicate the drop shadow rectangle we just made by highlighting its layer in the Layers Palette and pressing CTRL+J. Then, move this rectangle to the right, until you achieve the effect you want. Here’s a sample:
Finally, we need to get rid of excess shadows and turn the image into the size we want to upload to our website. The easiest way I’ve found to do this is to select, with the Marquee Tool, all the portions of the 3D ebook cover I want to keep (for me, that’s everything except for “excess” drop shadow from the top bar and the left ridge). Using the ruler guides really helps. See the image below for what I mean:
Then, click COPY MERGED, open a new file (Photoshop will automatically choose a file size to match the size of the image currently on the clipboard, so it will be perfect!), and in the new file click paste.
To make a JPEG of this 3D ebook cover, from the File menu, choose Save for Web and Devices. Here’s a comprehensive guide on how to save images for the web.
That’s it! You’re done. Now just insert your shiny new 3D ebook cover (no 3D glasses required!) into your website wherever you want to showcase it.
One little warning: Graphic conversion is a mysterious labyrinth to me. When I’ve created JPEG files using the Save for Web & Devices feature of Photoshop, I end up with a fabulous looking JPEG on my computer. But when I upload it to WordPress or include it in a PDF, it looks faded.
I’ve googled the issue, tested out some advice, but nothing I’ve tried so far has remedied the problem. I wanted to mention this in case it happens to you too.
If you have a tech-savvy friend, please ask them! I’d love to hear their solution in the comments.
So tell me, how did your 3D ebook cover turn out?
Book + 3D Glasses by Amy Loves Yah
Did This Article Help You?
Did you find this article helpful? Consider showing your thanks by downloading one of my books for you or a friend.
Both are romantic comedy novels where romance and psychology collide! More details below:
The Triumphs and Travails of Talisman Turner
Talisman Turner has just been dumped. It's not her. It's not the guy. It's the Red Sox.
Tali's ex-boyfriend believes sacrificing their relationship will reverse the curse plaguing his beloved baseball team. Tali's determined to reverse a curse too--the one haunting her sorry love life. She's betting on the psychology theories she studied in college to do it.
But falling in love is not a science...
Talisman Turner Minds the Gap
Perennially single Bostonian Talisman Turner has finally found the perfect boyfriend. Graham Salisbury has broad shoulders, blue-gray eyes, a sexy British accent, and an affinity for Bollywood films.
But...he lives in England. So, dreams in tow, Tali relocates to London...where, she discovers, you don't need an ocean to create distance. Secrets work just as well.
Can she bridge their gap?