Archive for March, 2011

Using InDesign to Publish Your iPad Magazine

By Terri White in Layers Magazine
Adobe just took the wraps off the long-awaited Digital Publishing Suite that powers the Wired magazine and The New Yorker iPad apps. With InDesign CS5 at the core, you can now author your layouts, including interactive content, and export it out in the new .issue format.

From there you can preview your content on the iPad using the free Adobe Digital Content Preview Tool. If you want to monetize your content then you could check Adobe’s hosted solutions. For the purpose of this tutorial, however, we’ll walk you through the steps to build your digital issue. In order to do this tutorial you’ll need to download and install the Digital Publishing Suite components from Since we’re targeting the iPad, we need to create a document that’s the right size. Go to the File>New>Document menu and choose Web for the Intent, 1024×768 for Page Size, and click the Portrait icon for Orientation.

Typically, we design longer documents in multiple InDesign files for ease of collaboration, and we’re going to follow that same procedure here even if we’re the only ones laying out this publication. Each section or article of your digital publication is called a stack, and each stack is a separate InDesign document. Our first stack will be the cover. You can design the cover anyway that you like using standard InDesign techniques for image placement and fonts. Save it with whatever name you want but make sure the name ends in “_v.indd” (e.g., “cover_v.indd”).

If you want your readers to be able to view your publication horizontally, then you’ll need to actually build the horizontal version of each stack as a separate InDesign document. After you create and save your vertical cover in Step 2, go to File>Save As and name the file the same except end the name with “_h.indd” (e.g., “cover_h.indd”). Now go to Layout>Layout Adjustment, turn on Enable Layout Adjustment, and click OK. Then, go to File>Document Setup and change the Orientation to Landscape. Layout Adjustment does the best that it can to keep the layout intact, but you may need to tweak a few things to get it to look perfect.

At this point you would create new InDesign documents for the subsequent stacks in your publication. You’ll need both vertical and horizontal versions of each document. The stacks themselves can be multiple pages, such as longer articles.

In order for the Bundler to successfully import your stacks and bundle them together, you have to create a very specific folder structure for your InDesign files. The easiest is to have one main folder for each issue. Inside that folder, include a subfolder for each article. Inside the article folder, include subfolders for both the vertical and horizontal versions of the file. Each of these subfolders will contain the InDesign file, link folder, document font folder, etc. for that stack. In the example here, the main magazine folder is called Meridien_Issue, which contains a folder for an article on WiFi. The WiFi folder contains the subfolders for both the horizontal and vertical versions of the InDesign file.

If you want to go beyond standard text and graphics, you can have two types of interactive content. You can use the standard navigation elements in InDesign, such as buttons, or you can use the Adobe Interactive Overlay Creator to create additional content such as panoramas, 360° views, audio, video, image pans, etc. Launch the Adobe Interactive Overlay Creator that you downloaded and installed from Adobe Labs.

In order to place a video in your digital publication for the iPad, your video will need to be an MP4 with H.264 encoding. Place your video in a folder called “OverlayResources” in the stack subfolder that you wish to use the video in. Switch to the Video tab of the Interactive Overlay Creator and click the Browse button next to the URL field. Find your video and click Select. Enter the Width and Height of your video in pixels. If you want your video to play full screen, enable the Play Full Screen checkbox. Click Export after you make your setting choices, and save it to the same folder.

Now go back to the InDesign document in which you want to place the SWF version of your video that you exported in Step 7. Go to File>Place, navigate to the SWF file, click the Open button, and click on your document where you want your video.

At this point we want our readers to be able to see an image for the video. Although you can choose a frame from the video to use as the poster frame, it’s probably best to design an image that lets the reader know that it’s a video (we’re using an image that has a play icon on it). While your video is selected, bring up the Media panel (Window>Interactive>Media). In the Media panel, select Choose Image from the Poster drop-down menu, navigate to the image that you designed to be the poster frame, and click Open.

In order to bundle the issue and for your table of contents to function, each stack must have a TOC thumbnail. This thumbnail has to be a 70×70 pixel PNG file and saved in the root level of each stack folder. You can use a screen capture of a section of the page or anything you design using Photoshop. With your image open in Photoshop, go to File>Save for Web & Devices. Select PNG-24 in the Preset drop-down menu at the top-right, and set the width and height to 70×70 pixels in the Image Size section. Click Save, navigate to the appropriate stack folder, select Images Only from the Format drop-down menu, and click the Save button.

After you’ve created all your stacks and interactive content, it’s time to open your issue in the Adobe Digital Content Bundler that you downloaded from Adobe Labs. Click the New button and point to your main issue folder without actually going inside of it and click the Select button. Once your issue has been imported, you’ll need to add in the appropriate title information. You can also rearrange the order of the stacks so that they are in the order of the actual publication.

Once you have your issue details inserted, you can now click the Export Issue button to export out your .issue file to a folder of your choice. Be sure to change the Issue option to Single File in the Export Options dialog.

In order to view your .issue file on your iPad, you’ll need to install the free Adobe Digital Content Preview Tool for iPad on your device. You can get this from the Apple App Store. Once you have it installed, plug in your iPad via the USB cable and launch iTunes. Click on the Apps tab and click on Adobe Preview. Now you can click the Add button, locate your .issue file, and sync it directly to your iPad.

At this point you can now launch the Adobe Digital Content Preview Tool app on your iPad and your issue should be there to view. This will allow you to view and test all of your stacks and interactivity.


View original post.

When You See Thin White Lines in Your PDF Files

You view your PDF on screen and — gasp! — tiny white lines! Disaster or not?

Have you ever opened a PDF file and seen thin white lines where there shouldn’t be any? In general, the white lines, or “light leaks” are due to a PDF that includes flattened transparency — transparency effects (such as placed PSD files) in a file saved in a file format that doesn’t support transparency (such as Acrobat 4, a.k.a. PDF version 1.3).

Flattening transparency means “faking it” by creating opaque areas that look transparent. But these opaque areas have to fit together like a mosaic, each piece right next to the next. The result is that sometimes white peeks out between them. In the vast majority of cases, this appears only on screen! Sometimes it shows up on low-resolution printers, too, but virtually never in high-res commercial output.

View original post

Smart typography tips

There are plenty of sites that can help you with grammar and typography. Here are a few tips that can make your next printed piece more professional.

View original post.

Quick Tip: Create a Gift Voucher in InDesign

In this tutorial you will learn how to create a simple gift voucher. You will use pictures and text to create nice clean layout that’s perfect to print.

Continue reading…

From InDesign to HTML5 via Flash

Today Adobe announced the beta release of their Flash to HTML5 conversion tool,Wallaby. Adobe demoed this software last Fall at Adobe Max. With todays release, you can download Wallaby (a free Adobe AIR app) and test out the conversion yourself.

In order to convert from Flash, you need to have access to the actual FLA (native Flash authoring file), unfortunately published SWFs will not work. According to various reports, the following items will not be converted in this beta:

  • Blend Modes
  • Flash TLF Text
  • Filters
  • Audio
  • Video
  • ActionScript

View original post

InDesign multi-state objects in interactive PDFs

InDesign CS5 has cool multi-state objects that let you create some really awesome effects. You can use these to create slideshows and other interactive content. As you might have noticed, multi-state objects work in SWF output only. So what do you do if you want to include a slideshow in an interactive PDF? You can add […]

View original post.

4 Situations Where InDesign Ignores You

Keith is feeling ignored by InDesign today. Discover four situations where InDesign, like a headstrong teenager, ignores your wishes.

View original post

Preventing a compound word from breaking at the hyphen

Amy wrote and asked:Is there a way to set InDesign to keep “ACME-PRO” together and not insert a line break after the hyphen? There are at least two ways to accomplish this:1. Type ACME-PRO with a discretionary hyphen at the beginning (immediately before the A). A discretionary hyphen is typed as…

View original post

Option-Dragging Back to Default Formatting

Did you ever try option-dragging an object to make a copy of it using the Direct Selection tool? If so, you may have witnessed this weird phenomenon.

View original post

Using Pano2VR to Create Panorama Assets

When you’re using InDesign to create digital publishing apps for mobile devices, you can add all kinds of interactive effects, including panoramas. A panorama overlay can give you the impression that you’re inside a building or cockpit, allowing you to spin around and zoom in and out.

Unfortunately, creating the source files for panoramas is not easy. A panorama overlay requires six images that represent the inside of a cube.

You can use Photoshop to create a 3D panorama image. However, converting a 3D panorama image into the six images requires a third-party tool such as Pano2VR. Here’s how to use Pano2VR to convert a 3D panorama image into the six images required by the Overlay Creator.

1. Create or obtain the panorama image.

2. Install and start Pano2VR. You can download Pano2VR here.

You can download and experiment with a free version that includes a watermark in any output.

3. Drag the panorama image into the Input area of Pano2VR.

4. Click Convert Input, choose Cube Faces from the Type menu, and choose PNG for format type. Specify a known folder for the PNG files.

5. Click Convert to generate the six files.

Pano2VR is also useful for determining the upper and lower limit values for panorama images that include blank spots at the top and bottom. After you drag in the image, click Modify under Viewing Parameters, select Show Limits and select Ignore Limits In Preview. Look at the Tilt value as you drag the image. (For the negative Tilt value that appears in Pano2VR when you scroll to the bottom of the image, use a positive value for Button in the Overlay Creator.)

View original post.