DPS app design spotlight: Smithsonian Magazine

(This is the fifth in an intermittent series of posts highlighting interesting or innovative apps built using Adobe Digital Publishing Suite.)

The folks at Smithsonian Magazine have done a nice job of adapting their magazine to the iPad. Here are a few things I like from the February 2012 issue.

The "Wild Things" article contains this little "quiz" sidebar item. This is a nice, simple way to engage the reader with the content.

 

The "Mystique of the Mother Road" feature has this nice little interactive map. When you tap a town on the map, a push pin appears at that location, and the photograph below the map changes to a photo of that locale. This looks complex, but it is just some buttons on multi-state objects.

Lastly, I like the consistent way that alternate images are displayed. Throughout the publication, there are "slideshows" of 2, 3 or more images. Rather than having visible buttons to advance from photo to photo, the user is instructed to "tap an image to see more". So tapping the entire image acts as a button to advance to the next image. Very simple and elegant. I also like the gray dots that indicate which image is being viewed.

 

How to move a layout from InDesign to After Effects

It's quite common in tablet publications created with Adobe Digital Publishing Suite to include animated covers or opening screens for feature articles. You may want to begin the layout of these screens in InDesign, and then take the layout you've created into Adobe After Effects to make it move. Here is a simple way to get an InDesign layout into After Effects, with each InDesign element showing up in After Effects as a separate asset that can then be made to move.

1. In InDesign, use the layers panel to selectively make layers and/or objects visible and invisible, as needed, and export each layer and/or object that you may want to manipulate in After Effects. You'll want to export the entire page(screen) for each object, instead of just the selection, so that each exported JPEG is the same pixel dimensions, making it easier to assemble the pieces later in step 5. Export non-transparent layers as JPEG using the settings shown below:

2. For layers that need a transparent background in After Effects, such as type floating over an image, export the layer as and EPS file with the settings below:

3. In After Effects, make a new project, and new composition using these settings (assuming you're creating a full-screen composition for the iPad 1or 2):

4. Choose File > Import File, and select each of the JPEG and EPS files you exported from InDesign. Be sure to select Import As: Footage. Then click the Open button.

5. Each of the files will be brought into your composition as an asset and will appear in the Project panel. Select each of the these assets in the Project panel, and drag them onto your Composition screen.

6. You can change the stacking order of the layers by dragging the layers in the Timeline panel.

A peek at the design of Money Magazine, tablet ed.

If you are involved with designing tablet apps, you need to read this really good article about the development and design of the tablet versions of Money Magazine. Some interesting ideas about using swipe to "selectively reveal" images and text to the user.

 

 

Beware of this Apple Security Update

[The following is a "guest post" by my friend Ed Klemz from Central Coast Solutions.]

On 2/1/2012 Apple resleased Security Update 2012-001 for OS 10.6 (Snow Leopard) - DO NOT install it if you use any older software (pre-CS5, Quark 8, Suitcase 3, etc.) as it will disable the 'Rosetta' code that allows older PowerPC applications to run. If everything you run is new then it's not an issue - but I know the bulk of you out there still access older Quark and InDesign workflows when needed, and many older support apps and utilities are rendered unusable as well.

If by chance you did apply this update and it is causing issues, your machine will need its OS reinstalled and updated to appropriate levels.

If you get a Software Update notice, click the 'Details' button and you'll see the list as shown below, simply uncheck the Security Update 2012-001 and allow the others to update. Be careful with all future updates as well...as it will re-check itself next time Software Update runs.

If you ever have an update notification pop up, feel free to let us know before you apply it and we'll let you know if it's OK to do.

-Ed

Don't miss PePcon!

If you use Adobe InDesign, you won't want to miss the Print and ePublishing conference (PePcon). I'll be speaking at the conference again this year, and would love to see you there!

The previous two PePcon conferences have been just great. The speakers, presentations, and panels have all been first-rate, and the community of attendees is awesome.

Use code SFKG88 when you register to get a $25 discount. In addition, register before March 2 to receive an Early Bird discount.

If you're coming to PePcon, drop me a note. I'd love to meet you in person at the conference!