I have received questions about how I did the interactive catalog posted here.
Due to the details, it requires to do this kind of project, I thought it was way easier if I posted a tutorial on the subject. Your project may be similar or different but this tutorial will at least give you a good foundation on how the process works. I expect this tutorial to be long so it will most likely be divided up into more than one post. Please note that this project was the first time I ever used InDesign for anything, so there are probably some things I don’t know about or know how to use. For this tutorial though I am just going to show you what I personally did. With that said, let’s get started.
We will be using InDesign CS5 for the project, as the previous version wouldn’t do the complete project, as my boss had required we had to purchase CS5 to get it done the way we wanted. This tutorial assumes you have a print file already made with InDesign.
Here were the requirements from the boss:
- Convert our print catalog into an interactive catalog to post to our website.
- The catalog must have the page turn animations.
- The catalog must have a page turn sound.
- The catalog must have a way for the viewer to navigate the catalog.
The first thing I am going to tell you is to make a new folder on your computer and name it something you remember. I called mine Burton-Catalog-Web. This way I knew it was the web version of my original print version.
You DO NOT want just one file for both print and web and here’s why:
- Print version is supposed to be done in 300 dpi; the web versions should be done in 72 dpi, 100 dpi or 150 dpi. This helps reduce the load times of the file for the viewer.
- Print version is done in CYMK for the printing presses. The Web is done in RBG.
- Print version is going to be made for paper; the web is made for screen this matters in sizing.
- Overall file size will be easier with web version do to reducing the dpi of the images you use.
So, once your folder is made the next thing you are going to do is open your print version file InDesign. We need to get a copy of our print version, so we can convert it for the web, once you have the file open go to file > package. Don’t worry too much about the setting here as you are really packaging it for yourself, not for an outside source. Your main concern is that all the needed files are included, fonts and images etc. This does take a bit of time depending on how big your catalog is. You want to package it to the folder you made earlier. If you want to know the progress of the packaging InDesign has a neat feature called background tasks. This shows you what the program is doing and you can monitor the percentage of completion. This can be found under windows > utilities > background tasks. Now that you have your new file to use and edit as needed for the web close your print one out and open the one you made for the web version. Next set your workspace to interactive or make sure it is, this will alter where things are on your screen but it also makes sure you have all the items handy that you will need for this tutorial.
Now we need to change the basic settings to reflect what we need to convert for the web. First off your rulers around the window are most likely in inches or some other print type measurements. Right-click the rulers and choose pixels. Next go to file >Document Presets > Define. Once the box pops up choose edit on the right-hand side. Choose the web as your intent, remove inside margins and bleeds, as we don’t need this. In addition, you want to make sure facing pages has a check mark. Don’t do anything with page size or anything else just yet I want you to check out what happens when we save it as a .SWF file. This will help you understand what I am going to explain a bit further into this tutorial. Click ok and exit out of the define options box. Next, you need to convert the document from CYMK print to RBG web. To do this we go to edit > transparency blend space > check RBG from options.
**Special Note here: If you want to reduce the overall file size for your file you can go a step further in that all your images that you are using can be opened in Photoshop and then you reduce the DPI from your print size of 300 dpi to the web size you are choosing (like 72 dpi, 100 dpi or 150 dpi). This can be done from Indesign so that your files do not become unlinked. To do that by selecting the image in your InDesign file right click and choose edit with > Photoshop. When you do that Photoshop opens the file and after you have made your changes saving the file. When you see the image in InDesign it will reflect the changes you made.
Next from the pages panel on the right select page 1 of your catalog. Right-click and choose page transitions > choose, this will bring up options for our page turning animations. We want to choose the one marked Page Turn (SWF Only). Make sure the box in the lower left corner is checked off to apply it to all our pages, and then click ok. Now all your pages should have an icon next to them in the pages panel on the right as in the picture below, the little gray square there. If they don’t, then you forgot the checkbox in the page transitions options panel.
Now I want you to make a .SWF file so you can follow my thinking in the next few areas of this tutorial. To do that go to file > export if the program hasn’t already selected to export it as a .swf then make sure you select it from the drop-down menu. Choose the proper location for your file to be saved in then click save. The next box pops up and this is where we are going to make changes as this is only an example file we don’t need to save all the pages just a few so you can follow along with some of my next steps. Select range and do only the first 3 pages. Make your other selections as the image below.
**Note the interactive page curl is not really needed this is for a .pdf file only, so that can be unchecked.
Once the file is finished being exported your browser should pop up with the .swf file loaded in like the image below.
As you can see you have several issues with the results. The first issue is scrollbars and the file is off centered and doesn’t really fit the window. In addition, there is this white area next to your front page, not really the look you may want, it certainly wasn’t what I wanted. We will fix these issues. But I wanted you to see the issue so you’d understand better what I was going to explain a bit later. Also if you click the corners of your pages they should flip for you so you can see that the animations are working as intended. Now some may say I am ok with these issues, but remember, as with any web design you must consider your users (ie. UX/UI). Ensuring good user experience and user interfaces are the cornerstone of good design. Are your users really going to know to click the corners to turn pages? Some might but most won’t. So you really are going to need navigation buttons. Now that we have seen some of the issues we need to address let’s really get started on working them out and creating a really great catalog. By the way, the .swf file and the HTML file can both be deleted now, we just made them for examples only.
We are going to be adding sound to our catalog as well so you will need a page-turning sound if you do that part as well. I found mine at this location. Choose the mp3 file of the sound you like best and save it in the same folder all your images for your catalog are stored, which should be labeled links. If you’re adding sound you need this for the navigation buttons so don’t skip this step if you want to add sound.
Next, we need to find room for our navigation buttons. It doesn’t really matter where you choose to do this, but you will need space.
There are several options, so pick what suits your project best.
- You can make the height of the document bigger placing buttons under the catalog.
- You could make the catalog wider placing buttons on the sides of the document.
- You and just keep the size of the canvas and adjust the sizes of all you images and fonts etc.
In the one I linked at the start of this tutorial I made the document taller making space at the bottom of the document, for this example, I am just going to add the buttons and adjust the sizing of my images and layout. If you do choose to add height to yours then I would suggest that when I address the white box area we spoke of earlier you also follow these steps for the background of your button area as well.
*** At this point in the tutorial, you need to look over the options that InDesign gives you for buttons and decide if you want to use their pre-made ones or if you’d like to make your own. If you make your own make sure they are ready from this point on and are in your links folder with the other images you are using.
The White Page Solution
Ok, there may be a better way to address this white box issue on the cover pages (first page and last page) of our catalog, but I don’t know it. This is how I did it and how I fixed the issue. Follow this to make the white go away; note if you are adding space to the canvas for your buttons you’re going to want to follow this section for that area as well.
InDesign doesn’t give me the option of changing that white area like adding backgrounds or anything else. So my only option as I saw it was to add dummy pages to address this white area of my .swf file, even that option was a bit complicated. When I went layout > insert I added 1 page to be placed before my cover or first page. The result wasn’t what I wanted. It added the page all right but pushed my first original page down to where my second page had been this was not the result I wanted. So I figured out I had to actually add 2 pages to the beginning of my catalog and just not use the “extra” page InDesign made me use. The image below shows what my document looked like after I added 2 pages at the beginning of my catalog. As you can see the top page in the image now has my default background I had in the document. Page 2 is white because my original design of this file I had overridden the master elements so it is a blank canvas. These are not what we want in our final output either.
So we are going to remove the backgrounds from the first “dummy” page making it white like the page that comes before our cover. To do this (and you only have to do this if you are using master pages) we select the first page in our page panel at the right and click override all master page items. Once we do that we should be able to remove everything from that page. Now you should have something like the image below.
We won’t be ever messing with our publishing that top page. From here on out that’s a dead page. The page before our cover page the white one on the left. This is where we fix the white box issue we talked about earlier. This is where the gray fix come in. This fix also works for the area you may have created for you button area. What you need to do here is make a background in InDesign for this page.
Select the rectangle tool on the left tools panel. Make the rectangle big enough to cover the entire white page. Now you want to fill this rectangle with a gray color that matches the background of the SWF. So make a color swatch on the right, pull it up to adjust the colors. It should be in RBG mode, if not switch it to RGB mode. Then in ALL 3 areas enter the value 155. That number should be used in Red, Green, and Blue. This is a super close match you might find a closer one but this one served my needs. Tada! I know you’re dying to see it match right? Go ahead make a .SWF file like I showed you before and see for yourself you just fixed the white box issue. This needs to be repeated for the last page as well. But there you won’t or shouldn’t need more than 1 page added not 2 like at the starting area.
At this point, if you are just adding the buttons to the document and not adding a space for the buttons you need to get your document ready to add the buttons by adjusting your layout images and content to accommodate the buttons on your pages. If you added space make sure you have your space all ready to go too. Also, make sure you have any buttons files you may be needing.