InDesign: Screendesign erstellen

Ja, man kann InDesign gut für Screen­design verwenden! Der wichtigste Punkt, der dabei zu beachten ist: 100% in InDesign entspricht nicht der späteren Darstellung im Webbrowser.

InDesign versucht bei 10 mm im Dokument bei 100% auch 10 mm auf dem Bildschirm zu zeigen, was nicht der Darstellung im Web­browser oder im Photoshop entspricht.

Lösung

Anstelle den Zoomfaktor in InDesign für die Kontrolle auf 100% einzustellen, wählt man den Faktor, der so genau wie möglich den tatsächlichen Pixeln entspricht. Das ist abhängig von der Bildschirm­auflösung und muss somit individuell eingestellt werden. In meinem Fall entspricht der nötige Faktor 76,6%.


Ermitteln des Zoomfaktors

Variante 1: Man erstellt ein Dokument in der Breite von 1000 px, stellt den Zoom­faktor auf 100%, erstellt ein Bildschirm­foto, öffnet dieses in Photoshop, ermittelt die Anzahl Pixel und übt sich dann in Prozent­rechnen ;-).

Variante 2: Man erstellt ein Dokument in der Breite von 1000 px, mit einem Screen-Prüfungs­tool, wie zum Beispiel xScope, ermittelt man anschliessend die dargestellte Pixel­grösse des Dokuments auf dem Bildschirm und passt den Zoom­faktor an, bis der gemessene Werte über­einstimmt.


Skript als kleiner Helfer

Diesen Prozentwert immer wieder im Zoomfaktor einzugeben ist jedoch sehr mühsam. Deshalb habe ich für mich ein Mini-Skript geschrieben. Diesem Skript habe ich einen Tastaturkürzel zugewiesen, so kann ich mich frei im Dokument bewegen und per Kürzel wieder eine dem Web­browser ähnliche Darstellung aufrufen. Es gibt bereits Skripts, welche den Zoom­faktor wechseln oder etwas im grund­sätzlichen Verhalten von InDesign ändern.

Mir reicht eine Mini­lösung dafür. Der Zoomfaktor ist fix im Skript enthalten. Die entsprechende Zahl kann jedoch mit jedem Texteditor im Skript geändert werden.

Download

Weiter zu beachten

  • Am besten legt man das Dokument gleich mit dem Zielmedium «Web» an. So wird der Lineal bereits in Pixel umgestellt und die Farben in der Farbpalette in RGB.
  • Linien usw. sollten minimal 1 pt gross sein (das enspricht 1 px).
  • Die Koordinaten und Dimensionen von Objekten sollten bei statischen Designs keine Kommastellen aufweisen.
  • Mit fluiden (responsiven) Designs ist die exakte Pixel­angabe ohne Komma­stelle von Objekten, die sich später dem Browser­fenster anpassen sollen, nicht mehr so wichtig. Bei der Programmierung werden die Angaben in «%» und «em» vorgenommen und die tatsächliche Position oder Grösse wird im Web­browser errechnet und kann mehrere Komma­stellen umfassen.

Coole Sache

  • Die «Alternativen Layouts», die man in der Seiten­palette erzeugen kann, können für das responsive Design verwendet werden. So kann man sich eine Desktop-, Tablet-, Smartphone-Version im selben Dokument anlegen.
  • Absatz- und Zeichen­formate helfen auch im Webdesign bereits eine Struktur für den Inhalt anzulegen (h1, h2, h3, p, p.lead…).
InDesign, Screendesign, Zoomfaktor, Darstellung, Skript, 100 Prozent, Pixel