Photoshop für Webdesigner. Briefing und Projektplanung 4o. Farbkonzepte und Farben 52 Farbmischung Farben im Web Farbwirkungen Farbkontraste.

Transkript

1 Photoshop für Webdesigner ie Voreinstellungen 16 Allgemein 17 Benutzeroberfläche 18 Dateihandhabung 19 Leistung 20 Zeigerdarstellung 20 Transparenz/Farbumfang-Warnung 20 Maßeinheiten t 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 4o Wahrnehmung 41 Content und Funktionalität 41 Gestaltgesetze 41 Zielgruppe 43 Soziodemografische Merkmale 43 Geografische Merkmale 46 Soziale Zielgruppendefinition 46 Psychologische Merkmale 48 Zielgruppe des Buchbeispiels 48 Konventionen 48 GIULIA-Prinzip 49 Farbkonzepte und Farben 52 Farbmischung Farben im Web Farbwirkungen Farbkontraste Layout Gefahren im Umgang mit Farben 57 Farbkonzepte 57 Bibliografische Informationen digitalisiert durch

2 INHALTSVERZEICHNIS PHOTOSHOP FÜR WEBDESIGNER Workshop: Farbkonzept manuell entwickeln 59 Workshop: Farbkonzept mit dem Kuler 61 Workshop: Farbkonzept aus Bildquelle entwickeln 63 Buchprojekt: Farbkonzept festlegen 64 Größen im Webdesign 65 Monitorauflösung 65 Viewport 66 Webdesign-Trends 69 Retro ft Vintage 69 Hand-Drawing 70 Web 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 se Flächen und Linien 86 White Space 86 Linien 87 Organische Formen 87 3-D-Linien 88 Workshop: Linien mit Verlauf aufwerten 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: Semitransparentes Overlay 98

3 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 Patterns 110 Workshop: Scanlines 111 Stripe-Generator 112 Workshop: Karbon 113 Free Patterns 114 Patterns mit CSS 114 no 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 wiederholende Strukturen erstellen 126 Buchprojekt: Strukturen 129 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: Aero-Button 151 Workshop: Candybar-Navigation 154 Workshop: Tab-Navigation 157

4 INHALTSVERZEICHNIS PHOTOSHOP FÜR WEBDESIGNER 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

5 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: Tesafilm 228 Workshop: Badge 231 Workshop: Sticker 234 Buchprojekt: Zierelemente 237 Icons 238 Workshop: Favieon 240 Workshop: Warning-Icon 241 Workshop: Kalender-Icon 244 Workshop: Lupen-Icon 249 Buchprojekt: Icons 253 Content-Design 255 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-Grafiken für das Web optimieren 265

6 INHALTSVERZEICHNIS PHOTOSHOP FÜR WEBDESIGNER JPG/JPEG (Joint Photographic Expert Group) 267 JPEG-Grafiken für das Web optimieren 267 PNG-8 (Portable Network Graphics) 268 PNG 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 und verwalten 308 Navigation anpassen 309 Startseite festlegen 310 Kommentarfunktion einbinden 310 Index 312 Bildnachweis 319