Pixelgenaues Arbeiten fürs Web

Während InDesign mit seinem Export interaktiver PDF-Dateien schon irgendwie auch anscheinend für Screen-Design vorgesehen ist (mehr vagisierende Begriffe konnte ich nicht unterbringen; könnt Ihr?), ist pixelgenaues Webdesign fast komplett über seiner Hutschnur. Mit ein wenig Mühe geht‘s schon.

Während InDesign mit seinem Export interaktiver PDF-Dateien schon irgendwie auch anscheinend für Screen-Design vorgesehen ist (mehr vagisierende Begriffe konnte ich nicht unterbringen; könnt Ihr?), ist pixelgenaues Webdesign fast komplett über seiner Hutschnur. Mit ein wenig Mühe geht‘s schon.

Das Problem

Das Problem fängt damit an, dass als Pixelformat nur ein JPEG-Export mit Mittelklassequalität zur Verfügung steht. Den SWF-Export von CS4 habe ich noch nicht ausreichend unter die Lupe nehmen können, bin aber skeptisch, ob sich damit ein alternativer Weg auftut.

Der Weg zum png et al. geht also normalerweise so, dass InDesign ein PDF exportiert, das dann von Photoshop gerendert wird. In Photoshop habe ich dann diese Optionen zur Verfügung:

Die Option "Glätten" sorgt dafür, dass ich entweder dieses Ergebnis:

oder dieses bekomme.

Ich habe also die Wahl zwischen Bäh und Örks.

Der Lösungsansatz

Folgendermaßen kann man dafür sorgen, dass die Konturen trotz Glätten-Option kantenscharf bleiben: arbeiten Sie mit einem Pixelraster. Wenn Konturen exakt einen Pixel ausfüllen, müssen sie nicht geglättet werden. Das passiert nur, wenn sie auf der Grenze zwischen zwei Pixeln liegen.

Da InDesign "Pixel" als Einheit nicht kennt, nehmen wir "Punkt" und gehen von 72ppi aus.

Dass er die 150pt gleich kurz in mm umwandelt, schert mich nicht, denn als erstes klicke ich mit Rechts in die beiden Lineale und stelle die Maßeinheit für dieses Dokument auf Punkt um.

Als nächstes brauche ich das Pixel/Punktraster: "Voreinstellungen > Raster" ...

Unter "Ansicht > Raster & Hilfslinien" lässt es sich anschalten.

Auch noch wichtig: die Konturen dürfen nicht mittig ausgerichtet sein, sondern am besten nach innen.

Stellen Sie das ein, während nichts markiert ist, und es gilt für alle Linien, die Sie in Zukunft zeichnen.

In Ganzseitendarstellung sehen Sie wahrscheinlich nicht jede Unterteilung.

Ab 600% sehe ich aber jeden einzelnen Pixel.

Zeichnen Sie jetzt bei eingeschaltetem Magnetismus (Apfel-Shift-ß) und achten darauf, dass alle Striche ein Vielfaches von 1 pt dick sind.

Das obere Rechteck klebt genau im Raster, das untere ist frei Schnauze ohne Magnetismus gezogen.

Um Photoshop klar zu machen, wo der Pixel anfängt, legen Sie am besten noch ein 1pt Rechteck genau auf die Kante der Seite (nach innen ausgerichtet, latürnich).

Dann als PDF exportieren und in Photoshop öffnen, das kennen wir ja schon.

Voila: instant perfection.

Don‘t forget to tip your waiter ;)