Post on 24-May-2015
description
transcript
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Photoshop
Erste Schritte
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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.)
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Photoshop
B
C
D
A
E
Erste Schritte
PrintPrint WebWeb
300 dpi 72 dpi
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Photoshop
B
C
D
A
E
Erste Schritte
PrintPrint WebWeb
CMYK RGB
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Photoshop
B
C
D
A
E
Erste Schritte
CyanMagentaYellow
Key
CyanMagentaYellow
Key
RedGreenBlue
RedGreenBlue
RGBCMYK
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Photoshop
Fotonachbearbeitung
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Fotonachbearbeitung
B
C
D
A
E
Photoshop
Foto um 90 Grad drehen:
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Fotonachbearbeitung
B
C
D
A
E
Photoshop
Foto verkleinern:
Höhe ca. 250 Pixel
Proportionen erhalten
Bild neu berechnen mit „bikubisch schärfer“
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Fotonachbearbeitung
B
C
D
A
E
Photoshop
Helligkeit / Kontrast verbessern:
Helligkeit: 20 Prozent verringern
Kontrast:20 Prozent erhöhen
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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.
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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)
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Fotonachbearbeitung
B
C
D
A
E
Photoshop
Zwischenergebnis:
+
+
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Photoshop
Arbeiten mit Ebenen
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Arbeiten mit Ebenen
D
A
E
Photoshop
Ebenenfenster öffnen:
Fenster EbenenB
C
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Arbeiten mit Ebenen
D
A
E
Photoshop
Das Ebenenfenster
B
C Ebenenname
DeckkraftFlächeEbene ein-/
ausblenden
LöschenNeue EbeneEbeneneffekteFüllebene/Fülleffekte
Fixieren
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Arbeiten mit Ebenen
D
A
E
Photoshop
Neue Ebene einfügen:
Ebene -> Neu -> Ebene…
B
C
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Arbeiten mit Ebenen
D
A
E
Photoshop
„Kürbis.jpg“ und das MuK-Logo in leere Ebene einfügen:
B
C
Verschieben-Werkzeug
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Arbeiten mit Ebenen
D
A
E
Photoshop
Ebene mit Farbe füllen:
B
C
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Arbeiten mit Ebenen
D
A
E
Photoshop
Zwischenergebnis:
B
C
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Photoshop
Gestaltung von Text und Grafik
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Gestaltung von Text und Grafik
D
A
E
Photoshop
Text einfügen:
B
C
Textwerkzeug
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Gestaltung von Text und Grafik
D
A
E
Photoshop
Text bearbeiten:
B
C TextausrichtungSchriftart GlättungSchriftgrößeSchriftschnitt Text ausrichtenSchriftfarbeText krümmenZeichenpalette
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Gestaltung von Text und Grafik
D
A
E
Photoshop
Text bearbeiten:
Fenster -> Zeichen
B
CSchriftgröße
Skalierung HöheHochstellen
Zeilenabstand
Zeichenabstand
Skalierung BreiteSchriftfarbe
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Gestaltung von Text und Grafik
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Gestaltung von Text und Grafik
B
C
D
A
E
Photoshop
Zwischenergebnis:
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Gestaltung von Text und Grafik
B
C
D
A
E
Photoshop
Text an Ebenen ausrichten:
-> Verschieben – Werkzeug
-> Ebenen verbinden
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Gestaltung von Text und Grafik
B
C
D
A
E
Photoshop
Text an Ebenen ausrichten:
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Gestaltung von Text und Grafik
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Gestaltung von Text und Grafik
B
C
D
A
E
Photoshop
Zwischenergebnis:
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Gestaltung von Text und Grafik
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Gestaltung von Text und Grafik
B
C
D
A
E
Photoshop
Fertig!
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Photoshop
Ausgabeformate
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Ausgabeformate
B
C
D
A
E
Photoshop
Formate im ÜberblickFormate im Überblick
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
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
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
Photoshop
… und wie geht es weiter?
Angster | Bitzer | Blessing | Ehrler | Eitel | Meyer | Link | Rigler | Schnurr | Specht | Studniberg
… 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
Workshop
Vielen Dank fürEure Aufmerksamkeit