Posts tagged "Bob Bringhurst"

New App – Digital Publishing Suite Tips

By Bob Bringhurst  on InDesignDocs

The Digital Publishing Suite Tips app is now available in the Apple Store. It’s part user guide, part cookbook, and part blog. If you have an iPad and you want to learn about the new Digital Publishing Suite tools, download the app and start playing.

Currently, the DPS Tips app includes two issues — Folio Basics and Interactive Overlays. The Folio Basics issue provides videos and tutorials for the new workflow that came out last week. The Interactive Overlays issue shows an example of each overlay type and explains how to create it.

Both folios include workarounds, tips, best practices, and links to interesting apps.

I’m also working on a third folio called “How Did They Do That?” It will show examples from iPad apps. I have a few articles lined up, but I’m looking for more examples. Please let me know if you’d like to show how you created an article in a folio or you there’s an article in someone else’s app that you’d like to figure out. You can reach me at bbringhu at adobe dot com.

The link to the DPS Tips app is here:

Here’s the link that jumps straight to iTunes:



View Original Story

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.

Design Decisions for Digital Publishing Apps

If you’re creating magazine apps for the iPad and other mobile devices, you have a lot of design decisions to make. Let’s go over a few of them.

Single-Folio or Multi-Folio Viewer App?

When you submit your content to the Apple Store or Android Market, each magazine or book requires its own branded viewer.

For most projects, the decision of whether to create a single-folio or multiple-folio viewer is straight-forward. If you intend to create a book or a one-off promotional piece, such as the Essential Guide to TRON, create a single-folio viewer. If you intend to create a magazine with multiple issues, such as The New Yorker, you need to create a multi-folio viewer that allows your customers to download folios as you publish them on the Adobe fulfillment server.

For multi-folio viewers, Adobe plans to charge $0.30 per download. Adobe does not charge anything for single-folio viewers, because they’re downloaded from the Apple Store or Android Market, not from the Adobe fulfillment server.

Orientation — Vertical, Horizontal, or Both?

You can create portrait-only, landscape-only, or dual-orientation folios. Note that you cannot mix and match orientation types, such as a horizontal-only and dual-orientation articles in the same folio. The layouts of single-orientation folios do not change when the customer rotates the iPad.

In a prerelease forum thread, one publisher claimed that magazine apps should be portrait-only because people are accustomed to reading portrait magazines. I don’t think that reasoning holds up. Aren’t those same people also accustomed to reading websites on landscape monitors? And watching t.v. and movies on landscape screens? I don’t think there’s a “right” orientation for the iPad.

I’ve seen well-designed portrait-only and landscape-only magazines. The new Golf Digest and Reader’s Digest apps are portrait only. One of my favorite apps, Harvest to Heat, is landscape only.

Golf Digest is portrait only.

Harvest to Heat is landscape-only.

One major advantage to portrait-only or landscape-only folios is that you have to create only one design. If you have a printed magazine, converting the layout to a 768×1024 page size isn’t nearly as difficult as converting it to both a 768×1024 and 1024×768 page size.

Designing separate layouts for portrait and landscape orientations can be time-consuming. Furthermore, if you intend to make your magazine available on other mobile devices besides the iPad, creating both portrait and landscape orientations for 1024×768, 1024×600, and 800×600 devices can turn what may be a beneficial inconvenience into an unsustainable workflow.

Note: One concern with portrait-only magazines is the ability to play full-screen videos in landscape orientation. With the newest viewer (drop 9), this is now possible. With portrait-only folios, users can rotate the iPad to play a full-screen video in landscape.

Of course, the drawback to creating a single-orientation folio is that you may take away the customer’s preferred method of reading. Some people prefer viewing content in landscape mode. Like me. I have a folding iPad cover that lets the device sit comfortably on my lap or chest in landscape view. I don’t mind rotating the iPad every now and then, but I always want to go back to landscape. But my neighbor has an iPad cover that props up her iPad vertically, so she’s inclined to read in portrait orientation.

What Are the Best Options for Dual-Orientation App?

The most common approach is to redesign the same content for both landscape and portrait layout. This is the approach that the designers at WIRED, Martha Stewart Living, InDesign Magazine, iGizmo, Fine Cooking, and many others have taken. It provides flexibility and — for now — caters to the iPad’s groundbreaking design and a “wow!” factor. My guess is that the ability to view the same issue of a magazine in two orientations isn’t going to be as significant in the near future. Who knows?

Fine Cooking Holidays

Another option is to create a dual-orientation folio in which each orientation serves a different purpose. For example, the landscape orientation could provide a detailed visual overview with a slideshow or video, while the portrait orientation could include a text-intensive article.

For a how-to manual, the landscape layout could display the desired effect, such as a before/after photo for a Photoshop app, while the portrait layout could provide the instructions for creating that effect.

I saw a magazine that uses the same 700-pixel layout in both the portrait and landscape orientations, but the designers created a much wider navigation bar in landscape orientation. They also created smooth-scrolling articles rather than page-by-page articles to avoid a disjointed experience when rotating the iPad. Unfortunately, I can’t find that magazine on my iPad. One of my twin boys must have deleted it when he was experimenting with the cool wiggle feature. Sigh.

Weekend Magazin mixes its approach by providing the typical dual-orientation redesign for most articles, but every now and then, they signal that rotating the image displays a different photo.

Rotating the iPad offers a different picture

For Multi-Issue Folios, Should the Preview Folio Be Included or Downloadable?

When you create a single-folio viewer, the folio is baked in with the app. With a multi-folio viewer, you have a choice. You can provide a small .folio file that gets downloaded along with the viewer app, or you can provide only a viewer shell and allow customers to download free and retail content from the fulfillment server. (Apple requires that you provide free content for your viewer app.)

You can also combine the two approaches. For example, you can embed a folio that describes how to use the viewer, and you can upload a free preview issue.

To keep things simple, I think the best approach is to avoid baked in content. Just submit a shell viewer app and provide one or more free preview issues that customers can download. That way, if you need to edit the preview issues, you can simply upload a new version to the fulfillment server; your customers can click the Update button in the viewer library to get the new version. If you need to edit a baked-in folio, you’ll have to resubmit the viewer app to Apple.

What’s the Best Way to Provide Free Preview Content

If you’re charging money for your multi-folio viewer, you need to provide some free content that meets Apple’s requirements and (hopefully) convinces your customers to download the retail version or subscribe.

At the bare minimum, provide a table of contents and one or two articles. Another option is to provide more articles, but show only the first page or two of each. Here’s an example from Reader’s Digest in which editors provide just enough of an article to make you want to read more.

“How did he get out of jail? OK, I’ll buy it.”

Should Vertical Swiping Be Turned Off?

By default, swiping up and down displays different pages of an article, and swiping left and right displays different articles. Some designers believe that allowing both horizontal and vertical swiping can be disorienting, especially for inexperienced users. To simplify, they turn on the “Flatten” option for all articles, thereby allowing only horizontal swiping. (Flattening an article causes its pages to be displayed horizontally rather than vertically.)

Of course, this approach requires customers to swipe through every page of every article, sacrificing flexibility for simplicity.

You can see what you think of horizontal-only swiping by downloading apps like EVO and Weekend. In each, designers provide visual clues to indicate the end of an article.

It’s easy enough to try both approaches and do a usability test.

Smooth Scrolling or Page-by-Page Flipping?

Should your allow your customers to view the entire article by swiping smoothly, like a web page, or by swiping to turn the pages, like an epub book? Fortunately, you don’t have to decide one approach for the entire folio. You can make this decision for each article. Some designers turn on Smooth Scrolling for the table of contents and the credits page. The InDesign Magazine designers turned on Smooth Scrolling for some articles and not for others.


Did I miss anything? Leave a comment.

View original post.

Hot Spot Button Workaround for InDesign Dig Pubs

The Digital Publishing Suite is still in its early stages. When the project began, all interactive objects had to be created with a separate tool and added to the InDesign document as placeholder files that were converted during the bundling process. Now, all interactive elements such as buttons, slideshows, movies, and image pans are created natively in InDesign. However, not all of the interactivity features have been hooked up.

Two limitations in particular make it difficult to create button hot spots:

  • Buttons can have only one action.
  • States in multi-state objects cannot include interactive objects.

Fortunately, there’s a workaround. The key is to create a multi-state object (MSO) that includes both the hot spot image on the base state and the “close button” image on the target state, but no object in the MSO can be interactive. Once you create the MSO, you place invisible interactive buttons on top of the MSO These buttons switch states. Here’s a quick video of the button effect shown in the Desktop Viewer:

1. Create State 1

Place the hot spot images or objects that users will tap to display a full image. State 1 is the base state that users see unless they tap the hot spot. The hot spot image is just the picture, not the interactive button. Make this state the same size as the full image. I also included an icon to show that this area is interactive. Group all the objects that appear on this state.

2. Create State 2

State 2 consists of the full image and a placeholder close icon. Use the pasteboard to create this state. Again, this icon is not a real button–it just represents the tap area. Group the image and the placeholder icon. State 1 (the base state) should appear in front of State 2 (the full image), but you can always change the order later.

If you want to create multiple hot spot buttons, as shown in the video example, create a separate target state for each button. These states should be part of the same multi-state object.

3. Create the multi-state object

Align the grouped objects that will act as states. These objects should be the same size. Select the two grouped objects, and use the Objects States panel to create a multi-state object.

4. Create the invisible button that displays State 2

Create a frame the same size as the hot spot image. Make sure it has no fill and no stroke. Select it, and use the Buttons panel to create a button with a Go To State action that jumps to State 2 (the full image). Move this invisible button over the hot spot image.

5. Create the invisible button that displays State 1

Create a frame the same size as the “close” image. Make sure it has no fill and no stroke. Select it, and use the Buttons panel to create a button with a Go To State action that jumps to State 1 (the base state). Move this invisible button over the hot spot image. (If you need to see where the hot spot image is, you can click State 2 in the Object States panel.)

Now you’ve got all your pieces together — the MSO with the hot spot placeholders and the invisible interactive buttons.

That’s it. This workaround isn’t too bad, but let’s hope we see multiple button actions and interactive slides soon.

Special thanks to Minette Layne for letting me use her fox photos.

Go to original post

Sharing Text Between Two InDesign Documents

If you need to use the same text in two InDesign documents, it can be a hassle to keep the changes consistent. If you find a typo or need to add a paragraph, you have to make the change in two different places. To simplify editing, you can use the InCopy export options–and you don’t need to have InCopy to get this to work.

Being able to share text between two documents is especially important when you’re publishing to mobile devices. If you’re using the Digital Publishing Suite to create magazines for the iPad, you can create separate horizontal and vertical documents so that a different layout of the same content appears when the iPad is rotated.

Quick Summary: Export a linked InCopy (.icml) file from one file, and place it in the other file. When you want to edit the linked text, check out the linked story in one document, save the changes, check it in, and then update the other document.

Here are the detailed steps for sharing text between two InDesign documents.

1. In one of the InDesign documents, select a text frame or place your insertion point in the text frame.

2. Choose Edit > InCopy > Export > Selection.

Choosing this option exports the entire story, which is a set of threaded text frames.

3. Specify the name and location of the linked InCopy (.icml) file, and save it.

An icon in the text frame indicates a linked file.

4. Open the other InDesign document, and place the insertion point in the text frame where you want it to appear (delete the previous copy of the text, if necessary).

5. Choose File > Place, and double-click the exported .icml file. Add and edit threaded text frames if necessary.

Now the linked file appears in both documents. When you want to make changes, you can check the file out, make your edits, and check it back in.

6. Place the insertion point inside the linked story, and choose Edit > InCopy > Check Out.

An edit icon replaces the link icon.

7. Edit the text, save the document, and choose Edit > InCopy > Check In.

8. Open the other document, place the insertion point inside the linked text frame, and choose Edit > InCopy > Update.

With shared files, be careful about making formatting changes in one document that might make the other document look bad. For example, if you manually hyphenate a word in one document, it may appear as “concat- enate” in the other document. Use discretionary hyphens instead.

Special thanks to Colin Fleming for reminding me that InCopy isn’t necessary to share text files.

Go to original post