Lernziele

Im 4. Praktikum beschäftigen Sie sich mit weiteren Techniken von Adobe Photoshop. Sie werden nach dem Praktikum in der Lage sein, mittels Histogrammen den Dynamikumfang eines Farbraumes optimal auszunutzen, um ein Bild optisch aufzuwerten. Den Unterschied zwischen Vektor- und Pixelgrafik können Sie beschreiben. Darauf aufbauend werden Sie mit Pfaden umzugehen lernen und die Notwendigkeit dessen Anwendung auch für Webprojekte erkennen.

Bewertung

Generelle Hinweise zur Bewertung der Mitarbeit in dem Praktikum entnehmen Sie bitte dem Dokument „Allgemeine Hinweise zum Praktikum ‚Elektronische Dokumente’ im SS08“. Für den Gruppenbewertungsteil werden folgende Dokumente hinzugezogen:

  • das Übungsprotokoll mit den Antworten auf die im Abschnitt „Praktikumsdurchführung“ enthaltenen Fragen
  • alle Resultate der einzelnen Übungen

Zur Abgabe dieser Dateien beachten Sie bitte die Hinweise unter Punkt V. der Praktikumsdruchführung.

Praktikumsvorbereitung

Farbe, Farbmodelle und Bildoptimierung

Als Praktikumsvorbereitung finden Sie verschiedene Materialien im Downloadbereich. Als Basiswissen zu Farbe, Farbmodellen und Bildoptimierungen nutzen Sie das PDF-Dokument “Kleine Einführung in Farbmodelle & Bildoptimierung” (s. PVlink01). Einen weiteren Überblick zum Thema Farbe bekommen Sie im Kapitel “1.2 Farbe” der Grundlagenschulung Photoshop von Photozauber.de (s. PVlink02). Histogramme und Bildoptimierungen werden im Kapitel “4. Bildeinstellungen” der Grundlagenschulung Photoshop von Photozauber.de behandelt.

Ebenentechnik

Eine Wiederholung zu Ebenen finden Sie im Kapitel “3.4 Ebenen” (s. PVlink02). Weiterführende Techniken mit Ebenen finden Sie im anschließenden Kapitel “3.5 Alphakanäle und Ebenenmaske” (s. PVlink02). Zum besseren Verständnis von Ebenenmasken nutzen Sie das Videotutorial von Photozauber.de “Weiche Bildübergänge” (s. PVlink03).

Pfade in Photoshop

Für die Arbeit mit Pfaden kann das Grundlagenwissen zu Vektorgrafiken wiederholt werden: “1.1 Vektorgrafik vs. Pixelgrafik” der Grundlagenschulung Photoshop (s. PVlink02).
Im Anschluss machen Sie sich bitte mit dem Pfadwerkzeug in Photoshop vertraut. Lesen Sie dazu das Kapitel “3.6 Pfadwerkzeug”
(s. PVlink02) und führen im Anschluss zwei aufeinander aufbauende Übungen mit Videotutorial durch (s. PVlink04 und PVlink05) .

Webgrafiken

Ein paar weitere Informationen zur Bearbeitung von Bildern für das Web finden Sie im Kapitel “III. Bilder für das Web” (s. PVlink01).

Sie müssen die Inhalte nicht auswendig beherrschen, es geht um das prinzipielle Verständnis. Vertiefende Informationen finden Sie in der Photoshophilfe sowie in der   Photoshop-Literatur der Universitätsbibliothek.

Praktikumsdurchführung

(1. Teil: Übungen; 2. Teil: Zeit für die Projektarbeit)

Im Downloadbereich finden Sie die Praktikumsmaterialien als Zip-Archiv. Bitte entpacken Sie den Inhalt in einen Übungsordner auf Ihrem privaten „Home-Verzeichnis”. Während dem Praktikum führen Sie bitte ein gemeinsames Übungsprotokoll. Die Erkenntnisse der Einzelarbeiten können Sie jeweils nach der einzelnen Übung zusammentragen. Als Resultate der Einzelarbeiten genügt ein Exemplar zur Abgabe, soweit nichts anderes vorgegeben ist. Die entstandenen Dokumente reichen Sie bitte zusammen mit dem Übungsprotokoll als Archiv ein (per Web-Link wie auch in den letzten Praktika).

  1. Das optimierte Bild (Einzelarbeit)
    1. In den Praktikumsmaterialien finden Sie einen Ordner “I.) Das optimale Bild”. Darin befinden sich drei Fotografien, die mit einer Digitalkamera aufgenommen wurden. Die Bilder sind nicht optimal belichtet und sollen von Ihnen einer individuellen Farb- und Tonwertkorrektur unterzogen werden. Der Umfang und die Art der Anpassung ist dabei Ihnen überlassen, das Resultat ist entscheidend.
    2. Verwenden Sie zum Anpassen des Tonwertbereiches und der Farbbalance der Bilder ausschließlich Einstellungsebenen, statt Anpassungen direkt auf die Bildebene anzuwenden. Mithilfe von Einstellungsebenen können Sie beliebige Veränderungen testen, zurücknehmen oder durch das Ein- und Ausblenden verschiedener Einstellungsebenen die Resultate vergleichen, ohne die Daten des Originalbildes zu verändern.
    3. Die Informationen- und Histogrammpalette kann Ihnen bei der Arbeit eine nützliche Hilfe sein.
    4. Entscheiden Sie sich nach den individuellen Varianten der Einzelarbeit für ein gemeinsames Ergebnis. Geben Sie dieses als Tif-Datei mit “LZW-Komprimierung” als Gruppenergebnis ab. Alle nicht benötigten Einstellungsebenen und anderen Ebenen löschen Sie bitte vorher, um die Dateigröße so gering wie möglich zu halten.
    5. Geben Sie im Übungsprotokoll kurz an, welche Veränderungen mit welchen Einstellungswerten Sie für das finale Ergebnis der drei Bilder verwendet haben.
  2. Bildoptimierung und Ebenentechnik (Einzelarbeit)
    1. Im Ordner “II.) Bildoptimierung und Ebenentechnik” der Praktikumsmaterialien befindet sich eine weitere Fotografie. Mit den Erfahrungen aus der 1. Übung können Sie eine schnelle Farb- und Tonwertkorrektur vornehmen.
    2. Sie werden schnell auf das Problem stoßen, dass die Sonnenreflexionen durch eine Tonwertkorrektur an Details verlieren und dieser Bildausschnitt anderweitig weiter bearbeitet werden muss.
    3. Verwenden Sie dazu Ihr Wissen aus der Vorbereitung und der Arbeit mit Ebenen, um zwei Bilder oder Bildausschnitte geschickt miteinander zu verbinden.
    4. Entscheiden Sie sich nach den individuellen Varianten der Einzelarbeit für ein gemeinsames Ergebnis. Geben Sie dieses als Tif-Datei mit “LZW-Komprimierung” als Gruppenergebnis ab. Alle nicht benötigten Einstellungsebenen und anderen Ebenen löschen Sie bitte vorher, um die Dateigröße so gering wie möglich zu halten.
    5. Geben Sie im Übungsprotokoll kurz an, welche Veränderungen mit welchen Einstellungswerten Sie für das finale Ergebnis des Bilder verwendet haben.
  3. Navigationselemente für das Web (Gruppenarbeit)
    1. Für diese Aufgabe können Sie auch ein Navigationselement Ihres Webprojektes verwenden, falls ein solches Anwendung findet.
    2. Erstellen Sie mittels Pfadwerkzeuge eine Formenebene als Basis für ein Navigationselement (Button) Ihres Projektes.
    3. Bearbeiten Sie das Element mit beliebiger Detailvielfalt (Text, Füllebenen etc.) und bezeichnen Sie die Ebene bzw. das Ebenenset als “link” für die mittels CSS stehende Pseudoklasse “a:link” eines noch nicht besuchten Links.
    4. Wandeln Sie noch mindestens zwei Kopien dieses Navigationselements so ab, dass Sie für die Pseudoklassen “a:hover” und “a:visited” ebenfalls eine Variante erstellt haben.
    5. Einzureichen als Gruppenergebnis mit dem Übungsprotokoll ist eine PSD-Datei, die alle Ebenen enthält und drei möglichst kleine im geeigneten Format gewählte Grafiken für das Web, die jeweils einen der drei genannten Zustände darstellt und mit CSS einfach eingebunden werden könnte.
  4. Objekte richtig freistellen (Einzelarbeit)
    1. Ziel dieser Übung ist es, das richtige Freistellen von Objekten mittels Pfaden zu üben.
    2. Bei dieser Übung ist das Übungsprotokoll nicht erforderlich, da Sie Ihre Arbeit als Projektdatei einreichen.
    3. Um einen ersten Eindruck zu bekommen, wozu diese Übungs sinnvoll ist, sehen Sie sich den Seitenauszug eines PR-Booklets vergangener Semester an [Download]. Sie können sich vorstellen, dass der Frosch auch entsprechend auf einer Website mit separatem Hintergrund platziert werden könnte [Download].
    4. Ihre Aufgabe besteht nun darin, den Leuchtturm aus dem Bild “Leuchtturm.jpg” des Praktikumsordners mittels eines Pfades freizustellen. Dazu verwenden Sie aus der Werkzeugleiste das “Zeichenstift-Werkzeug” und achten darauf, dass in der Optionsleiste “Pfade” angewählt ist.
    5. Erstellen Sie mittels Ankerpunkte und Anfasser einen Pfad. Dieser muss nicht perfekt sein. Die Übung mit dem Werkzeug steht im Vordergrund. Kleine Details wie z.B. die Kamera oder kleine Antennen können vernachlässigt werden.
    6. Speichern Sie den fertigen Arbeitspfad in der Pfade-Palette als neuen Pfad “Leuchtturm” ab.
    7. Im Anschluss sollen Sie den Pfad auf das Pixelbild zum Freistellen anwenden. Dazu erstellen Sie eine neue Vektormaske aus dem aktuellen Pfad. Rastern Sie die Vektormaske, um daraus eine Ebenenmaske zu erstellen.
    8. Nun können Sie die Ebenenmaske als Auswahl laden und diese ggf. um 1-2 Pixel verkleinern, die Auswahl umkehren und z.B. den Filter “Gaußscher Weichzeichner” anwenden, um die harte Kante weich zu zeichnen.
    9. Falls Sie immer noch “Blitzer” des Hintergrundes sehen, machen Sie die in Punkt 8 beschriebenen Schritte rückgänging und beschneiden die Auswahl um 1-2 Pixel (Ebenenmaske als Auswahl laden, verkleinern um 1-2 Pixel, Auswahl umkehren und löschen) und führen anschließend die in Punkt 8 beschriebenen Schritte erneut durch.
    10. Speichern Sie Ihr fertiges Projekt es als Tif-Datei mit LZW-Kompression ab. Zusätzlich speichern Sie das Bild als webtaugliche Grafik in einem Format, das es erlaubt transparente Hintergründe mit Verläufen darzustellen. Beide Dateien versehen Sie mit einem individuellen Namen und reichen es gemeinsam mit dem Übungsprotokoll (diese Übung braucht wie Übung III. nicht protokolliert werden) und den anderen Dateien ein.
  5. Sammeln Sie alle Materialien (s. Bewertung) in einem Unterordner Ihres “public_html” Ordners auf dem Server “freud.rz.tu-ilmenau.de”. Erstellen Sie im Anschluss aus dem gesamten Ordner ein komprimiertes TAR-Archiv (mit der Dateiendung TGZ; Kommandoaufruf “tar cfvz …”). Schicken Sie wie auch in den vorangegangenen Praktika an den Praktikumsbetreuer eine E-Mail, die einen Internet-Link auf das TGZ-Archiv enthält.

Nachdem Sie die Übungsaufgaben abgeschlossen haben, können Sie gern weiter an Ihren Navigations- und Hintergrundgrafiken für Ihr Website-Projekt arbeiten und individuelle Lösungen zusammen mit dem Praktikumsbetreuer diskutieren.

Downloads

Hinweis: Die nachfolgenden Downloads haben den Stand vom Sommersemester 2007 und sind daher auch mit dem betreffenden Passwort versehen. Aufgrund des Ihnen für das Sommersemester 2008 zugegangenen Passworts sollten Sie das benötigte Passwort selbst ableiten können.

Praktikumsvorbereitung:

  • PVlink01: Kleine Einführung in Farbmodelle, Bildoptimierung & Bilder für das Web (PDF) [Download]
  • PVlink02: Grundlagenschulung für Photoshop: “Photoshop Grundlagen” im Bereich WORKSHOPS –> SCHULUNGEN auf Photozauber.de [Link] (Hinweis: Sie können die Schulung über den Link “Gesamte Schulung herunterladen” als PDF downloaden)
  • PVlink03: Video “Weiche Bildübergänge” im Bereich WORKSHOPS –> VIDEOTUTORIALS –> Photoshop auf Photozauber.de [Link] (Hinweis: Sie können die Schulung über den Link “Gesamte Schulung herunterladen” als PDF downloaden
    Ein sehr gutes kostenloses Videotutorial zur “Arbeit mit Ebenenmasken” als Ergänzung zu dem Video “Weiche Bildübergänge” findet sich unter folgendem Link: http://www.video2brain.com/videos-1490.htm (Zeitaufwand ca. 11 Minuten, sehr empfehlenswert!!!)
  • PVlink04: Pfade: Übung 01 (ZIP) [Download]
  • PVlink05: Pfade: Übung 02 (ZIP) [Download]

Praktikumsdurchführung:

  • Praktikumsmaterialien (ZIP) [Download]

Vertiefende Materialien

Programmbeschaffung:

  • Photoshop CS2 Tastenkürzel/ Shortcuts (PDF) [Download]
  • Photoshop CS2 Testversionen für zu Hause: Viele Photoshop CS2 Bücher in der Bibliothek haben eine 30 Tage Testversion als DVD beiliegen.

Weiterführende Links:

  • Photozauber.de [Link] beinhaltet vielfältige Artikel, Tutorials und Hilfeforen rund um Design und Grafik (viel mehr als nur Photoshop): sehr empfehlenswert!
  • HilfDirSelbst.ch –> Kategorie Photoshop [Link ] beinhaltet einige Tutorials zur Bildoptimierung
  • Psd-tutorials.de [Link ] beinhaltet viele Workshops (einige sind kostenlos, andere erfordern eine kostenlose Registrierung)