Mediengestalter.cc

Gerade beim Webdesign kommt es drauf an, auf den Pixel genau zu arbeiten. Doch jahrelang habe ich mich darüber geärgert und mich gefragt, warum bei Photoshop Formen die Ränder oft unscharf sind (rote Pfeile)

und nicht wie sie sein sollten auf dem oberen Bild. Die Lösung habe ich irgendwann nach ca. 10 Jahren Photoshop durch Zufall herausgefunden:

In Photoshop kann man Pfade (woraus die Formen halt bestehen) und Hilflinien auch “zwischen” die Pixel ziehen. Man kann einer Form so z.B. eine Breite von 30,3 Pixel geben. Da entweder nur 30 oder 31 möglich sind, werden nun die Pixel dazwischen mittels Anti-Aliasing dargestellt. Das ist eben jener Effekt dieser unscharfen Ränder.

Hier sieht man, wie bei einem Pixelraster Hilfslinien zwischen den Pixeln liegen können.

Um dies zu umgehen, muss man ein Gestaltungsraster anlegen. Dafür gehen wir in Photoshop unter die  Voreinstellungen und „Hilfslinien, Raster, Slices …“ und dort wählen wir Rasterlinie 10 und Unterteilungen 10 (andere sind auch möglich, Hauptsache ist, dass die kleinste Einheit 1 ist).

Jetzt aktivieren wir das Raster unter Ansicht -> Einblenden -> Raster (am besten merkt ihr euch den Shortcut). Jetzt müssen wir sehr weit in das Bild zoomen, um das kleinste Raster darzustellen. Wichtig ist jetzt, das unter „Ansicht“ das Ausrichten an Raster aktiviert ist.

Wenn das Raster sichtbar ist, werden nun alle neuen  Objekte, welcher Art auch immer, direkt am Raster ausgerichtet und somit auf exakte Pixelwerte. Diese unsauberen Ränder können nicht mehr auftreten und pixelgenaues Webdesign ist problemlos möglich.

Ich hoffe euch geholfen zu haben. Wenns euch was gebracht hat hinterlasst doch einen Kommtar.