Webdesign mit Photoshop CS6
In diesem Video-Training zeigt der bekannte Designer Jonas Hellwig, wie man mit Photoshop CS6 die typischen Gestaltungsaufgaben für das Webdesign optimal löst. Das Training besteht aus einzelnen Workshops, in denen der Anwender am Bildschirm Schritt für Schritt verfolgen kann, wie die Grafiken in Photoshop entstehen.
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
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
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
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.
Meine Glückwünsche zur Veröffentlichung! Das Video-Training wird bestimmt genauso hilfreich und informativ wie der Blog sein.
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! :-)
Vielen Dank Marcos!