Digital Performance Experts Group

+++ Digitale Bildbearbeitung mit Adobe Photoshop +++
Was ist mit der digitalen Bildverarbeitung "DBB" möglich?

Wie können ein Gegenstand, eine Papiervorlage oder ein Dia digitalisiert werden?

Ein Foto, ein bedrucktes Blatt, ein Diapositiv oder Negativ können mit Hilfe eines Scanners digitalisiert werden. Es ist ebenfalls möglich, mit einer Digitalkamera eine digitale Vorlage herzustellen.

Die Möglichkeiten der digitalen Bildbearbeitung "DBB":

Die Möglichkeiten der digitalen Bildbearbeitung können wie folgt umrissen werden:

  • Eine digitale Vorlage kann ohne Qualitätsverlust beliebig oft dupliziert werden.
  • Eine digitale Vorlage kann temporär verändert werden.
  • Eine kleine Vorlage, z.B. ein Kleinbilddia, kann mit Hilfe einer entsprechenden Software bis zu einem A0-Poster oder grösser vergrössert werden.
  • Abhängig von der verwendeten Software können einzelne Schritte der Bearbeitung rückgängig gemacht oder zwecks Anwendung auf andere Vorlagen aufgezeichnet werden.
  • Abhängig von der verwendeten Software können einzelne Schritte der Bearbeitung als sog. Schnappschuss festgehalten werden.
  • Mit Hilfe einer sog. Auswahl können Teilbereiche einer Vorlage bearbeitet werden.
  • Der Tonwert, die Gradation, die Farbbalance, der Kontrast und Helligkeit einer Vorlage können verändert werden.
  • Es ist mit geringstem Aufwand möglich, aus einer Farbvorlage eine Schwarzweissvorlage herzustellen.
  • Digitale Vorlagen lassen sich sehr einfach retuschieren und von Störungen befreien.
  • Digitale Vorlagen lassen sich bis zu einem gewissen Grad nachschärfen.
  • Digitale Vorlagen lassen sich sehr einfach spiegeln, drehen oder neigen.
  • Digitale Vorlagen lassen sich als sog. Ebenen übereinander positionieren. Die Ebenen lassen sich ein- und ausblenden. Mit Hilfe von Masken können einzelne Ebenen transparent gemacht werden. Einzelne Ebenen und Masken können auf andere Vorlagen übertragen werden.
  • Digitale Vorlagen lassen sich sehr einfach manipulieren.
  • Effekte wie Verzerren oder Aquarellieren einer Vorlage sind sehr leicht durchführbar.
  • Eine der Stärken der DBB ist die Montage von mehreren Vorlagen zu einem Bild, z.B. einem Poster.
  • DBB ist der grösste Antrieb für das Internet. Die sog. animierten GIF-Bilder sind zu einem unverzichtbaren Mittel der Werbung im Web geworden.
Bevor Sie beginnen 1...
Die aktuellen Daten der Vorlage
Bevor Sie mit der Bearbeitung einer digitalen Vorlage beginnen, überprüfen Sie die folgenden Daten:
  • Die Bildgrösse
  • Die Auflösung
  • Den Farbmodus
  • Das Dateiformat
Bevor Sie beginnen 2...
Legen Sie die Daten der Zielvorlage fest
Bevor Sie mit der Bearbeitung einer digitalen Vorlage beginnen, legen Sie die folgenden Daten der Zielvorlage fest. Diese hängen entschieden davon ab, ob die Vorlage "gedruckt" oder ins "Web" gestellt werden soll, zumal nicht jedes Dateiformat für das Internet geeignet ist:
  • Der Bildausschnitt
  • Die Bildgrösse
  • Die Auflösung
  • Der Farbmodus
  • Das Dateiformat
Die Reihenfolge 1...
Sie sollten bei der Bearbeitung Ihrer Vorlage so vorgehen:
Bei Bearbeitung und Optimierung Ihrer Vorlage ist die Reihenfolge der einzelnen Schritte sehr wichtig:
  • Duplizieren Sie die Vorlage, schliessen Sie das Original, sichern Sie die Kopie, mit der Sie dann arbeiten.
  • Sichern Sie die Datei nach wichtigen Schritten.
  • Den Bildauschnitt festlegen.
  • Die Bildgrösse festlegen.
  • Die Auflösung festlegen.
  • Den Farbmodus festlegen.
  • Das Dateiformat festlegen.
Die Reihenfolge 2...
Sie sollten bei der Bearbeitung Ihrer Vorlage so vorgehen:

Bei Bearbeitung Ihrer Vorlage ist die Reihenfolge der einzelnen Schritte sehr wichtig. Einzelne Schritte können rückgängig gemacht oder zwecks Anwendung auf andere Vorlagen als sog. Aktionen aufgezeichnet werden. Mit Hilfe eines sog. Schnappschusses kann der jeweilige Zustand der Vorlage festgehalten werden:

  • Einzelne Schritte, falls erforderlich, als Aktionen aufzeichnen.
  • Einen Schnappschuss, falls erforderlich, von einem Zwischenschritt anfertigen. Im Photoshop können die von einer Vorlage erstellten Schnappschüsse leider nicht mitgespeichert werden.
  • Den Tonwert korrigieren.
  • Die Gradation korrigieren.
  • Die Farbbalance korrigieren.
  • Die Helligkeit und den Kontrast korrigieren.
  • Störungen beseitigen.
  • Fehler retuschieren.
  • Nachschärfen, falls nötig.
  • Spiegeln, drehen, neigen, falls nötig.
  • Mit Ebenen, Masken und Kanälen arbeiten.
  • Manipulationen vornehmen.
  • Effekte anwenden.
  • Montagen vornehmen.
  • Eventuell für das Web vorbereiten.
  • Eventuell für Animationen vorbereiten.
Web-Design mit Photoshop und ImageReady
Themen:
Für Web speichern... Nach GIF89a-Format exportieren... Web Photo Gallery...
Animierte GIF-Dateien mit ImageReady... Slices... Rollovers... ImageMaps...


Das sollten Sie beim Web-Design wissen:
Für das Web gelten nur die drei Grafikformate
gif, jpg und png



Für das Web-Design mit Hilfe von Photoshop und ImageReady benötigen Sie Kenntnisse über den Umgang mit der Seitengestaltungssprache HTML (Hypertext Markup Language). Nützlich dafür sind auch HTML-Editoren wie Macromedia Dreamweaver, Netscape Composer oder MS FrontPage. Sehr hilfreich für das Web-Design sind ebenfalls die sogenannten WYSIWYG-Editoren. Das Kürzel WYSIWYG steht für: "What You See Is What You Get". Das bedeutet in etwa: Das Ergebnis sieht so aus wie das, was Sie gerade sehen.

Photoshop und ImageReady bieten die folgenden Möglichkeiten für das Web-Design:

  • Für Web speichern...
    Mit diesem Kommando können Dateien in den Web-Grafikformaten jpg, gif und png gespeichert werden. Hierbei wird die Grafik in einem gesonderten Fenster mit Vorschau für verschiedene Optimierungsstufen gezeigt.

    Das Format Joint Photographic Experts Group (mit Dateiendung jpg) ist das gebräuchliche Format für die Darstellung von Fotos und anderen Halbtonbildern in HTML-Dateien im World Wide Web und anderen Online-Diensten. Das JPEG-Format unterstützt CMYK-, RGB- und Graustufen- Farbmodi. Es unterstützt keine Alpha-Kanäle. Im Gegensatz zu GIF erhält JPEG sämtliche Farbinformationen eines RGB-Bildes. JPEG wendet eine Komprimierung an, mit der die Dateigröße reduziert wird, indem Daten, die zur Darstellung des Bildes nicht notwendig sind, erkannt und gelöscht werden. Wenn Sie ein JPEG-Bild öffnen, wird es automatisch dekomprimiert. Je höher die Komprimierung, desto niedriger wird die Bildqualität; je niedriger die Komprimierung, desto höher ist die Bildqualität. In den meisten Fällen erzeugt eine Komprimierung mit der maximalen Qualitätsstufe ein Bild, das sich praktisch nicht vom Original unterscheidet.

    Das PNG-8-Format verwendet 8-Bit-Farbe. Wie im GIF-Format werden im PNG-8-Format Farbflächen effizient komprimiert, wobei Details, wie beispielsweise in Strichgrafiken, Logos und Abbildungen mit Text, erhalten bleiben. Da PNG-8 nicht von allen Browsern unterstützt wird, sollten Sie dieses Format vermeiden, wenn Ihr Bild im Internet die größtmögliche Verbreitung finden soll. Weitere Informationen zur Browser-Unterstützung für PNG finden Sie in der Dokumentation Ihres Browsers. Das PNG-8-Format verwendet eine verlustfreie Komprimierungsmethode, bei der während der Komprimierung keine Daten gelöscht werden. Da PNG-8-Dateien jedoch 8-Bit-Farbe enthalten, kann die Optimierung eines 24-Bit-Originalbilds als PNG-8 zu einer geringeren Bildqualität führen. PNG-8-Dateien verwenden komplexere Komprimierungsschemata als GIF-Dateien und können 10 bis 30 % kleiner als GIF-Dateien desselben Bilds sein, je nach den Farbmustern des Bilds.
    Hinweis: Bei bestimmten Bildern, insbesondere solchen mit sehr wenigen Farben und einfachen Mustern, können mit der GIF-Komprimierung kleinere Dateien als mit der PNG-8- Komprimierung erstellt werden. Zeigen Sie optimierte Bilder im GIF- und PNG-8-Format an, um die Dateigrößen zu vergleichen. Wie beim GIF-Format können Sie die Anzahl der Farben im Bild verringern und Optionen zum Steuern des Ditherings der Farben in der Anwendung oder einem Browser wählen. Das PNG-8-Format unterstützt Hintergrundtransparenz und Hintergrundfarbe, bei der die Bildkanten an die Hintergrundfarbe einer Webseite angepaßt werden.

    Das PNG-24-Format unterstützt 24-Bit-Farbe. Wie das JPEG-Format bewahrt PNG-24 die umfangreiche Skala und feinen Unterschiede in Helligkeit und Farbton, die ein Foto aufweist. Details, z. B. in Strichgrafiken, Logos oder Abbildungen mit Text, bleiben wie im GIF- und PNG-8-Format auch im PNG-24-Format erhalten. Das PNG-24-Format verwendet dieselbe verlustfreie Komprimierungsmethode wie das PNG- 8-Format, bei der keine Daten gelöscht werden. Aus diesem Grund sind PNG-24-Dateien meist größer als JPEG-Dateien desselben Bilds. Die Browser-Unterstützung für PNG-24 entspricht der für PNG-8. Wie beim PNG-8-Format werden auch vom PNG-24-Format Hintergrundtransparenz und Hintergrundfarbe unterstützt, bei der die Bildkanten an die Hintergrundfarbe einer Webseite angepaßt werden. Darüber hinaus unterstützt das PNG-24-Format abgestufte Transparenzeffekte. Mit bis zu 256 Transparenzabstufungen können Sie weiche Übergänge von den Bildrändern zu einer beliebigen Hintergrundfarbe erzielen. Abgestufte Transparenz wird jedoch nicht von allen Browsern unterstützt.

  • Nach GIF89a-Format exportieren...
    Mit diesem Kommando ist es möglich, Dateien mit transparentem Hintergrund im sog. Compuserve-GIF89a-Format herzustellen.

    Das Graphics Interchange Format (GIF) ist das gebräuchliche Format für die Darstellung von indizierten Farbbildern in HTML-Dateien (Hypertext Markup Language) im World Wide Web und anderen Online-Diensten. GIF ist ein LZW-komprimiertes Format, das entwickelt wurde, um die Dateigröße und die Übertragungszeit per Telefonleitungen so weit wie möglich zu reduzieren. Das GIF-Format unterstützt keine Alpha-Kanäle.

    Sie können Dateien unter Verwendung einer der folgenden Methoden in das GIF-Format konvertieren:
    Sie können Bitmap-, Graustufen- oder indizierte Farbbilder über den Befehl "Datei: Speichern unter" im GIF-Format speichern und eine Interlaced-Darstellung festlegen, um das Bild beim Laden in mehreren Durchgängen mit zunehmend mehr Details anzuzeigen, wodurch die Dateigröße erhöht wird. Sie können keine Alpha-Kanäle mit dem Bild speichern.

    Mit dem Befehl "GIF89a exportieren" können Sie ein RGB- oder indiziertes Farbbild ins Format GIF89a konvertieren, Interlaced-Darstellung festlegen und die Anzeige von transparenten Bereichen im Bild festlegen. (Siehe Befehl: Exportieren von Bildern.) Das GIF89a-Format unterstützt einzelne Alpha-Kanäle.

  • Web Photo Gallery...
    Der Befehl "Web Photo Gallery" ermöglicht Ihnen das Exportieren von Bildern als Gallery-Website, einschließlich einer Miniaturen-Indexseite, individuellen JPEG-Bildseiten und navigierbaren Links. Dabei bereitet Photoshop die Bilder und den HTML-Code automatisch auf, wodurch sich das Publizieren von Bildern im Internet vereinfacht.

  • Animierte GIF-Dateien mit ImageReady...
    Mit ImageReady lassen sich auf sehr einfache Weise Animationen herstellen:

    Führen Sie folgende Schritte durch, um eine animierte GIF-Datei in ImageReady zu erstellen:

    Öffnen oder erstellen Sie ein Bild mit mehreren Ebenen als Grundlage für die Animation.
    Erstellen Sie mit der Animation-Palette Animationsframes aus dem Originalbild.
    Nehmen Sie mit der Ebenen-Palette Änderungen an einzelnen Frames, Gruppen von Frames oder der ganzen Animation vor.
    Verwenden Sie ggf. den Befehl "Dazwischen einfügen", um automatisch für mehrere neue oder vorhandene Frames die Einstellungen für Ebenendeckkraft, -position oder -effekte graduell zu ändern.

    Zeigen Sie eine Vorschau der Animation in ImageReady an.
    Optimieren Sie die Animation mit der Optimieren- und Farbtabelle-Palette.
    Zeigen Sie eine Vorschau der Animation in einem Browser an (das Timing ist im Vergleich zur Vorschau in ImageReady genauer).
    Speichern Sie die Animation mit dem Befehl "Optimiert-Version speichern".
    Speichern Sie das Originalbild zur späteren Weiterbearbeitung. Animationen werden in der Original-Ansicht erstellt und bearbeitet. Sie können eine Animation auch in der Optimiert-Ansicht ansehen, allerdings sind die Bearbeitungsmöglichkeiten für Animationen in optimierten Ansichten sehr gering. Optimierte Animationsdateien werden nur als GIF-Dateien ausgegeben. Sie können keine JPEG- oder PNG-Animation erstellen.

  • Slices...
    Slices ermöglichen die Erstellung komplexer Bilder für das Web. Bei Slices handelt es sich um rechteckige Bildbereiche, die in der HTML-Tabelle der HTML-Bilddatei zu Zellen werden. Wenn Sie Slices in einem Bild erstellen, erstellt ImageReady automatisch bei Bedarf zusätzliche Slices, so daß alle Bildbereiche als Zellen in der HTML-Tabelle angegeben werden. Beim Unterteilen eines Bilds in Slices können Sie jedes Slice im Bild mit unterschiedlichen Einstellungen optimieren. Außerdem können Sie Rollover-Effekte erstellen, bei denen verschiedene Stadien eines Bilds aktiviert werden, wenn der Web-Besucher eine Maus-Aktion auf dem Slice ausführt.

  • Rollovers...
    Mit dem Rollover erstellen Sie Effekte, bei denen unterschiedliche Stadien eines Bildes aktiviert werden, sobald ein Betrachter über einem Slice eine Mausaktion (z. B. Rollen oder Klicken) durchführt. Als Rollover-Status können Sie eine Animation anzeigen.

  • ImageMaps...
    Image Maps sind Bilder auf einer Website, die mehrere Verknüpfungen zu anderen Dateien haben. Bestimmte Bereiche einer Image Map, die aktiven Punkte, stellen Verknüpfungen zu unterschiedlichen URLs dar. Image Maps können Verknüpfungen mit Textdateien, anderen Bildern, Audio-, Video- oder Multimedia-Dateien, anderen Seiten der Website oder anderen Websites enthalten. Die aktiven Punkte reichen nicht über die Kanten des Bilds hinaus. Image Maps sind insofern mit Slices vergleichbar, als man mit ihnen einen Bildbereich mit einer URL verknüpfen kann. Image Maps haben jedoch den Vorteil, daß sie die Erstellung von runden, vieleckigen oder rechteckigen Bereichen in einem Bild ermöglichen, während mit Slices nur rechteckige Bereiche verbunden werden können. (Wenn nur rechteckige Bereiche verbunden werden müssen, sind Slices u. U. Image Maps vorzuziehen, da sie die Möglichkeit bieten, die Optimierung für einzelne Bildbereiche getrennt einzustellen.


Digitale Bildbearbeitung
Allgemeine Begriffe

Die digitale Bildbearbeitung wird in den RRZN-Kursen ausschliesslich mit dem Programm "Adobe Photoshop 5.5" durchgeführt. Die Kurse über Photoshop am RRZN finden Sie HIER.

Sie lernen in einem 5tägigen "Learning-by-Doing"-Seminar den Einsatz von Photoshop kennen. Fahren Sie mit der Maus über das Bild, um die Kursthemen kennenzu- lernen. Alle hier besprochene Punkte werden dort behandelt.

Photosop Themen


Grundsätzliches über die Digitale Bildbearbeitung


Die Bearbeitung eines digital vorliegenden Bildes hängt entscheidend davon ab, ob es ausgedruckt oder im Web veröffentlicht werden soll. Dabei spielen die Auflösung und das Format des Bildes eine wichtige Rolle.

Die Auflösung
Ein digitales Bild setzt sich aus einzelnen Bildpunkten (Pixeln, Dots) zusammen.
Jedes Pixel ist durch seine Koordinaten und seinen Farbwert eindeutig definiert.
Z. B. ein Bild im Postkartenformat (13.55cm X 10.6cm bzw. 5.333inch X 4.00inch),
das in der Breite aus 1600 und in der Höhe aus 1200 Pixeln besteht, hätte somit eine
Auflösung von 1200/4=300 pixel/inch.

Die Auflösung eines Bildes wird in pixel per inch bzw. dpi (dot per inch) angegeben.

Das Dateiformat
Die Daten, die ein digitales Bild beschreiben, werden in einer bestimmten Struktur, genannt
das Dateiformat, angelegt. Das Format wird in der Regel durch das Gerät (Scanner, Digitalkamera)
bzw. die Software ( z.B. Photoshop) vorgegeben, womit das Bild erstellt wird. Bei Scannern und
Bildbearbeitungsprogrammen hat der Anwender, soweit sinnvoll, auch selbst die Möglichkeit, das Format
vorzugeben.

Wofür welches Dateiformat
Die Wahl eines bestimmtes Dateiformats hängt davon ab, wofür das Bild verwendet werden soll. Allein Photoshop kennt 15 verschiedene Formate. Im folgenden einige wichtige davon und ihr Einsatzgebiet:

  • PSD Im Web NICHT anwendbar
    Das interne Photoshopformat wird für Montagen und andere Spezialanwendung verwendet.

  • TIF Im Web NICHT anwendbar
    Tagged Image File Format, verlustfreie Kompression, geeignet zum Austausch mit anderen
    Programmen und Rechnerplattformen, z.B. Unix- und Mac-Welt.

  • EPS Im Web NICHT anwendbar
    Encapsulated Post Script, das Dateiformat für Druckvorstufen und Postererstellung.

  • JPG Im Web anwendbar
    Joint Photographic Experts Group, das Dateiformat für hochwirksame Kompression mit
    kalkulierbarem Datenverlust, 16,7 Mio Farben, 24-Bit Farbtiefe, die Auflösung für das Web
    ist mit 70 bis 100 pixel/inch völlig ausreichend.

  • GIF Im Web anwendbar
    Graphics Interchange Format, das Dateiformat für verlustfreie Kompression, geeignet
    für Web-Animationen und Bilder mit transparentem Hintergrund, 256 Farben, 8-Bit Farbtiefe,
    die Auflösung für das Web ist mit 70 bis 100 pixel/inch völlig ausreichend.


  • PNG Im Web anwendbar
    Portable Network Graphic, das Dateiformat für verlustfreie Kompression, geeignet
    für Web-Animationen und Bilder mit transparentem Hintergrund, 16,7 Farben, 24-Bit Farbtiefe,
    die Auflösung für das Web ist mit 70 bis 100 pixel/inch völlig ausreichend. Das Format ist ein Versuch,
    die Nachteile von JPG (verlustbehaftete Kompression) und GIF (nur 256 Farben) zu vermeiden.
    PNG wird erst ab Netscape Communicater 4.04 und MS Explorer 4.0 unterstützt.

Gegenüberstellung von JPG- und GIF-Format im Web
Diese beiden Formate lassen sich im Photoshop sehr gut optimieren. Das GIF-Format benötigt in der Regel
erheblich weniger Platz als das JPG. Für die Darstellung von Grafiken sollte auf jeden Fall dieses
Format verwendet werden, während JPG bei farbintensiven Images zum Einsatz kommen sollte.

JPG und GIF-Vergleich im WEB
Die Bilder sind hier um 50% kleiner dargestellt
JPG-Format GIF-Format
JPG: (425x272)Pixel (15x9,6)cm (5,9x3,8)inch
72dpi 339KB 16,7Mio Farben
GIF: (425x272)Pixel (15x9,6)cm (5,9x3,8)inch
72dpi 113KB 256 Farben

Wie der oberen Tabelle zu entnehmen ist, benötigt das JPG-Bild 3mal mehr Platz als das GIF-Bild. Bezüglich der Einzelheiten ist kein Unterschied zwischen den Bildern auszumachen.


 
Weitere Themen