Webdesign mit Photoshop

Jonas Hellwig ist professioneller Webdesigner und Fachbuchautor im Bereich Webdesign. Auf seinem Blog veröffentlicht er aktuelle News und eigene Tutorials zum Thema. In seiner nebenberuflichen Beschäftigung als Freelancer erstellt Jonas Icons, Illustrationen und Interface-Designs, betreut mehrere Blogs und verfasst Tuturials zum Thema Webdesign.

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.]