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 richtig vorbereiten [00:55 Std.]


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

... 1.2 ... Arbeitsbereiche in Photoshop einrichten [06:31 Min.]

... 1.3 ... Wichtige Bedienfelder für Webdesigner [07:26 Min.]

... 1.4 ... Lineale und Raster optimal einrichten [03:45 Min.]

... 1.5 ... Die Pinsel-Werkzeuge vorbereiten [07:34 Min.]

... 1.6 ... Photoshop-Ebenen sinnvoll nutzen [08:51 Min.]

... 1.7 ... Smartfilter und Smart-Objekte einsetzen [04:17 Min.]

... 1.8 ... Wichtige Photoshop-Werkzeuge für Webdesigner [06:20 Min.]

... 1.9 ... Ein Configurator-Bedienfeld erstellen [09:34 Min.]



2. Grundlagen des Webdesigns [00:49 Std.]


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

... 2.2 ... Bestandteile moderner Webseiten [03:47 Min.]

... 2.3 ... Die Gestaltgesetze im Überblick [05:09 Min.]

... 2.4 ... Eine kleine Farbenlehre für Webdesigner [08:46 Min.]

... 2.5 ... Webseiten richtig strukturieren [07:23 Min.]

... 2.6 ... Mit Gestaltungsrastern arbeiten [06:24 Min.]

... 2.7 ... Eigene Gestaltungsraster erstellen [10:58 Min.]

... 2.8 ... Design-Trends unter der Lupe [06:22 Min.]



3. Webseiten konzipieren und planen [00:41 Std.]


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

... 3.2 ... Die Zielgruppe eingrenzen [03:29 Min.]

... 3.3 ... Das GIULIA-Prinzip [04:15 Min.]

... 3.4 ... Viewport und Auflösung [07:49 Min.]

... 3.5 ... Navigationskonzepte [11:51 Min.]

... 3.6 ... Webprojekte skizzieren [06:30 Min.]

... 3.7 ... Ein Farbschema erstellen [06:32 Min.]



4. Weblayouts entwerfen und umsetzen [00:31 Std.]


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

... 4.2 ... Das Briefing auswerten [04:31 Min.]

... 4.3 ... Material und Content richtig vorbereiten [05:31 Min.]

... 4.4 ... Die Seitenstruktur planen [07:57 Min.]

... 4.5 ... Das Seiten-Mockup erstellen [05:55 Min.]

... 4.6 ... Das Screendesign umsetzen [06:09 Min.]



5. Muster, Strukturen und Hintergründe [01:18 Std.]


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

... 5.2 ... Layouts mit Linien aufwerten [09:58 Min.]

... 5.3 ... Ansprechende Farbflächen gestalten [10:04 Min.]

... 5.4 ... Metallstrukturen erzeugen [05:46 Min.]

... 5.5 ... Lederstrukturen erstellen [06:06 Min.]

... 5.6 ... Holzstrukturen nachbauen [13:42 Min.]

... 5.7 ... Muster entwerfen und gestalten [13:26 Min.]

... 5.8 ... Bokeh-Hintergründe entwerfen [06:60 Min.]

... 5.9 ... Flexible Vollbildansicht mit CSS [03:45 Min.]

... 5.10 ... Strukturen in Muster umwandeln [04:22 Min.]

... 5.11 ... Oberflächenstrukturen übertragen [03:45 Min.]



6. Webtexte optimal gestalten [00:40 Std.]


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

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

... 6.3 ... Web-Schriften einsetzen [05:14 Min.]

... 6.4 ... Einen Pfadtext gestalten [03:23 Min.]

... 6.5 ... Eigene Textstile entwickeln [04:25 Min.]

... 6.6 ... Letterpress-Texte erstellen mit Photoshop und CSS [06:10 Min.]

... 6.7 ... Gläserne Schrift erzeugen [05:41 Min.]

... 6.8 ... 3D-Texte mit Repoussé [08:35 Min.]



7. Navigationsmenüs entwerfen [00:56 Std.]


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

... 7.2 ... Eigene Schaltflächen entwerfen [12:51 Min.]

... 7.3 ... Verläufe auf Schaltflächen anwenden [07:38 Min.]

... 7.4 ... CSS-Sprites mit Ebenen-Kompositionen [12:44 Min.]

... 7.5 ... CSS-Transitionen für Schaltflächen [04:30 Min.]

... 7.6 ... Transformationen mit CSS3 [03:56 Min.]

... 7.7 ... Eine Navigationsleiste erstellen [14:07 Min.]



8. Icons und Symbole erstellen [01:10 Std.]


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

... 8.2 ... Transparenz erzeugen [09:54 Min.]

... 8.3 ... Spiegeleffekte einsetzen [09:18 Min.]

... 8.4 ... Objektschatten hinzufügen [04:49 Min.]

... 8.5 ... Buntstift-Symbol entwerfen [12:51 Min.]

... 8.6 ... Eine Plakette erzeugen [06:41 Min.]

... 8.7 ... Eine Zierschleife erstellen [03:39 Min.]

... 8.8 ... Ein Bookmark-Label entwerfen [05:33 Min.]

... 8.9 ... Favicons und Touch-Icons [05:42 Min.]

... 8.10 ... Individuelle Icons entwerfen [10:45 Min.]



9. Fotos für das Web aufbereiten [00:49 Std.]


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

... 9.2 ... Die richtigen Bildquellen wählen [07:02 Min.]

... 9.3 ... Bildformat und Bildrichtung [06:18 Min.]

... 9.4 ... Skalieren und Inhalte bewahren [06:07 Min.]

... 9.5 ... Inhaltssensitive Retusche [06:25 Min.]

... 9.6 ... Den Horizont ausrichten [02:50 Min.]

... 9.7 ... Der Goldene Schnitt [05:37 Min.]

... 9.8 ... Der Out-of-Bounds-Effekt [03:25 Min.]

... 9.9 ... Fotoecken simulieren [04:57 Min.]

... 9.10 ... Aktionen & Stapelverarbeitung [06:06 Min.]



10. Webgrafiken richtig ausgeben [00:43 Std.]


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

... 10.2 ... Slices erstellen [17:07 Min.]

... 10.3 ... Die Ausgabeformate [08:15 Min.]

... 10.4 ... Daten komprimieren [06:51 Min.]

... 10.5 ... GIF-Animationen erstellen [06:23 Min.]

... 10.6 ... Zoomify einsetzen [04:15 Min.]



11. CSS-Tricks für Webdesigner [00:34 Std.]


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

... 11.2 ... Nützliche Browser-Plug-ins [07:40 Min.]

... 11.3 ... Mit Webstandards gestalten [06:29 Min.]

... 11.4 ... Semantischen Code erzeugen [04:08 Min.]

... 11.5 ... Flexible Raster mit CSS Media Queries [11:00 Min.]

... 11.6 ... Masken in CSS3 verwenden [04:46 Min.]