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

Webdesign mit Photoshop CS6 und CSS3

Das Internet stellt ganz eigene Anforderungen an Bilder und Grafiken. Dieses Buch zeigt am Beispiel in sich abgeschlossener Workshops und am Beispiel eines konkreten Webprojektes, wie Sie mit Photoshop CS6 unterschiedlichste Grafikelemente entwerfen, bearbeiten und last, but not least veröffentlichen.

Inhaltsverzeichnis

Photoshop effizient konfigurieren

  • Voreinstellungen festlegen
  • Werkzeuge und ihre Funktionen
  • Arbeitsbereiche einrichten
  • Bridge und Mini Bridge
  • Neue Dokumente einrichten
  • Non-destruktive Arbeitsweise
  • Photoshop und CSS3

Briefing und Projektplanung

  • Wahrnehmung
  • Zielgruppe
  • Konventionen

Farben gekonnt einsetzen

  • Mögliche Farbprobleme
  • Farbe und Wirkung
  • Farbkontraste einsetzen
  • Durchdachte Farbkonzepte
  • Hilfreiche Tools im Umgang mit Farben

Layoutplanung und Scribble

  • Größen im Webdesign
  • Seitenaufbau
  • Layouttypen
  • Gestaltungsraster
  • Multi­Screen­Design
  • Grid­Systeme, Frameworks und Tools
  • Gestaltungsraster des Beispielprojekts
  • Das Projekt skizzieren
  • Mock­ups und Wireframes
  • Style Tiles
  • Prototypen

Flächen und Linien aufwerten

  • Farbflächen
  • White Space
  • Linien und Konturen
  • Transparenz
  • Farbflächen verbinden

Schatten und Spiegelung

  • Spiegelungen und Schatten bei 2­D­-Objekten
  • Spiegelungen und Schatten bei 3­D­-Objekten

Muster, Strukturen, Brushes

  • Muster
  • Grafiken mit CSS kacheln
  • Kostenlose Pattern im Netz
  • Pattern mit CSS3
  • Skriptbasierte Muster in Photoshop CS6
  • Strukturen
  • Photoshop­Brushes
  • Eigene Brushes

Navigationskonzepte umsetzen

  • Navigationsstrukturen
  • Darstellungsformen
  • Navigation platzieren
  • Navigation gestalten
  • Interaktionen kennzeichnen
  • Navigationsmuster im Responsive Design

Texte attraktiv gestalten

  • Typografie im Internet

Fotos einsetzen und optimieren

  • Nach Fotos googeln?
  • Bedingungen der CC­Lizenz
  • Fotos aus einem Stock­Archiv
  • Bildausschnitt und ­ausrichtung
  • Geeignete Bildformate festlegen
  • Bilder mit Bedacht spiegeln
  • Bilder per HTML5 einbinden
  • Bilder fürs Web aufbereiten

Illustrationen, Icons, Animationen

  • Zierelemente für mehr Atmosphäre
  • Icons
  • Favicons
  • Apple Touch Icon
  • Webfont­Icons
  • Animationen erstellen

Grafiken fürs Web optimieren

  • Der »Für Web speichern«­Dialog
  • Dateiformate im Web
  • Grafiken maximal komprimieren
  • Slices
  • CSS­Sprites
  • Layout für die Webentwicklung vorbereiten

Feedback & Ergänzungen – 9 Kommentare

  1. giovanni
    schrieb am 30.09.2013 um 23:29 Uhr:

    Hallo Jonas,

    ich kann mich gerade echt nicht entscheiden welches Projekt ich von dir holen soll :/….Die Entscheidung liegt zwischen deinem neuen Buch und der Galileo DVD „Webdesign mit Photoshop CS6 – Das Praxis-Training“. Würdest Du mir eher das Buch empfehlen oder die Video DVD. Hat die Video DVD quasi den gleichen Inhalt wie das Buch?

    LG Giovanni

    Antworten
    • Jonas Hellwig
      schrieb am 01.10.2013 um 07:52 Uhr:

      Hallo Giovanni,

      die Inhalte sind nicht identisch, gehen aber grundsätzlich in die gleiche Richtung. Einige Lektionen tauchen in ähnlicher Form auf.
      Du solltest die Entscheidung vom Medium abhängig machen. Kannst du besser mit Videos arbeiten oder besser mit einem Buch? Wenn du zwei Monitore hast, ist das DVD-Training sehr praktisch. Dann kannst du das Video auf einem Bildschirm laufen lassen und parallel am anderen Monitor mitarbeiten.

      Antworten
      • Giovanni
        schrieb am 01.10.2013 um 13:53 Uhr:

        Hallo Jonas!

        Vielen Dank für deine Antwort. Also ich bin doch schon eher der *praxisorientierte* Typ, der gleich mitacht und nicht so der *buchwälzer* Typ. Dann fällt mir die Wahl ja jetzt nicht mehr schwer. Danke nochmal

  2. Patrick
    schrieb am 29.08.2013 um 15:58 Uhr:

    Hallo Jonas im buch wird immer von Beispielen geredet. Zum Beispiel Beispielmaterial /Kontaste an Kanten erhöhen/index.html

    Ich habe die Datein von Franzi geladen finde dies dort aber nicht

    kannst du mir helfen.

    Gruss Patrick

    Antworten
    • Jonas Hellwig
      schrieb am 01.09.2013 um 17:17 Uhr:

      Hallo Patrick,

      ich habe dir einen Link zu den Beispielmaterialien per E-Mail gesendet und kümmere mich darum, dass Franzis den Download korrigiert. Vielen Dank für die Info und viel Erfolg mit dem Buch!

      Antworten
  3. Daniel
    schrieb am 19.06.2013 um 13:23 Uhr:

    Photoshop cs6, da ich in nöächster zeit auf die neue version umsteigen möchte

    Antworten
  4. Florian
    schrieb am 10.05.2013 um 14:05 Uhr:

    Hallo Jonas,
    mir gefallen deine Produkte immer sehr gut und ich kann gut mit ihnen lernen, sei es jetzt als Video oder geschrieben. Meine Frage zu diesem Buch wäre ob deine Vorgehensweisen auch auf PS CS 5.5 anwendbar sind? Kann man hier das Buch zu großen Teilen verwenden oder ist vieles nur mit PS CS 6 möglich?
    Einen schönen Tag
    Florian

    Antworten
    • Jonas Hellwig
      schrieb am 10.05.2013 um 14:32 Uhr:

      Hallo Florian,

      der überwältigende Großteil lässt sich auch mit älteren Photoshop-Versionen umsetzen. Es geht bei den meisten Workshops um bestimmte Techniken und Arbeitsabläufe, nur selten um ganz spezielle Funktionen. Nicht möglich sind natürlich alle Arbeiten mit Vektoren und Absatzformaten. Die Vektoren nutze ich ziemlich häufig, allerdings lässt sich das Vektor-Werkzeug in CS5 durch das Pfad/Form-Werkzeug ersetzen.

      Antworten
      • Florian
        schrieb am 16.05.2013 um 09:55 Uhr:

        Hallo Jonas,
        danke für die Info.

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.