How to convert PDF to 3D book mockup for free with Krita

For your information, I created the ebook using Adobe Illustrator and also Adobe Express. I provide this ebook for free. If you are interested, you can fill in the form above to get a copy of it. Please note that, since this is a manual method, you need to at least know the basics of how to use Krita. However, I will try to explain the steps in as much detail as possible. Hopefully, even those of you who are using Krita for the first time can follow along. In sha Allah.

For the first step, we need to extract the cover image of the eBook into Krita. This is very easy to do. We just have to open the file in Krita. Either through the toolbar or menu, or just press "Ctrl + O" on the keyboard. Browse to the location of the folder, then select the file. If the file we select is a PDF, the "PDF Import Options" window will open. We don't need to open all the pages of this PDF file. We only need the first page, so we select the "first page" option.

The current PDF file has an A4 size with a resolution of 300dpi. This is too large for most website designs. You can change it to a specific size in this window if you want. But for now, we'll just leave it at its original size. We can easily reduce the size later after we have created the mockup image. Just click OK to continue.

This step is optional. We are going to create guides. Open the "View" menu and make sure the rulers are active. Then click and drag 3 times from the ruler area to the right. The first is for the left edge of the front cover of the book. The second is for the right corner of the front cover. And the last one is for the back cover. Then create 2 horizontal guides for the top and bottom edges of the book.

Again, this step is optional. I need these guides because I want the vertical lines of the book mockup to be perfectly straight. If you want a more free-form shape, you don't need to create any guides at all. The last step in preparing the guides is to enable the "Lock Guides" option so that they are safe from changes. And in the "Snap to" submenu, make sure that the "Snap to guides" option is active.

Next, we can start adding perspective distortion to the front cover image. You can do this directly on the layer using the "Transform" tool. But this method is destructive. For now, I want to show you a non-destructive method. So first we need to apply a “transform mask” on the layer.

Then we apply the “transform tool” on the “mask”. Use the "Perspective Mode".

Then drag the control points on the right to snap to the intersection of the guides at the top center and bottom center. For the 2 control points on the left, make them snap to the guide on the left. Feel free to adjust the vertical position to your liking.

Next, we will create the side part of the book. Press P for the "Color Picker tool". Then we click to sample the color we want to use as the cover color for the side. It's a good idea to make it darker to simulate lighting effects.

Press "Insert" to create a new "Paint" layer. Make a rectangular selection, about the size of the cover thickness. Then press Shift + Backspace to fill the selection area with the color we chose earlier. This is the area for the front cover.

Press "Ctrl + J" to duplicate the layer. Then use the “Move tool” and drag while holding down the Shift key. This is for the back cover.

For the paper pages in the middle, we can press "Insert" to create a new layer. Move this layer so that it is below the others. Make a rectangular selection large enough to leave no empty space. Next, select light gray as the paper color. Then press Shift + Backspace to fill the color.

Before we move on, just for an extra detail. We want to add subtle shadows to the right and left sides of the paper. We can start by selecting a darker paper color. Make sure the active gradient is the “Foreground to Transparent” preset. Then activate the “Gradient tool” or press the letter G on your keyboard. Now click and drag slightly to the right from this point while holding down the Shift key. Do the same for the right side.

The next step is to add a perspective effect to the side area of this book, which we will also do non-destructively. So select all the 3 layers belong to the side area. Press Ctrl + G to combine them all into one "group". Apply the "transform mask" again. And use the "Transform" tool, in "Perspective" mode. Then position the control points so that they are at the intersection of the guides in the middle. And also at the right guide line.

Now, if you see a red dot like this. It's not a bug, it's a control point feature in Krita for determining the vanishing point of the perspective effect.

When you are done, press Enter to confirm. Unhide the cover layer. And, alhamdulillah, our 3D book mockup image is finished. For precaution, you should first save the file as a native Krita file or ".kra" format.

To use this image on a website, you need to resize the image and then export it to a more common web file format. We can first right-click on a layer or on a group layer. Then select the "Flatten Image" command.

Then open the "Image" menu and select "Scale image to new size". Make sure that the chain button is active so that the image remains proportional. Just type in the size you want. For example, I set the height to 640 pixels. Then click "OK".

Now we can export the image with the "export" command in the "File" menu. We can name it to any name we want. Now, to preserve the transparent area, you don't want to export it in "JPEG" format. Instead, use the ".PNG" format, as this format supports transparency. Then, it is important that in the "PNG export settings" window, the "Store alpha channel" option is enabled. Click OK. And the file is now ready for use.