Vorwort | 5 |
INHALTSVERZEICHNIS | 6 |
Photoshop für Webdesigner | 16 |
Voreinstellungen | 16 |
Allgemein | 17 |
Benutzeroberfl äche | 18 |
Dateihandhabung | 19 |
Leistung | 20 |
Zeigerdarstellung | 20 |
Transparenz/Farbumfang-Warnung | 20 |
Maßeinheiten & Lineale | 21 |
Hilfslinien, Raster und Slices | 21 |
Zusatzmodule | 22 |
Text | 22 |
Werkzeuge | 22 |
Alle Werkzeuge im Überblick | 23 |
Bedienfelder | 28 |
Alle Bedienfelder im Überblick | 28 |
Arbeitsbereiche | 34 |
Anordnen | 34 |
Standard-Arbeitsbereiche | 34 |
Briefing und Projektplanung | 40 |
Wahrnehmung | 41 |
Content und Funktionalität | 41 |
Gestaltgesetze | 41 |
Zielgruppe | 43 |
Soziodemografische Merkmale | 43 |
Geografi sche Merkmale | 46 |
Soziale Zielgruppendefi nition | 46 |
Psychologische Merkmale | 48 |
Zielgruppe des Buchbeispiels | 48 |
Konventionen | 48 |
GIULIA-Prinzip | 49 |
Farbkonzepte und Layout | 52 |
Farben | 52 |
Farbmischung | 52 |
Farben im Web | 53 |
Farbwirkungen | 54 |
Farbkontraste | 55 |
Gefahren im Umgang mit Farben | 57 |
Farbkonzepte | 57 |
Workshop:Farbkonzept manuell entwickeln | 59 |
Workshop:Farbkonzept mit dem Kuler | 61 |
Workshop: Farbkonzept ausBildquelle entwickeln | 63 |
Buchprojekt: Farbkonzept festlegen | 64 |
Größen im Webdesign | 65 |
Monitoraufl ösung | 65 |
Viewport | 66 |
Webdesign-Trends | 69 |
Retro & Vintage | 69 |
Hand-Drawing | 70 |
Web 2.0 | 70 |
Grunge | 72 |
Scribble | 72 |
Buchprojekt: Scribble | 73 |
Gestaltungsraster | 75 |
Fixed- versus Fluid-Layouts | 75 |
Ausrichtung | 76 |
Symmetrie und Asymmetrie | 77 |
Gleichgewicht | 78 |
Der Goldene Schnitt | 78 |
Die Drittelregel | 78 |
Full-Single-Websites | 79 |
Workshop:Gestaltungsraster entwickeln | 80 |
Grid-Systeme | 82 |
Buchprojekt: Gestaltungsraster | 83 |
Grafische Objekte | 86 |
Flächen und Linien | 86 |
White Space | 86 |
Linien | 87 |
Organische Formen | 87 |
3-D-Linien | 88 |
Workshop: Linien mit Verlaufaufwerten | 89 |
Workshop:Gepunktete Linie mit Schere | 90 |
Workshop:Kontur mit einem Muster füllen | 91 |
Workshop:Konkave und konvexe Linien | 92 |
Workshop: Farbfl ächen aufwerten | 94 |
Workshop: Outlines | 95 |
Buchprojekt: Flächen und Linien | 96 |
Transparenz | 98 |
Workshop: SemitransparentesOverlay | 98 |
Schatten und Spiegelung | 102 |
Spiegelungen bei 2-D-Objekten | 102 |
Schatten bei 2-D-Objekten | 103 |
Workshop: Schatten | 104 |
Workshop: Wet-Floor-Effekt | 106 |
Patterns, Strukturen und Brushes | 110 |
Patterns | 110 |
Workshop: Scanlines | 111 |
Stripe-Generator | 112 |
Workshop: Karbon | 113 |
Free Patterns | 114 |
Patterns mit CSS | 114 |
Strukturen | 114 |
Workshop: Holzstruktur | 115 |
Workshop: Gebürstetes Metall | 118 |
Workshop: Samt | 120 |
Workshop: Felsen | 121 |
Workshop:Textur an Oberfl äche anpassen | 123 |
Workshop: Sich wiederholendeStrukturen erstellen | 126 |
Brushes | 130 |
Photoshop-Brushes | 130 |
Externe Brushes | 130 |
Workshop: Brushes erstellen | 131 |
Pinsel exportieren | 132 |
Navigationskonzepte umsetzen | 136 |
Navigationsstrukturen | 136 |
Navigation optimal platzieren | 139 |
Navigationselemente gestalten | 140 |
Icons und Piktogramme | 140 |
„Speaking“ Navigation | 141 |
Farbleitsysteme einsetzen | 141 |
Interaktionen kennzeichnen | 142 |
Workshop: Moderner Button | 143 |
Workshop: Aqua-Button | 145 |
Workshop: Metall-Button | 149 |
Workshop: Candybar-Navigation | 154 |
Workshop: Tab-Navigation | 157 |
Workshop: Navigation mit Suchfeld | 159 |
Buchprojekt: Navigation | 166 |
Typografie im Internet | 170 |
Schriftarten | 171 |
Content-Fonts | 171 |
Schmuckschriften | 171 |
Serif oder Sans Serif? | 172 |
Schriftgrößen | 172 |
Konsultationsgrößen | 172 |
Pixelfonts | 173 |
Lesegrößen | 173 |
Schaugrößen | 173 |
Schriftgrößen im Web | 173 |
Zeilenlänge, Zeilenabstand und Absätze | 174 |
Zeilenlänge | 174 |
Zeilenabstand | 174 |
Textausrichtung und Silbentrennung | 175 |
Textauszeichnungen | 175 |
Typografie und Farbe | 176 |
Links | 176 |
Design von Textobjekten | 177 |
Schriftglättung: Vor- und Nachteile | 177 |
Workshop: Text auf Pfad | 178 |
Workshop: Liegender 3-D-Text | 180 |
Workshop: Letterpress-Texte | 184 |
Workshop: Shade-Text | 186 |
Workshop: Chrome-Text | 188 |
Workshop: Text aus Glas | 192 |
Workshop: Text aus Gold | 196 |
Buchprojekt: Schriftwahl | 199 |
Fotos im Internet | 202 |
Bilder googeln? | 202 |
Legale Bildquellen | 202 |
Bildauswahl | 203 |
Bildausschnitt und -ausrichtung | 203 |
Bildformate | 203 |
Bildspiegelungen | 203 |
Thumbnails | 204 |
Alt-Attribute | 204 |
Fotos fürs Web aufbereiten | 204 |
Workshop: Horizont ausrichten | 205 |
Workshop: Fotos altern lassen | 206 |
Workshop:Bildelemente ausbrechen lassen | 207 |
Workshop:Fotoecke umbiegen | 211 |
Workshop:Skalieren und Inhalt bewahren | 213 |
Workshop: Verträumte Fotos | 216 |
Buchprojekt: Fotos | 219 |
Zierelemente und Icons | 222 |
Badges, Sticker und Co. | 222 |
Workshop: Glanzstern | 222 |
Workshop: Post-it | 225 |
Workshop: Tesafi lm | 228 |
Workshop: Badge | 231 |
Workshop: Sticker | 234 |
Buchprojekt: Zierelemente | 237 |
Icons | 238 |
Workshop: Favicon | 240 |
Workshop: Warning-Icon | 241 |
Workshop: Kalender-Icon | 244 |
Workshop: Lupen-Icon | 249 |
Buchprojekt: Icons | 253 |
Content-Design | 256 |
Text- und Bildinhalte | 256 |
Homepage versus Website | 257 |
Buchprojekt: Content-Design | 257 |
Details | 259 |
Grafiken fürs Web optimieren | 262 |
Für Web und Geräte speichern | 262 |
Ausgabeeinstellungen vergleichen | 262 |
Werkzeuge | 262 |
Device Central | 263 |
Vorschau | 263 |
Vorschau und Metadaten | 263 |
Bildgröße | 263 |
Dateiformate im Web | 264 |
GIF (Graphics Interchange Format) | 264 |
GIF-Grafi ken für das Weboptimieren | 265 |
JPG/JPEG (Joint PhotographicExpert Group) | 267 |
JPEG-Grafi ken für das Weboptimieren | 267 |
PNG-8 (Portable Network Graphics) | 268 |
PNG-24 | 268 |
PNG-24 für das Web optimieren | 269 |
Animation | 269 |
GIF-Animation | 269 |
HTML-Ausgabe | 272 |
Slices | 272 |
HTML-Ausgabe mit Photoshop | 273 |
Alternative zu Slices | 275 |
Workshop: Zoomify | 276 |
Zusatzmodule für Photoshop | 278 |
Web-Fotogalerie | 278 |
Coding: Sauberer Quellcode | 282 |
Buchprojekt: Coding | 282 |
Grundaufbau | 282 |
Hintergrund | 284 |
Header | 285 |
Logo und Slogan | 286 |
Navigation | 286 |
Content | 289 |
Sidebar | 289 |
Footer | 291 |
Content | 293 |
Dateiupload | 295 |
Buchprojekt: WordPress | 295 |
WordPress (lokal) installieren | 296 |
Theme Basics | 298 |
WordPress-Theme erstellen | 303 |
Theme testen | 306 |
Seiten anlegen und verwalten | 307 |
Kategorien und Artikel anlegen undverwalten | 308 |
Navigation anpassen | 309 |
Startseite festlegen | 310 |
Kommentarfunktion einbinden | 310 |
INDEX | 312 |