Bestechend in der Qualität und herausragend im Lernerfolg! spielemagazin.de 2012

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. 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 optimal für das Web aufgereitet. Auch spezielle Designfragen für die Darstellung auf mobilen Endgeräten beantwortet Jonas Hellwig. Das Training besteht aus einzelnen Workshops, in denen der Anwender am Bildschirm Schritt für Schritt verfolgen kann, wie die Grafiken in Photoshop entstehen. Der Clou: Die Testversion von Photoshop CS6 ist auch gleich mit dabei und anhand des mitgelieferten Übungsmaterials kann der Benutzer alle Arbeitsschritte parallel sofort mitmachen.


Aus dem Inhalt:





* Mit Photoshop effizienter arbeiten
* Profi-Tipps für die CSS3-Umsetzung
* Wichtige Gestaltungsgrundlagen lernen
* Web-Projekte planen und umsetzen
* Hintergründe entwerfen und optimieren
* Strukturen und Muster entwerfen
* Wirkungsvolle Web-Texte gestalten
* Eigene Icons und Schaltflächen entwerfen
* Gestaltung für Smartphones und Tablets
* Profi-Tipps für die CSS3-Umsetzung





Das Training hat eine Gesamtspielzeit von 11 Stunden.




Dieses Video-Training ist lauffähig ohne Installation auf folgenden Systemen:

- Windows
- Mac

In jedem Fall brauchen Sie ein DVD-Laufwerk, Lautsprecher und eine Auflösung des Monitors von mindestens 1024 x 768 Pixeln.

1. Photoshop optimal einrichten [00:45 Std.]


... 1.1 ... Einleitung [00:23 Min.]

... 1.2 ... Die neue Oberfläche von Photoshop CS6 [08:37 Min.]

... 1.3 ... Neue Funktionen in Photoshop CS6 [13:26 Min.]

... 1.4 ... Wichtige CS6-Konzepte im Überblick [07:05 Min.]

... 1.5 ... Bedienfelder und Werkzeuge für Webdesigner [09:16 Min.]

... 1.6 ... Die Arbeitsumgebung für das Webdesign einrichten [05:51 Min.]



2. Grundlagen für erfolgreiches Webdesign [01:10 Std.]


... 2.1 ... Einleitung [00:28 Min.]

... 2.2 ... Die Elemente einer modernen Website [10:21 Min.]

... 2.3 ... Websites richtig strukturieren [10:39 Min.]

... 2.4 ... Die Gestaltgesetze anwenden [05:49 Min.]

... 2.5 ... Farben im Webdesign [05:23 Min.]

... 2.6 ... Viewport und Auflösungen [08:08 Min.]

... 2.7 ... Gestaltungsraster nutzen [09:44 Min.]

... 2.8 ... Raster im Responsive Webdesign [05:53 Min.]

... 2.9 ... Gestaltungsraster selbst entwickeln [06:24 Min.]

... 2.10 ... Stilrichtungen und Design-Trends im Web [06:48 Min.]



3. Websites zielgenau konzipieren [01:18 Std.]


... 3.1 ... Einleitung [00:29 Min.]

... 3.2 ... Die Zielgruppe definieren [13:28 Min.]

... 3.3 ... Erwartungen, Konventionen und häufige Fehler [05:31 Min.]

... 3.4 ... Navigationskonzepte entwickeln [12:38 Min.]

... 3.5 ... Farbkonzepte entwickeln [11:48 Min.]

... 3.6 ... Design im Browser: Photoshop und CSS3 [11:55 Min.]

... 3.7 ... Interaktionen, Animationen und dynamische Elemente [06:28 Min.]

... 3.8 ... Design-Konzepte für Mobilgeräte [04:09 Min.]

... 3.9 ... Mockups, Skizzen und Prototypen [06:34 Min.]

... 3.10 ... Ein Projektablauf im Schnelldurchgang [04:37 Min.]



4. Design-Techniken für das Web [01:07 Std.]


... 4.1 ... Einleitung [00:17 Min.]

... 4.2 ... Pixelgenaues Arbeiten [07:13 Min.]

... 4.3 ... Kanten und Linien verstärken [07:05 Min.]

... 4.4 ... Farbflächen aufwerten [10:33 Min.]

... 4.5 ... Licht und Schatten hinzufügen [13:42 Min.]

... 4.6 ... Rauschen kreativ einsetzen [08:35 Min.]

... 4.7 ... Kreative Übergänge gestalten [12:59 Min.]

... 4.8 ... Plastizität mit Photoshop und CSS3 [06:38 Min.]



5. Navigationselemente gestalten [00:56 Std.]


... 5.1 ... Einleitung [00:22 Min.]

... 5.2 ... Benutzerfreundliche Navigationsmenüs [06:25 Min.]

... 5.3 ... Schaltflächen und Interaktion [12:00 Min.]

... 5.4 ... Navigationsleisten gestalten [13:60 Min.]

... 5.5 ... Registerkarten gestalten [05:25 Min.]

... 5.6 ... Schaltflächen weich einblenden [07:36 Min.]

... 5.7 ... Ebenenkompositionen erstellen [04:47 Min.]

... 5.8 ... Elemente transformieren mit CSS3 [05:40 Min.]



6. Typografie für Websites [00:48 Std.]


... 6.1 ... Einleitung [00:22 Min.]

... 6.2 ... Typografie im modernen Web [05:48 Min.]

... 6.3 ... Webfonts und Webfont-Icons [04:60 Min.]

... 6.4 ... Plastische Texteffekte gestalten [12:39 Min.]

... 6.5 ... Eine Retro-Schrift erstellen [10:13 Min.]

... 6.6 ... Pfadtexte mit Photoshop [05:42 Min.]

... 6.7 ... 3D-Texte mit Photoshop Extended [08:26 Min.]



7. Muster, Strukturen und Hintergründe [01:03 Std.]


... 7.1 ... Einleitung [00:27 Min.]

... 7.2 ... Muster und Strukturen im Webdesign [07:52 Min.]

... 7.3 ... Muster in Photoshop erstellen [03:14 Min.]

... 7.4 ... Einen Blaupausen-Hintergrund gestalten [10:36 Min.]

... 7.5 ... Skriptbasierte Muster erzeugen mit Photoshop CS6 [07:41 Min.]

... 7.6 ... Hintergrundkacheln aus skriptbasierten Mustern [05:31 Min.]

... 7.7 ... Endlosmuster aus Strukturen erstellen [06:15 Min.]

... 7.8 ... Eigene Strukturen erzeugen [07:40 Min.]

... 7.9 ... Eine Pinnwand gestalten [10:31 Min.]

... 7.10 ... Oberflächenstrukturen übertragen [03:37 Min.]



8. Icons und Schmuckelemente erzeugen [01:37 Std.]


... 8.1 ... Einleitung [00:19 Min.]

... 8.2 ... Realistische Schatten erzeugen [14:34 Min.]

... 8.3 ... Transparenz in Photoshop und CSS3 [09:31 Min.]

... 8.4 ... Spiegelungen in Photoshop und CSS3 [10:38 Min.]

... 8.5 ... Pixelgenau ein Symbol erstellen [08:53 Min.]

... 8.6 ... Ein Home-Symbol gestalten [10:14 Min.]

... 8.7 ... Ein Award-Banner erstellen [14:46 Min.]

... 8.8 ... Farbband und Badge gestalten [05:22 Min.]

... 8.9 ... Notizzettel und umgeknickte Ecken [10:27 Min.]

... 8.10 ... Animationen aus Einzelbildern [08:55 Min.]

... 8.11 ... Schlüsselbild-Animationen als Video [03:29 Min.]



9. Fotos optimal einsetzen [00:52 Std.]


... 9.1 ... Einleitung [00:20 Min.]

... 9.2 ... Wo finde ich Fotos? [06:53 Min.]

... 9.3 ... Das neue Freistellungswerkzeug [06:52 Min.]

... 9.4 ... Bildformat und Bildrichtung [06:08 Min.]

... 9.5 ... Skalieren und Inhalte bewahren [05:43 Min.]

... 9.6 ... Inhaltsbasiertes Retuschieren [05:44 Min.]

... 9.7 ... Inhaltsbasiertes Verschieben [03:27 Min.]

... 9.8 ... Die Unschärfe-Werkzeuge [06:34 Min.]

... 9.9 ... Aktionen und Stapelverarbeitung nutzen [10:04 Min.]



10. Responsive Webdesign [00:39 Std.]


... 10.1 ... Einleitung [00:27 Min.]

... 10.2 ... Wie funktioniert Responsive Webdesign? [04:54 Min.]

... 10.3 ... Abspecken oder aufblasen? [03:32 Min.]

... 10.4 ... Breakpoints gestalten [08:04 Min.]

... 10.5 ... Flexible Grafiken erstellen [07:05 Min.]

... 10.6 ... Mobile Websites mit CSS3 Media Queries [08:24 Min.]

... 10.7 ... Grafiken für Retina-Displays [06:05 Min.]



11. Ein Webdesign umsetzen mit HTML5 und CSS3 [01:00 Std.]


... 11.1 ... Einleitung [00:22 Min.]

... 11.2 ... Layouts für die Web-Entwicklung vorbereiten [06:23 Min.]

... 11.3 ... Prototypen mit dem Slice-Werkzeug erstellen [10:59 Min.]

... 11.4 ... Grafiken in CSS-Sprites bündeln [11:43 Min.]

... 11.5 ... Die Ausgabeformate [07:41 Min.]

... 11.6 ... Daten komprimieren [03:51 Min.]

... 11.7 ... Das Seitengerüst in HTML5 aufbauen [05:40 Min.]

... 11.8 ... Die Layout-Grafiken einbinden [08:08 Min.]

... 11.9 ... Der Feinschliff mit CSS3 und Media Queries [05:34 Min.]