Produktbeschreibung

Die Basis für erfolgreiche Websites ist attraktives und nutzerfreundliches Design. Klare Navigation, stimmige Farben, verständliche Icons und lesbare Texte sorgen dafür, dass sich Besucher auf einer Website wohlfühlen. Und Adobe Photoshop ist dabei das zentrale Werkzeug. Dieses Buch zeigt, wie Sie mit Photoshop Webprojekte entwerfen, Gestaltungs-, Navigations- und Farbkonzepte erstellen und diese mit Backgrounds, Buttons, Icons und anderen Grafikelementen gezielt umsetzen.

Anhand von mehr als 50 Workshops und einem konkreten Webdesign-Projekt lernen Sie, wie Sie die wichtigsten Grafikobjekte mit Photoshop CS4 entwerfen und erzeugen. Autor Jonas Hellwig liefert dabei nicht nur kreativen Input, sondern auch die wichtigsten technischen Hintergründe, wie die Umsetzung des Layouts in XHTML, CSS oder als WordPress-Theme. Dabei spielt es keine Rolle, ob Sie lieber mit Windows oder Mac OS X arbeiten.

Inhaltsverzeichnis

Voreinstellungen

  • Allgemein
  • Benutzeroberfläche
  • Dateihandhabung
  • Leistung
  • Zeigerdarstellung
  • Transparenz/Farbumfang-Warnung
  • Maßeinheiten & Lineale
  • Hilfslinien, Raster und Slices
  • Zusatzmodule
  • Text

Werkzeuge

  • Alle Werkzeuge im Überblick

Bedienfelder

  • Alle Bedienfelder im Überblick

Arbeitsbereiche

  • Anordnen
  • Standard-Arbeitsbereiche

Wahrnehmung

  • Content und Funktionalität
  • Gestaltgesetze

Zielgruppe

  • Soziodemografische Merkmale
  • Geografische Merkmale
  • Soziale Zielgruppendefinition
  • Psychologische Merkmale
  • Buchprojekt: Zielgruppe

Konventionen

  • GIULIA-Prinzip

Farben

  • Farbmischung
  • Farben im Web
  • Farbwirkungen
  • Farbkontraste
  • Gefahren im Umgang mit Farben
  • Farbkonzepte
  • Workshop: Farbkonzept manuell entwickeln
  • Workshop: Farbkonzept mit dem Kuler
  • Workshop: Farbkonzept aus Bildquelle entwickeln
  • Buchprojekt: Farbkonzept festlegen

Größen im Webdesign

  • Monitorauflösung
  • Viewport

Webdesign-Trends

  • Retro & Vintage
  • Hand-Drawing
  • Web 2.0
  • Grunge

Scribble

  • Buchprojekt: Scribble

Gestaltungsraster

  • Fixed- versus Fluid-Layouts
  • Ausrichtung
  • Symmetrie und Asymmetrie
  • Gleichgewicht
  • Der Goldene Schnitt
  • Die Drittelregel
  • Full-Single-Websites
  • Workshop: Gestaltungsraster entwickeln
  • Grid-Systeme
  • Buchprojekt: Gestaltungsraster

Flächen und Linien

  • White Space
  • Linien
  • Organische Formen
  • 3-D-Linien
  • Workshop: Linien mit Verlauf aufwerten
  • Workshop: Gepunktete Linie mit Schere
  • Workshop: Kontur mit einem Muster füllen
  • Workshop: Konkave und konvexe Linien
  • Workshop: Farbflächen aufwerten
  • Workshop: Outlines
  • Buchprojekt: Flächen und Linien

Transparenz

  • Workshop: Semitransparentes Overlay

Schatten und Spiegelung

  • Spiegelungen bei 2-D-Objekten
  • Schatten bei 2-D-Objekten
  • Workshop: Schatten
  • Workshop: Wet-Floor-Effekt

Pattern

  • Workshop: Scanlines
  • Stripe-Generator
  • Workshop: Karbon
  • Free Pattern
  • Patterns mit CSS

Strukturen

  • Workshop: Holzstruktur
  • Workshop: Gebürstetes Metall
  • Workshop: Samt
  • Workshop: Felsen
  • Workshop: Textur an Oberfläche anpassen
  • Workshop: Sich wiederholende Strukturen erstellen
  • Buchprojekt: Strukturen

Brushes

  • Photoshop-Brushes
  • Externe Brushes
  • Workshop: Brushes erstellen
  • Pinsel exportieren

Navigation

  • Navigationsstrukturen
  • Navigationskonzepte umsetzen
  • Navigation optimal platzieren
  • Navigationselemente gestalten
  • Icons und Piktogramme
  • „Speaking“ Navigation
  • Farbleitsysteme einsetzen
  • Interaktionen kennzeichnen
  • Workshop: Moderner Button
  • Workshop: Aqua-Button
  • Workshop: Metall-Button
  • Workshop: Aero-Button
  • Workshop: Candybar-Navigation
  • Workshop: Tab-Navigation
  • Workshop: Navigation mit Suchfeld
  • Buchprojekt: Navigation

Typografie im Internet

  • Schriftarten
  • Content-Fonts
  • Schmuckschriften
  • Serif oder Sans Serif?
  • Schriftgrößen
  • Konsultationsgrößen
  • Pixelfonts
  • Lesegrößen
  • Schaugrößen
  • Schriftgrößen im Web
  • Zeilenlänge, Zeilenabstand und Absätze
  • Zeilenlänge
  • Zeilenabstand
  • Textausrichtung und Silbentrennung
  • Textauszeichnungen
  • Typografie und Farbe
  • Links
  • Design von Textobjekten
  • Schriftglättung: Vor- und Nachteile
  • Workshop: Text auf Pfad
  • Workshop: Liegender 3-D-Text
  • Workshop: Letterpress-Texte
  • Workshop: Shade-Text
  • Workshop: Chrome-Text
  • Workshop: Text aus Glas
  • Workshop: Text aus Gold
  • Buchprojekt: Schriftwahl

Fotos im Internet

  • Bilder googeln?
  • Legale Bildquellen
  • Bildauswahl
  • Bildausschnitt und -ausrichtung
  • Bildformate
  • Bildspiegelungen
  • Thumbnails
  • Alt-Attribute
  • Fotos fürs Web aufbereiten
  • Workshop: Horizont ausrichten
  • Workshop: Fotos altern lassen
  • Workshop: Bildelemente ausbrechen lassen
  • Workshop: Fotoecke komplett umbiegen
  • Workshop: Skalieren und Inhalt bewahren
  • Workshop: Verträumte Fotos
  • Buchprojekt: Fotos

Zierelemente

  • Workshop: Glanzstern
  • Workshop: Post-it
  • Workshop: Tesafilm
  • Workshop: Badge
  • Workshop: Sticker
  • Buchprojekt: Zierelemente

Icons

  • Workshop: Favicon
  • Workshop: Warning-Icon
  • Workshop: Kalender-Icon
  • Workshop: Lupen-Icon
  • Buchprojekt: Icons

Content-Design

  • Text- und Bildinhalte
  • Homepage versus Website
  • Buchprojekt: Content-Design
  • Details

Grafiken für Ausgabe optimieren

  • Für Web und Geräte speichern
  • Ausgabeeinstellungen vergleichen
  • Werkzeuge
  • Device Central
  • Vorschau
  • Vorschau und Metadaten
  • Bildgröße
  • Dateiformate im Web
  • GIF (Graphics Interchange Format)
  • GIF-Grafiken für das Web optimieren
  • JPG/JPEG (Joint Photographic Expert Group)
  • JPEG-Grafiken für das Web optimieren
  • PNG-8 (Portable Network Graphics)
  • PNG-24
  • PNG-24 für das Web optimieren

Animation

  • Gif-Animation

HTML-Ausgabe

  • Slices
  • HTML-Ausgabe mit Photoshop
  • Alternative zu Slices
  • Workshop: Zoomify

Zusatzmodule

  • Web-Fotogalerie

Buchprojekt: Coding

  • Grundaufbau
  • Hintergrund
  • Header
  • Logo und Slogan
  • Navigation
  • Content
  • Sidebar
  • Footer
  • Content
  • Dateiupload

Buchprojekt: WordPress

  • WordPress (lokal) installieren
  • Theme Basics
  • WordPress-Theme erstellen
  • Theme testen
  • Seiten anlegen und verwalten
  • Kategorien und Artikel anlegen und verwalten
  • Navigation anpassen
  • Startseite festlegen

Diskussion zu diesem Produkt

  1. con
    schrieb am 07.11.2009 um 23:07 Uhr:

    HallO! Heute nachmittag fand ich Dein Buch im Regal und bin begeistert!Eigentlich von jedem Kapitel, aber am meisten von dem Bereich der „WordPress“ aufschlüsselt.
    Toll!
    Da ich mich unter anderem mit diesem Bereich zu Zeit beschäftige, kann ich mich für Dein Buch nur bedanken!!
    In dem Zusammenhang wäre für mich auch etwas Vergleichbares in Bezug auf „Joomla“ interessant, und ich dacht mir Fragen schadet nich ;)
    Vielleicht hast Du ja einen „link“ oder einen Tipp im Peto?

    viele Grüße

    cs

    • Jonas Hellwig
      schrieb am 08.11.2009 um 18:16 Uhr:

      @con: Freut mich, dass es dir gefällt. Leider kann ich dir zu Joomla nichts sagen, da meine Kenntnisse hier gegen Null tendieren.

  2. derlange58
    schrieb am 22.12.2009 um 21:59 Uhr:

    Moin Moin aus dem hohen Norden, mir fiel dein Buch bei der Buchhandlung Thales in die Hände, ich hab es kurz überflogen und mir hat es gleich zugesagt, viele Deiner „Anregungen“ habe ich als Rookie schon nachgebaut und bin schwer begeistert von den verständlichen Anleitungen ( Ebenen und so ist das A und O). Sie Typografie Tips und Farbharmonien sind klasse. Frohes besinnliches Fest und verkaufe ordentlich Bücher.

  3. Jörg Dähler
    schrieb am 02.02.2010 um 18:02 Uhr:

    Das Buch ist super, bin gerade am lesen. Was mir fehlt sind die Download’s und Links dazu. Hast du einen Bereich auf dem der Content verfügbar ist?

    Danke & Gruß
    Jörg

    • Jonas Hellwig
      schrieb am 07.02.2010 um 10:32 Uhr:

      @Jörg: Alle Inhalte des Buches können unter buch.cd heruntergeladen werden :)

Ihr Kommentar zu diesem Termin

Bei Fragen oder Kritik zu diesem Produkt, nutzen Sie bitte das Kommentar-Formular.

Ihr Kommentar wird überprüft bevor er auf der Website erscheint. Nicht themenrelevante Beiträge werden gelöscht.

Mit diesen Kunden haben wir bereits erfolgreich zusammengearbeitet.