Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Halbe Pixel, doppelte Probleme

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Halbe Pixel, doppelte Probleme

So sagt ihr den Subpixeln in Photoshop den Kampf an: Endlich saubere Vektoren ohne verwaschene Kanten – Gerrit van Aaken zeigt Ursache und Gegenmaßnahme!

Die meisten Webdesigner setzen in der Entwurfsphase einer neuen Website nach wie vor auf das Adobe-Schlachtross Photoshop, auch wenn diese Anwendung ursprünglich gar nicht für das Screendesign entworfen wurde. Dennoch bietet gerade die Kombination aus pixel- und vektorbasierten Ebenen eine Menge an Möglichkeiten, die man gerne nutzt.

Das Problem bei der Sache: Vektorelemente befinden sich komplett außerhalb des Pixelrasters und scheren sich überhaupt nicht darum, ob ihre Knoten- und Anfasserpunkte, mit denen die hübschen Kurven erzeugt werden, nun genau auf einem Pixel, an der Kante von zwei benachbarten Pixeln oder irgendwo dazwischen liegen!

Wer als Grobmotoriker oder Kurzsichtiger gerne ganz nah an seine Objekte heranzoomt, erlebt es häufig, dass klare horizontale oder vertikale Vektorkanten nicht direkt auf den Kanten des Pixelrasters liegen und zu allem übel von der Kantenglättung des Systems auch noch abgesoftet werden. Eine Box um ein Icon herum kann dann schon mal so aussehen:

Unscharfe Vektorkante

Das Problem tritt allerdings nur auf, wenn ihr das betreffende Vektorobjekt in einer Zoom-Stufe anlegt, die höher als 100% ist. Und somit liefert diese Erkenntnis auch gleich die Lösung des Problems mit: Wenn ihr einen Kasten oder eine Linie als Vektorform anlegt, solltet ihr euch dazu unbedingt zunächst in die 100%-Ansicht begeben:

Scharfe Vektorkante

Update, 7. Dezember: Wie in den Kommentaren richtigerweise angemerkt wurde, halten aktuelle Photoshop-Versionen (CS3 und CS4) eine versteckte Option bereit, mit der das »Rechteck-Werkzeug« und das »Abgerundetes-Rechteck-Werkzeug« sehr wohl an das Pixelraster ausgerichtet werden können. Die Abbildung zeigt, wie ihr an diese Option gelangt:

Versteckte Optionen in Photoshop CS3 und 4

Versteckte Optionen in Photoshop CS3 und 4

Kommentare

Moritz Gießmann
am 04.12.2009 - 08:07

Nice! Genau das Problem hatte ich schon oft. Schön, dass es dafür eine so simple Lösung gibt.

Permanenter Link

assbach
am 04.12.2009 - 08:40

yep, nervt ohne Ende und ist in Fireworks übrigens auch so meine ich.

Permanenter Link

Nils Hörrmann
am 04.12.2009 - 08:42

Hilft in diesem Zusammenhang (zumindest für Rechtecke) nicht die Option an Pixel ausrichten in den Rechteck-Optionen? (Werkzeugleiste, im Dropdown neben Rechteck, unterster Punkt)

Permanenter Link

Philipp
am 04.12.2009 - 08:52

Das ist mir auch schon des öfteren Aufgefallen, hätte niemals erwartet dass dies mit der Zoomstufe zusammenhängt.

Permanenter Link

Steffen
am 04.12.2009 - 08:54

Meinst du mit einer simplen Option so etwas wie an Pixeln ausrichten? Die gibt es nämlich in den Rechteck-Optionen.

Bsp.: http://www.flickr.com/photos/intervisual/4157600178/

Permanenter Link

Christian
am 04.12.2009 - 09:20

Als Alternative fürs pixelgenaue Platzieren von Vektorelementen werfe ich mal Fireworks in die Runde. Wird leider immer noch zu Unrecht von viel zu wenigen Screendesignern genutzt.
Fürs Screendesign gibt es meiner Meinung nach nichts Besseres. Und für aufwändige Bildbearbeitungen, die in das Screendesign einfließen sollen, gibt es dann immer noch Photoshop.

Permanenter Link
Gerrit van Aaken

Gerrit van Aaken (Autor)
am 04.12.2009 - 09:23

Fireworks scheint aber auch instabil und hässlich zu sein und von Adobe nicht wirklich geliebt zu werden. Jon Hicks hat darüber mal hübsch was geschrieben: http://hicksdesign.co.uk/journal/a-big-assed-post-about-fireworks

Permanenter Link

Ingo
am 04.12.2009 - 09:54

Fireworks wäre im Grunde schon klasse und eigentlich genau das richtige Tool für Webworker. Wenn da nicht ein paar Feinheiten wären, die erkennen lassen, dass die Software noch nicht so lang unter der Entwicklung von Adobe steht, wie Photoshop. Schriften sehen einfach in jeder Anti-Aliasing-Einstellung ein wenig unsauber aus.

Permanenter Link

Nils Riedemann
am 04.12.2009 - 10:04

Sowas in der Art gibt es doch. "Am Pixelraster ausrichten", beim Aufziehen von neuen Formen. Leider etwas versteckt:

Am Pixelraster ausrichten

Permanenter Link

Tekl
am 04.12.2009 - 11:30

Fireworks erzeugt oft recht hässliche 8-Bit-Dateien. Allerdings unterstützt Fireworks auch bei 8-Bit-PNGs Alpha-Transparenzen. Ich frage mich, ob die Photoshop-Entwickler davon einfach nichts wissen, oder was der Grund ist PNG nicht vollständig zu unterstützen.

Permanenter Link

Andi
am 04.12.2009 - 14:30

Für die Anfänger wäre noch zu erwähnen, wie man ein 1x1 Pixelraster anzeigen kann und das man "Ausrichten an" anschalten muss. Ich habe das in einem älteren Blogartikel von mir mal erklärt.

Grüße
Andi

Permanenter Link

Andi
am 04.12.2009 - 15:01

Nachtrag: Für Versionen unter CS4. Die neuste hat ein automatisches Pixelraster, wurde mir gerade gesagt :-D

Permanenter Link

Marko Röper
am 04.12.2009 - 15:25

Ich möchte auch mal meine 2 Cent für Fireworks in die Waagschale werfen. Ich habe dies schon benutzt, als es noch Macromedia mit Vornamen hieß. Gerade als derjenige, der die Layouts dann schlußendlich ins HTML überführen muss genieße ich die Vorteile die Fireworks mit sich bringt. Das pixelgenaue ablesen, verändern und verschieben von Elementen geht hier viel viel einfacher.

Dabei ist es mir reichlich egal, wie der Text dort gerendert wird, da Text nix in Grafiken zu suchen hat und somit nur schmückendes Beiwerk ala Lorem Ipsum darstellt um die Größe, Farbe, etc. festzuhalten!

Ich erlebe es derzeit immer öfter, dass eingefleischte Photoshopper mehr und mehr vom PSD zum PNG überlaufen :-) ...

Permanenter Link

Andi
am 04.12.2009 - 16:33

Text hat nichts in Grafiken zu suchen?

Permanenter Link

Logo
am 05.12.2009 - 02:19

„solltet ihr euch dazu unbedingt zunächst in die 100%-Ansicht begeben:“

Daraus würde ich einen Bezug zur nachfolgenden Grafik ablesen. Die zeigt aber wohl eher das Resultat dieses Tipps, wie man unschwer an der „500%“-Angabe im Titel des Bildes lesen kann.

Permanenter Link

Myrronth
am 05.12.2009 - 08:23

Hässlicher kann ich nicht wirklich nachvollziehen. Mit CS4 hat Adobe das Interface der einzelnen Programme wenigstens optisch soweit angepasst, das man beim beim Wechseln erkennt was Paletten und was Arbeitsbereich ist ;)
In der neuen Version hat Fireworks zwar noch mehr Bugs erhalten, trotz allem ist mir die Arbeit mit Objekten in FW wesentlich lieber und näher an der Umsetzung in HTML als Photoshop. Mit den ganzen Unzulänglichkeiten muss man mangels Alternativen (vll. hat jemand einen Tipp?) leider leben :(

Permanenter Link
Gerrit van Aaken

Gerrit van Aaken (Autor)
am 05.12.2009 - 11:37

Ui, wie peinlich! Tatsächlich bietet auch Photoshop CS3 schon die Möglichkeit, die Vektorobjekte automatisch an Pixeln auszurichten. Die entsprechende Option ist ein wenig versteckt, aber Kommentar Nr. 5 zeigt, wo!

Permanenter Link

Martin Alker
am 05.12.2009 - 14:19

Obwohl ich zuletzt nicht so oft mit PS gearbeitet habe finde ich solche kleinen aber feinen Beiträge sehr nützlich, da falls man an solche Probleme stösst oder schon gestossen ist zumindest jetzt weiß, dass 1. man nicht der einzigste ist, der sich schon mit der Thematik bzw. Problem auseinander gesetzt hatte und 2. es dafür eine oder mehrere simple Lösungen gibt. Danke!

Permanenter Link

Designmacher
am 06.12.2009 - 08:31

Danke für die Info. Das Problem hatte ich auch schön öfters. Gerade bei Navigationsbuttons mit Zwischenräumen von 1 Px. Dort sieht man dann immer recht schnell dieses "Halbe Pixel" Problem. Werde wohl auch mal auf CS4 updaten.

Permanenter Link

cy3ot
am 06.12.2009 - 19:04

Herzlichen Dank ..
auch nach vielen Jahren Photoshop hat man doch nie ganz ausgelernt.

Grüsse
cy

Permanenter Link

derCobold
am 07.12.2009 - 08:45

Vielen Dank für diesen kleinen aber durchaus nützlichen Tip. Hätte nie gedacht, dass die Lösung so einfach sein kann.

Permanenter Link

qlworx
am 07.12.2009 - 09:37

Was Fireworks betrifft, hatte ich mir ein wenig mehr versprochen seit der Übernahme durch Adobe. Zum Beispiel ein sauberes Antialiasing für Texte. Die manchmal eben auch in Grafiken unumgänglich sind (@ Nr. 13). Ansonsten danke mal wieder für einen guten Tipp.

Permanenter Link

Cord
am 16.12.2009 - 11:02

Die Vektoren kann man auch schon in der Version 6 von Photoshop an Pixeln ausrichten.

Permanenter Link

Die Kommentare sind geschlossen.