Designing for web, interactive, and beyond
Mira Rubin
Table of Contents
- Introduction
- Setting up the workspace
- Preparing the document for on-screen viewing
- Making the document interactive
- Exporting to PDF
- Adding more interactivity
- Adding multimedia
- Setting document properties
So much content, so little time. This is the era of cross-media publishing, where you’re called upon to repurpose content from print to web, to mobile devices, and, no doubt, to yet unimagined venues. As demand for cross-media content increases, you need to be able to adapt your print content for screen-based display; and that’s exactly what this tutorial will help you do. Migration from print to web, screen, or both requires a shift of paradigm. While the specific objective of this tutorial is to generate an interactive Adobe® PDF file from Adobe InDesign®, InDesign also supports export to Adobe Flash® SWF and XFL files. You will be able to apply a number of the principals discussed to almost any screen-based content, whether it is PDF, Flash, PowerPoint presentations, or web design. The resulting PDF file will provide a rich, interactive user experience incorporating multimedia, web-like navigation, buttons, hyperlinks, and more.
This tutorial should take approximately one hour to complete.
Requirements
To complete the tasks demonstrated in this tutorial you will need to install the following software and files:
Adobe InDesign CS4
Adobe Acrobat 9 Professional
Sample files
print_to_web.zip (ZIP, 84.1MB)
A comparison of print and web
Print documents typically use CMYK color, while web content always uses RGB. The RGB color space has a broader color gamut than CMYK, so for content destined for the web it makes sense to create your source document in RGB. If you use a PDF workflow, and choose to repurpose your RGB content for print, you can convert from RGB to CMYK color as part of the PDF export process.
Though not an issue in print, file size plays a crucial role in electronically delivered screen-based content. The goal is to compress images as much as you can while still maintaining acceptable quality. Whereas print documents call for high-quality images at a standard resolution of 300ppi, standard resolution for screen-based output is 72ppi. Compression and downsizing (reduction of image resolution) can be achieved during PDF export, but you need to ensure that the images in your document meet or exceed the minimum resolution requirement of 72ppi
The following table offers a comparison of the conventions used in the development of print documents versus those for screen-based content. You may find it a useful reference when setting up an InDesign document destined for screen display.
| Print conventions | Web conventions | |
|---|---|---|
| Color mode | CMYK | RGB |
| Standard image resolution | 300ppi | 72ppi |
| Image formats | TIFF, EPS, PSD, AI, JPEG | JPEG, GIF, PNG |
| Margins/bleed | Restrict content to printable area | Not required: screen provides edge-to-edge viewing |
| Units of measure | Typically picas, points (PostScript® or traditional), or inches | Pixels (in InDesign, use points, which are equivalent to pixels at 72ppi/inch) (points are equivalent to pixels at 72ppi/inch |
| Type face | Traditionally serif for blocks of copy | Sans-serif for smaller text, because it’s easier to read onscreen |
| Orientation | Portrait | Landscape |
Table 1. A comparison of print and web conventions
About the author
Mira Rubin has been training people to use Adobe products full-time since the dawn of the new millennium. She launched Mira Images, a Philadelphia-based Adobe Authorized Training Center and consultancy (www.miraimages.com) in 2002 and has been inspiring reckless pursuit of all things Adobe in countless students ever since.
