Top im Web
Webpublishing mit Dreamweaver und Fireworks
Kurs der Volkshochschule Bern

Hier gehts zurück zur Übungs-Übersicht

Übung 7: Bilder webtauglich aufbereiten

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.

Wir wissen von dieser Theorieseite sowie aus der schriftlichen Dokumentation bereits, dass Fotos im Internet entweder im JPG- oder GIF-Format mit einer tiefen Auflösung von 72dpi gespeichert werden. Auf das PNG-Format wird nicht näher eingegangen. Das heisst zugleich, dass diese Bilder beim Ausdrucken "gruusig" werden - wer druckoptimierte Fotos ins Netz stellen will, geht damit die Konzession ein, dass sie am Monitor übergross werden, siehe z.B. hier.

Bilder fürs Web müssen vor dem Einfügen auf eine Webpage auf die richtige Auflösung und Grösse gebracht werden. Das Ziel heisst dabei immer: Möglichst kleine Ladezeit bei guter Qualität.

Im Dreamweaver soll die Grösse der Bilder nachträglich nicht mehr geändert werden. Es gilt wie immer der Grundsatz: Zuerst planen, dann ausführen. Bevor Sie Photoshop öffen, sollten Sie sich also im Klaren daüber sein, wie gross das / die Endprodukt(e) in Pixeln sein sollen.

Zumal es vom Profiprogramm Photoshop bereits günstigere, im Funktionsumfang reduzierte Fassungen gibt ("Elements"), sodass sich die Anschaffung durchaus lohnt, arbeiten wir hier mit Photoshop.

Vergessen Sie nicht, unter "Bearbeiten / Voreinstellungen / Masseinheiten und Lineale" alles auf "Pixel" einzustellen!

Auf der Theorieseite war bereits vom "Retouch" die Rede: Grösse, Helligkeit, Kontrast, Farbbalance, Scharfzeichnen zum Beispiel. Nehmen wir den häufigen Fall an, dass wir ein Foto aus den letzten Ferien einscannen möchten. Das Ziel ist, eine ganz kleine Fassung (Thumbnail) herzustellen, wobei beim Klick auf dieses eine grössere, schönere Fassung erscheint. Auf dieser Seite ist nur vom JPG-Format (RGB-Modus) die Rede, und die Screenshots beziehen sich auf Photoshop 6.

Scansoftware gibt es wie Sand am Meer, daher machen Screenshots hier wenig Sinn. Wichtig ist: Überall kann man die Auflösung einstellen sowie zwischen Graustufen und Farbe wählen. Wenn man eine grosse Festplatte hat oder die Bilder auf CD brennt, macht es durchaus Sinn, die Bilder zuerst mit der hohen Druckauflösung von 300dpi zu scannen und später im Bidlprogramm fürs Web zu reduzieren. So kann man später die Fotos auch ausdrucken, wenn man will - oder ist gewappnet für spätere Technologien oder Bildschirme, die womöglich einmal höhere Auflösungen darstellen können oder grösser sind.

Hier ist ein Beispielbild gespeichert, mit dem Sie zum Testen arbeiten können! Es weist allerdings wegen der Grösse nur eine Auflösung von 83dpi auf statt 300.

Sobald das Bild eingescannt ist, liegt es also mit 300dpi (oder das Beispielbild mit 83dpi) im Photoshop - was tun wir damit? Zuerst mal das Original speichern, in einer so guten Auflösung und Qualität wie möglich. Wers gerne luxuriös hat, kann die verlustfreien Formate TIF oder PSD wählen, darf sich aber nicht wundern, wenn das Bild dann immens "schwer" wird (mehrere MB). Meistens tut's auch JPG, Qualität 12; beim Speichern als JPG wird man gefragt, welche Qualität man denn gern hätte:

Die Qualität steht dabei für Aussehen und Dateigrösse: Je kleiner die Zahl, desto "leichter" und desto verschwommener das Bild - je grösser, desto "schwerer" und schärfer.

• Wenn "Vorschau" aktiviert ist, sehen Sie direkt im Bild, wie sich Ihre Einstellungen auswirken.
• Bei "Format-Optionen" können Sie ebenfalls auswählen, am besten lassen Sie aber "Baseline (Standard)", eingestellt, um ein Format zu erstellen, das von allen Browsern erkannt wird. "Baseline optimiert" verbessert die Farbqualität eines Bildes und reduziert die Dateigrösse geringfügig. Diese Option wird nicht von allen Browsern unterstützt. "Mehrere Durchgänge" erstellt ein Bild, das allmählich in einer von Ihnen festgelegten Anzahl von Durchgängen mit immer detaillierteren Versionen des Gesamtbildes heruntergeladen wird. Diese Bilder fallen etwas grösser aus, erfordern zum Anzeigen mehr RAM und werden nicht von allen Anwendungen und Web-Browsern unterstützt. (Quelle: Photoshop-Hilfe)
• Wenn Sie die geschätzte Ladezeit je nach Modem wissen möchten, wählen Sie eine Modemgeschwindigkeit aus dem Popup-Menü "Grösse".

Damit wissen wir schon sehr viel, das später beim Speichern der kleinen Fassungen nötig sein wird. Wir haben aber erst die grosse Fassung!

Verändern Sie am Original nichts - bewahren Sie es einfach auf der Festplatte oder auf einer CD auf. Während der folgenden Schritte sollte also nicht "Speichern" gewählt werden - erst am Schluss "Speichern unter". Grund: Die Qualität eines komprimierten Bildes verschlechtert sich theoretisch bei jedem Speichern. Alternative dazu: Bearbeiten / Bild duplizieren wählen. So bekommen Sie eine 1:1-Kopie.

Zuerst mal brauchen wir jetzt eine "grössere Webfassung", die 600 Pixel breit ist. Tragen Sie im Menu Bild / Bildgrösse zuerst unter "Auflösung" 72 Pixel/Inch ein. Achten Sie darauf, dass als Mass tatsächlich Inch und nicht cm eingetragen sind! Tragen Sie dann bei "Breite" 600 Pixel ein.

Beachten Sie, dass "Pixelmasse" mit der Dateigrösse nichts zu tun haben. Klicken Sie am Schluss OK.

Nun liegt ein Bild mit Breite 600 vor - jetzt ist es Zeit für allfällige Anpassungen an Farbe und Schärfe. Dabei spielt natürlich der eigene Geschmack eine grosse Rolle. In der Regel empfiehlt es sich, ein Augenmerk auf die folgenden pink eingefärbten Menus unter "Bild / Einstellen" zu richten:

Ich empfehle für den Anfang: Ausprobieren, was passiert, wenn man die Werte in diesen Menus ändert! Ich selbst verändere meistens die Sättigung (Ctrl+U / Werte +10 bis +20), Helligkeit und Kontrast oder die Gradiationskurven (Ctrl+M).

Am Schluss empfiehlt es sich je nach Bild, es etwas nachzuschärfen - im Menu "Filter / Scharfzeichnungsfilter / Konturen Scharfzeichnen" (leicht) oder "Scharfzeichnen" (mittel).

Nach den Einstellungen können Sie das Bild unter seinem späteren Namen (Achtung, keine Leerschläge, Umlaute, Sonderzeichen usw.) speichern. Wie Sie die JPG-Optionen einstellen, ist oben ersichtlich. Gehen Sie mit der Qualität möglichst nicht unter 8 (manchmal auch 7) - sonst bekommen die Konturen unscharfe Ränder.

Alternativ dazu können Sie auch den Befehl "Datei / fürs Web Speichern" wählen. Hier bekommen Sie je nach Ansicht 2 oder 4 Fassungen, die Ihnen Photoshop als Web-Optimierungen vorschlägt. Für jede Fassung können Sie rechts gesonderte Einstellungen vornehmen, wobei Sie immer sehen, wie sich die Dateigrösse ändert. Nach Klicks auf die gewünschte Fassung und OK können Sie einen Dateinamen vergeben.

Für die kleinere Fassung, die wir ja auch noch brauchen, müssen natürlich einfach die obigen Punkte wiederholt werden, wobei Sie vom soeben als weboptimiert gespeicherten Bild ausgehen können. Wählen Sie als Bildbreite z.B. 150 Pixel. Hier ist Schärfen am Schluss fast ein muss.

Speichern Sie die kleine Fassung unter einem anderen Namen (der Einfachheit halber z.B. alter Dateiname mit "-klein" am Schluss). Fügen Sie das kleine Bild im Dreamweaver auf eine Webpage ein, legen Sie einen Link auf die grosse Fassung - und erklären Sie den Usern, was Sie tun müssen (z.B. "Für eine grössere Fassung bitte auf das Bild klicken"). Später werden wir lernen, wie Sie die grossen Fassungen in speziell angepassten Popup-Windows öffnen können.

Auf diese Weise müssen Leute, die nicht immer alle Bilder in ihrer vollen Pracht bewundern wollen, nicht lange warten - denn die Thumbnails sind schneller geladen. Die grösseren Fassungen sind dafür wirklich schön und gross.

Nicht vergessen: Auf jedem Monitortyp sieht das Bild anders aus! Insbesondere auf TFTs sehen Fotos oft kontrastreicher oder dunkler aus, zudem kommt es auf den Blickwinkel an. Anpassungen an Fotos sollten Sie daher auf Monitoren vornehmen, von denen Sie wissen, dass sie einigermassen "guter Durchschnitt" sind.

Einige weitere Photoshop-Kniffe

Wir können hier keinen Photoshopkurs machen, dafür ist das Programm schlicht zu vielseitig. Hier aber doch einige weitere Menupunkte, die Ihnen beim Bilderbearbeiten in bestimmten Situationen helfen können:

• Bild/Arbeitsfläche (das Bild beschneiden, d.h. am Rand Bereiche abzwacken)
• Ctrl+Plus-Taste oder Minus-Taste: Ein- und Auszoomen für genauere Bearbeitung
• Filter / Weichzeichnungsfilter: Manchmal müssen Sie vielleicht auch Unschärfen einbauen, z.B. um ein Bild zu anonymisieren.
• Andere Filter: Meistens Spielereien...
• Kopieren / Einfügen: Ausschnitt eines Bildes auswählen, mit Ctrl+C kopieren, mittels Ctrl+V in ein anderes Bild einfügen
• Datei / Automatisieren / Web-Fotogalerie: Speichern Sie Ihre Ferienbilder in ein Verzeichnis und lassen Sie Photoshop automatisch eine Galerie mit einer Thumbnail-Startseite machen - sehr praktisch!

Zudem sollten Sie links aussen immer den Werkzeugkasten eingeblendet haben, mit dem Sie etliche wichtige Funktionen auswählen können. Beachten Sie: Auswahlfelder mit einem kleinen Pfeil rechts unten beinhalten weitere Funktionen, die auswählbar sind, wenn Sie lange auf den Punkt klicken - z.B. können Sie statt "Aufhellen" (Abwedler) auch "Abdunkeln" (Nachblichter) wählen.

Wenn Sie ein Zeichenwerkzeug auswählen, können Sie in der Symbolleiste oben eine Pinselspitzengrösse wählen:

In der Symbolleiste sind zu jedem Werkzeug andere Optionen verfügbar, z.B. Schriftgrösse, Schriftart oder Schriftfarbe beim Textwerkzeug.

Wollen Sie eine bestimmte Farbe auswählen? Klicken Sie einmal ins Feld "Vordergrundfarbe" im Werkzeugkasten (im obigen Beispiel schwarz). Der Farbwähler erscheint:

In der Mitte können Sie einen Grundfarbton auswählen. Wenn Sie "nur Webfarben" wählen, können Sie sicher sein, dass nur Farben angezeigt werden, die jeder Browser darstellen kann - zudem sehen Sie den Hexadezimal-Farbcode, was ganz praktisch sein kann für den Abgleich mit Hintergrundfarben usw.

Sie können aber auch mittels Pipette eine beliebige Farbe aus dem Bild auswählen.

Tip: Oft wird für bestimmte Funktionen eine sogenannte Ebene eingefügt, z.B. wenn Sie Text ins Bild schreiben. Das ist praktisch, denn so können Sie z.B. den Bildkontrast noch ändern, ohne dass die Schrift diese Änderung ebenfalls mitmacht, da sie sich auf einer anderen Ebene befindet. Ebenen können aber nicht in einem JPG-Bild gespeichert werden - darum steht Ihnen womöglich in einem Bild mit mehreren Ebenen nur PSD (Photoshop-Bild) als Speicherformat zur Verfügung. Wenn Sie den Befehl "Ebene / Auf Hintergrundebene reduzieren" wählen, werden alle Ebenen ineinanderkopiert. Sie können dann aber auch keine Textänderungen mehr am Text vornehmen, denn dieser ist nun mit dem Bild "verschmolzen". Im Ebenen-Fensterchen sehen Sie, wieviele Ebenen Sie haben - bevor Sie eine z.B. eine Textebene (hier mit einem T gekennzeichnet) verschieben oder den Text bearbeiten können, müssen Sie diese hier 1x anklicken:

Da man Farbfotos selten bis nie als GIFs speichert, gehen wir auf dieses Bildformat erst im nächsten Teil ein - wenn wir dann eigene Buttons herstellen.

Hier gehts zurück zur Übungs-Übersicht

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.