Bildbearbeitung mit Photoshop: Designtechniken

Designtechniken

Was eventuell auch für Sie als den Leser dieses Wikibooks interessant sein könnte, ist das Designen mit Photoshop. Ganz beliebt ist diese -- fast eigene -- Disziplin zum Beispiel im Webdesign. Es ist nicht für Logos, uä. gedacht, obwohl dies vielleicht denkbar wäre. Dafür sind eher Vektorgrafikprogramme geeignet. An dieser Stelle sei mein Favorit, Inkscape, sowie OpenOffice.org Draw genannt. Natürlich können Sie aber auch kostenpflichtige Programme verwenden, wzb. Adobe Illustrator oder Corel Draw. Jene Programme können natürlich auch für Webdesign genutzt werden, zum Beispiel für SVG-Grafiken, jedoch sind im Web meistens keine hochauflösenden Bilder nötig (im Übrigen sollte man für jede Größe immer einzelne Bilder anbieten; es ist benutzerunfreundlich, mittels width- und height-Attribut des img-Tags Bilder zu skalieren -- ein typischer Anfängerfehler). Wir wollen deshalb bei Webdesign stets Rastergrafik-Programme verwenden. Und da ist die erste Wahl immer Photoshop. Ich beschreibe hier jedoch eher den Weg in Photoshop-Elements. Von Photoshop Elements auf Photoshop zu schließen, ist meistens nicht schwierig, anders herum dagegen fast unmöglich.

Es empfehlt sich ein leichtes Verständnis von diversen mathematischen Grundlagen. Sie sollten z. B. (zumindest ungefähr) wissen, was eine Bézierkurve ist. Genauso sollten sie wissen, was der grobe Unterschied zwischen einem Spline und einer Bézierkurve ist.

Ihnen sollte auch bekannt sein, aus welchen Komponenten ein Farbwert aufgebaut ist. Sollten Sie nicht über derartige Kentnisse verfügen, so soll dieses Kapitel eine Kurzeinführung bringen.

Gradienz

Gradienzeffekt -- das heißt auf puristisch Farbverlauf. Oft findet man analog dazu die Begriffe graduell, sowie das englische gradient.

Das sieht auf den ersten Blick ganz harmlos aus -- Ist es auch. Wir wollen kurz die Berechnung eines einfachen Farbverlaufs von links nach rechts zeigen. Und zwar von Rot nach Blau, von Transparenz 0 nach Tranzparenz 100. Idealerweise hätten wir eine Spanne von 100px, wir gehen aber hier mal von $n$px aus.

Pixel und Farben

Zur Erinnerung: Sie haben 16777215 verschiedene Farben, oder einfach #FFFFFF. Hexadzimal: Die ersten zwei Stellen geben den Rot-, die zweiten zwei den Grün- und die dritten drei den Blauanteil an. Daher auch der Name RGB für das Farbschema. Es kommt noch dazu, dass es Transparenzen gibt. Nun sei $r_{b}$ der Rotanteil des Hintergrundes (usw. g für grün und b für blau), $r_{f}$ dagegen für den Vordergrund. $t$ ist die Transparenz (0..1).

Nun kommt unsere Berechnung -- schließlich sind die Transparenzen eine Spezialität von Photoshop -- Windows kennt sie nicht!

$r=t\cdot r_{f}+\left(1-t\right)\cdot r_{b}$
$g=t\cdot g_{f}+\left(1-t\right)\cdot g_{b}$
$b=t\cdot b_{f}+\left(1-t\right)\cdot b_{b}$

Gradienzberechnung

Nun haben wir eine Funktion $\operatorname {farbe} (c_{f},c_{h},t)$

$\operatorname {farbe} (c_{f},c_{h},t)=\operatorname {rgb} (t\cdot r_{f}+\left(1-t\right)\cdot r_{b},t\cdot g_{f}+\left(1-t\right)\cdot g_{b},t\cdot b_{f}+\left(1-t\right)\cdot b_{b})$

Wobei wir natürlich eigentlich noch Rot-, Grün- und Blauanteil herausfiltern müssten, das hier ist aber weder ein Mathe-, noch ein Programmierbuch. Diesen Aspekt können wir somit vernachlässigen.

Das Prinzip sollte aber klar sein!

Wir gehen $i$ von 1 bis 200 durch und berechnen mit farbe() mittels Dreisatz jeweils die Werte dazwischen.