Photoshop Workshop

Workshop

Grundlagen Photoshop

Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg

Erste Schritte

Gestaltung von Text

Ausgabeformate

Fotonachbearbeitung

Agenda

A

C

D

E

B

Photoshop

Arbeiten mit Ebenen


Photoshop

Erste Schritte


Photoshop

B

C

D

A

E

Erste Schritte

Print(Plakate, Anzeigen in

Zeitschriften, Flyer etc.)

Print(Plakate, Anzeigen in

Zeitschriften, Flyer etc.)

Web(Grafiken für PP-

Präsentationen, Webseiten etc.)

Web(Grafiken für PP-

Präsentationen, Webseiten etc.)


Photoshop

B

C

D

A

E

Erste Schritte

PrintPrint WebWeb

300 dpi 72 dpi


Photoshop

B

C

D

A

E

Die Auflösung eines Bildes

• die Auflösung eines Bildes bezieht sich auf dieAnzahl der Bildpunkte (Pixel) pro Fläche.

• dpi = dots per inch (Punkte pro Zoll)

Erste Schritte


Photoshop

B

C

D

A

E

Erste Schritte

PrintPrint WebWeb

CMYK RGB


Photoshop

B

C

D

A

E

Erste Schritte

CyanMagentaYellow

Key

CyanMagentaYellow

Key

RedGreenBlue

RedGreenBlue

RGBCMYK


B

C

D

A

E

Der Farbmodus eines Bildes

• Farbmodus für Bilder, die für die ausgedruckte Darstellung ausgelegt sind: CMYK.

• Farbmodus für Bilder, die für die digitale Darstellung (am Bildschirm/Beamer) ausgelegt sind: RGB.

Photoshop

Erste Schritte


B

C

D

A

E

Übung

Erstellen eines Web-Banners für die MuK-Halloween-Party

1. Lege eine Datei im Format 728 x 90 Pixel mit 72 dpi an.

2. Öffne das Bild „Kürbis.jpg“ (liegt auf dem Server).

Photoshop

Erste Schritte


B

C

D

A

E

3. Öffne die imb-Website (www.imb-uni-augsburg.de); gehe auf die Unterseite Studium MuK-Studium

4. Erstelle einen Screenshot des Browserfensters mittels Alt+Druck und füge ihn in eine neue Photoshop-Datei ein.

Photoshop

Erste Schritte


Photoshop

Fotonachbearbeitung


Fotonachbearbeitung

B

C

D

A

E

Photoshop

Folgende Arbeitschritte sollen an „Kürbis.jpg“ durchgeführt werden:

• Foto um 90 Grad drehen

• Foto verkleinern

• Helligkeit / Kontrast verbessern

• Kerzenflammen entfernen

• Bildausschnitt wählen


Fotonachbearbeitung

B

C

D

A

E

Photoshop

Foto um 90 Grad drehen:


Fotonachbearbeitung

B

C

D

A

E

Photoshop

Foto verkleinern:

Höhe ca. 250 Pixel

Proportionen erhalten

Bild neu berechnen mit „bikubisch schärfer“


Fotonachbearbeitung

B

C

D

A

E

Photoshop

Helligkeit / Kontrast verbessern:

Helligkeit: 20 Prozent verringern

Kontrast:20 Prozent erhöhen


Fotonachbearbeitung

B

C

D

A

E

Photoshop

Kerzenflammen entfernen

Auswahl des „Kopierstempel-Werkzeugs“ ( ) in der Werkzeugleiste

Alt-Taste gedrückt halten und auf Referenz-Stelle klicken

Geeignete Werkzeuggröße einstellen

Maustaste gedrückt halten und über die auszubessernde Stelle ziehen


Fotonachbearbeitung

B

C

D

A

E

Photoshop

Bildausschnitt wählen:

Auswahl des „Freistellungswerkzeugs“ ( ) in der Werkzeugleiste

Höhe 90 Pixel

Ausschnitt wählen mit der „Enter“-Taste bestätigen.


Fotonachbearbeitung

B

C

D

A

E

Photoshop

Folgende Arbeitsschritte sollen am Screenshot der imb-Website durchgeführt werden:

• MuK-Logo ausschneiden

• Hintergrund entfernen

• Größe ändern (Transformieren)


Fotonachbearbeitung

B

C

D

A

E

Photoshop

MuK-Logo ausschneiden

Auswahl des „Freistellungswerkzeugs“ ( ) in der Werkzeugleiste

Einen ungefähren Rahmen um das MuK-Logo aufziehen

Mit der Enter-Taste bestätigen


Fotonachbearbeitung

B

C

D

A

E

Photoshop

Hintergrund entfernen

Die Ebene „Hintergrund“ löschen

Auswahl des „Zauberstabs“ ( ) in der Werkzeugleiste

In den weißen Bereich außerhalb des MuK-Logos klicken.

Die Entf bzw. Del Taste drücken, um den markierten Bereich zu löschen


Fotonachbearbeitung

B

C

D

A

E

Photoshop

Größe ändern (Transformieren)

Tastenkombination Strg+T betätigen

Um das Objekt erscheint ein Rahmen mit Ziehpunkten, worüber die Größe geändert werden kann.

Durch gleichzeitiges Drücken der Strg-Taste werden die Proportionen beibehalten.

Mit der Enter-Taste bestätigen


Fotonachbearbeitung

B

C

D

A

E

Photoshop

Zwischenergebnis:

+

+


Photoshop

Arbeiten mit Ebenen


Arbeiten mit Ebenen

D

A

E

Photoshop

Ebenen – Was ist das?

• Elemente können auf eine eigene Ebene gelegt werden leichter zu bearbeiten

• Vergleichbar mit verschiedenen, übereinander gelegten Overhead-Folien

B

C


Arbeiten mit Ebenen

D

A

E

Photoshop

Ebenenfenster öffnen:

Fenster EbenenB

C


Arbeiten mit Ebenen

D

A

E

Photoshop

Das Ebenenfenster

B

C Ebenenname

DeckkraftFlächeEbene ein-/

ausblenden

LöschenNeue EbeneEbeneneffekteFüllebene/Fülleffekte

Fixieren


Arbeiten mit Ebenen

D

A

E

Photoshop

Neue Ebene einfügen:

Ebene -> Neu -> Ebene…

B

C


Arbeiten mit Ebenen

B

C

D

A

E

Photoshop

Folgende Arbeitschritte sollen nun durchgeführt werden:

• Datei „kürbis.jpg“ in die leere Ebene ziehen

• Ebene mit der Farbe „schwarz“ füllen


Arbeiten mit Ebenen

D

A

E

Photoshop

„Kürbis.jpg“ und das MuK-Logo in leere Ebene einfügen:

B

C

Verschieben-Werkzeug


Arbeiten mit Ebenen

D

A

E

Photoshop

Ebene mit Farbe füllen:

B

C


Arbeiten mit Ebenen

D

A

E

Photoshop

Zwischenergebnis:

B

C


Photoshop

Gestaltung von Text und Grafik



D

A

E

Photoshop

Text einfügen:

B

C

Textwerkzeug



D

A

E

Photoshop

Text bearbeiten:

B

C TextausrichtungSchriftart GlättungSchriftgrößeSchriftschnitt Text ausrichtenSchriftfarbeText krümmenZeichenpalette



D

A

E

Photoshop

Text bearbeiten:

Fenster -> Zeichen

B

CSchriftgröße

Skalierung HöheHochstellen

Zeilenabstand

Zeichenabstand

Skalierung BreiteSchriftfarbe



B

C

D

A

E

Photoshop

Folgende Arbeitschritte sollen nun durchgeführt werden:

• Text „Halloween – Party │ 31.10.08 in der Mensa“ einfügen

• „Halloween – Party“ in orange

• „|“ in rot

• „31.10.08 in der Mensa“ in hellorange

• Verdana, Schriftgröße 22



B

C

D

A

E

Photoshop

Zwischenergebnis:



B

C

D

A

E

Photoshop

Text an Ebenen ausrichten:

-> Verschieben – Werkzeug

-> Ebenen verbinden



B

C

D

A

E

Photoshop

Text an Ebenen ausrichten:



B

C

D

A

E

Photoshop

Folgende Arbeitsschritte sollen nun durchgeführt werden:

• Text „Halloween – Party 31.10.08 in der Mensa“ an Hintergrundebene ausrichten

• Horizontale-Mitte



B

C

D

A

E

Photoshop

Zwischenergebnis:



B

C

D

A

E

Photoshop

Effekte auf das MuK-Logo anwenden

Ebene mit dem MuK-Logo auswählen

Im Ebenen-Fenster auf „Ebeneneffekte hinzufügen“ ( ) klicken

„Schein nach außen“ auswählen

Deckkraft 75%, Überfüllen 10%, Größe 15 px



B

C

D

A

E

Photoshop

Fertig!


Photoshop

Ausgabeformate


Ausgabeformate

B

C

D

A

E

Photoshop

Formate im ÜberblickFormate im Überblick


Ausgabeformate

B

C

D

A

E

Photoshop

Photoshop DocumentPhotoshop Document

Dateierweiterung: *.psd

Das „Arbeitsformat“ von Photoshop

Speichert alle verwendeten Bilddaten, Ebenen, Vektoren, etc.

Verlustfreies Format (keine Komprimierung) große Dateien

Nicht für die Veröffentlichung (z.B. im Internet) bestimmt


Ausgabeformate

B

C

D

A

E

Photoshop

JPEG File Interchange Format (JPEG)JPEG File Interchange Format (JPEG)

Dateierweiterung: *.jpg (seltener: *.jpeg, *.jfif)

Weit verbreitet für Photos (Standardformat von Digitalkameras)

Bietet die Kompression (verlustbehaftet) der Bilder an

Meistgenutztes Bildformat im Internet


Ausgabeformate

B

C

D

A

E

Photoshop

Graphics Interchange Format (GIF)Graphics Interchange Format (GIF)

Dateierweiterung: *.gif

Hauptanwendungsbereich im Internet

Bietet transparenten Hintergrund

Einfache Animationen (Animiertes GIF) möglich

Max. 256 Farben, daher für Photos eher ungeeignet


Ausgabeformate

B

C

D

A

E

Photoshop

Tagged Image File Format (TIFF)Tagged Image File Format (TIFF)

Dateierweiterung: *.tif oder *.tiff

Relativ vielseitig

Ermöglicht mehrere Bilder in einer Datei

Unterstützt CMYK-Farbraum

Einsatz in Druckereien

Im Web: Verwendung bei hochauflösenden Pressephotos


Ausgabeformate

B

C

D

A

E

Photoshop

Portable Document Format (PDF)Portable Document Format (PDF)

Dateierweiterung: *.pdf

Vektorbasierte Seitenbeschreibungssprache

Integration von Text, Grafiken und Photos

Dokumentschutz möglich

Offener Standard (ISO)

PDF/X in der Druckvorstufe; PDF/A in der Archivierung


Photoshop

… und wie geht es weiter?


… und wie geht es weiter?

B

C

D

A

E

Photoshop

Ich will zu Hause weiter üben und ausprobieren! Testversion herunterladen: www.adobe.com/de/downloads/

Ich brauche Photoshop – aber nur hin und wieder! Auf den Rechnern in den WiWi-CIP-Pools ist Photoshop installiert

Ich will zum Photoshop-Pro werden! Studenten-Version kaufen (ca. 199,- €) z.B. bei www.cobra-shop.de

http://www.adobe.com/de/downloads/

http://www.cobra-shop.de/

Workshop

Vielen Dank fürEure Aufmerksamkeit

Education

Photoshop Workshop