Einleitung
  • Hallo und herzlich Willkommen! :)
  • Bewertungen und Fragen & Antworten-Bereich
  • Tastaturbefehle für MacOS und Windows - Kurzeinführung
Grundlagenkurs: Das erste Mal mit Photoshop CC
  • Leere Dokumentenvorgaben beim Start von Photoshop
  • Der erste Eindruck der Benutzeroberfläche
  • Werkzeuge selbst kennen lernen und Fehler rückgängig machen
  • Ebenen und Gruppierungen
  • Textwerkzeug und Schriftkantenglättung
  • Schriftarten finden, installieren und einsetzen
  • Schnittmasken und Ebenenmasken kennenlernen
  • Farbkorrektur/Helligkeit/Kontrast innerhalb einer Form und außerhalb anwenden
  • Ebeneneffekte kennenlernen und anwenden
  • Ebeneneffekt auf Text anwenden (Kontur) und Bildelemente mittig positionieren
  • Erste Grafikerstellung: Störer / Badge
  • Übungs-Lösung: Störer mit Zacken erstellen
  • Smartobjects im Detail
  • Weitere Formen kennenlernen: Eine Sprechblase erstellen
  • Originalbildgröße ändern
  • Arbeitsfläche erweitern
  • Verlaufswerkzeug nutzen, Pinselauswahl erweitern und perfekten Himmel zeichnen
Dateien und Bilder richtig speichern
  • Bisherige Komposition / Bildbearbeitung speichern: PSD und TIFF
  • Für Web speichern: JPG bei Bildern mit vielen Farben und hoher Kompression
  • Für Web speichern: Bilder mit transparentem Hintergrund abspeichern
  • Bildteile einer Bildkomposition abspeichern / Slices
Bilder optimieren & manipulieren
  • Kurzer Blick in die Filtergalerie von Photoshop
  • Bild oder bestimmte Ebene horizontal spiegeln
  • Farbe eines Bildelementes ganz einfach ersetzen
  • Augen vergrößern, Mund verkleinern: Das Verflüssigen-Werkzeug
  • Luftbilder wie im Miniaturwunderland: Der Tilt-Shift-Effekt
Bildelemente schnell und professionell freistellen
  • Freistellen mit dem Pfadwerkzeug
  • Freistellen mit dem Schnellauswahl-Werkzeug
MacOS (auch für Windows Nutzer): Weitere Photoshop-Tipps
  • MacOs Vorstellung (auch für Windows User nicht uninteressant)
  • Bildausschnitt dynamisch anpassen
  • Kleine Fotoretouche: Piercing entfernen
  • Gesicht optimieren, verformen, anpassen
  • Pinselhärte und Größe einstellen
  • Farbinspirationen mit Flat-UI Colors
Figuren/Objekte zeichnen mit Photoshop
  • Wir erstellen Eier!
  • Hasenfigur mit dem Formwerkzeug erstellen
Werbebanner mit Photoshop
  • Einleitung: Gestaltung von Werbebannern
  • Die Anzeigengrößen für Werbebanner und Photoshop-Dokument anlegen
  • Werbebanner I
  • Werbebanner I in Photoshop schnell gestalten
  • Werbebanner I etwas optimieren
  • Werbebanner I als GIF-Datei animieren (Lichthupe simulieren)
  • Werbebanner II
  • Werbebanner II: Wir erstellen einen Banner im Elektronikmarkt-Stil
  • Werbebanner II - Produkt hinzufügen, Funkeleffekt & Preisangabe
  • Werbebanner II - Übungsaufgabe
  • Werbebanner II - Lösung (Animation erstellen)
  • Werbebanner II - Als animiertes GIF speichern
Theorie & Vorbereitung: Websites / Landingpages
  • Bildquellen und Inspirationen fürs Webdesign
  • Vor der Gestaltung sollte man selbst Regeln aufsetzen und Fragen beantworten
Gestalte eine Responsive Website im modernen Design
  • Moderne Website gestalten - Infos und Hinweise
  • Dokument für Responsive Webdesign anlegen (Website) / Zeichenflächen kennenlerne
  • Dokument um Farbpalette erweitern I
  • Dokument um Farbpalette erweitern II - Farbgruppe definieren und einfügen
  • Header mit Logo und Navigation gestalten
  • Header um Social Media Icons ergänzen
  • Header gruppieren und großes Teaser-Bild einfügen
  • Willkommenstext in Form eines Kreises platzieren und ausrichten.
  • Design in Bereiche einteilen (Sections) und Headline mit Text gestalten
  • Feature-Bereich mit Bildelement und Feature-Stichpunkten gestalten
  • Feature-Bereich mit Icons abschließen und neuen Bereich mit Headline gestalten
  • Referenzen-Showroom mit 3 Containern erstellen (Schnittmasken oder Ebenenmasken)
  • Feature- und Referenzen-Bereich ordnen und grafischen Button hinzufügen
  • Team-Bereich gestalten
  • Footer-Gestaltung Teil I - Footer-Container festlegen
  • Footer-Gestaltung Teil II - Adresse, Letzte Newsartikel, Navi-Block gestalten
  • Design der Desktop-Ansicht verfeinern und abschließen
  • Mobile Ansicht: Header & Teaser übertragen und anpassen
  • Mobile Ansicht: Features übertragen und anpassen
  • Mobile Ansicht: Showroom
  • Mobile Ansicht: Team-Container und Footer gestalten
  • Desktop-Ansicht: Zeichenfläche für die Gestaltung der Unterseite
  • Desktop-Ansicht: Unterseite > Titelbereich mit Breadcrumb gestalten
  • Desktop-Ansicht: Unterseite > Text- und Bildcontainer + Sidebar mit Kontaktinfos
  • Desktop-Ansicht: Unterseite > Weitere Gestaltungselemente hinzufügen / Formen
  • Desktop Ansicht: Auf Wunsch eine weitere Unterseite gestalten
  • Mobile Ansicht: Unterseite gestalten / Container übernehmen
Gestalte eine erfolgreiche Landingpage
  • Was ist eine Landingpage und wie sieht diese aus?
  • Diese Landingpage werden wir gemeinsam gestalten!
  • Was wird beworben? Bildmaterial, Texte, Infos, Features anfordern.
  • PSD-Datei mit Zeichenflächen
  • Landingpage Bereiche festlegen
  • Header-Gestaltung Teil 1: Box-Korrekturen, Boden und Schattenwurf
  • Header-Gestaltung Teil 2: Produkt hervorheben, Titel & Button hinzufügen
  • Nächster Bereich: Einführungstext mit Produktbild im Anschnitt
  • Nächster Bereich: Produkt-Inhalt / Kursinhalt mit Slideshow präsentieren