Einleitung
  • Learn-Sheet: Kursübersicht - Empfohlene und mögliche Kursreihenfolgen
  • Infos über die Adobe Creative Cloud: 7 Tage Testversion / Sparmöglichkeiten
Benötigte Software
  • [HTML & CSS]: Benötigte Software installieren
  • [Design]: Software installieren,Photoshop CC, Illustrator CC und optional XD CC
Einführung in HTML & CSS
  • [HTML & CSS]: Kursmaterialien
  • [HTML & CSS]: Erste Schritte mit HTML
  • [HTML & CSS]: Ein weiteres Tag + Aufgabe
  • [HTML & CSS]: Weitere Tags und deren semantische Bedeutung
  • [HTML & CSS]: Überschriften in HTML
  • [HTML & CSS]: Tags ineinander verschachteln
  • [HTML & CSS]: Das HTML-Grundgerüst
  • [HTML & CSS]: Crashkurs Umlaute
  • [HTML & CSS]: Kommentare
  • [HTML & CSS]: Leerzeichen im HTML-Code
  • [HTML & CSS]: Seiten verlinken (1)
  • [HTML & CSS]: Seiten verlinken (2)
[HTML & CSS]: Was ist CSS?
  • [HTML & CSS]: Kursmaterialien für diesen Abschnitt
  • [HTML & CSS]: Einführung in CSS
  • [HTML & CSS]: Elemente ansteuern
  • [HTML & CSS]: Vorstellung: Die Web-Entwickler-Tools
  • [HTML & CSS]: Elemente ansteuern (2)
  • [HTML & CSS]: Warum benötigen wir überhaupt so viele CSS-Selektoren?
  • [HTML & CSS]: Verschachtelte CSS-Selektoren
  • [HTML & CSS]: Expertenwissen, Spezifität von CSS-Selektoren
Weitere Schritte mit CSS
  • [HTML & CSS]: Kursmaterialien
  • [HTML & CSS]: Inline- vs. Block-Elemente
  • [HTML & CSS]: Höhe und Breite von Elementen
  • [HTML & CSS]: Margin und Padding
  • [HTML & CSS]: Das -Element
  • [HTML & CSS]: Schriften in CSS (1)
  • [HTML & CSS]: Schriften in CSS (2)
  • [HTML & CSS]: Farben in CSS (1)
  • [HTML & CSS]: Farben in CSS (2)
  • [HTML & CSS]: CSS in externer Datei
  • [HTML & CSS]: Webfonts einbinden
  • [HTML & CSS]: Mehrere Klassen in einem Element / Selektor
Weitere HTML & CSS - Grundlagen
  • [HTML & CSS]: Kursmaterialien
  • [HTML & CSS]: Der Hover-Effekt
  • [HTML & CSS]: Aufgabe: Button bauen
  • [HTML & CSS]: Button bauen (Musterlösung)
  • [HTML & CSS]: Bilder einbinden ()
  • [HTML & CSS]: Was ist ein Inline-Block-Element?
  • [HTML & CSS]: Bilder und Textfluss
  • [HTML & CSS]: Bilder einbinden (als background-image)
  • [HTML & CSS]: Bild als Hintergrundbild der Webseite verwenden
  • [HTML & CSS]: Schicke Farbverläufe: CSS3-Gradients
  • [HTML & CSS]: Listen in HTML
  • [HTML & CSS]: Tabellen in HTML
  • [HTML & CSS]: Tabellen mit CSS stylen
[Photoshop CC]: Photoshop für Webdesigner mit Grundlagen
  • [Design]: Hinweis zu den Tastaturbefehlen (keine Panik)
  • Der erste Start von Photoshop CC
  • Dokumentenvorgaben / Neues Dokument erstellen / Zeichenfläche für mobiles Design
  • Die vielleicht wichtigste Lektion: Projekt/Komposition als PSD speichern
  • Werkzeuge, Arbeitsbereiche und Fenster
  • Lineale und Hilfslinien nutzen und einsetzen
  • Werkzeuge ausprobieren - ein sehr grober Überblick (Details im Laufe des Kurses)
  • Ebenen verstehen, nutzen, erstellen, löschen und gruppieren
  • Fehler schnell und schrittweise rückgängig machen und das Protokollfenster
  • Elemente / Formen richtig ausrichten bzw. zentrieren
  • Textwerkzeug, Schriftkantenglättung und Textzeichen-Einstellungen
  • Zusätzliche Schrift / Font installieren und einsetzen
  • Ebenenstile auf Formen einsetzen: Störer erstellen
  • Ebenenstil kopieren und auf andere Formen anwenden
  • Smartobjects nutzen um Ausgangsqualitäten bei Bildern und Grafiken beizubehalten
  • Schnittmaske und Ebenenmaske kennenlernen
  • Kreisrunde Fotos mit Schnitt- oder Ebenenmaske erstellen
  • Wir zeichnen Wolken. Mit dem Verlaufswerkzeug und neuem Pinsel
  • Der Unterschied der Bildgröße und Arbeitsflächengröße
  • Weitere Formen zeichnen: Sprechblase mit Text
  • Richtig und gezielt in die aktuelle Arbeits-/Zeichenfläche rein- und raus zoomen
  • Bild farblich bearbeiten: Helligkeit, Kontrast, Farbton & Sättigung
  • Buttons mit Glanz erstellen und Farben mittels Farbfilter bequem ändern
  • Farbeigenschaften und Ebeneneffekte auf andere Formen anwenden
  • Wir erstellen einen zackigen Störer (Badge) mit dem Polygonwerkzeug
  • Moderne Farbpaletten / Farbinspirationen im Web
  • Pinsel: Härte und Größe mit Tastenkombination ändern
  • Pinsel-Einstellungen mit Rechtsklick öffnen
  • Bilder für Web optimiert speichern: Welches Dateiformat ist das Richtige?
  • Einzelne Elemente mit Slices aus einem Dokument heraus optimiert abspeichern
  • Einzelnen Slice eines Elementes nachträglich editieren
  • Freistellen mit dem Zeichenstift-Werkzeug
  • Freistellen mit der Schnellauswahl und Motiv-Maskierung
  • Freistellen mit dem Zauberstab (Nicht immer der optimalste Weg!)
  • Auswahlwerkzeuge kurz vorgestellt und ausprobiert
  • Freistellungswerkzeug: Bild zuschneiden und neu speichern
  • Stempelwerkzeug und Pinsel: Piercing aus Nase entfernen
  • Objekte aus Bild automatisiert entfernen
  • Filter: Verflüssigen - So verändert ihr in 3min ein Gesicht (Augen / Gesicht)
  • Werbebanner gestalten
  • Gängige Bannergrößen: Ein Überblick
  • Werbebanner Dokument anlegen (Zeichenflächen nutzen)
  • Werbebanner Dokument: Zeichenflächengröße nachträglich anpassen
  • [Werbebanner 300x250px gestalten: Teil 1 (Bilddownload und Schrift installieren)