Advertisement

Google “InDesign slideshow” and you’ll find a handful of tutorials with slightly different techniques on how to make an interactive slide show for the iPad using InDesign Object States and Overlay Creator. This tutorial will cover the process in detail and take the design a step further by making a custom frame that masks the images for a more engaging iPad presentation. Using the Objects States panel and the Overlay Creator, we will set up the slide show with transitions to play automatically, play by a tap or by the swipe of a finger.

Images

Create a folder of images you want to use for your show and name them sequentially (i.e. image1,jpg, image2,jpg, etc.) so they will appear in the proper order (Figure 1). They should be saved as JPG or PNG in RGB and sized to fit the 1024 x 768 iPad2 resolution. They don’t have to be that size exactly, generally if you have your images saved around 2000 pixels in either direction, that gives you enough flexibility to scale up and down without loss of quality. In other words, don’t import an image that is 72 dpi, 300 x 200 pixels and hope to display it at 900 x 600 and expect good quality.

InDesign.jpgFigure 1: Organize files, resize, resave and sequentially name images as needed.

InDesign1.jpgFigure 2: Photoshop Frame. In addition, create a decorative frame, mat or border that you would like to contain your images. For this example, I used a vintage photo mat cleaned up in Photoshop and saved as PSD to import later to InDesign as my frame.

InDesign Steps

• Create a new Web document, horizontal, 1024 x 768
• Change your workspace to Interactive to display your Object States and Overlay Creator Panels
• To import your images, select File>Place and shift click all your images and click Open
• All your images will be loaded into the cursor icon.

Before you click to place, drag out a large box with the loaded cursor to download your images; as you drag out the box, hit the top and right arrow keys to divide the box into rows and columns to create cells to hold your images. (Figure 3)

InDesign2.jpgFigure 3 : File>Place into a grid (Click below to play demonstration)

[hana-flv-player video="http://www.graphicdesign.com/wp-content/uploads/2012/07/figure-3.mov" width="600" height="" description="" player="4" /]

• Click on each image, use the position wheel and the fit proportionally command to adjust your images.
• Now select all the images and select Align Horizontal Centers and Align Vertical Centers to stack your images. (Figure 4)
• While the stack is selected, open the Object States panel and click on new. Each image should appear in its own state. (Figure 4)

InDesign3.jpgFigure 4: First, align centers, then create object states.

With the object states still selected (either click on the stack or click on the select object states button in the panel), open the Overlay Creator panel and click on Slideshow. (Figure 5)

• In the Slideshow panel you should see options for playing, timing, and transitions. If you don’t, make sure all the Object States are selected. Try clicking on different options and clicking the Preview button on the lower left of the panel to see how they affect the show. For this part of the exercise, select Autoplay and tap to play and pause. Set to 3 seconds and use the diffuse transition. (Figure 5)

InDesign4.jpgFigure 5: First, select the object state, then select slideshow in the Overlay panel and lastly select your options.

• Test your slideshow with the Preview button in the lower left corner of the Overlay Panel. At this point the slide show technically is ready to be uploaded to the iPad via the Folio Builder (covered in the previous tutorial), but we still have the framed oval mat to add.

Adding the Frame Mask

Depending on the type of frame you design or import, a shape has to be created that is the exact size of the opening of the mat. For this example, I followed these steps:

• Place the oval mat image on a new layer and lock it in place. (Figure 6)
• Go back to the layer with the stacked images and draw an oval shape with the Ellipse Tool that lines up perfectly with the imported oval mat. Turn off the oval mat layer for now.
• Now select the multiple state object and copy it to the clipboard.
• Select the ellipse and choose Edit>Paste Into. (Figure 7)
• The ellipse masks the slide show. Turn back on the oval mat layer. If you need to adjust your shape, use the direct select arrow (the white arrow) and adjust as needed. To edit the object states, double click to access the stack. (Figure 8)

InDesign5.jpgFigure 6: Place the Photoshop frame/mat file, create a new layer and lock it in place using the Layer Panel. You may need to resize your images to fill the opening.

InDesign6.jpgFigure 7: Draw an oval to match the opening of your frame. Copy the Object States, then Paste into the oval to create the mask.

InDesign7.jpgFigure 8: Here is the resulting masked object. Next turn on the layer containing the oval frame and then test the slideshow.

• Test your final slideshow using the Preview button in the Overlay Creator or under File>Folio Preview. (Click below for demonstration)

[hana-flv-player video="http://www.graphicdesign.com/wp-content/uploads/2012/07/figure-9.mov"width="600" height="" description="" player="4" /]

InDesign8.jpg

Note: Remember as mentioned in the first tutorial of this series, you need to create a horizontal and vertical version for final publishing to the iPad.

Captions:

Figure 1: Organize files, resize, resave and sequentially name images as needed.
Figure 2: Photoshop Frame
Figure 3: File>Place into a grid (Click on image to play movie)
Figure 4: First, align centers, then create object states.
Figure 5: First, select the object state, then select slideshow in the Overlay panel and lastly select your options.
Figure 6: Place the Photoshop frame/mat file, create a new layer and lock it in place using the Layer Panel. You may need to resize your images to fill the opening.
Figure 7: Draw an oval to match the opening of your frame. Copy the Object States, then Paste into the oval to create the mask.
Figure 8: Here is the resulting masked object. Next turn on the layer containing the oval frame and then test the slideshow.