Webdesign

von Prof. Jürgen Plate

Bildbearbeitung

Erste Schritte

Wo bekommt man Bilder her?

Nicht jeder ist ein Künstler und kann sich seine Bilder selbst malen. Für die Konstruktion von ein paar kleinen Sinnbilder (Icons) reicht das küstlerische Können eines jeden aus, bei komplizierteren Bilder muß man in der Regel auf andere Quellen zurückgreifen. Dies können sein:

Da das Scannen von Vorlagen recht häfig ist und gescannte Bilder normalerweise auch nachbearbeitet werden müssen, zunächst ein paar Tips zum Scannen.

Richtig Scannen

Wie schon im Kapitel 2 erwähnt, dienen Scanner zur Bilderfassung. Die Detailauflösung eines Scanner wird angegeben in dpi (dots per inch, Bildpunkte pro Zoll). Typischer Wert: 300 dpi (1 Zoll = 2,54 cm). Es lassen sich drei Scanarten unterscheiden:

Schwarz-Weiß oder Strichbild 1 Bit Information pro Bildpunkt
Graustufen oder Halbtöne 256 verschiedene mögliche Werte
8 Bit Information pro Bildpunkt
Farbe 16,7 Mio. mögliche Werte = Truecolor
24 Bit Information pro Bildpunkt
(je 8 Bit für Rot, Grün und Blau)

Scandateien (vor allem in Farbe) werden sehr schnell sehr groß. Dazu ein Beispiel: Ein Bild mit 10 x 10 cm Abmessung in Farbe mit 300 dpi gescannt ergibt eine Dateigröße von ca. 4 MByte. Daher sollte man die Auflösung beim Scannen dem geplanten Ausgabemedium anpassen, um möglichst kleine Dateien zu erhalten. Eine höhere Scanauflösung ist reine PLatzverschwendung! Ebenso sind Scans sinnlos, bei denen Sie noch nicht wissen, wie Sie sie ausgeben wollen. Eine Verdoppelung der Scanauflösung (z. B. von 150 dpi auf 300 dpi) vervierfacht die Dateigröße.

Ausgabemedien für gescannte Bilder

Rastern

Graustufen werden durch unterschiedlich dicke Punkte simuliert. Der Abstand zwischen den Punkten bleibt stets derselbe. Mit zu nehmendem Grauwert können sich die Punkte sogar überlappen. Rastern wird beim Offsetdruck oder auch beim Tiefdruck (z. B. Abbildungen in Tageszeitungen) benutzt. Laserdrucker haben eine feste Punktgröße und sind daher schlecht zum Rastern geeignet.

Dithern

Dabei werden Graustufen durch eine Anordnung mehrerer Druckpunkte simuliert. Je mehr Druckpunkte in einem bestimmten Gebiet (z. B. einer Druckfläche von 10 x 10 Punkten) schwarz sind, um so dunkler scheint das Gebiet. Mit einer Matrix aus 4 x 4 Druckpunkten können beispielsweise 17 Graustufen (mit weiß) dargestellt werden.

Effektive Druckauflösung

Da der Laserdrucker mehrere Druckpunkte benötigt (bei 17 Graustufen z. B. eine 4x4-Matrix), um einen einzigen grauen Scanpunkt zu drucken, sinkt die Druckauflösung des Druckers. Dies wird in lpi (lines per inch, Linien pro Zoll) angegeben und als Halbtonfrequenz bezeichnet. Für einen 300-dpi-Drucker sind dies bei 17 Graustufen 300/4 = 75 lpi. In diesem Fall würde also ein Scan mit 75 dpi (beim Scanner sind es dpi, nicht lpi!) ausreichen. Sicherheitshalber scannt man mit etwas höherer Auflösung, um genug Reserven zu haben. Bewährt hat sich hier das 1,2- bis 1,4-fache der berechneten Linien pro Inch.

Die Anzahl der Graustufen berechnet sich aus:

    Graustufen = (dpi/lpi)*(dpi/lpi) + 1

Die Tabelle zeigt eine Empfehlung zum Scannen:

Drucken mitGraustufenEffektive
Druckauflösung
Scannen mit
300 dpi26
37
60 lpi
50 lpi
75 dpi
75 dpi
600 dpi50
65
145
85 lpi
75 lpi
50 lpi
100 dpi
100 dpi
75 dpi

Das Wichtigste bei einer digitalisierten Fotografie ist die Vorlage. Nur gestochen scharfe Bilder haben etwas auf der Glasplatte des Scanners zu suchen. Gehen Sie bei der Auswahl sehr kritisch vor. Kleinere Unschärfen, die das eigene Auge auf dem Farbbild gerne übersieht, kommen nach dem Scannen gnadenlos heraus. Problematisch sind Vorlagen aus Zeitschriften oder Zeitungen. Denn hier droht der Moire-Effekt. Das Resultat sind Flimmereffekte und seltsame Muster im Bild. Dieser Moire-Effekt läßt sich zwar mit einer Bildbearbeitung halbwegs beheben, doch besser ist es, ihn gar nicht erst auftreten zu lassen.

Das gescannte Bild speichern Sie erst einmal im BMP-Format ab. Wenn bei der nachfolgenden Bearbeitung grobe Schnitzer passieren, muß man zumindest nicht neu scannen. Auch bei der Bearbeitung sollte man Zwischenergebnisse unter verschiedenen Namen speichern. Man hat dann weniger Angst, bei Experimenten das Bild zu ruinieren.

Bildbearbeitung

Bis das Bild fertig ist, sollten Sie auf jeden Fall die größtmögliche Farbtiefe verwenden (16 Mio. Farben), da manche Filterfunktionen oder die 'Sprühdose' sonst ziemlich häßliche Ergebnisse liefern.

Grundbearbeitung

Hauptangriffspunkte zur Nachbearbeitung sind Helligkeit und Kontrast. Häufig kommen die Vorlagen zu dunkel in den Computer. EIn Bildbearbeitungsprogramm verhilft mit Helligkeitsverstellung und Gamma-Korrektur den Bildern zu mehr Licht. Ob Brightness/Contrast oder Gamma Correction die besseren Ergebnisse bringt, hängt von der Vorlage ab.

Probieren Sie es zuerst mit dem Gamma-Parameter. Um das Bild aufzuhellen, erhöhen Sie den Wert, niedrigere Angaben dunkeln ab. Modifizieren Sie die Gamma Correction maximal in Schritten von 0,1, und sehen Sie sich mit der Preview-Funktion das Ergebnis im Originalbild an. Meist genügt eine Änderung um wenige Stellen hinter dem Komma, um dem Foto zu mehr Helligkeit zu verhelfen. Das linke Bild zeigt das Scan-Ergebnis, das rechte die Gamma-korrigierte Fassung.

    

Ebenso vorsichtig gehen Sie bei der Verstellung von Brightness und Contrast vor. Für Bilder, die auf dem Monitor dargestellt werden sollen, lohnt es sich, einen etwas höheren Kontrast zu wählen. Im rechten Bild wurde der Kontrast um 25 Prozent erhöht.

    

Leichte Unschärfen im Bild gleichen Sie mit Filterfunktionen aus (z. B. 'Sharpen'). Doch Vorsicht: Eine übertriebene Anwendung der Schärfefunktion bringt nur störende Pixelanordnungen anstelle einer echten Verbesserung. Allzu harte Kontraste weichen Sie 'Soften' auf. Im linken Bild wurde 'gesoftet' und im rechten Bild die Schärfe erhöht.

    

Für die Ausgabe auf SW-Druckern kann man das Bild auch in Graustufen umwandeln:

Für den Web-Einsatz sollten Sie nicht mehr als 600 Bildpunkte breite Bilder verwenden. Dann kommen auch Besitzer kleiner Bildschirme in den Genuß Ihrer Fotos. Ausnahmen bilden Hintergrundbilder, die bis zu 1280 Pixel breit, aber nur 8 - 16 Pixel hoch sein sollen. Beim Verkleinern hilft die 'Resample'- oder 'Resize'-Funktion. Um das Seitenverhältnis beizubehalten, aktivieren Sie die Option 'Maintain Aspect Ratio'. Das Programm berechnet dann automatisch die passende Bildhöhe. Nach der Verkleinerung lohnt es sich, mit Sharpen die Bildschärfe wieder zu erhöhen.

Als endgültiges Speicherformat empfiehlt sich bei Fotos JPEG. Bei einfachen Icons oder flächigen Bildern (z. B. Firmenlogos, Comics, etc.) ist das GIF-Format besser geeignet. Eine Reduzierung der Farbtiefe bringt zwei Effekte: zum einen wird der Speicherbedarf reduziert und zum anderen kommen auch Surfer in den Genuß der Bilder, deren Grafikinterface keine 24-Bit-Farbtiefe erlaubt. Bei der Farbreduktion sollte man auf jeden Fall die Option 'nearest color' wählen, weil das Programm sonst versucht, zu dithern. Das folgende Bild ist auf 128 Farben reduziert.

Warnung: Bei Bildern für World-Wide-Web-Seiten kann es bei Mischung von GIF und JPEG zu Verschlechterung der Wiedergabe kommen, wenn das Grafikinterface beim Betrachter keine Echtfarbendarstellung erlaubt. Man sollte sich die Ergebnisse seiner Arbeit auf jeden Fall auf einen Rechner mit 'nur' 8 Bit Farbtiefe absehen.

Weitere Funktionen von Paint-Programmen

Stifte und Sprühdose

Natürlich bieten die Programme weitere interessante Filter- und Bearbeitungsfunktionen. Da man ins Bild 'hineinzoomen' kann, ist es sogar möglich, auch einzelne Pixel zu bearbeiten. Einige Retusche-Möglichkeiten sollen an dieser Stelle kurz vorgestellt werden.

Die meisten Malprogramme kennen verschiedene Stift-Typen, die unterschiedliche Effekte auf dem Maluntergrund hervorbringen. Grundsäzlich sollte man bei allen Retuschen die 24-Bit-Farbtiefe wählen, da sonst einige Effekte nicht besonders gut wirken. Gegebenenfalls muß man die Farbtiefe vor der Bearbeitung erhöhen. Die Stift-Wekzeuge haben jeweils verschiedene Parameter, mit denen sich Dicke, Form und Deckungskraft einstellen lassen.

Das folgende Bild zeigt den Effekt der 'Sprühdose'. Links wurde eine 24-Bit-Farbtiefe gewählt, rechts im Bild dagegen nur 4 Bit. Dort ergibt sich nur die Wirkung eines Markers. Bei der Sprühdose lassen sich Farbmenge, Breite und Deckungskraft einstellen. Sie eignet sich gut für Retuschen.

Die folgenden Beispiele sollen zeigen, wie man bestimmte Bildbearbeitungsfunktionen anwendet. Dabei gehen wir von einem Basibild aus, das berühmte Denkmal der vier ersten amerikanischen Präsidenten auf dem Mount Rushmore. Zuerst das Original:

Das wohl mächtigste Retusche-Werkzeug ist das sogenannte 'Clone'-Tool. Man markiert einen Punkt auf dem Bild und bewegt dann den Mauszeiger an eine andere Stelle im Bild. Sobald man nun mit gedrückter Taste zu malen beginnt, wird die Umgebung des markierten Punktes parallelverschoben auf die Zeigerposition kopiert. So lassen sich z. B. störende Objekte im Vordergrund durch benachbarte Bildpartien ersetzen - oder ein Präsident durch einen anderen (Änderung rot umrandet):

Oft will man aber nur einige Bildteile verändern. Nehmen wir wieder das Original. Dort ist der Himmel recht grau. Mit dem 'Color Replacer' läßt sich eine bestimmte Farbe mit einer anderen übermalen, ohne daß andere Farben betroffen werden. Man kann auch mehrere benachbarte Farbwerte gleichzeitig übermalen, indem man den Wert 'Toleranz' hochsetzt. Im folgenden Bild wurde der Himmel blau angemalt und mit Hilfe der Sprühdose ein paar Wölkchen dazugemalt.

Nun werden die Blätter wegretuschiert, die etwas unmotiviert im Himmel hängen. Auch die Tannenbäme im Vordergrund müssen weichen. Kleine Unsauberkeiten beim Malen mit dem 'Clone'-Tool oder dem Stift werden mit der Sprühdose überdeckt.

Zum Schluß kommt noch eine Beschriftung dazu. Bei der Schrift können der Zeichensatz und die Größe gewählt werden. Außerdem läßt sich die Schrift schattiert darstellen indem man die passende Hintergrund- und Vordergrundfarbe einstellt.

Weitere Effekte

Farbe und Spezialeffekte

Kommen wir zur Bearbeitung der Farbe und zu speziellen Effekten. Das Ausgangsbild ist ein SW-Clipart von dürftiger Qualität, ein Bild von Dagobert Duck:

Es werden zuerst die Schraffurlinien wegretuschiert, indem man mit Marker und Stift die 'schlechten' Stellen entfernt. Viele Malprogramme erlauben den Wechsel zwischen Vorder- und Hintergrundfarbe durch Wahl der linken oder rechten Maustaste. So kann man bequem mal etwas wegnehmen mal etwas hinzufügen. Danach wird die Farbtiefe von 1 Bit (SW) auf 4 Bit (16 Farben) erweitert. Die Farbpalette besteht nun nur aus der Farbe Weiß und 15 schwarzen Feldern. Sie wird erweitert, indem man die schwarzen Felder durch eine Farbe eigener Wahl ersetzt.

Ein Doppelklick auf die gewnschte Farbe liefert das Palettenfenster. Hier kann man aus den Standard-Windows-Farben durch Anklicken wählen (links) oder eine individuelle Farbe entwerfen (rechts). Normalerweise wird man zuerst eine Standardfarbe links anklicken und dann rechts Modifikationen vornehmen.

Das Ergebnis sehen Sie im folgenden Bild links. Rechts daneben befindet sich dasselbe Bild. Es wurden lediglich die Farbwerte in der Palette geändert, ohne irgendetwas am Bild selbst zu machen.

   

Die einfachen Filterfunktionen wurden weiter oben schon behandelt. Daneben besitzen viele Malprogramme sogenannte 'Deformationsfilter', mit denen das Bild verzerrt werden kann. Im linken Bild unten wurde der Kopf auf eine Kugel abgebildet. Im rechten Bild wirden zunächst mit der Kantensuche ('Find Edges') die Umrisse ermittelt. Da das Ergebnis farbige Linien auf schwarzem Hintergrund liefert, wurde mit der 'Negativ'-Funktion das Bild umgekehrt und in Komplementärfarben umgewandelt.

   

Will man einen reliefartigen Effekt erreichen, kann man die 'Emboss'-Funktion einsetzen. Im linken Bild wurde die Funktion auf das Farbbild angewendet, dagegen wurde das rechte Bild zun„chst auf Gruastufen reduziert und Augen sowie der Schnabel geschwärzt. Dabei ist dann auch gleich der Kneifer entfernt worden. Man sieht hier am Schnabel die Reliefstruktur besonders gut.

   

Weitere Effekte können eingesetzt werden, um ein Bild zu verfremden. Bei vielen Paint-Programmen gibt es die Möglichkeit, durch spezielle Farbreduktion einen Poster-Effekt zu erzielen oder das Bild in 'Mosaiksteine' zur zerlegen, wobei jeweils die Farbtiefe des Posters und die Kantenlänge eines Mosaikfeldes frei wählbar ist.


Original

'Posterize'

'Mosaic'

Progressive und transparente Bilder

Progressive, transparente und animierte GIFs

In diesem Abschnitt sollen einige Besonderheiten des GIF-Formats gezeigt werden, die oft bei der Gestaltung von WWW-Dokumenten (siehe Kapitel 5) Anwendung finden.

Progressive GIFs

Progressive GIFs (meist 'interlaced GIF' genannt) sind Bilder, die sich nicht von oben nach unten aufbauen, sondern schnell als Vollbild erscheinen. Sie sind zuerst sehr grob gerastert und im Verlaf des Ladevorgangs zeigen sich immer mehr Details. Der Betrachter kann so schnell erkennne, ob das Bild für ihn wichtige Informationen enthält und gegebenenfalls den Ladevorgang vorzeitig abbrechen. Dazu ein Beispiel:

Für die Konvertierung von GIF-Bildern eignet sich das Programm 'LView Pro' (Windows) recht gut. Es erlaubt nicht nur die Konvertierung zu interlaced GIFs und transparenten GIFs, sondern auch Farbanpssung und Filterung aller Art. Es ist jedoch kein Malprogramm. Die Bedienung ist recht einfach. Um ein progressives GIF zu erzeugen, lädt man das Bild in LView, klickt auf 'Optionen', 'Save GIF interlaced' an und speichert das Bild wieder ab. Man kann vorher natürlich auch gleich die Gamma-Korrektur und gegebenenfalls eine Farbreduzierung vornehmen.

Transparente GIFs

Bei diesen Bildern wird die Hintergrundfarbe des Bildes als 'transparent' deklariert. Beim Lview Pro lädt man das Bild und klickt 'Optionen', 'Background color' an. Danach wird die Palette des Bildes angezeigt und man kann die gewünschte Farbe anklicken. Das Vorschaubild zeigt den freigestellten Bildteil schwarz vor dem Hintergrund (oder umgekehrt - ganz nach Wunsch). Man kann so erkennen, ob eventuell auch Bildteile transparent gemacht werden, die gar nicht transparent sein sollen. Wenn dieser Fall auftritt, bleibt nichts anderes übrig, als die entsprechenden Bildteile nochmals nachzubearbeiten. Man wählt dann für die abzudeckenden Teile am besten eine Farbe, die ganz nahe an der ursprünglichen Hintergrundfarbe liegt. Bei vielen Malprogrammen kann man beim Speichern per Option wählen, ob der Hintergrund transparent sein soll.

Animierte Gifs

Hier wird die Möglichkeit genutzt, mehrere Bilder in einer Datei zu speichern. Diese Bilder werden dann mit vorgegebenen Verzögerungszeit nacheinander dargestellt und wirken so wie ein Trickfilm. Zum Darstellen und Bearbeiten brauch man spezielle Programme. Einfache Grafikbetrachter oder auch Malprogramme stellen nur eines der Bilder dar. Die meisten World Wide Web Browser kommen jedoch mit animierten Bildern zurecht.

Zum Aufbau animierter GIFs braucht man zuerst Einzelbilder der verschiedenen Bewegungsphasen. Diese Einzelbilder können mit jedem Malprogramm erstellt werden. Hier beispielsweise vier Phasen eines Hammers:

     

Mit einem speziellen Programm werden die Bilder dann zu einer Animation zusammengefaßt. Es gibt für Windows mehrere Programme zu diesem Zweck. Für den Einsteiger eignet sich der 'Gif Construction Set' von Image Alchemy. Dies Programm besitzt eine Funktion namens 'Animation Wizard', die einen durch den Aufbau des animierten GIFs führt. Das Ergebnis der Animation mit den obigen vier Bewegungsphasen sieht dann so aus:

Mit mehr Aufwand kann man auch so etwas machen:

Für ein paar einfache Animationstypen hat der Gif Construction Set Standardfunktionen. Man kann beispielsweise ein Bild aus dem Hintergrund auftauchen und wieder verschwinden lassen oder eine Laufschrift produzieren:

Ob Laufschriften wirklich sinnvoll sind, klären wir dann im 5. Kapitel.

Bildbearbeitung für Webseiten

Wie man einen Button macht

Zuerst ein neues Bild beginnen, z. B. 50 x 50 Pixel gross. Damit der Button überall passt, sollte er auch mit wenig Farben auskommen, weshalb nur 16 Farben verwendet werden. Um erhaben zu wirken, braucht der Button einen Rand.
Es gilt die Regel: wenn der Rand links und oben hell ist und rechts/unten dunkel, erscheint der Knopf erhaben. Umgekehrt ergibt sich ein vertieftes "Fenster". Damit man den Effekt gut sieht, wurde diese Seite leicht grau gefärbt.
Also malen wir den Rand. Ganz aussen Linien in Schwarz und Weiss.
Eine Pixelreihe nach innen nehmen wir dan Dunkelgrau neben dem Schwarz und Hellgrau neben dem Weiss.
Nun ist der Knopf fertig. Man kann auch drei Abstufungen nehmen oder die Kanten zwei Pixel breit machen. Natürlich geht es auch mit farbigen Buttons, man muß lediglich die Farbtöne passend wälen.
Jetzt bekommt der Button noch eine Beschriftung oder ein Logo. Damit die Schrift nicht so flach wirkt wurde sie zuerst in Dunkelrot auf den Knopf gesetzt und dann leicht nach links oben versetzt in Hellrot.
Wenn man die Folge der Farbtoene nach innen umkehrt, erscheint der Button als Fläche, die einen erhabenen Rahmen besitzt. Hier wurde die helle Schrift auch weiter nach links oben versetzt und sie erscheint so noch 'schwebender'.
Statt einer Schrift kann natürlich auch ein Sinnbild (Icon) erscheinen.

Im Detail sehen die rechten oberen Ecken der Buttons 'Klick' und 'Wow' so aus:

Nach diesem einfachen Strickmuster sind auch die Standard-Windows-Fenster gemacht worden, z. B.:

Die 'Ja'-Taste hat zusätzlich einen schwarzen Rand bekommen und innen eine strichlierte Linie.

Gedückt oder nicht?

Es gilt bei allen Systemen die Regel: Wir sind einfach daran gewöhnt eine Figur als erhaben anzusehen, wenn das Licht von links oben zu kommen scheint. Betrachten Sie die beiden folgenden Buttons:

Der linke Button scheint erhaben zu sein, der rechte wirkt, als sei er gedrückt. Dabei ist nur die Lage der Ränder an der Diagonale von rechts unten nach links oben gespiegelt.

Wie man eine Schrift mit Schatten macht

Zuerst wird der Text in schwarz oder einem anderen dunklen Ton gesetzt. Dazu zuerst die Vordergrundfarbe wählen, dann Schriftfont und -größe. Text eingeben und plazieren.
Dann mit der "Blur"-Funktion die Schrift verwischen. Wenn ein Aufruf der Blur-Funktion nicht reicht, muß man sie mehrmals anwenden.
Nun die Schriftfarbe, z. B. rot, wählen und den Text leicht nach oben und links versetzt auf den verwaschenen schwarzen Text setzen.
Wenn man will, kann man die Schrift dann noch mit der "Soften"- Funktion leicht unscharf machen - so wie man es heutzutage oft auf Webseiten sieht.

Wie man ein Photo "ins Bild" setzt

Normale, rechteckige Fotos wirken mitunter etwas langweilig. Wir wollen aus einem gewöhnlichen Foto etwas Besonderes machen. Zuert wird das Bild eingescannt. Gegegebenenfalls muß noch eine Korrektur von Gammawert, Helligkeit und Kontrast durchgeführt werden.

Nun aus dem Bild ein Oval ausschneiden und das als neues Bild speichern. Die Maîangaben des Ovals (Startpunkt, Groesse) aufnotieren, denn die werden noch gebraucht.

Nun müssen Sie ein neues Bild erzeugen, das etwas groesser als das ursprüngliche Photo ist. Auf dem neuen Bild wird nun ein schwarzes Oval mit den oben notierten Abmessungen erzeugen.

Alternativ kann man das ovale Foto nochmals als neues Bild speichern, dieses Bild vergröîern (weiîer Rand), den Rand mit dem Zauberstab selektieren (Toleranz 0), eine Maske ("aus Selektion") bilden, die Maske invertieren und schon hat man ein passendes schwarzes Oval, das man dann als neues Bild abspeichert.

Das schwarze Oval wird nun aufgehellt und dann die Ränder unscharf gemacht. Das erreicht man durch mehrfaches Anwenden des "Blur"-Filters.

Nun geht es wieder mit dem Originalbild weiter. Das Foto wird nun grau skaliert.

Wichtig! Damit die weitere Bearbeitung klappt, muß nun die Farbtiefe wieder auf 24 Bit gesetzt werden. Damit das Bild den Touch alter Fotos bekommt, wird nun die Farbe geändert, indem der RGB-Wert modifiziert wird, z. B.: Rot + 15%, Grün + 2% und Blau - 10%.

Nun den Rand mit Zauberstab selektieren (Toleranz 0) und die Selektion invertieren. Nun ist das ovale Bild selektiert und kann ausgeschnitten werden. Jetzt nehmen wir das graue Hintergrundoval und setzen das ausgeschnittene Photo leicht verschoben auf das graue Feld. Fertig ist das "antike" Photo mit Schatteneffekt.

Farbverläufe

Für Hintergründe, Buttons, Banner, etc. braucht man oft einen Farbverlauf, damit das Bild nicht zu langweilig wirkt. Für alle folgende Arbeiten brauchen Sie nur das Füllwerkzeug . Diesmal wird jedoch nicht mit einer konstanten Farbe gefüllt, sondern die Möglichkeit genutzt, Füllstile zu verweden. Begonnen wird mit einem neuen Bild. Für das Beispiel wurde ein Format von 400 x 20 Pixeln verwendet. Soll der Verlauf für einen Hintergrund verwendet werden, muî man das Kacheln des Bildes in horizontaler Richtung vermeiden, indem die Bildbreite auf 2048 Pixel oder mehr gesetzt wird. Der "interessante" Teil des Verlaufs liegt dabei aber meist in den linken 400 bis 800 Pixeln. Für Buttons, Banner, etc. verwendet man gleich die gewünschte Größe.

Als erstes wird ein einfacher horizontaler Verlauf erzeugt. Der Farbverlauf wird dabei immer zwischen den eingestellten Farben für Vorder- und Hintergrund erzeugt. In den folgenden Beispielen wurde blau für den Vordergrund und rot für den Hintergrund verwendet. Es wird im Kontextmenü für das Füllwerkzeug "linearer Gradient" gewählt und als Richtung ein WInkel von 90 Grad eingestellt. Das Vorschaubild zeigt den Verlauf.

Dann klickt man mit dem Füllwerkzeug in das neue Bild und schon ist man fertig.

Soll der Verlauf nicht gleichmäßig über das ganze Bild erfolgen, sondern nur im linken Bereich, selektieren Sie zuerst den gewünschten Bereich, z. B. ein Feld von 100 Pixel Breite. Manchmal ist es einfacher, die Abmessungen direkt einzugeben, als mit der Maus zu selektieren. Dazu klicken Sie zweimal (!) auf das entsprechende Icon . Es erscheint ein Menü, wo Sie die Werte direkt eingeben können.

Das selektierte Feld wird nun gefüllt.

Nun kann man die Selektion aufheben und den freien Bereich mit der Hintergrundfarbe ohne Verlauf füllen (rechte Maustaste).

Nebenbei: Sie können zum Füllen auch ein beliebiges Bild verwenden. Dazu wählen Sie beim Füllwerkzeug "Muster" als Füllstil. Das zum Füllen verwendete Bild wird geladen und dann beim neuen Bild über die Optionen des Füllwerkzeugs das geladene Bild als Muster eingestellt.

Dann nur noch mit dem Füllwerkzeug ins neue Bild klicken - fertig. Als Füllmuster eigen sich natürlich besonders irgendwelche Hintergrundtexturen, dasich hier linke und rechte Seite des Musters nahtlos aneinanderfügen.

Ein letztes Füllbeispiel wechselt von blau auf rot und wieder zurück. Dazu wird erst die linke Bildhälfte selektiert und gefüllt.

Danach die Selektion invertieren und die nun die rechte Seite in umgekehrter Richtung füllen.

Sehr gut sehen auch diagonale Verläufe (45 Grad) aus. Oder Sie kombinieren Füllmuster und Farbverlauf. Anschließend können Sie das Bild mit Filtern und Verformungs-Funktionen noch weiterbearbeiten oder einen Rahmen hinzufügen. Der Phantasie sind da keine Grenzen gesetzt.

Sitemap-Grafiken

Für Verzeichnisse (Sitemaps, "Verzierung" von Linklisten, etc.) kann man sich eine Reihe von kleinen Icons basteln. Die folgende Gruppe von Bildern ist durch Capture und Nachbearbeitung der entsprechenden Windows-Explorer-Anzeige entstanden.

 

Wenn man diese Icons passend kombiniert und anordnet (mittels HTML-Tabelle, siehe später) lassen sich daraus sehr flexible Verzeichnislisten herstellen:

Hauptüberschrift
1.1 Unterpunkt
1.2 Unterpunkt
1.3 Unterpunkt
1.3.1 Unterpunkt
1.3.2 Unterpunkt
1.3.3 Unterpunkt
1.3.4 Unterpunkt
1.4 Unterpunkt
1.5 Unterpunkt

Tips für Bilder auf Webseiten

Bildausschnitt verkleinern

Wählen Sie durch Beschneiden des Bildes einen möglichst knappen Bildausschnitt.

Bildauflösung herabsetzen

WEB-Bilder sind in erster Linie für die Betrachtung am Monitor gedacht, deshalb reichen Auflösungen von 70 dpi bis 100 dpi. Diese Auflösung sollten Sie schon beim Scannen wählen.

Farbtiefe beschränken

Sie müssen nicht immer mit einer Farbtiefe von 24 Bit, das entspricht ca. 16 Millionen Farbnuancen, arbeiten. Prüfen Sie, ob nicht auch eine Farbtiefe von 256 optimierten Farben eine ähnliche Bildqualität ergibt. Noch stärker ist der Platzspareffekt, wenn Sie Bilder auf Graustufen umrechnen lassen.

Verwenden von Vorschaubildchen

Lassen sich voluminöse Grafikdateien nicht vermeiden, so erzeugen Sie kleine Vorschaubildchen (Thumbnails) und geben Sie die Dateigröße der großen Grafikdatei an. So hat der Betrachter die Wahl, ob er die Datei laden will oder nicht.

Zum vorhergehenden Abschnitt Zum Inhaltsverzeichnis Zum nächsten Abschnitt


Copyright © FH München, FB 04, Prof. Jürgen Plate