Pixelgenaues Web-Design mit Illustrator

Über die Zauberformel des Screen-Designs: 100 % ÷ 72 dpi × 1 pt = 1 px!

Christian Augustin, Stand 98-08-14

Siamesische Zwillinge | Auf-Lösung | Punkte und Zoll | So geht's!

Auch wenn es nicht wirklich eine mathematische Formel ist, so ist es ein Merksatz für die Lösung des Problems: Wie entwerfe ich mit einem Vektorgrafik-Programm pixelgenau eine HTML-Seite oder passende grafische Elemente?

Wenn wir beim Entwurf mit einem Vektorgrafik-Programm einfach drauflos arbeiten, sind die tatsächlichen Größenverhältnisse der Web-Seite auf dem Bildschirm nur schwer abschätzbar -- schließlich kennen Vektorgrafiken keine Pixel. Und auch die Übernahme in das Bildbearbeitungs-Programm führt zu Überraschungen: Entweder ist alles zu groß oder zu klein, und die Darstellungsqualität wird durch nachträgliches Resampling auch nicht besser.

Siamesische Zwillinge

Adobe Illustrator und Adobe Photoshop sind ein gutes Paar für den Entwurft und die Realisierung von Web-Seiten, da Photoshop die PostScript-Daten von Illustrator sehr präzise umsetzen kann -- unter Windows allerdings mit kleinen Fehlern bei der RGB-Farbumsetzung. Doch das ist ein anderes Thema.

Wird eine Grafik in Illustrator gezeichnet und anschließend in Photoshop mit einer Auflösung von 72 dpi geöffnet, so wird sie in beiden Programmen bei 100-Prozent-Darstellung gleich groß angezeigt. In Photoshop ist es jetzt keine Vektorgrafik mehr, sondern ein Bild; wir haben es also fast geschafft.

Auf-Lösung

Der Schlüssel zum Erfolg ist die richtige Auflösung! Illustrator geht bei der Bildschirmanzeige von 72 dpi (dots per inch) Auflösung aus. Oder anders gesagt: Eine waagerechte Linie der Länge 1" wird in der 100-Prozent-Darstellung mit 72 Pixeln auf dem Bildschirm dargestellt. Wird diese Grafik in Photoshop mit 72 dpi geöffnet, so wird diese Linie ebenfalls mit 72 Pixeln im Bild dargestellt.

Also: In Illustrator bei 100 % zeichnen, in Photoshop mit 72 dpi öffnen. Soll ein TIF direkt aus Illustrator in der "richtigen" Größe exportiert werden, ist ebenfalls die Einstellung 72 dpi hilfreich. Und GIF aus Illustrator? Da fehlt doch die passende Einstellmöglichkeit? Keine Panik, der Exportfilter ist fest auf 72 dpi eingestellt -- auch wenn im Handbuch nichts darüber steht ...

Punkte und Zoll

Nun ist das Pixel-Zählen am Bildschirm nicht gerade effizient und augenschonend. In Photoshop können wir als Maßeinheit "Pixel" einstellen, schließlich geht es ja bei Bildern um Pixel. Doch Illustrator kennt keine Pixel, und deshalb auch keine gleichnamige Maßeinheit.

Die Zahl 72 sollte aber vertraut klingen: Es ist die "magische Zahl" des Desktop Publishing, denn 1 pt entspricht bei PostScript genau 1/72tel Zoll. Das ist die Lösung: In Illustrator die Maßeinheiten auf "pt" einstellen, denn bei 100 % und 72 dpi ist 1 pt gleich 1 px! So ähnlich stand es ja schon im Untertitel.

So geht's!

In Illustrator 7 rufen Sie den Dialog Datei > Dokumentformat auf und stellen die Linealmaßeinheit auf Punkt ein:

Die Lineale können Sie über Ansicht > Lineale einblenden sichtbar machen und daraus Hilfslinien auf das Zeichenblatt ziehen. Als Meßhilfe steht außerdem die Informationen-Palette zur Verfügung (wie gesagt, pt = px):

In Photoshop öffnen Sie eine Illustrator-Datei (.ai oder .eps) mit Datei > Öffnen und stellen als Auflösung 72 und Pixel/Inch ein. Die Option Glätten aktiviert das Anti-Aliasing und sorgt für glatte, weiche Kanten und Übergänge. Diese Option sollte immer genutzt werden:

Sie können auch Objekte in Illustrator in die Zwischenablage kopieren und in Photoshop in das Bild einfügen. Achten Sie dabei auf eine Auflösung von 72 dpi (Bild > Bildgröße), damit die Größen stimmen: