Step by Step zum digitalen Magazin

beat kipfer InDesign CS 6 und die Digital Publishing Suite (DPS) bieten zusammen alle Werkzeuge, welche für das Erstellen von interaktiven Publikationen für iPad & Co. notwendig sind. Nach kurzer Schulung und Einarbeitungszeit wird es für geübte InDesign-Anwender problemlos möglich sein, Inhalte ansprechend zu gestalten und mit passenden interaktiven Elementen anzureichern.

Der Tabletmarkt explodiert, die Geräte von Apple, Samsung und anderen Anbietern verkaufen sich bestens. Allein in der Schweiz wurden in den beiden vergangenen Jahren insgesamt etwa eine Million Tabletcomputer verkauft. 625 000 Apps standen im Juni 2012 im App Store von Apple zum Download bereit.

Grosse und kleine Projekte

Unter all diesen Apps ist der Anteil an Publikationen gering. Von den Zeitschriften und Zeitungen, welche als App angeboten werden, wurden sehr viele in InDesign gelayoutet. Der Publikationsprozess läuft bei den meisten Titeln aber über ein Redaktionssystem wie Woodwing Enterprise, vjoon K4 oder die Quark Publishing Platform (Layout mit QuarkXPress). Dahinter stehen oftmals grössere Verlage mit bekannten Titeln.

Für viele kleinere Publikationen, Produkt- oder Firmenpräsentationen stellt die standardmässig mitgelieferte Digital Publishing Suite eine gute Stand-alone-Lösung dar. Richtet sich ein geplanter Auftritt an eine vorbestimmte Benutzergruppe (zum Beispiel den Aussendienst einer Firma oder das Standpersonal einer Fachmesse), ist es nicht notwendig, überhaupt eine App zu erstellen. Solch kleinere Projekte lassen sich über einen Adobe Account und den Folio Producer an die erwünschte Benutzergruppe freigeben. In der folgenden Anleitung geht es um die Erstellung einer solchen Präsentation.

Wieso überhaupt auf das iPad?

Vorher sei aber noch eine grundsätzliche Frage erlaubt: Worin liegt denn überhaupt der Anreiz, mit InDesign für Tablets und insbesondere für iPads zu publizieren? Produkte und Waren werden doch mehrheitlich über Websites angeboten und verkauft, präsentiert wird über PowerPoint oder PDF, dazu existieren immer noch schöne Printprodukte. Wo liegt die Nische, was ist so einzigartig an einem iPad-Auftritt ?

Meine Antwort darauf ist einfach: Auf einem iPad kommen Bilder, Grafiken und Text – zusammen mit einem mediengerechten Layout – hervorragend zur Geltung. In Sachen Brillanz und Darstellungsqualität ist dies einzigartig. Aus diesem Grund ist der Oberbegriff «Digitale Magazine» für solche Publikationen treffend: Unter einem Magazin stellen sich die meisten Leute bebilderte, farbige Seiten vor. Genau um das geht es: Verwenden Sie gutes Bildmaterial und hochwertige Grafiken, gestalten Sie Text und Layout ohne Einschränkungen. Ergänzen Sie die gestalteten Seiten mit sinnvollen interaktiven Elementen; diese sind dann auf dem Touchscreen sehr einfach zu nutzen, dazu braucht es nicht einmal eine Anleitung.

Das Gerät ist edel und beinahe perfekt – und gleichermassen wirken auch gut gemachte Inhalte auf dieser Plattform! Durch die zunehmende Verbreitung von iPads und anderen Tablets steht die Plattform in vielen Firmen und Organisationen bereits zur Verfügung und muss nicht extra angeschafft werden.

Technische und konzeptionelle Fragen und Antworten

Bevor wir uns an die Kreation eines Tabletprojekts mit InDesign machen, müssen wir uns klare Ziele setzen. Dabei stellen sich folgende Fragen:

• Erstellen wir das Layout parallel horizontal und vertikal oder nur in einer Ausrichtung? Es hat immer noch einen besonderen Reiz, das Tablet um 90 Grad drehen zu können und den gleichen Inhalt in alternativer Gestaltung zu sehen (1). Andererseits ist der Aufwand des doppelten Layoutens trotz alternativem Layout, Liquid Layout und Textverknüpfungen (siehe Publisher 6-12) immer noch beträchtlich. Wichtig ist ein einheitlich strukturierter Auftritt.
• Welche Auflösung respektive Seitengrösse wählen wir? Das iPad 2 weist eine Bildschirmauflösung von 1024 × 768 Pixel auf. Bei den neueren Modellen hat sich diese Auflösung auf 2048 × 1536 Pixel verdoppelt. Die Erfahrung zeigt, dass die Standardauflösung von 1024 × 768 Pixel für die meisten Projekte bestens ausreicht. Solche Seiten sehen auf allen Modellen im Prinzip gleich aus. Das höchstauflösende Retina Display zeigt das Ganze einfach noch kontrast- und detailreicher an.
• Welches ist die ideale Bildauflösung? Die Antwort überrascht vielleicht: Wählen Sie 72 ppi. Die Bildgrösse ergibt sich aus der effektiven horizontalen und vertikalen Pixelanzahl. So ergibt beispielsweise eine Breite von 512 Pixeln ein Bild in halber horizontaler Bildschirmbreite.
• Welcher Farbmodus und welches Farbprofil soll verwendet werden? Stellen Sie Bilder im RGB-Modus, idealerweise mit einem sRGB-Farbprofil zur Verfügung.
• In welchem Datenformat sollen Bilder und Logos vorliegen? Für Bilder – inklusive Diashows oder Schwenken und Zoomen – sind qualitativ gute JPEG-Bilder ideal. Im Prinzip können Sie aber jedes von InDesign akzeptierte Dateiformat verwenden. Die Bilder werden bei der Erstellung der Foliodateien umgewandelt. Für Grafiken empfiehlt sich PNG-24, da dieses Format auch Transparenz und Transparenzverläufe unterstützt.
• Wie werden die InDesign-Dokumente strukturiert? Im Folio Builder können mehrere InDesign-Dokumente als Artikel zu einer Publikation zusammengestellt werden. Jedes dieser Dokumente kann eine oder mehrere Seiten enthalten. In der Regel ist man mit mehreren kleinen Dokumenten flexibler als mit einem einzigen grossen Dokument. Die Vorteile liegen in der rascheren Darstellung beim Testen im Desktop Viewer, dem schnelleren Korrigieren durch Austausch einzelner Artikel in bestehenden Folios. Zudem kann die Arbeit bei Bedarf auf mehrere Mitarbeiter aufgeteilt werden.

Erstellen des ersten Layouts

Nachfolgend nun eine detaillierte Anleitung zur Erstellung eines ersten Foliodokuments für das iPad. Wir haben uns zum parallelen Erstellen von horizontalen und vertikalen Seiten entschieden.

Seit der Version CS 6 steht in InDesign im Dialog Neues Dokument als Zielmedium Digitale Veröffentlichung zur Verfügung (2). Wir beginnen mit dem vertikalen Layout (Seitenformat iPad_V). Die Ränder von 44 Pixeln oben und unten werden im Content Viewer durch die schwarzen Rollbalken belegt. Die Ränder links und rechts habe ich nach Gutdünken gesetzt. Zu beachten ist, dass auf der rechten Seite 6 Pixel für einen schmalen Rollbalken belegt werden.

Bei der Gestaltung sind Sie frei, dazu folgen hier auch keine Erläuterungen. Achten Sie auf gute Lesbarkeit und eine einfache Benutzerführung. Serifenlose Schriften sind in der Regel auf Screens leichter lesbar; auf dem hochauflösenden iPad-Display sind aber auch Serifenschriften zu verantworten, wenn der Schriftgrad nicht allzu klein gewählt wird.

Dokumenthandling

Da in der Version CS 6 das vertikale und das horizontale Layout im selben Dokument gestaltet werden, ist die Systematik in der Dokumentablage einfacher geworden. Erstellen Sie wie gewohnt einen Projektordner. Für die einzelnen Dokumente (= Artikel) erstellen Sie am besten je einen Unterordner, in dem Sie das Dokument verpacken. Auf diese Weise stehen Ihnen die Bildverknüpfungen und die verwendeten Fonts jederzeit zur Verfügung (3).

Falls geplant ist, eine Schaltflächennavigation einzubauen, sollte die Struktur der Dokumentablage bereits vorhanden sein. Dabei sind die Ordnernamen der einzelnen Artikel wichtig. Unsere Präsentation besteht aus vier Dokumenten (vorerst das erste Dokument erstellen, verpacken; Verpackungsordner x-fach duplizieren und im Hinblick auf den Einsatz von Schaltflächen möglichst definitiv umbenennen). Als Option können die Schaltflächen erst im Nachhinein genau definiert werden.

Interaktivität durch Overlays

Ein geschickter Einsatz geeigneter Overlays ist sozusagen das Salz in der Suppe einer gelungenen Tabletpu­blikation. Bildsequenzen, Audio und Video, Panoramabilder und vieles mehr lassen sich mit Folio-Overlays auf einfache Art in das Layout integrieren. Aufwändiger gestaltet sich oft die Beschaffung des geeigneten Ausgangsmaterials. Im Folgenden gehe ich auf die wichtigsten Overlays und deren Optionen ein.

Schaltflächen

Diese müssen so gross bemessen sein, dass sie einfach durch Fingertipp betätigt werden können. Sie weisen nur die Zustände Normal und Klicken auf. Der Zustand Cursor darüber entfällt aus logischen Gründen. Die hier gezeigte Schaltfläche wurde aus InDesign-Elementen gebaut, gruppiert und im Schaltflächendialog (Fenster > Interaktiv) in eine Schaltfläche umgewandelt. Das Aussehen wurde für den Zustand Klicken gegenüber dem Zustand Normal leicht verändert (4).

Speziell ist beim Verlinken, dass dies nicht mit Dokument öffnen geschieht, sondern mit einer URL vom Typ navto. Unser erster Link lautet wie folgt:

navto://PubliCollege#0

Beachten Sie, dass der Ordnername gilt; mit #n wird die Seitenzahl angegeben, auf welcher das Dokument geöffnet werden soll. #0 bezeichnet interessanterweise die Seite 1, #2 würde also die Seite 3 betreffen. Wird dieser Seitenverweis weggelassen, öffnet sich automatisch Seite 1.

Alternatives Layout erstellen

Bevor wir zum zweiten Artikel wechseln, erstellen wir vom einseitigen Cover-Dokument das alternative horizontale Layout. Vorerst haben wir uns versichert, dass die Hintergrundfläche über Liquid Layout so eingerichtet wurde, dass sie sich automatisch an das neue Format anpasst. Alle übrigen Layoutelemente müssen meiner Ansicht nach manuell angepasst werden (6).

Diashow

Eine Diashow ist ein schnell erstelltes Element, um eine Reihe von Bildern – aber auch mehrere Seiten einer Anleitung oder ähnliches – auf kleinem Raum unterzubringen:

• Die Bilder in einer einheitlichen Grösse (gewünschte Anzahl Pixel in Höhe und Breite) in Photoshop vorbereiten und als JPEG in hoher Qualität speichern.
• Alle Bilder in InDesign platzieren und übereinanderlegen. Dies geschieht am einfachsten, indem alle Bildrahmen ausgewählt und dann mit der Ausrichten-Funktion horizontal und vertikal zentriert werden.
• Alle Bilder auswählen und im Objektstatusfenster (Fenster/Interaktiv) unten auf das Neu-Symbol klicken (7). Nun erscheinen die Bilder in der Stapelreihenfolge. Diese kann per Drag & Drop verändert werden. Benennen Sie die Diashow.
• Im Fenster Folio Overlays wählen Sie die gewünschten Eigenschaften für das Abspielen der Dias aus (8). Nach Wunsch wechseln die Bilder automatisch; in diesem Fall sind keine weiteren Elemente notwendig.

Sollen die Bilder einzeln angesteuert werden, sind Minia­turbilder (Thumbnails) sehr elegant. Erstellen Sie dazu in Photoshop von allen Bildern eine gleich grosse Miniversion. Platzieren Sie diese in praktischer Distanz zum Tippen in der Nähe der Diashow.

Aus jedem Thumbnail wird nun wieder eine Schaltfläche erzeugt – Sie wissen ja jetzt schon, wie das geht … Die Optionen dazu stehen im Schaltflächen-Bedienfeld zur Verfügung (9).

Testen mit dem Desktop Viewer

In InDesign selber funktionieren die Overlays nicht. Um die interaktiven Elemente wie Schaltflächen zu testen, verwenden wir den Adobe Content Viewer auf dem Mac oder PC, wo die Datei erstellt wird. Beachten Sie vorerst die Foliovorschau-Einstellungen im Dateimenü (10). Anschliessend starten Sie die Foliovorschau (11).

Dokumentation von Adobe

Laden Sie die komplette, detaillierte Anleitung von Adobe unter der folgenden Adresse herunter: http://help.adobe.com/de_DE/digitalpubsuite/using/digitalpubsuite_help.pdf

Diese Anleitung ist etwas vom Besten, was Adobe in Sachen Dokumentation überhaupt bietet. Wer einigermassen systematisch arbeitet und mit etwas Ausdauer an die Sache herangeht, kommt mit diesem Manual sehr weit. Zu beachten gilt es jedoch, dass die Anleitung in relativ kurzen Abständen aktualisiert wird. Laden Sie diese deshalb vor einem neuen Projekt jeweils neu herunter, um auf dem aktuellen Stand zu sein. Generell ist anzumerken, dass die Adobe DPS noch intensiv weiterentwickelt wird und deshalb Aktualisierungen in kurzen Abständen erfolgen.

Die Fortsetzung in Publisher 2-13 wird weitere Overlays vorstellen und Wege zur Publikation von Folios aufzeigen.