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.
Andreas ist ein Spezialist für E-Commerce, UX und Digital Marketing. Folgt ihm gerne auf:
Ein toller Tipp. Die Einstellung wo ich Anti-Aliasing ausschalten kann, habe ich leider nicht gefunden.
Toller Tipp. Ich habe bei Abrundungen auch immer den Zwischenschritt über Illustrator gewählt. Wieder was gelernt um Zeit zu sparen. Danke
Danke für die Aufklärung, werde ich mal ausprobieren…
Manche Leute fragen mich: „Was kann man mit Photoshop erstellen?“ ind ich frage immer was kann man nicht mit Photoshop erstellen?
Mit Adobe Photoshop kann man nicht nur Kreatives Webdesign Etwikeln, sondern auch Fotos bearbeiten. Noch 20 Jahre her haben wir alle mit dem Pinzel gezeichnet, heutzutage machen wir alles mit dem Computer.
Vielen vielen Dank ! 🙂
Danke für die Erklärung. Ich hatte mich schon damit abgefunden und meine Rundungen mit Illustrator erstellt.
Alternativ dazu könnte man auch das Anti-Aliasing ausschalten…
Yeah! genau sowas habe ich schon seit ewigkeiten gesucht!
Vielen Dank für den nützlichen Hinweis und auch für die Erklärung warum das so ist.
Danke. War genau das, was ich gesucht habe.