Essential Workflows in Adobe Creative Cloud: Design an App for iPad
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creative work crosses more boundaries than ever. Projects can be cross-media, possibly destined for print, web, and video. They can be cross-platform, appearing on computers, tablets, and smartphones. And they can be collaborative, with team members spread across cities or countries.
Adobe Creative Cloud helps you meet all these workflow challenges by bringing you not only the tools to create, but also to collaborate, share, and publish. Access to the entire collection of Creative Suite tools helps you solve any creative problem. Solutions such as Adobe Digital Publishing Suite, Single Edition and Adobe Muse greatly simplify publishing content on new media platforms. Collaborate by taking advantage of the Creative Cloud website (creative.adobe.com) to easily share your work with project colleagues or potential clients.
Adobe Creative Cloud doesn’t hold you back. The applications live on your computer, and your files can, too. Your subscription works on up to two computers used by you, such as a desktop and laptop, or even one Mac and one Windows computer. When you’re away from the Internet, you can use the applications installed on your computer, and when you’re connected to the Internet you can take advantage of application integration with Creative Cloud online tools.
Read on for examples of how Adobe Creative Cloud can enhance your workflows to meet the challenges of today’s projects.
Design an App for iPad
You don’t need to be a programmer to design an app for Apple iPad. Included with Adobe Creative Cloud are Adobe InDesign CC and Adobe Digital Publishing Suite, Single Edition, and together they provide the tools you need to design a visually compelling and fully interactive app (Figure 1) that’s ready for you to submit to the Apple App Store.
)
Figure 1 You can design an iPad app using InDesign CC and Digital Publishing Suite, SE.
Designing for print publications and desktop websites has traditionally assumed one layout. Two things have changed that: the rapid emergence of smaller screens of smartphones and tablets, and the ability of those devices to rotate screen content as you rotate the device.
InDesign CC offers powerful tools you can use to adapt layouts for a range of screen aspect ratios and devices and for both vertical and horizontal presentation. These tools and options include Liquid Layouts, alternate layouts, layout rules, the Content Collector, and linked content.
Designing an app requires Digital Publishing Suite (DPS) Tools, a free download that integrates with InDesign CC. If it isn’t already installed with your copy of InDesign CC, choose Help > Updates.
Training with Creative Cloud Videos
The wide range of tools available to you in Adobe Creative Cloud makes it easy to add new skills to your arsenal as needed and to expand your creative capabilities into new media. But what if you don’t know how to use features such as the iPad app creation tools in InDesign CC? In the Training section of the Creative Cloud website, you’ll find training videos created by Creative Cloud experts (Figure 2). These videos can help you dive right in and quickly take advantage of Adobe Creative Cloud tools (Figure 3).
)
Figure 2 Many training videos are available in Creative Cloud.
)
Figure 3 This is an overview video about the design workflow for an iPad app.
Setting Up a Digital Publishing Layout and Workspace
Choosing File > Document Setup lets you select an appropriate layout type from the Intent pop-up menu. Choosing an intent changes the available page sizes and the unit of measure for the document. Choosing the Digital Publishing intent provides an iPad page size preset (Figure 4).
)
Figure 4 Creating a new document with an iPad page size under the Digital Publishing intent.
Selecting the intent gets you started with the right layout options for your project, but to work efficiently you’ll want to make some workspace adjustments to match your intent. Because you’re creating an iPad app, you want digital publishing tools to be front and center, and you don’t need to see tools for print publishing. Use the Workspaces feature to set up the right tools in an instant. Simply choose Digital Publishing from the Workspaces menu in the Application Bar to activate a panel arrangement that brings digital publishing tools together (Figure 5).
The other workspaces are useful when you want to focus on specific types of publishing, such as designing books or interactive PDF documents, or for production tasks, such as print proofing of polishing typography. Because workspaces alter only the arrangements of the panels, changing the workspace doesn’t modify your document.
)
Figure 5 Applying the Digital Publishing workspace brings together the tools you’ll need to design an iPad app.
Adapting to Different Page Sizes with Liquid Layouts
It’s perfectly fine to have an iPad app that’s laid out to be read in only one orientation (horizontally or vertically), but InDesign CC gives you the flexibility to create an iPad app with layouts you design for either orientation. This document in Figure 6 already exists in a vertical orientation, and we’re about to lay out pages for the horizontal orientation.
)
Figure 6 This iPad app is currently designed only for viewing in portrait orientation.
In contrast to print, consider how you’ll want each element to move as the layout changes. You can set this up in InDesign CC using Liquid Layout rules, which you’ll find in the Liquid Layout panel. Each page can have its own Liquid Layout rule:
- Scale simply fills the new page size with the current content, resized.
- Re-center keeps content centered within the new layout.
- An object-based rule controls a specific object; you can pin any corner of an object to maintain its relationship to the edge of a page.
- A guide-based rule constrains the page adjustment along layout guides you position.
In this example, regardless of the aspect ratio of the page the red diagonal stripes must stay aligned to the left edge of the page, and the logo must remain in the upper-right corner. To achieve this, select the stripes, in the Liquid Layout panel set the Liquid Page Rule to Object-based, select Height so that the stripes are always resized to be as tall as the page, and select Left to make sure it’s always pinned to the left edge of the page (Figure 7).
)
Figure 7 Liquid Layout options can keep the red diagonal stripes against the left edge of the page.
The logo should always remain in the upper-right corner of the page. To achieve this, select the logo, and in the Liquid Layout panel, set it to Object-based, but turn off the Resize with Page options so that it’s always the same size, and select the Pin options Top and Right (Figure 8).
)
Figure 8 The logo needs Liquid Layout rules that keep it in the upper-right corner of its page as the layout changes.
You don’t have to set layout rules for every object on a page, but every object that can follow a layout rule is one less object for you to manually adjust when you create alternate layouts for different screen sizes and orientations.
Creating an Alternate Layout
In programs that don’t allow alternate layouts, creating a layout for a mobile device’s multiple orientations typically requires creating a separate document for each orientation.
With InDesign CC, you can control the composition of layouts for other display sizes by creating alternate layouts that exist as separate sections in the same InDesign CC document. Being able to keep multiple layouts in a single InDesign CC document greatly simplifies file management.
By choosing the Layout > Create Alternate Layout command, you can name and set up another layout for the same document (Figure 9). In this case the orientation will be landscape (wide). You have control over how Liquid Layout rules apply.
)
Figure 9 The Create Alternate Layout command makes a copy of the existing publication at the page size you specify.
Creating an alternate layout makes a new section appear in the document, duplicating the original pages but using horizontal orientation. You can manually fine-tune the alternate layout to perfect it, but taking advantage of Liquid Layout rules can save you a significant amount of time by automating much of the conversion (Figure 10).
)
Figure 10 You can see the primary (vertical) and alternate (horizontal) layouts side-by-side in the Pages panel (Window > Pages).
You can then continue with any needed manual adjustments to the alternate layout in the new orientation (Figure 11). Manual adjustments are easier if the content you use is chosen with multiple orientations in mind; for example, a square photo with a comfortable margin around the subject will give you more compositional flexibility than a tightly cropped vertical or horizontal image.
)
Figure 11 Minor manual adjustments were made to fully adapt the content to the new orientation.
Adding Interactive Elements
An iPad app is capable of being much more than just a digital book. You can design digital publications such as interactive catalogs, multimedia portfolios and magazines, or teaching tools. When you create an iPad app using InDesign CC, you add interactivity using Folio Overlays. With Folio Overlays you can add all kinds of interactivity that take advantage of iPad touch gestures, and you can do it without coding.
If you use photographs or digital art, Folio Overlays let you easily create a slideshow, image sequence, panorama, a frame containing an image you can pan and zoom, or a video (Figure 12). You can set up images or even create a video in Photoshop CC, also included with your Creative Cloud subscription.
)
Figure 12 Controls in the Media panel (in the Digital Publishing workspace) customize the presentation of a video added to the app.
It’s easy to create hyperlinks from your iPad app to web pages that open in the iPad web browser. You can also integrate web content directly into your iPad app; for example, you can create a frame that displays content from a URL such as an automatically updated tour schedule or a touch-scrollable map.
Because you’re working in InDesign CC, you have full control over the appearance of the graphics frames containing your interactive content so that it exists seamlessly within the overall design.
Creating a Folio
A folio contains the content of your app, which is primarily the articles that make up each section of your app. Using the Folio Builder panel that’s installed in InDesign CC when you install DPS Tools, you build a folio by importing InDesign CC documents (which become articles), cover/preview images and icons, and any other files locally linked from the InDesign CC documents, such as videos.
You can use the Folio Builder panel to preview folios on your computer using Adobe Content Viewer (Figure 13), and also to share folios with others. The Folio Builder panel is part of the Digital Publishing workspace, and the Adobe Content Viewer is installed as part of DPS Tools.
)
Figure 13 You can preview app layouts in Adobe Content Viewer, an application that runs on your computer.
Previewing on an iPad
As you work, you can use the Folio Builder panel to preview a folio easily on an iPad that’s directly connected to your computer. All you have to do on the iPad is install Adobe Content Viewer from the App Store, connect the iPad using a cable, and then start Adobe Content Viewer so that it’s running in the foreground. In InDesign CC, one click in the Folio Builder automatically opens the selected folio in Adobe Content Viewer on the iPad, where you can view and test it (Figure 14).
)
Figure 14 You can preview and test interactivity of app layouts on an iPad running Adobe Content Viewer.
If your computer and the iPad are connected to the Internet, you can also preview folios hosted on the Digital Publishing Suite (DPS) website (digitalpublishing.acrobat.com). As you assign articles to folios, the folios become available in DPS. If Adobe Content Viewer is installed on your iPad and also logged into your DPS account, you can use iPad to view folios stored in your DPS account.
Creating an App
Your Creative Cloud subscription lets you create an unlimited number of single-issue apps for iPad using Adobe DPS, Single Edition. A single-issue app stands on its own, such as a travel brochure or a catalog. Without a Creative Cloud subscription, creating a single-issue DPS app for iPad requires a one-time fee.
If you want to create a periodical app (such as a monthly magazine), or if you want to create apps that also run on iPhone and Android devices, you’ll need the Professional Edition or Enterprise Edition of Adobe DPS, which are not included with Creative Cloud. Adobe DPS Professional Edition and Enterprise Edition also offer features for enhancing your app through analytics, merchandising, monetization, and advertising.
The online tools available in DPS help you finalize the configuration of your app, from organizing folio files and assets to publishing the folio as an app that’s ready to be submitted to the App Store for final approval.
To submit an app to the Apple App Store, you need to be enrolled in the Apple iOS Developer Program. Enrollment will allow you to create development certificates you’ll need before you can create the final app. Your app must also meet the App Store Guidelines so that it can pass the Apple review process for iPad apps. All of these are Apple requirements for the iPad development process, not related to Creative Cloud or InDesign CC. Also keep in mind that while you can design the app using InDesign CC in Windows or OS X, building the final app requires a Mac running OS X 10.6 or later.
Creative Cloud is an easy way to design iPad apps without writing code. You can use the powerful tools in InDesign CC to design your app and preview it on iPad, and you can publish an unlimited number of single-issue DPS apps for iPad.