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

Webdesign mit Photoshop

Sie lernen die richtige Planung, die Prinzipien guter Benutzbarkeit, das Entwerfen der richtigen Mockups und Grafiken und die Umsetzung in CSS, mit der im Browser auch wirklich alles so aussieht wie gewünscht. Bei Webseiten muss man gestalterisch Kompromisse machen? Mit diesem Vorurteil räumt Jonas Hellwig gründlich auf. Sie werden staunen, welche Möglichkeiten Sie bisher noch gar nicht nutzen. Holen Sie sich in diesem Training Inspirationen und Tipps, die Ihre Seiten ganz nach vorne bringen.

Inhaltsverzeichnis

Photoshop richtig vorbereiten

  • Einleitung
  • Arbeitsbereiche in Photoshop einrichten
  • Wichtige Bedienfelder für Webdesigner
  • Lineale und Raster optimal einrichten
  • Die Pinsel-Werkzeuge vorbereiten
  • Photoshop-Ebenen sinnvoll nutzen
  • Smartfilter und Smart-Objekte einsetzen
  • Wichtige Photoshop-Werkzeuge für Webdesigner
  • Ein Configurator-Bedienfeld erstellen

Grundlagen des Webdesigns

  • Einleitung
  • Bestandteile moderner Webseiten
  • Die Gestaltgesetze im Überblick
  • Eine kleine Farbenlehre für Webdesigner
  • Webseiten richtig strukturieren
  • Mit Gestaltungsrastern arbeiten
  • Eigene Gestaltungsraster erstellen
  • Design-Trends unter der Lupe

Webseiten konzipieren und planen

  • Einleitung
  • Die Zielgruppe eingrenzen
  • Das GIULIA-Prinzip
  • Viewport und Auflösung
  • Navigationskonzepte
  • Webprojekte skizzieren
  • Ein Farbschema erstellen

Weblayouts entwerfen und umsetzen

  • Einleitung
  • Das Briefing auswerten
  • Material und Content richtig vorbereiten
  • Die Seitenstruktur planen
  • Das Seiten-Mockup erstellen
  • Das Screendesign umsetzen

Muster, Strukturen und Hintergründe

  • Einleitung
  • Layouts mit Linien aufwerten
  • Ansprechende Farbflächen gestalten
  • Metallstrukturen erzeugen
  • Lederstrukturen erstellen
  • Holzstrukturen nachbauen
  • Muster entwerfen und gestalten
  • Bokeh-Hintergründe entwerfen
  • Flexible Vollbildansicht mit CSS
  • Strukturen in Muster umwandeln
  • Oberflächenstrukturen übertragen

Webtexte optimal gestalten

  • Einleitung
  • Typografie im modernen Web
  • Web-Schriften einsetzen
  • Einen Pfadtext gestalten
  • Eigene Textstile entwickeln
  • Letterpress-Texte erstellen mit Photoshop und CSS
  • Gläserne Schrift erzeugen
  • 3D-Texte mit Repoussé

Navigationsmenüs entwerfen

  • Einleitung
  • Eigene Schaltflächen entwerfen
  • Verläufe auf Schaltflächen anwenden
  • CSS-Sprites mit Ebenen-Kompositionen
  • CSS-Transitionen für Schaltflächen
  • Transformationen mit CSS3
  • Eine Navigationsleiste erstellen

Icons und Symbole erstellen

  • Einleitung
  • Transparenz erzeugen
  • Spiegeleffekte einsetzen
  • Objektschatten hinzufügen
  • Buntstift-Symbol entwerfen
  • Eine Plakette erzeugen
  • Eine Zierschleife erstellen
  • Ein Bookmark-Label entwerfen
  • Favicons und Touch-Icons
  • Individuelle Icons entwerfen

Fotos für das Web aufbereiten

  • Einleitung
  • Die richtigen Bildquellen wählen
  • Bildformat und Bildrichtung
  • Skalieren und Inhalte bewahren
  • Inhaltssensitive Retusche
  • Den Horizont ausrichten
  • Der Goldene Schnitt
  • Der Out-of-Bounds-Effekt
  • Fotoecken simulieren
  • Aktionen & Stapelverarbeitung

Webgrafiken richtig ausgeben

  • Einleitung
  • Slices erstellen
  • Die Ausgabeformate
  • Daten komprimieren
  • GIF-Animationen erstellen
  • Zoomify einsetzen

CSS-Tricks für Webdesigner

  • Einleitung
  • Nützliche Browser-Plug-ins
  • Mit Webstandards gestalten
  • Semantischen Code erzeugen
  • Flexible Raster mit CSS Media Queries
  • Masken in CSS3 verwenden

Feedback & Ergänzungen – 5 Kommentare

  1. Dominik
    schrieb am 29.03.2011 um 21:32 Uhr:

    Ich bin jetzt mit dem 2 Kapitel durch ich muss sagen bis jetzt wirklich toll, zwischendurch hab ich mal pausen gemacht und hab überlegt das es doch total schwer sein muss immer die passenden Worte zu finden. Es hat sich wirklich sehr gut angehört. Meine Frage liest du das ab oder probt man das davor sehr gut ein? Es hat sich nicht abgelesen angehört und gar nichts also ich würde das glaube ich niemals so gut schaffen wie du.

    Ich kann das Tutorial bis jetzt wirklich jedem empfehlen Anfänger, Fortgeschrittene. Ich möchte aber jetzt noch nicht soviel darüber sagen, daher ich selber erst im 2 Kapitel bin. Eins kann ich aber jetzt schon sagen der Trainer ist super :D.

    Antworten
    • Jonas Hellwig
      schrieb am 30.03.2011 um 14:00 Uhr:

      @Dominik: Schön! Es freut mich, dass es Dir gefällt. Um Deine Frage zu beantworten: Ich hab während der Aufnahmen meist einen Zettel mit Notizen neben mir liegen gehabt damit ich die Grundstruktur vor Augen habe. Ansonsten ist das frei gesprochen.

      Antworten
  2. Matthias
    schrieb am 29.03.2011 um 21:10 Uhr:

    Herzlichen Glückwunsch, ist bestimmt eine tolle Arbeit geworden! Wie ich beim letzten Beitrag schon schrieb, bin ich immer noch von deiner professionellen Betonung begeistert. Nicht dass ich dir das nicht zugetraut hätte, aber ich weiß aus eigener Erfahrung wie schwierig/anstrengend das werden kann. Ich wünsch dir viel Erfolg damit!

    Antworten
  3. Dominik
    schrieb am 29.03.2011 um 14:49 Uhr:

    ist schon bei mir heute Morgen angekommen :D entlich… bis jetzt kann ich aber noch nichts sagen weil ich erst in 1 Stunde aus hab… hab nähmlich gerade 1 Woche lang Praktikum

    Heute Abend werd ich dann dazu was posten ^^

    Antworten
  4. Tobi
    schrieb am 29.03.2011 um 12:15 Uhr:

    Da schau mal einer an! :-)
    Hm … ich habe jetzt das WordPress Buch (wo ich noch nicht über die Einleitung rausgekommen bin *g*) und naja … demnächst ein bisschen Zeit … ich denke da werd ich mir doch mal die DVD anschaffen ;-)

    Viel Erfolg Mr. H.!

    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.