Galileo Computing < openbook > Galileo Design - Know-how für Kreative
Know-how für Kreative

Inhaltsverzeichnis
Vorwort
1 Was gibt es Neues in Photoshop CS4?
2 Camera Raw, DNG und HDR
3 Probleme bei Digitalfotos beheben
4 Retusche
5 Schwarzweiß, Duplex und Schmuckfarben
6 Farb- und Tonwertkorrekturen
7 Farbmanagement
8 Fotomontage und Composing
9 Effekte für Text und Bild
10 Filter
11 Photoshop und Web
12 Photoshop und Druck
13 Automatisierung in Photoshop
14 Datenhandling und Teamwork
15 Tipps und Tricks
16 Photoshop und 3D
17 Photoshop und Video
18 Die DVD zum Buch
Stichwort
Ihre Meinung?

Spacer
<< zurück
Adobe Photoshop CS4 - Fortgeschrittene Techniken von Thomas Bredenfeld
Kreative Lösungen für den professionellen Arbeitsalltag
Buch: Adobe Photoshop CS4 - Fortgeschrittene Techniken

Adobe Photoshop CS4 - Fortgeschrittene Techniken
geb., komplett in Farbe, mit DVD
843 S., 59,90 Euro
Rheinwerk Design
ISBN 978-3-8362-1237-3
Pfeil 11 Photoshop und Web
Pfeil 11.1 Grundlagen des Webdesigns mit Photoshop
Pfeil 11.1.1 Photoshops Aufgaben im Web
Pfeil 11.1.2 Produktpflege innerhalb der Creative Suite
Pfeil 11.2 Verfahren und Montagetechniken
Pfeil 11.2.1 Arbeitsvorbereitung: Die Bildgröße festlegen
Pfeil 11.2.2 Mit einem Screenshot arbeiten
Pfeil 11.2.3 Die Montage-Werkzeuge in Photoshop
Pfeil 11.2.4 Bilder und HTML
Pfeil 11.2.5 Schriften für das Web
Pfeil 11.2.6 Farben für das Web
Pfeil 11.3 Bildformate im Web
Pfeil 11.3.1 GIF
Pfeil 11.3.2 PNG
Pfeil 11.3.3 JPEG
Pfeil 11.4 Zoomify
Pfeil 11.4.1 Zoomify-Export aus Photoshop
Pfeil 11.4.2 Ausgabe
Pfeil 11.4.3 Ansicht im Browser
Pfeil 11.4.4 Zoomifyer for Flash
Pfeil 11.4.5 Einsatz
Pfeil 11.5 Für Web und Geräte speichern
Pfeil 11.5.1 JPEG-Einstellungen
Pfeil 11.5.2 GIF-Einstellungen
Pfeil 11.5.3 Droplets
Pfeil 11.6 Device Central für Mobilgeräte
Pfeil 11.7 Webausgabe direkt aus Photoshop
Pfeil 11.7.1 Slicing
Pfeil 11.7.2 CSS
Pfeil 11.8 Photoshop und Fireworks
Pfeil 11.8.1 Photoshop-Dateien in Fireworks bearbeiten
Pfeil 11.8.2 Alternativen zum direkten Import aus Photoshop
Pfeil 11.8.3 Entwürfe aus Fireworks in Photoshop weiterbearbeiten
Pfeil 11.8.4 Slicing und HTML-Ausgabe aus Fireworks
Pfeil 11.8.5 HTML-Sprengstoff im Design
Pfeil 11.8.6 Mutationen und Seiten
Pfeil 11.9 Photoshop und Dreamweaver
Pfeil 11.9.1 Export aus Photoshop
Pfeil 11.9.2 Arbeiten in Dreamweaver
Pfeil 11.9.3 Fazit
Pfeil 11.10 Gestaltungselemente für das Webdesign
Pfeil 11.10.1 Grunge-Look mit Pinselspitzen
Pfeil 11.10.2 Stretched Pixels
Pfeil 11.10.3 Fake Barcode
Pfeil 11.10.4 Stilmix: Fotografische und zeichnerische Elemente
Pfeil 11.10.5 Farbverfremdungen
Pfeil 11.11 Nützliche Helfer
Pfeil 11.11.1 Art Directors Toolkit
Pfeil 11.11.2 xScope
Pfeil 11.11.3 Caliper
Pfeil 11.11.4 GridMaker
Pfeil 11.11.5 Layout Grid Generator
Pfeil 11.11.6 Firefox: Web Developer und Firebug
Pfeil 11.11.7 Microsoft Internet Explorer: Developer Toolbar und Entwicklertools


Galileo Computing - Zum Seitenanfang

11.5 Für Web und Geräte speichern Zur nächsten ÜberschriftZur vorigen Überschrift

Der Photoshop-Dialog für die Ausgabe von Bildern für das Web, den man über DateiFür Web und Geräte speichern oder mit dem Shortcut Taste Strg + Taste Alt + Taste Shift + Taste S aufrufen kann, ist einigermaßen umfangreich. Wir unterteilen diesen Dialog im Folgenden jeweils in die Ausgabe für JPEG und für GIF.


JPEG <> JPEG

Photoshop bietet mit DateiSpeichern unter ebenfalls JPEG als Format an. Die resultierenden Dateien sind allerdings bei gleicher Qualitätsstufe um ein Vielfaches größer, als wenn man das mit DateiFür Web und Geräte speichern macht. Warum, ist unklar.



Galileo Computing - Zum Seitenanfang

11.5.1 JPEG-Einstellungen Zur nächsten ÜberschriftZur vorigen Überschrift

Der Dialog Für Web und Geräte speichern bietet umfangreiche Einstellungs-, Vorschau- und Kontrollmöglichkeiten, bevor man die Datei im gewünschten Format abspeichert. Neben den Navigationswerkzeugen kann man die verschiedenen Ansichten auswählen. Neben dem Original gibt es die Ansicht, in der die Auswirkung der jeweiligen Kompressionsmethode gezeigt wird. Man kann auch zwei oder vier Ansichten einander gegenüberstellen, um A/B-Vergleiche anzustellen.

Abbildung 11.14 Der Photoshop-Dialog Für Web und Geräte speichern in der 4fach-Ansicht und mit den Einstellungen für das JPEG-Format

Unter Optimierungsformat wählt man JPEG, GIF oder PNG aus. Die Voreinstellungen lassen sich im Menü daneben um eigene Presets erweitern . Im Menü Vorschau kann man in der Ansicht Mac- oder Windows-Bildschirme simulieren. Das ist sehr wichtig, weil beide Systeme unterschiedliche Gamma-Werte haben. Bei Windows wirken Bilder dunkler. Hier lässt sich auch die Berechnungsbasis für die spätere Ladezeit ändern.


Farb- und Helligkeitsunterschiede

Manchmal weist ein Bild im Dialog Für Web und Geräte speichern einen deutlichen Unterschied in Farbe und Helligkeit im Vergleich zum Originalbild auf. Für den Export geht Adobe vom sRGB-Farbraum aus, der für die Bildschirmdarstellung von Webseiten meistens passt. Stellt man unter Vorschau die Option Dokumentprofil verwenden ein und ist dem Bild in Photoshop der sRGB-Arbeitsfarbraum zugewiesen, verschwindet dieser Unterschied (siehe Kapitel 7).


Am Fuß des Dialogs kann das ausgewählte Bild direkt zu einem Browser geschickt werden. Mit dem Button Device Central kann man zum gleichnamigen Adobe-Programm für mobile Endgeräte wechseln, um das optimierte Bild dort auf den kleinen Displays von Mobiltelefonen, Smartphones o. Ä. zu begutachten. Dieses Programm wird in Abschnitt 11.6 besprochen. Unter Bildgröße kann man unabhängig vom Originalformat hier eine verkleinerte Version ausgeben. Neu in Photoshop CS4 ist die Möglichkeit, den Umfang an Metadaten zu bestimmen, der eingebettet ins Bild ausgegeben werden soll. So kann man hier z. B. Stichwörter, die nicht für die Veröffentlichung bestimmt sind, entfernen. Der Button Fertig schließt den Dialog und speichert dabei die Einstellungen.

Abbildung 11.15 Originalbild

Einstellung der Kompression | Für die Einstellung der JPEG-Kompression gibt es zwar einen guten Bereich, in dem man kaum etwas falsch machen kann. Dieser liegt zwischen etwa 40 und 60 % Qualität (Voreinstellung JPEG Hoch). Wenn man aber die Kompression für Webbilder »über den Daumen« vornimmt, ist das oft noch lange nicht optimal. Entweder sind die Bilder zu groß (verschwenden dadurch wertvolle Übertragungsbandbreite und belegen zudem teuren Webspace) und verkraften noch eine weitere Kompression, oder die Qualität leidet bereits bei fein detaillierten Motiven. Die visuelle Kontrolle ist hier Pflicht. Durch die 2fach- oder 4fach-Ansicht hat man gute Möglichkeiten zu vergleichen, bei welcher Kompressionsstufe die ersten JPEG-Artefakte auftreten.

Abbildung 11.16 Kompression: 75 % Qualität (links), 50 % (Mitte) und 10 % (rechts)

Die Funktion für unterschiedliche Kompressionsstufen in einem JPEG-Bild, bei der die Inhalte von Text- oder Formebenen sowie die Alpha-Kanäle dazu benutzt werden konnten, scharfkantige Bereiche in höherer und flächige Bereiche in niedrigerer Qualität auszugeben und so eine bessere Bildqualität bei kleinerer Datei-größe zu erreichen, gibt es in Photoshop CS4 leider nicht mehr. Warum, ist nicht klar.


Galileo Computing - Zum Seitenanfang

11.5.2 GIF-Einstellungen Zur nächsten ÜberschriftZur vorigen Überschrift

Die Einstellungen für das GIF-Format im Dialog Für Web und Geräte speichern sind noch etwas umfangreicher als die Möglichkeiten bei JPEG und bieten mehr Spielraum für ein Fine-tuning, bei dem aus der an sich veralteten Kompressionsmethode noch einiges herauszuholen ist.

Farbtöne | Der wichtigste Hebel, an dem die GIF-Kompression ansetzt, ist die Reduktion der Farbtöne. Nach der Reduktion von 24 auf 8 Bit Farbtiefe (von 16,7 Millionen auf 256 Farben) gibt es in diesem schon sehr reduzierten Bereich nun die Möglichkeit, gezielt weiter zu optimieren. Auf wie viele Farben man reduzieren möchte, kann man unter Farben vorgeben. Manchmal wird hier aber auch eine niedrigere Zahl eingefügt. Wenn z. B. ein Logo nur sehr wenige Farbtöne hat, reduziert Photoshop automatisch die nötigen Farben, nachdem das Bild analysiert wurde, auch wenn eine höhere Vorgabe gemacht wurde.

Abbildung 11.17 Die GIF-Einstellungen

Farbreduktionsalgorithmus | Die Methode, wie die maximal 256 Farben nach ihrer Häufigkeit sortiert werden, bietet eine gewisse Auswahl und lässt sich unter Farbreduktionsalgorithmus einstellen. Adaptiv und Perzeptiv bringen in der Regel optisch die besten Ergebnisse.


HINWEIS

Auch beim GIF-Format hat Adobe in Photoshop CS4 die Steuerung der Bildqualität über Text- und Formebenen sowie Alpha-Kanäle weggelassen.


Lossy | Die Möglichkeit, die Dateigröße weiter zu reduzieren, steckt hinter dem Regler Lossy, der Pixel in der Horizontalen zusammenfasst. Man erkennt dann zunehmend eine streifenartige Struktur, die der LZW-Kompression des GIF-Formats sehr entgegenkommt. Inwieweit das in Bezug auf die Bildqualität noch gut aussieht, muss man von Fall zu Fall entscheiden.

Dither | Unter Dither versteht man das gezielte Hinzufügen von Störungen, um dem Auge Zwischentöne vorzutäuschen, die bei 256 Farben gar nicht existieren können. Bei weichen Verläufen wie Schatten ist das unumgänglich. GIF »mag« eher große, einheitliche Farbflächen. Das »Gekrümel« des Ditherings läuft dem genau zuwider, und deshalb gibt es verschiedene Methoden und die Regelmöglichkeit, um einen Kompromiss zwischen Dateigrößenzuwachs und optischer Qualität zu finden.

Transparenz | GIF unterstützt Transparenzen, indem eine der 256 möglichen Farben als durchsichtig definiert und ausgeblendet wird. Wird eine Datei in den Dialog von Für Web und Geräte speichern geladen, die Bildinformationen mit einem transparenten Hintergrund enthält, wird diese Ebenentransparenz automatisch als durchsichtig definiert. Da es nur durchsichtig und undurchsichtig gibt und keinerlei Halbtransparenzen, ist der Übergang normalerweise sehr hart. Deshalb kann man hierfür auch ein Dithering aktivieren (übe die Checkbox für Transparenz).


Bildgröße

Hinter der Farbtabelle findet man einen Reiter namens Bildgrösse. Er ist mit Vorsicht zu genießen. Geht man mit relativ großen Bildern in den Dialog Für Web und Geräte speichern und skaliert die Bilder erst hier herunter, muss man Zeit mitbringen. Auch sonst ist hier der Umgang mit großen Bildern mühsam, weil jede Änderung in den Einstellungen eine komplette Neuberechnung des ganzen Bildes erfordert. Verschärft ist das natürlich bei der 4fach-Ansicht. Besser ist es, Bilder vorher in Photoshop zu skalieren. Photoshop warnt auch mit einer Box bei sehr großen Bildern davor, über Für Web und Geräte speichern zu exportieren. Hat man einen leistungsfähigen PC, kann man das getrost ignorieren.


Web-Ausrichtung | Die Web-Ausrichtung zwingt mit höherer Einstellung immer mehr Farben auf die Werte der Websafe-Palette. Das ist die Schnittmenge jener 216 Farben, die bei allen Browsern, bei Mac und Windows und bei 256 Farben Bildschirmfarbtiefe korrekt angezeigt werden. Dieses Feature tritt mehr und mehr in den Hintergrund, weil eine solch geringe Monitorleistung de facto fast nicht mehr vorkommt.

Farbtabelle | Unter Farbtabelle werden die verwendeten Farben angezeigt. Hier ist ein intensives manuelles Finetuning möglich. Interessant ist die Möglichkeit, diese Farbtabelle abzuspeichern und weiterzuverwenden. So kann man einen sehr einheitlichen Look über eine ganze Reihe von GIFs hinweg erreichen.

Interlaced | Unter Interlaced (4 in Abbildung 11.17) versteht man einen allmählichen Bildaufbau, der zuerst ein relativ grobes Bild zeigt, das dann immer schärfer und detaillierter wird. Das ist vor allem bei langsamen Internetverbindungen angenehm, weil man so zumindest schon einmal ahnen kann, welches Bild da gleich erscheinen wird.

Abbildung 11.18 GIF-Kompression: Reduktion auf 256 Farben (links), 32 Farben (Mitte) und acht Farben (rechts)

Bei der Vielfalt der Einstellungsmöglichkeiten empfiehlt es sich natürlich sehr, diese abzuspeichern.


Galileo Computing - Zum Seitenanfang

11.5.3 Droplets topZur vorigen Überschrift

Wenn es um eine größere Menge von Bildern geht, die man für die Darstellung im Web zu optimieren hat, sind automatisierbare Verfahren wünschenswert. Mit den in Kapitel 13 besprochenen Aktionen, mit deren Massentauglichkeit mit Hilfe der Stapelverarbeitung sowie mit dem Erstellen sogenannter »Droplets« (also Miniprogrammen, die eine Aktion in Photoshop wiederholt aufrufen und dabei per Drag & Drop mit ganzen Ordnern voll Bilddateien gefüttert werden können), stellt Photoshop die geeigneten Mittel zur Verfügung.

Abbildung 11.19 Droplet einer Photoshop-Aktion

»Speichern unter« umgehen | Wie bereits angemerkt wurde, hat die Ausgabe als JPEG über DateiSpeichern unter oft gravierend andere (vor allem schlechtere) Ergebnisse zur Folge als die Erzeugung von JPEGs mit der Funktion Für Web und Geräte speichern. Letztere ist allerdings für die Aufzeichnung von Aktionen nur teilweise geeignet. Hier ist Photoshop wie in den vergangenen Versionen noch immer nicht fehlerfrei. Bis zur Version CS2 konnte man das umgehen, indem man einfach in ImageReady direkt aus der Palette mit den Bildoptimierungseinstellungen ein Droplet mit den gerade aktuellen Parametern erstellte. Nun gibt es diesen Workaround nicht mehr, weil ImageReady aus der Creative Suite verschwunden ist. Fireworks als eine Art Nachfolger von ImageReady stellt eine derartige Funktion (noch) nicht zur Verfügung. Dort wiederum gibt es allerdings auch eine Stapelverarbeitung.

Abbildung 11.20 Aufgezeichnete Aktion mit Für Web und Geräte speichern

Wenn man sich von gewissen Einschränkungen nicht irritieren lässt, kann man die Droplets für die Funktion Für Web und Geräte speichern wie im Folgenden beschrieben benutzen. (Details zur Aufzeichnung von Aktionen und zum Erstellen von Droplets allgemein finden Sie in Kapitel 13.)

Aktionen für das Web | Beim Aufzeichnen einer Aktion mit der Funktion Für Web und Geräte speichern muss man immer mit einem wirklichen Speichervorgang abschließen, damit dieser Prozess vollständig aufgezeichnet werden kann. Das Problem dabei ist, dass der Ausgabepfad Bestandteil der Aktion ist. Normalerweise werden sowohl bei der Stapelverarbeitung als auch beim Erstellen von Droplets aus Aktionen mitaufgezeichnete Speicherschritte wahlweise überschrieben oder durch automatisches Speichern mit automatisch generierten Namen ersetzt. Das ist im Dialog für die Erstellung von Droplets (DateiAutomatisierenDroplet erstellen) die Aufgabe der in Abbildung 11.21 aktivierten Checkbox »Speichern unter« in Aktionen überschreiben.

Abbildung 11.21 Zielordneroptionen bei der Droplet-Erstellung

Leider verhält sich ein Droplet mit Für Web und Geräte speichern nicht wie andere Droplets mit Speicherschritten. Die Umbenennung wird ignoriert. Es werden lediglich Leer- und Sonderzeichen durch Bindestriche ersetzt. Die Droplets schreiben immer in den Ordner, der in der Aktion angegeben wird, egal, wohin man das Droplet auch kopiert. Mit »überschreiben« ist also immer nur der Dateiname gemeint!


Batch

Alternativ zu dieser Methode, die ja nicht unbedingt durch besondere Flexibilität besticht, gibt es die Batch-Verarbeitung in Fireworks, die auch das Abspeichern als Skript erlaubt. Ein solches Skript ist allerdings kein Droplet, sondern wird zuerst in Fireworks geöffnet, um dann nach den zu bearbeitenden Dateien zu fragen. Der Ausgabeordner muss (genau wie beim Photoshop-Droplet) existieren.


Wählt man die Option Ziel: Speichern und schliessen, so könnte man das Droplet überallhin kopieren, weil sich alles in einem Ordner abspielt. Bei Für Web und Geräte speichern kann das aber nicht funktionieren, denn es handelt sich ja um einen Export bei offen bleibender Originaldatei. So wird man sich darauf beschränken müssen, den Zielordner in der Aktion und dem daraus abgeleiteten Droplet festzuschreiben. Die Dateien, die zu bearbeiten sind, können von überall her kommen, landen aber immer in diesem einen Zielordner. Wenn schon die Umbenennungsoptionen nicht funktionieren, warnt wenigstens ein Dialog vor versehentlichem Überschreiben von bestehenden Dateien. Hier gibt es also von Photoshop noch keine befriedigende Lösung.


Alternative 2

Eine weitere, allerdings sehr anspruchsvolle Möglichkeit ist die Erstellung eines eigenen Skripts für Photoshop auf der Basis von JavaScript, VBScript oder Apple Script (siehe hierzu Kapitel 13).


Außerdem gibt es natürlich eine ganze Reihe von Dritthersteller-Werkzeugen, die die Stapelverarbeitung von Bildern exzellent beherrschen bzw. in manchen Belangen dafür sogar besser geeignet sind als Photoshop. Als Beispiele seien hier der altgediente GraphicConverter (www.lemkesoft.de) für den Mac oder IrfanView für Windows (irfanview.com) genannt.



Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen. >> Zum Feedback-Formular
<< zurück
  Zum Katalog
Zum Katalog: Adobe Photoshop CS4 - Fortgeschrittene Techniken






Adobe Photoshop CS4
Fortgeschrittene Techniken

bestellen


 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: Adobe Photoshop CS6 und CC






 Adobe Photoshop
 CS6 und CC


Zum Katalog: Photoshop Lightroom 5






 Photoshop
 Lightroom 5


Zum Katalog: Photoshop Artworks






 Photoshop Artworks


Zum Katalog: Adobe Photoshop für Fortgeschrittene






 Adobe Photoshop für
 Fortgeschrittene


Zum Katalog: Die Schöne und das Biest






 Die Schöne und
 das Biest


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo





Copyright © Rheinwerk Verlag GmbH 2010
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de