Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Webdesign mit Photoshop CS6

Beginnend mit einer gründlichen Konzeption zeigt der Trainer, wie man daraus das finale Design ableitet, die einzelnen Seitenelemente erstellt, benutzerfreundliche Navigationslösungen umsetzt und Text internetgerecht einsetzt. Unterhaltsam führt er durch einen lehrreichen Video-Kurs und führt Konzepte und effiziente Arbeitstechniken vor. Der Anwender erhält dabei wertvolle Profi-Tipps zu Gestaltung, Farbwahl, Positionierung und Typografie und lernt, wie er Hintergründe, Strukturen, Schaltflächen, Transparenzeffekte und Icons erzeugt und diese optimal für das Web aufbereitet. Auch spezielle Designfragen für die Darstellung auf mobilen Endgeräten beantwortet Jonas Hellwig ausführlich.

Trailer & Beispiel-Lektionen

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Inhaltsverzeichnis

Photoshop optimal einrichten

  • Einleitung
  • Die neue Oberfläche von Photoshop CS6
  • Neue Funktionen in Photoshop CS6
  • Wichtige CS6-Konzepte im Überblick
  • Bedienfelder und Werkzeuge für Webdesigner
  • Die Arbeitsumgebung für das Webdesign einrichten

Grundlagen für erfolgreiches Webdesign

  • Einleitung
  • Die Elemente einer modernen Website
  • Websites richtig strukturieren
  • Die Gestaltgesetze anwenden
  • Farben im Webdesign
  • Viewport und Auflösungen
  • Gestaltungsraster nutzen
  • Raster im Responsive Webdesign
  • Gestaltungsraster selbst entwickeln
  • Stilrichtungen und Design-Trends im Web

Websites zielgenau konzipieren

  • Einleitung
  • Die Zielgruppe definieren
  • Erwartungen, Konventionen und häufige Fehler
  • Navigationskonzepte entwickeln
  • Farbkonzepte entwickeln
  • Design im Browser: Photoshop und CSS3
  • Interaktionen, Animationen und dynamische Elemente
  • Design-Konzepte für Mobilgeräte
  • Mockups, Skizzen und Prototypen
  • Ein Projektablauf im Schnelldurchgang

Design-Techniken für das Web

  • Einleitung
  • Pixelgenaues Arbeiten
  • Kanten und Linien verstärken
  • Farbflächen aufwerten
  • Licht und Schatten hinzufügen
  • Rauschen kreativ einsetzen
  • Kreative Übergänge gestalten
  • Plastizität mit Photoshop und CSS3

Navigationselemente gestalten

  • Einleitung
  • Benutzerfreundliche Navigationsmenüs
  • Schaltflächen und Interaktion
  • Navigationsleisten gestalten
  • Registerkarten gestalten
  • Schaltflächen weich einblenden
  • Ebenenkompositionen erstellen
  • Elemente transformieren mit CSS3

Typografie für Websites

  • Einleitung
  • Typografie im modernen Web
  • Webfonts und Webfont-Icons
  • Plastische Texteffekte gestalten
  • Eine Retro-Schrift erstellen
  • Pfadtexte mit Photoshop
  • 3D-Texte mit Photoshop Extended

Muster, Strukturen und Hintergründe

  • Einleitung
  • Muster und Strukturen im Webdesign
  • Muster in Photoshop erstellen
  • Einen Blaupausen-Hintergrund gestalten
  • Skriptbasierte Muster erzeugen mit Photoshop CS6
  • Hintergrundkacheln aus skriptbasierten Mustern
  • Endlosmuster aus Strukturen erstellen
  • Eigene Strukturen erzeugen
  • Eine Pinnwand gestalten
  • Oberflächenstrukturen übertragen

Icons und Schmuckelemente erzeugen

  • Einleitung
  • Realistische Schatten erzeugen
  • Transparenz in Photoshop und CSS3
  • Spiegelungen in Photoshop und CSS3
  • Pixelgenau ein Symbol erstellen
  • Ein Home-Symbol gestalten
  • Ein Award-Banner erstellen
  • Farbband und Badge gestalten
  • Notizzettel und umgeknickte Ecken
  • Animationen aus Einzelbildern
  • Schlüsselbild-Animationen als Video

Fotos optimal einsetzen

  • Einleitung
  • Wo finde ich Fotos?
  • Das neue Freistellungswerkzeug
  • Bildformat und Bildrichtung
  • Skalieren und Inhalte bewahren
  • Inhaltsbasiertes Retuschieren
  • Inhaltsbasiertes Verschieben.
  • Die Unschärfe-Werkzeuge
  • Aktionen und Stapelverarbeitung nutzen

Responsive Webdesign

  • Einleitung
  • Wie funktioniert Responsive Webdesign?
  • Abspecken oder aufblasen?
  • Breakpoints gestalten
  • Flexible Grafiken erstellen
  • Mobile Websites mit CSS3 Media Queries
  • Grafiken für Retina-Displays

Ein Webdesign umsetzen mit HTML5 und CSS3

  • Einleitung
  • Layouts für die Web-Entwicklung vorbereiten
  • Prototypen mit dem Slice-Werkzeug erstellen
  • Grafiken in CSS-Sprites bündeln
  • Die Ausgabeformate
  • Daten komprimieren
  • Das Seitengerüst in HTML5 aufbauen
  • Die Layout-Grafiken einbinden
  • Der Feinschliff mit CSS3 und Media Queries

Kunden-Feedback zu diesem Video-Training

Gerade eben habe ich den letzten Teil des Video-Trainings absolviert – nun möchte ich mal ein Lob loswerden. Ich finde das gesamte Tutorial hervorragend, habe es mit großer Freude »durchgearbeitet« und Vieles dabei gelernt.

Februar 2013, Bernd Cordes

Feedback & Ergänzungen – 4 Kommentare

  1. Florian
    schrieb am 03.08.2012 um 15:02 Uhr:

    Meinen Glückwunsch zur Veröffentlichung.

    Sieht ja vom Inhaltsverzeichnis her nach einem gelungenen Rundumschlag aus, besonders nett finde ich, dass du auch gleich auf Icon-Erstellung und Muster eingehst.

    Antworten
  2. Viktoria
    schrieb am 02.08.2012 um 13:37 Uhr:

    Meine Glückwünsche zur Veröffentlichung! Das Video-Training wird bestimmt genauso hilfreich und informativ wie der Blog sein.

    Antworten
  3. Marcos
    schrieb am 01.08.2012 um 19:54 Uhr:

    Ich habe deine letzte 5 Artikel gesehen, danke für die arbeit! Ich werde bald mein Glück versuchen und mich mit Web Design beschäftigen … Gratulation zu deinem Video Training! :-)

    Antworten
    • Jonas Hellwig
      schrieb am 02.08.2012 um 12:38 Uhr:

      Vielen Dank Marcos!

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.