top of page
Search

Convert Adobe InDesign projects into engaging digital flipbook content

Updated: Dec 18, 2023


Adobe Certified Professional Angelo Montilla holds an iPad featuring a digital flipbook.

Choosing a digital flipbook platform from the wide range of websites available can be an overwhelming task.

The Simplebooklet platform allows designers, business owners and marketing professionals the ability to enhance their communications strategy and create stunning digital content.

In this tutorial, learn how to prepare and export a brochure layout as a PDF from Adobe InDesign before uploading it to Simplebooklet and using the platform's tools to create stunning digital content.

If you'd like to follow along step-by-step in this class, use the link below to download the lesson files and InDesign document. You're more than welcome to follow along using one of your own documents as well.

Birchland Brochure - Lesson Files
.zip
Download ZIP • 235.21MB

The first step is preparing the PDF export settings to Simplebooklet's specifications.

Exporting Project

  • Go to File > Export.

  • From the File Format dropdown, choose PDF (Print).

  • In the Export Options window under the General Tab, set the Adobe PDF Preset to [Smallest File Size].

  • Set the Export As to Pages and select All.

  • Under Options, check the Optimize for Fast Web View box.

  • If you have hyperlinks in a project, ensure that the Hyperlinks box is checked.

Here is a closer look at the general Export settings. For further details, visit the Simplebooklet specifications link above.

Simplebooklet PDF export recommendations.

Once it's been exported to PDF, make your way to Simplebooklet – a web-based platform that allows you to convert projects into stunning HTML5 flipbook viewing experiences.

Uploading the PDF

  • Click Upload File and select the PDF from your computer or one of the cloud services available with Simplebooklet.

  • Give the project a title. By default, it'll be named what the document was saved as. In this case, it's called Birchland Brochure.

  • Choose your Page Flip. Every project will be different, but because this is set up as a spread, and we'd like to maintain that – choose Spread.

  • Choose one of the four flip effects available. In this case, choose Hard Cover.

  • Click Convert.

The PDF has been converted into a stunning flipbook. Now it's time to take advantage of Simplebooklet's other great features and branding customizations.

Simplebooklet prides itself on not only displaying the flipbook, but creating a marketing tool and lead generator with your own brand attached.

As a first step let's use the Design tab to choose a theme, background, logo and navigation bar options. Remember, the Design tab doesn't focus on the project design, but the UX/UI design within Simplebooklet.


Design Tab

Page Flip

  • Click the Page Flip Transition pencil icon to edit the page flip effect that you initially selected on PDF conversion.

  • Click the Page Flip Button pencil icon to edit the style of the navigation buttons. Here you can edit the size, colour and shape of the navigation buttons.

  • Click the Page Flip Sound pencil icon to edit the page sound. There are plenty to choose from and for this project, let's go with Magazine.

  • Select or de-select the Page Shadow option to toggle between a drop shadow or no drop shadow. For this project, let's leave it on.


Presentation

  • Click the Themes pencil icon to choose a Preset theme built into Simplebooklet.

  • Click the Background pencil icon to choose a solid colour, pattern, image or an animated background.

  • Click the Logo pencil icon to upload a company or personalized logo to complete as part of the project's brand identity.

  • Click the Navigation Bars pencil icon to choose the type of Navigation Bar style from the options available.

Based on the initial upload and Design setup selected, here is how the project will look to this point. Again, your UX/UI design may look different and that is perfectly fine!


There are some other settings under Design that you can explore, but let's move on to the Edit tab and look at how to add an image lightbox and video two ways.

Let's look at how to add an image slide in a Lightbox first.

Edit Tab

Image Lightbox with Button Animation

  • Click the Edit tab and then choose Buttons from the left-side menu panel.

  • From the options, choose Image.

  • Click the green Image Upload button and select the image you would like to add to your Lightbox.

  • Add captions to your images, if you choose to do so. There are some captions included in this lesson (optional). Ensure you click the Save icon to save the work before closing the window. Otherwise the captions won't be saved with the images.

  • Click on the Image button and drag it to the area of the publication you would like. In this tutorial, I've placed it in the bottom left corner of the second page, as shown in the image below.

  • With the icon selected, click the Animate option in the Actions panel, which appears on the left side of the screen.

  • In the My Element Will drop down menu, choose a preset. For this tutorial, select Pulse.

  • In the When my Animation Ends drop down menu, choose Loop Element.

  • In the Speed drop down, choose slow for a nice pulsating pace.

The image Lightbox has been set up as well as the pulse animation to the button. Here's a look at how it'll appear once it's published.

Let's look at how to add a video Lightbox to the publication. This will also be accomplished using the Edit tab.

In the left-side menu, go ahead and click the Video button. Here, you'll be presented with three options:

On Page - This will place a video directly on a page.

Hotspot - This allows you to create an invisible trigger around an area that you would like to have clicked.

Button - This creates a video icon button that you can drag to an area of a page.

For this tutorial, choose the latter, as we'll be creating a button from Simplebooklet to the project.

  • Click Button, which will launch the Add Video window.

  • You can add a YouTube, Vimeo or Google Drive link, however for this tutorial let's add the video that's included in the exercise files.

  • Click the Upload button at the bottom left corner of the window and locate the video included in the exercise files, which is saved as promo video.mp4.

  • Choose Auto Play When Video Opens.

Once the video has been uploaded, here's a closer look at how it'll appear when the project is published.

Another amazing feature built into Simplebooklet is the ability to edit live text. With a double-click of the mouse, users can copy or change paragraphs. It doesn't allow redesign of objects or text frames, but the fact that users can replace copy or fix typos right in the Simplebooklet platform is a game-changer.

Follow along in the remainder of the video tutorial as I'll go over some helpful ways to embed and share the project online.

355 views0 comments
bottom of page