Photoshop CS4. für Webdesigner. Webdesign FRANZIS

Transkript

1 Webdesign Jonas Hellwig Photoshop CS4 für Webdesigner Webprojekte planen, entwerfen und umsetzen Webgraphics: Backgrounds, Icons, Typo WordPress-Themes mit Photoshop erstellen FRANZIS

2 INHALTSVERZEICHNIS 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 Geografische Merkmale 46 Soziale Zielgruppendefinition 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

3 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 & 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 86 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

4 INHALTSVERZEICHNIS 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 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

5 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

6 INHALTSVERZEICHNIS 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: 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-Grafiken für das Web optimieren 265

7 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

8 PHOTOSHOP FÜR WEBDESIGNER 1 Photoshop für Webdesigner 16 2 Briefing und Projektplanung 40 3 Farbkonzepte und Layout 52 4 Grafische Objekte 86 5 Patterns, Strukturen und Brushes Navigationskonzepte umsetzen 136

9 PHOTOSHOP FÜR WEBDESIGNER 7 Typografie im Internet Fotos im Internet Zierelemente und Icons Content-Design Grafiken fürs Web optimieren Coding: Sauberer Quellcode 282

10 1 PHOTOSHOP FÜR WEBDESIGNER

11

12 Nachdem das Gestaltungskonzept steht, beginnt der Webdesigner mit dem Predesign der neuen Website direkt in Adobe Photoshop. Photoshop für Webdesigner Adobe Photoshop CS4 richtet sich nicht nur an Webdesigner, sondern auch an Illustratoren, 3-D-Designer, Grafiker, Mediziner und viele andere Berufsgruppen. Um professionell und vor allem effektiv mit dem Programm arbeiten zu können, sollten Sie die Benutzeroberfläche zunächst Ihren persönlichen Anforderungen entsprechend einrichten. Einige Funktionen werden Sie nie benötigen, andere selten, wieder andere fast ununterbrochen. Hier kommt es darauf an, die verschiedenen Bearbeitungspaletten bzw. Bedienfelder so anzuordnen, dass sie leicht zu erreichen sind und lange Mausstrecken oder Klicks minimiert werden. Vor allem, wenn Sie noch nicht oder wenig mit Shortcuts arbeiten, sind lange Distanzen in der Programmoberfläche ein nicht zu unterschätzender Zeitfaktor. Photoshop bietet mittlerweile umfangreiche Möglichkeiten, sich Ihren individuellen Bedürfnissen anzupassen und Ihnen die Arbeit so einfach wie möglich zu machen. Voreinstellungen Die Photoshop-Voreinstellungen sind global definierte Einstellungen, die unabhängig von gerade geöffneten Daten immer Auswirkungen auf das gesamte Programm haben. In der Regel nehmen Sie Änderungen an den Voreinstellungen nur direkt nach der Installation des Programms vor. Je nach Projektanforderung müssen eventuell Voreinstellun- 16

13 KAPITEL 1 PHOTOSHOP FÜR WEBDESIGNER gen optimiert werden, für gewöhnlich bleiben diese jedoch weitestgehend unverändert. Im Folgenden werden wir die Voreinstellungen von Photoshop CS4 hinsichtlich einer Nutzung für Onlinemedien optimal konfigurieren. Um Änderungen an den Voreinstellungen vornehmen zu können, öffnen Sie zunächst den entsprechenden Dialog: Unter Mac OS X: Photoshop/Voreinstellungen/Allgemein oder [Cmd]+ [K]. Unter Windows: Bearbeiten/Voreinstellungen oder Shortcut [Strg]+[K]. Allgemein Im Abschnitt Allgemein definieren Sie Ihre grundlegenden Photoshop-Einstellungen. Im Drop-down-Menü Farbwähler wählen Sie hier Ihren bevorzugten Farbwähler für die Werkzeugpalette aus. Der Adobe-Farbwähler ist aufgrund seiner komfortablen Funktionen sehr zu empfehlen. Mit Bildinterpolation kontrollieren Sie, ob der Wert auf Bikubisch (optimal für glatte Verläufe) eingestellt ist; passen Sie diese Einstellung gegebenenfalls an. Dadurch ist sichergestellt, dass bei Skalierung oder einer Umrechnung der Bildabmessungen die Verläufe geglättet werden, was insbesondere im Web zu schöneren Ergebnissen führt. Die im Bereich Optionen zu aktivierenden Voreinstellungen sind selbsterklärend und sollten den persönlichen Vorlieben angepasst werden. Aktivieren Sie jedoch das Kontrollkästchen Geöffnete Dateien automatisch aktualisieren, um Dateien, die außerhalb von Photoshop geändert wurden, nicht manuell aktualisieren zu müssen. Darüber hinaus empfiehlt es sich, die Zwischenablage zu exportieren, damit zwischengespeicherte Daten auch anderen Anwendungen, wie z. B. InDesign oder Dreamweaver, zur Verfügung stehen. Das Dialogfeld der allgemeinen Photoshop-Voreinstellungen. Einstellungen im Farbwähler (Vordergrundfarbe). Apple-Farbwähler unter Mac OS 10.5 Leopard. Windows-Farbwähler unter Windows Vista. 17

14 ANIMIERTER ZOOM UND ZIEH- SCHWENKEN AKTIVIEREN Neu in Photoshop CS4 sind die Einstellungsparameter Animierter Zoom und Ziehschwenken aktivieren. Der animierte Zoom aktiviert eine animierte Vergrößerung beim Verändern des Abbildungsmaßstabs mit dem Lupen-Werkzeug. So lässt sich oftmals besser die Position innerhalb einer Datei bestimmen. Ziehschwenken ist eine Einstellung des Hand-Werkzeugs, mit dem Sie sich in Ihrer Datei bewegen können. Ist das Ziehschwenken aktiviert, stoppt die Ansicht beim Loslassen der Maustaste nicht, sondern gleitet ein Stück weiter. Somit können Sie intuitiver und schneller in Ihrer Datei navigieren. Im Abschnitt Verlaufsprotokoll legen Sie fest, wo der Verlauf Ihrer Arbeitsschritte gespeichert werden soll. Sie haben die Wahl zwischen Metadaten, Textdatei und einer Kombination aus beidem. Der Standard ist ein deaktiviertes Kontrollfeld. Benutzeroberfläche Der Abschnitt Benutzeroberfläche umfasst Einstellungen zum Erscheinungsbild und Verhalten des Photoshop-Interface. Hier können Sie persönliche Einstellungen vornehmen oder diesen Punkt überspringen, da die Grundeinstellungen durchaus empfehlenswert sind. Die Auswahllisten im Bereich Allgemein legen fest, wie die Umgebung der Datei und die Kontur um die Datei gestaltet werden sollen, wenn Sie sich in den verschiedenen Ansichten befinden. Die Ansichten können Sie später über die Taste [F] auf Ihrer Tastatur oder über das Auswahlmenü in der Optionsleiste wechseln. Dialogfeld der Photoshop-Voreinstellungen unter Benutzeroberfläche. Photoshop CS4 bietet drei verschiedene Ansichten für Dateien: Standardmodus, Vollbildmodus mit Menü leiste und Vollbildmodus. Der Punkt Graustufen-Anwendungssymbol verwenden bestimmt, ob das Photoshop-Icon in der Optionsleiste Blau oder Grau dargestellt wird. Das Photoshop-Programm-Icon in der Optionsleiste farbig oder grau. Legen Sie fest, ob die Farbkanalauszüge farbig oder schwarz-weiß dargestellt werden sollen. Wenn Sie den Haken bei Farbauszüge in Farbe anzeigen setzen, werden die Kanalminiaturen in der Kanäle-Palette farbig angezeigt. 18

15 KAPITEL 1 PHOTOSHOP FÜR WEBDESIGNER Menüfarben einblenden bestimmt, ob es möglich sein soll, Menüpunkte, etwa häufig benötigte Filter oder Ähnliches, farbig hervorzuheben. Wie Sie farbige Menüs laden bzw. eigene Farben auf Ihre Menüs anwenden können, erfahren Sie im Kapitel Arbeitsbereiche. Die QuickInfos werden eingeblendet, wenn Sie den Mauszeiger einige Zeit über ein bestimmtes Bedienfeld, ein Icon oder eine Funktion halten. Sollten Sie diese Hilfestellung benötigen, da Sie z. B. noch nicht lange mit Photo shop arbeiten, aktivieren Sie das entsprechende Kontrollfeld. Allerdings können diese Tooltipps auch störend wirken. Dateihandhabung In diesem Abschnitt überprüfen Sie einige Werte, die den Workflow, vor allem wenn Sie im Team arbeiten, erleichtern. Insbesondere wenn die verschiedenen Stationen Ihres Workflows sowohl auf Macs als auch auf Windows-PCs stattfinden, sollten Sie sich das folgende Dialogfeld zu Herzen nehmen. Aktivierte QuickInfos geben hilfreiche Tipps zu Programmfunktionen. Wenn Sie im Bereich Bedienfelder und Dokumente das Kästchen Bedienfelder automatisch auf Symbole minimieren markieren, werden ausgeklappte Bedienfelder automatisch eingeklappt, wenn Sie an eine andere Position klicken. Ausgeblendete Bedienfelder automatisch anzeigen legt fest, ob per Mouseover Bedienfelder eingeblendet werden sollen. Setzen Sie den Haken bei Bedienfelderpositionen speichern, um neu angeordnete, verschobene oder geöffnete Bedienfelder auch nach einem Neustart des Programms wie zuvor eingestellt vorzufinden. Aktivieren Sie Dokumente als Registerkarten öffnen, um alle neu geöffneten Dateien in Form von Registerkarten (Tabs) anzeigen zu lassen. Wenn Sie Registerkarten per Drag and Drop an andere Fenster andocken möchten, markieren Sie den Punkt Andocken schwebender Dokumentfenster aktivieren. Stellen Sie im Bereich Textoptionen für Benutzeroberfläche ein, welche Sprache Sie innerhalb von Photoshop verwenden möchten und/oder wie groß die Texte innerhalb der Bedien felder des Programms angezeigt werden sollen. Dialogfeld der Photoshop-Voreinstellungen zur Dateihandhabung. Um beim Öffnen einer Datei in Photoshop eine Miniaturansicht zu erhalten, sollten Sie beim Punkt Bildvorschau Immer und direkt darunter Symbol auswählen. Damit Sie kompatibel unter Mac OS und Windows arbeiten können, setzen Sie darüber hinaus die Haken bei Macin tosh- und Windows-Miniatur und wählen Immer bei Dateinamenerweiterung anhängen. So werden Ihre Daten problemlos auf beiden Systemplattformen erkannt. Kleinbuchstaben sind im Internet Pflicht; aktivieren Sie also den entsprechenden Punkt ebenfalls. Die unter Dateikompatibilität zu vergebenen Einstellungen beziehen sich auf die Arbeit mit dem RAW-Konverter Adobe Camera Raw und können bei Arbeiten für das Internet größtenteils vernachlässigt werden. Belassen Sie diese Punkte daher, wie sie sind. Version Cue erleichtert das gemeinsame Arbeiten an Dateien im Netzwerk. Aktivieren Sie diesen Punkt bei Bedarf. Weitere Einstellungen nehmen Sie dann im eigenständigen Programm Version Cue vor. 19

16 Leistung Legen Sie in diesem Abschnitt die Systemleistungen von Photoshop CS4 fest. Sofern Sie über ausreichend Arbeitsspeicher (RAM) verfügen, sollten Sie Photoshop mindestens 70 % zuweisen. Achten Sie jedoch immer darauf, wie viel Arbeitsspeicher den restlichen Programmen noch zur Verfügung steht. Da Photoshop nach wie vor maximal 3 GByte Arbeitsspeicher verwalten kann, können Sie dem Programm bedenkenlos 100 % RAM zuweisen, sofern Sie über mehr Speicher verfügen und Ihnen der restliche Speicher für Ihre weiteren Programme ausreicht. Vergeben Sie im Bereich Arbeitsvolumes ein oder mehrere Arbeitsvolumes. Die Volumina werden von oben nach unten beschrieben und dienen Photoshop als Auslagerungsspeicher. Hier legen Sie alle Leistungsmerkmale, wie Speichernutzung, Cache etc., für Photoshop fest. Hier legen Sie alle Einstellungen für Mal- und andere Werkzeuge fest. GPU-EINSTELLUNGEN Die GPU-Einstellungen (Graphics Processing Unit) sind sehr wichtig, um alle neuen Funktionen der Benutzeroberfläche genießen zu können. Sofern Sie über eine OpenGL-fähige Grafikkarte verfügen, sollten Sie die Unterstützung auch aktivieren. Nur so werden in CS4 neu hinzugefügte Funktionen wie das Rotieren der Arbeitsfläche, das Pixelraster in hohen Zoomstufen oder das Ziehschwenken ermöglicht. Wählen Sie hier möglichst schnelle Laufwerke mit mindestens 2 GByte freiem Speicher. Im Bereich Verlauf und Cache bestimmen Sie die Anzahl der Protokollobjekte. Sie legen fest, wie viele Arbeitsschritte gespeichert und rückgängig gemacht werden können 20 ist ein guter Wert. Um den Arbeitsspeicher zu schonen, können Sie diesen Wert reduzieren oder bei Bedarf auf maximal Schritte erhöhen. Der Cache bestimmt die Aktualität Ihrer Bilddateien. Sie können den Wert 4 beibehalten, es sei denn, Sie arbeiten mit kleinen Dateien, die über sehr viele Ebenen verfügen. Dann verringern Sie die Cache-Stufen. Zeigerdarstellung Hier definieren Sie die Darstellung der Pinselspitzen für Mal- und andere Werkzeuge. Sie können die verschiedenen Optionen jedoch auch während der Arbeit über die [Umschalt]- Taste verändern. Transparenz/Farbumfang-Warnung Unter Transparenzeinstellungen teilen Sie Photoshop mit, wie transparente Bereiche dargestellt werden sollen. Sie können sowohl die Farbe als auch die Größe des Transparenzmusters einstellen. Weiterhin definieren Sie 20

17 INDEX Symbole 3-D-Linien 88 3-D-Text 180 A Abgerundetes-Rechteck-Werkzeug 27 Absatz 28 Abwedler-Werkzeug 26 Additive Farben 52 Aero-Button 151 Ähnlichkeit 42 Aktionen 28 Alt 204 Animation 29, 269 Ankerpunkt-hinzufügen-Werkzeug 26 Ankerpunkt-löschen-Werkzeug 26 Ankerpunkt-umwandeln-Werkzeug 26 Anmerkungen 29 Anmerkungen-Werkzeug 24 Anordnen 34 Ansichtdrehung-Werkzeug 27 Anwendungsleiste 34 Anwendungsrahmen 34 Aqua-Button 145 Arbeitsbereiche 34 Asymmetrie 77 Ausbessern-Werkzeug 24 Ausgabe 262 Ausrichtung 76 Auswahlellipsewerkzeug 23 Auswahlrechteckwerkzeug 23 Auswahlwerkzeug Einzelne Spalte 23 Einzelne Zeile 23 B Badge 231 Bedienfelder 28 Bereichsreparatur-Pinsel-Werkzeug 24 Bildausschnitt 203 Bildauswahl 203 Bildelemente ausbrechen 207 Bilder googeln 202 Bildformate 203 Bildinhalte 256 Bildspiegelungen 203 Blau 54 Braun 55 Breadcrumb-Navigation 139 Briefing 40 Brushes 130 Buchprojekt 48 Content-Design 257 Farbkonzept 64 Flächen 96 Fotos 219 Gestaltungsraster 83 Icons 253 Linien 96 Navigation 166 Schriftwahl 199 Scribble 73 Strukturen 129 WordPress 295 Zierelemente 237 Budget 40 Buntstift-Werkzeug 25 Buttons

18 INDEX KAPITEL PHOTOSHOP 10 FÜR LIGHTROOM WEBDESIGNER BACKSTAGE C Candybar-Navigation 154 Chrome-Text 188 Coding 282 Content 289, 293 CSS 282 Footer 291 HTML 282 Logo 286 Navigation 286 Sidebar 289 Slogan 286 XHTML 282 Content-Design 256 Content-Fonts 171 CSS-Borders 87 D Dateiformate 264 Dateiupload 295 Design 86 Details 259 Device Central 263 Direktauswahl-Werkzeug 27 Dreamweaver 295 Drittelregel 78 Dynamische Navigation 139 E Ebenen 29 Ebenenkompositionen 29 Ebenenstile 143 Eigene-Form-Werkzeug 27 Ellipse-Werkzeug 27 Erwachsene 45 F Farbaufnahme-Werkzeug 24 Farbe-ersetzen-Werkzeug 25 Farben 30, 52, 176 Gefahren 57 im Web 53 Probleme 53 websichere 53 Farbfelder 30 Farbflächen 97 Farbgebung 40 Farbkontraste 55 Farbkonzept 57 aus Bildquelle 63 manuell entwickeln 59 mit dem Kuler 61 Farbleitsystem 141 Farbwirkungen 54 Favicons 240 Felsen 121 Fenster 28 FileZilla 295 Fixed-Layout 75 Flächen 86 Flächen aufwerten 94 Fluid-Layout 75 Fotoecke umbiegen 211 Fotos 202, 259 Fotos altern lassen 206 Freiform-Zeichenstift-Werkzeug 26 Freistellungswerkzeug

19 INDEX Für Web und Geräte speichern 262 FTP-Programm 295 Full-Single 79 Füllwerkzeug 26 G Gebürstetes Metall 118 Gelb 54 Geschlossenheit 42 Gestaltgesetze 41 Gestaltungsraster 75 Gestaltungsraster entwickeln 80 Gestaltungsvorgaben 40 GIF-Animation 269 GIF-Format 264 GIULIA-Prinzip 49 Glanzsterne 222 Glastext 192 Gleichgewicht 78 Gleichzeitigkeit 42 Goldener Schnitt 78 Goldtext 196 Grau 55 Grid-Systeme 82 Grün 54 Grunge 72 H Hand-Drawing 70 Hand-Werkzeug 27 Hausschrift 40 Headlines 257 Hell-Dunkel-Kontrast 55 Hierarchische Navigation 137 Hintergrund-Radiergummi-Werkzeug 25 Histogramm 30 Holzstruktur 115 Homepage 257 Horizontales Textmaskierungswerkzeug 27 Horizontales Text-Werkzeug 27 Horizont ausrichten 205 Hover 142 Hovern 142 HTML-Ausgabe 272 HTML-Ausgabe, mit Photoshop 273 HTML, CSS-Verknüpfung 283 Hyperlinks 176 I Icons 140, 238 Favicons 240 Größen 238 Kalender-Icon 244 Lupen-Icon 249 richtig einsetzen 239 Warnung-Icon 241 Impressum 49 Info 30 Interaktion 142 J JPEG-Format 267 Jugendliche 44 Jump-lineare Navigation

20 INDEX KAPITEL PHOTOSHOP 10 FÜR LIGHTROOM WEBDESIGNER BACKSTAGE K Kalender-Icon 244 Kanäle 31 Karbon 113 Kinder 43 Komplementärkontrast 55 Konsultationsschriften 172 Kontur 91 Kopierquelle 31 Kopierstempel-Werkzeug 25 Korrekturen 31 Kuler 61 kulturbanause.de 5 Kunstprotokoll-Pinsel 25 L Lasso-Werkzeug 23 Lesegrößen 173 Letterpress 144 Letterpress-Effekt 184 Linealwerkzeug 24 Lineare Navigation 137 Linien 87 gepunktet 90 konkave 92 konvexe 92 mit Verlauf 89 Outlines 95 Linienzeichner-Werkzeug 27 Links 142, 176 Listen 258 Logo 48 Lupen-Icon 249 M Magischer-Radiergummi-Werkzeug 25 Magnetisches-Lasso-Werkzeug 23 MAMP 296 Masken 32 Metainformationen 49 Metall-Button 149 Metallstrukturen 118 Monitorauflösung 65 Muster 91 Musterstempel-Werkzeug 25 MySQL-Datenbank 297 N Nachbelichter-Werkzeug 26 Navigation 136 Breadcrumb 139 dynamisch 139 gestalten 140 hierarchisch 137 Icons 140 jump-linear 138 linear 137 mit Suchfeld 159 platzieren 139 See-and-Point 138 Singleframe 138 Navigationskonzepte 136 Navigator 32 Netzstruktur

21 INDEX O Optionsleiste 34 Orange 54 Organische Formen 88 Outlines 95 P Paletten 28 Patterns, mit CSS 114 Pfadauswahl-Werkzeug 27 Pfade 32 PHPMyAdmin 297 Piktogramme 140 Pinsel 32, 130 Pinsel-Werkzeug 25 Pipette-Werkzeug 24 Pixelfonts 173 Planung 40 PNG-Format 268 Polygon-Lasso-Werkzeug 23 Polygon-Werkzeug 27 Post-it 225 Prägnanz 41 Projekt 40 Protokoll 33 Protokoll-Pinsel-Werkzeug 25 Q Qualitätskontrast 56 Quantitätskontrast 56 R Radiergummi-Werkzeug 25 Rasentextur 126 Rückschaltautomatik 22 Rechteck-Werkzeug 27 Reparatur-Pinsel-Werkzeug 24 Retro 69 Rot 54 Rote-Augen-Werkzeug 24 S Sans Serif 172 Scanlines 111 Scharfzeichner-Werkzeug 26 Schatten 102, 104 Schaugrößen 173 Schmuckschriften 171 Schnellauswahlwerkzeug 23 Schriftarten 171 Schriftglättung 177 Schriftgröße 172 Schwamm-Werkzeug 26 Schwarz 55 Scribble 72 See-and-Point-Navigation 138 Semitransparentes Overlay 98 Serif 172 Shade-Text 186 Silbentrennung 175 Silversurfer 46 Simultankontrast 56 Singleframe-Navigation 138 Skalieren (Inhalt bewahren) 213 Slice-Auswahlwerkzeug

22 INDEX KAPITEL PHOTOSHOP 10 FÜR LIGHTROOM WEBDESIGNER BACKSTAGE Slices 272 Alternative 275 Slice-Werkzeug 24 Speaking Navigation 141 Spiegelungen 102 Sprachauswahl 48 Startseite 257 Sticker 234 Stile 33 Stofflichkeit 114 Stripe-Generator 112 Stripes 112 Strukturen 114 Subtraktive Farben 52 Symbole 238 Symmetrie 77 T Tab-Navigation 157 Tag-Clouds 49 Tesafilm 228 Text an Pfad 178 Textausrichtung 175 Textinhalte 256 Textur anpassen 123 Thumbnails 204 Tonalität 40 Transparenz 98 Trends 69 Grunge 72 Hand-Drawing 70 Retro 69 Vintage 69 Web Typografie 40, 170 V Verbund 42 Verlaufswerkzeug 26 Verschieben-Werkzeug 23 Vertikales Textmaskierungswerkzeug 27 Vertikales Text-Werkzeug 27 Verträumte Fotos 216 Viewport 66 Vintage 69 Violett 54 Voreinstellungen 16 Allgemein 17 Benutzeroberfläche 18 Dateihandhabung 19 Farbumfang-Warnung 20 Hilfslinien 21 Leistung 20 Lineale 21 Maßeinheiten 21 Raster 21 Slices 21 Text 22 Transparenzeinstellungen 20 Zeigerdarstellung 20 Zusatzmodule 22 W Wahrnehmung 41 Warenkorb 48 Warm-Kalt-Kontrast 55 Warning-Icon 241 Web Web-Fotogalerie 278 Website

23 INDEX Weichzeichner-Werkzeug 26 Weiß 55 Weiterführende Linie 42 Werbebanner 68 Werbeziel 40 Werkzeuge 22 Werkzeuge, Rückschaltautomatik 22 Werkzeugvorgaben 33 Wet-Floor-Effekt 106 White Space 86 Wischfinger-Werkzeug 26 WordPress 295 Admin 298 API-Hooks 302 Artikel 308 Config-Datei 297 installieren 296 Kategorien 308 Navigation 309 Seiten 307 Servertestumgebung 296 Templates 298, 299 Templates erstellen 303 Theme Basics 298 Theme testen 306 X XAMPP 296 XHTML-Aufbau 282 Z Zauberstab-Werkzeug 23 Zeichen 33 Zeichenstift-Werkzeug 26 Zeilenabstand 174 Zeilenlänge 174 Zählungswerkzeug 24 Zielgruppe 40, 43, 66 Erwachsene 45 Jugendliche 44 Kinder 43 Silversurfer 46 Zitate 259 Zoomify 276 Zoomwerkzeug 28 Zusatzmodule