Webdesign mit Photoshop 7

Transkript

1 -Ibtt Michael Baumgardt Webdesign mit Photoshop 7 Webgrafiken professionell gestalten mit Mac und PC ADDISON-WESLEY Ein Imprint der Pearson Education Deutschland GmbH München Boston San Francisco Harlow England Don Mills Ontario Sydney Mexico City Madrid Amsterdam

2 Webdesign mit Photoshop 7 INHALTSVERZEICHNIS Web-Grundlagen Das Backend Das Frontend Adobe LiveMotion QuickTime VR Objekt-Movies HTML - Hypertext Markup Language Strukturelles Codieren Absolutes Positionieren Gestaltungsgrenzen der Browser Tabellen HTML-Quellcode einer Seite Ebenen Cascading Style Sheets Bilder Bandbreiten-Probleme JPEG (Joint Photographic Experts Group) GIF (Graphical Interchange Format) PNG (Portable Network Graphic) Wie Browser fehlende Farben kompensieren Farbprobleme bei Bildern Nützliche Sites für Webdesigner

3 Inhaltsverzeichnis xi Techniken 28 Informationsarchitektur 29 Website-Struktur 30 Inhalt konsolidieren 30 Navigation 32 Web Usability 32 Häufige Fehler bei der Informationsarchitektur 33 Inhalt als Aufmacher 35 Design-Konzepte 36 Das Tunnelkonzept 37 Sidebars 38 Top bars 38 Topbars und Sidebars mit Frames 40 Interview mit Tom Nicholson 47 Dynamische Webseiten erstellen 48 Browser-Offset 49 Hyperlinks 50 Imagemapsund Imagetabellen 50 Popup-Menüs 50 Einfluss der Technologie auf das Design 51 Metapher 52 Interview mit Andreas Lindström 58 Die Web-Galerie 86 Der Interface-Entwurf 87 Das richtige Dokumentformat 87 Größe der Arbeitsfläche ändern 88 Bildgröße ändern 89 Bilder reparieren 89 Störungen und Kratzer entfernen 91 Bilder scharfzeichnen 91 Bereiche reparieren und Probleme lösen 95 Farben manipulieren und korrigieren 97 Tonwertbereich einstellen 99 Farben korrigieren 100 Schritt für Schritt: Lichter und Tiefen mit dem Befehl Gradationskurven einstellen 104 Schritt für Schritt: Digitale Fotos optimieren 106 Schritt für Schritt: Farbe von flächigen Farbbereichen ändern 107 Schritt für Schritt: Farbe eines Objekts ersetzen 708 Komponieren und Gestalten 108 Mit der Ebenen-Palette arbeiten 110 Ebenen und Transparenz 111 Ebenen mischen 114 Formebenen 1 Illustrator zusammen mit Photoshop 118 Text gestalten 720 Effekte und Tricks 120 Mit Ebenenstilen arbeiten

4 xii Webdesign mit Photoshop Chrom 124 Weiße Chrom-Schrift 126 Gebürstetes Metall 127 Lauflicht-Effekt 130 Effektfilter 130 Alien Skin Splat! 131 Alien Skin Eye Candy Alien Skin Xenofex 133 Auto FX DreamSuite 135 Tutorial: Eine Fotokomposition erstellen 740 Photoshop optimieren 140 Den Farbwähler optimieren 141 Die richtige Interpolation 142 Die Info-Palette 143 Interpolationsmethoden in Photoshop 144 Linealein Pixel 144 Hilfslinien und Raster 144 Palette mit websicheren Farben laden 145 Gamma 746 Die Aktionen-Palette 147 Dialog aktivieren/deaktivieren 148 Unterbrechungen einfügen 148 Pfade in Aktionen aufnehmen 149 Stapelverarbeitung 150 Mit websicheren Farben arbeiten 150 Farbtiefen 150 Wie Computer Informationen speichern 150 Farbtiefe des Bildes 151 Web-Farbpalette 152 Die Web-Farbpalette als Würfel 153 Der Web-Farbwürfel in Schichten

5 - Inhaltsverzeichnis xiii 156 Der MiB-Farbwürfel 2 Mit Webfarben arbeiten 2 Vor dem Export zu Webfarben umwandeln 3 Als Webfarbe konvertieren beim Export 764 Hintergründe 5 Große Hintergrundbilder 6 Randstreifen als Hintergrund 8 Musterhintergründe 9 Strukturen mit dem Mustergenerator 170 Transparenz 170 Transparenz mit einfarbigen Hintergründen 171 Transparenz mit mehrfarbigen Hintergründen 172 Tutorial: Eine Website in Photoshop gestalten 178 ImageReady k >* 178 Photoshop versus ImageReady 180 Rollover-Buttons erstellen 183 Bilder mit ImageReady optimieren 182 Imagemaps erstellen 183 Ebenenbasierte Imagemaps 184 Tutorial: Slices und Rollover erstellen 188 GIF-Animation 190 Übertragungszeit sparen durch Skalieren 190 Methoden zum Entfernen von Frames 190 Schleifenanimation 192 Der Null-Sekunden-Trick 193 Animationen optimieren 194 Ein Logo rotieren 195 Rolleffekte 798 GIF-Graphics Interchange-Format 198 CLUT - Color Look Up Table 198 Wie GIF komprimiert 199 LZW-Mustererkennung 200 Balance zwischen Komprimierung und Qualität 202 LZW-Mustererkennung 206 GIF-Vergleichstabelle 210 Dithering-Vergleichstabelle 212 Die Lossy-Option 214 GIF in Photoshop erstellen 223 Farbtabelle optimieren 224 Schritt für Schritt: Ein GIF optimieren 228 Eigene Paletten erstellen 231 Optimierung über Alphakanäle 231 Partielles Lossy 233 Teile eines Bildes dithern 235 Alphakanäle optimieren 236 Mehrere Transparenzstufen simulieren

6 x i v Webdesign mit Photoshop 7 E32?S3sS3 r.('i?üi';it,"; is I ; i ;._..._ JPEG - Joint Photographic Experts Group 239 Wie gut komprimiert JPEG ein Bild? 240 Abhängigkeit der Kompression von den 8x8-Blöcken 241 Qualitätsunterschiede bei JPEG-Decodern 241 JPEG oder GIF? 242 Wie ein JPEG kodiert wird 244 Wie viel bringt die Weichzeichnung? 246 Dateioptimierung mittels Alphakanälen 248 JPEG-Vergleichstabellen 250 PNG - Portable Network Graphics 251 PNG, GIF und JPEG im Vergleich 252 PNG-Bilder speichern 252 Bild als PNG-24 speichern 252 Bild als PNG-8 speichern HTML Authoring 258 Vorlagen, Komponenten und Musterseiten 260 HTML-Tabellen erzeugen 261 Tabellenbilder und HTML 262 Das Layout-Raster 263 Hintergründe in Tabellen und Rastern 263 Einschränkungen im Netscape Navigator 265 Bildexpansion

7 Inhaltsverzeichnis xv 297 Welchen Video-Codec sollte ich einsetzen? 298 Video in HTML einbetten 298 QuickTime-Attribute 300 RealMedia einbetten 302 Musik und Audio einbetten 266 Vordergrund mit Hintergrund ausrichten 267 Mit Text arbeiten 267 Einsatz des FONT-Tags 268 Cascading Style Sheets einsetzen 270 Die CSS-Palette 270 Externe Style Sheets erzeugen und verknüpfen 272 Fehlersuche in CSS-Designs 273 Den Arbeitsablauf zwischen GoLive und Photoshop optimieren 273 Mit SmartObjects arbeiten 274 Strukturbild verwenden 274 Photoshop-Ebenen in Rahmen importieren 274 Ebenen in Layout-Raster konvertieren 276 Tutorial: HTML-Authoring 302 Eine Sound-Datei einfügen 302 MP3-Audio-Format 302 RealAudio 304 Anhang 306 Index 292 Aufnahmeformate 292 Ein Zwei-Bild-Poster-Movie in QuickTime Player Pro erzeugen 295 Filme komprimieren und einbetten Dateien für die Übungen und Schritt-für-Schritt-Anleitungen finden Sie auf der beiliegenden CD-ROM.