Design

Transparenzen messen in Photoshop

Dieser kleine Kniff zeigt, wie man bei Verläufen ins Transparente die Ebenenkanten exakt bestimmt. Eine Notwendigkeit für den Webexport.
Was Du schon wissen solltest:

Was Du benötigst:

  • Adobe Photoshop CS4 oder neuer

Beim Zerlegen eines Screendesigns in Photoshop für die Umsetzung in HTML/CSS ist das exakte Ausmessen von Verläufen ins Transparente ein ungemütlicher Stolperstein. Gerade die letzten Pixel, die schon fast eine hundertprozentige Transparenz aufweisen, sind oftmals nur sehr schwer zu erkennen, sorgen aber in der fertigen Umsetzung dennoch für eine klar sichtbare Stufe im Übergang zum überlagerten (einfarbigen) Hintergrund. Eine Auswahl des Ebeneninhalts per Strg/Cmd-Klick auf die Ebenenminiatur hilft nicht weiter, da Photoshop Inhalte nur bis zu einer Deckkraft von 50% markiert und das Ergebnis somit mehr als nur ein wenig verfälschen würde.

Ein sehr verlässlicher Helfer verbirgt sich jedoch hinter der Funktion “Ansicht: Einblenden: Ebenenkanten”. Ist diese Option aktiviert, zeigt Photoshop den Inhalt der gerade aktiven Ebene mit einer leuchtend blauen Linie umrahmt an. Dabei werden auch Pixel mit einer Transparenz berücksichtigt, die jenseits der 50% liegen. Auf diese Weise ist es ein leichtes, gerade Verläufe problemlos im gesamten Umfang auszuwählen und zu exportieren.

Zwei kleinere Wermutstropfen gibt es dennoch: Die eingeblendeten Kanten sind nicht magnetisch und sie berücksichtigen keine Ebeneneffekte.

Abbildung einer Grafik in Photoshop. Links keine sichtbare Auswahlkante, rechts Kante mit blauem Rahmen.
Links in normaler Ansicht, Rechts umrahmt das blaue Rechteck die exakte Ausdehnung des Hintergrundverlaufs.

Write A Comment