Transcript
Page 1: Photoshop CS5 - mediendb.hjr-verlag.de · Mora 29 mm Photoshop CS5 für Webdesigner Adobe Photoshop CS5 für Webdesigner Nils Manuel Mora Außerdem zum Thema bei mitp: Aus dem Inhalt:

Mor

a

29 mm

Phot

osho

p CS

5 fü

r W

ebde

sign

er

Adobe

Photoshop CS5 für Webdesigner

Nils Manuel Mora

Außerdem zum Themabei mitp:

Aus dem Inhalt:• Konzeption des Layouts:

User Interface, Auf-lösungen, Proportionen, Farbwirkung

• Farben in Photoshop: Farbkonzepte, Farb-verläufe, Farbpaletten

• Flächen und Hintergründe: Muster, Brushes, Formen

• Fotobearbeitung für Webdesigner: Nutzungsrechte, Tonwertkorrekturen, der Goldene Schnitt, Ebenenfüllmethoden, Objekte freistellen

• Rahmen und Ränder: Briefmarkenrand, Esels-ohr, abgerundete Ecken, Fotorahmen

• Logo-Gestaltung: Origami, 3D, Eis, Gold, Feuer, Chrom

• Buttons: Lichtrefl exionen, Orb, Mini-Button, Sticker, Badges, Rollover-Effekte

• Typografi e: Schriftarten, Größe, Formatierung, Farbe, Schmuckschriften

• Slicing und Coding in HTML

• TYPO3-Template aus Bei-spielprojekt erstellen

• TYPO3 erweitern: Mail-Formular, Gäste-buch, News

• Einrichten eines eigenen Webservers

• Kostenlose Photoshop-Plugins

Photoshop CS5 ist eine extrem umfangreiche Software und bietet zahlreiche Funktionen für viele unterschiedliche Anforderungen. Wollen Sie Photoshop CS5 im Webdesign einsetzen, stehen Ihnen dafür unzählige Effekte und Werkzeuge zur Verfügung. Dieses Buch bereitet Sie gezielt da-rauf vor, Websites mit Photoshop zu erstellen und zu gestalten und Sie lernen genau die Funktionen kennen, die Sie hierfür benötigen.

Der Autor zeigt Ihnen den vollständigen Entwick-lungsprozess für Websites mit Photoshop – von der Konzeption über das Erstellen des Layouts und der einzelnen grafischen Elemente bis hin zum Coding in HTML. Sie lernen alle relevanten Vorgehenswei-sen für schlichte oder kreative Layouts kennen. In zahlreichen kleinen Workshops stellt der Autor Schritt für Schritt einzelne Elemente vor, die Sie für Ihre Website einsetzen können. Diese sind auch als Photoshop-Datei auf der CD enthalten.

Zusätzlich zeigt Ihnen der Autor in den letzten bei-den Kapiteln, wie Sie ein in Photoshop erstelltes Layout in das Content Management System TYPO3 übertragen, daraus ein TYPO3-Template mit Typo-Script erzeugen und wie Sie zuvor in Photoshop erstellte Buttons für Navigation und Menüs ein-binden.

Im Verlauf des Buches werden zwei Beispielpro-jekte umgesetzt. So bekommen Sie den typischen Workflow eines Webdesigners aus nächster Nähe mit und sind schließlich auf alle Anforderungen vorbereitet.

Sie werden umfassend für das Erstellen und Layouten von Websites mit Photoshop geschult, so dass Sie Ihre eigenen Ideen professionell umset-zen können.

Photoshop-Funktionen speziell für Webdesigner detailliert erläutertZahlreiche Workshops zum Erstellen einzelner Elemente und verschiedener Layout-VariantenVollständiger Workfl ow bis zur statischen HTML-Seite und zum TYPO3-Template

ISBN 978-3-8266-5607-1ISBN 978-3-8266-5607-1

ISBN 978-3-8266-1775-1

ISBN 978-3-8266-1779-9

(D) €

39

,95

Inklusive CD-ROM

ISBN 978-3-8266-5507-4

978-3-8266-5607-1_umschlag 02.indd 1 31.08.2010 16:26:26

Page 2: Photoshop CS5 - mediendb.hjr-verlag.de · Mora 29 mm Photoshop CS5 für Webdesigner Adobe Photoshop CS5 für Webdesigner Nils Manuel Mora Außerdem zum Thema bei mitp: Aus dem Inhalt:

391

IndexAAbdunkeln siehe EbenenfüllmethodenAktionen 104Aufhellen siehe EbenenfüllmethodenAuflösungen 22Ausschluss siehe Ebenenfüllmethoden

BBildschirmauflösungen siehe AuflösungenBriefing 35Browserkompatibilität 292

IETester 293Lunascape 292

Brushes 64ABR Viewer 66Brushes anpassen 72Eigene Brushes erstellen 66Pinselspitzen hinzuladen 65

Buttons 187Badges 202Button mit Lichtreflexion 188Button mit Symbol 206Horizontale Navigationsleiste 205Mini-Button 198Orb 191Sticker 199Vertikales Menü 209Vista-Style 197

CChronologisches Menü 316Coding

Barrierefreies Coding 240Das Kontaktformular 283Das PHP-Skript zum Einbinden von Unter-

seiten 263Die Bildergalerie 270Formularauswertung 286Formularauswertung mit externem Skript

288Formular-Chef 288Lightbox 2 271

PHP-Skript zum Einbinden von Untersei-ten 270

Unterseiten anlegen 262View Source Chart (Firefox Add-On) 250

Content-Management-Systemen siehe TYPO3CSS

CSS-Datei einbinden 240Druckversion definieren 241Dynamischer Content-Bereich 248Hintergrundfarbe 241Hintergrundgrafik 242Kommentare 241Spaltenlayout 267

Custom Shapes siehe Formen

DDifferenz siehe EbenenfüllmethodenDigital Native 19Disclaimer 290Drittel-Regel 24Dynamische Inhalte 350

EEbenenfüllmethoden 95Ebenenkompositionen 208Ebenenmasken 143Eselsohr 128

FFarbbalance 115Farbe

Adobe Kuler 50Das Farbkonzept 49Farbpalette 49Farbverläufe 51, 79Farbwirkung 25Hexadezimale Farbangaben 48

Farbe siehe EbenenfüllmethodenFarbig abwedeln siehe EbenenfüllmethodenFarbton siehe EbenenfüllmethodenFarbton/Sättigung 88, 112, 114

Färben 89Favicon 318

00_Photoshop-5607-1.book Seite 391 Donnerstag, 2. September 2010 4:51 16

© des Titels »Adobe Photoshop CS5 für Webdesigner« (ISBN 978-3-8266-5607-1) 2010 by Verlagsgruppe Hüthig Jehle Rehm GmbH, Heidelberg Nähere Informationen unter: http://www.it-fachportal.de/5607

Page 3: Photoshop CS5 - mediendb.hjr-verlag.de · Mora 29 mm Photoshop CS5 für Webdesigner Adobe Photoshop CS5 für Webdesigner Nils Manuel Mora Außerdem zum Thema bei mitp: Aus dem Inhalt:

392

I N D E X ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

Flächen und Hintergründe 55Muster 57

Formen 171Fotobearbeitung für Webdesign

Kante verbessern 101Fotobearbeitung für Webdesigner 81

Copyright siehe UrheberrechtCreative Commons 84Fotorecherche 82Horizont ausrichten 94Inhaltssensitives Füllen 102Nutzungsrechte 82Objekte freistellen 99, 210Urheberrecht 83

Fotofilter 112FTP-Manager 369Füll- und Einstellungsebenen 109

GGoldener Schnitt 24, 93Gradationskurve 91, 176Grids

960-Grid-System 23, 384Gridmaker 384

HHaftungsausschluss siehe DisclaimerHart mischen siehe EbenenfüllmethodenHartes Licht siehe EbenenfüllmethodenHellere Farbe siehe EbenenfüllmethodenHelligkeit/Kontrast 115Hierarchisches Menü 316Hover-Effekt 208HTML

Formulare 283Grundgerüst 239Interaktives Menü 268Sonderzeichen 262Zeichenkodierung 239

HTML-Editor 361CoffeeCup Free HTML Editor 366Dreamweaver 362HTML-Grundgerüst 365Weaverslave 367

IImageMagick 358Indizierte Farbe 273Ineinanderkopieren siehe Ebenenfüllmethoden

Inhaltbewahrendes Skalieren 122Interface siehe User Interface

KKarbonfasermuster 59

LLichtpunkt siehe EbenenfüllmethodenLinear abwedeln (Hinzufügen) siehe Ebenen-

füllmethodenLineares Licht siehe EbenenfüllmethodenLogo

Das 3D-Logo 155Das Abstraktions-Logo 152Das Chrom-Logo 174Das Eis-Logo 165Das Feuer-Logo 172Das Gold-Logo 170Das Origami-Logo 151Glanzeffekte 162Logo-Entwurf 39Logo-Gestaltung 149Reflexionen 160

Luce 387Luminanz siehe Ebenenfüllmethoden

NNavigationsebenen 316Navigationskonzepte 315Negativ multiplizieren siehe Ebenenfüllmetho-

den

OOut of Bounds siehe Out of FrameOut of Frame 121

PPage Curl siehe EselsohrPhotoFrame 136Photoshop

Die Arbeitsfläche 45Farben 47Photoshop-Versionen 44

Pinselspitzen siehe BrushesPlugins 383Prägnanz siehe User InterfaceProportionen 23

00_Photoshop-5607-1.book Seite 392 Donnerstag, 2. September 2010 4:51 16

© des Titels »Adobe Photoshop CS5 für Webdesigner« (ISBN 978-3-8266-5607-1) 2010 by Verlagsgruppe Hüthig Jehle Rehm GmbH, Heidelberg Nähere Informationen unter: http://www.it-fachportal.de/5607

Page 4: Photoshop CS5 - mediendb.hjr-verlag.de · Mora 29 mm Photoshop CS5 für Webdesigner Adobe Photoshop CS5 für Webdesigner Nils Manuel Mora Außerdem zum Thema bei mitp: Aus dem Inhalt:

393

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– I N D E X

RRahmen 119

Dynamische Rahmen 124Fixe Rahmen 124Gestrichelte Linie 127

Ränder 119Abgerundete Ecken 137Briefmarkenrand 126

Raster 206Relative Größenzuweisung in HTML/CSS 222

Elternelemente 222Rollover-Effekt siehe Hover-EffektRSS-Feeds 343

SSättigung siehe EbenenfüllmethodenScanline-Muster 60Schwarzweiß 90Scribble siehe SkizzeSkalieren (Inhalt bewahren) siehe Inhaltbe-

wahrendes SkalierenSkizze 35, 36, 42Slicing

Das Slice-Werkzeug 243, 256Slices speichern 257

Smart-Objekte 109Speaking Navigation 17Spiegeleffekt 207, 277Sprenkeln siehe EbenenfüllmethodenStapelverarbeitung 104, 107Statische Inhalte 350Strahlendes Licht siehe EbenenfüllmethodenSubtrahieren siehe Ebenenfüllmethoden

TThredgeholder 386Tonwertkorrektur 86, 111

Tonwertspreizung 86Tonwertumfang 88

TYPO3 295Backend 376Backend-Module 377Content-Darstellung 308Datums- und Zeitanzeige 343Dynamisches Grafikmenü 320Erweiterungen 329, 338Erweiterungs-Manager 329, 338, 346Erweiterungs-Template 335, 346

Extensions 328, 338Fileadmin 299Font-File 322Footer anlegen 312Gästebuch 328GhostScript 379Grafiken einbinden 299Grafikmenü 306, 320Hover-Effekt 307Installation des CMS 373Install-Tool 378Konstanten 303Konstanten-Editor 336, 346Mail-Formular 326Neue Seite erstellen 298News 338News-Einträge 340Plugins 329, 338, 346Root-Seite 298Seitenbaum 298Seiteneigenschaften 305Seiten-ID 298Seiteninhalt anlegen 310Seitensprache 332, 342Spracheinstellung 380Statische Templates einbinden 346Statische Templates einschließen 309,

331, 341Statisches Grafikmenü 305Subparts 297Template anlegen 299Template-Ressourcen 309, 321Textmenü 312, 317TYPO3-Cache 336TypoScript 296, 300, 304, 306, 307,

309, 312TypoScript-Objekt-Browser 334Unterseiten anlegen 305Weiterleitung 308

TYPO3-Extensions 346Typografie für Webdesigner

@font-face-Funktion 217Font Stack Builder 218Font-Stacks 217Generische Schriftfamilie 218Google Font Directory 217Hierarchie 223Initialen 232Schmuckschriften 235

00_Photoshop-5607-1.book Seite 393 Donnerstag, 2. September 2010 4:51 16

© des Titels »Adobe Photoshop CS5 für Webdesigner« (ISBN 978-3-8266-5607-1) 2010 by Verlagsgruppe Hüthig Jehle Rehm GmbH, Heidelberg Nähere Informationen unter: http://www.it-fachportal.de/5607

Page 5: Photoshop CS5 - mediendb.hjr-verlag.de · Mora 29 mm Photoshop CS5 für Webdesigner Adobe Photoshop CS5 für Webdesigner Nils Manuel Mora Außerdem zum Thema bei mitp: Aus dem Inhalt:

394

I N D E X ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

Schriftart 216, 217Schriftgewicht 229Schriftgröße 222Schriftstil 228Schriftvariante 229Serifen 218Systemunabhängige Schriftarten 216Textausrichtung 233Textdekoration 229Texteinrückung 231Textfarbe 234Texttransformation 230Typetester 220White Space 226Wort- und Zeichenabstand 225Zeilenabstand 223Zeilenlänge 224

Typografie im Webdesign 215

UUlead FantasyWarp 389Ulead Particle 388Unterteilen siehe EbenenfüllmethodenUsability 17User Interface 17

VVirtual Photographer 385

WWebhosting siehe WebserverWebserver 349

eigener Webserver 350, 353externer Webserver 350, 351

Weiches Licht siehe EbenenfüllmethodenWet-Floor-Effekt siehe Spiegeleffekt

XXAMPP siehe Webserver

ZZeichenstift-Werkzeug 74, 181Zielgruppe 19

00_Photoshop-5607-1.book Seite 394 Donnerstag, 2. September 2010 4:51 16

© des Titels »Adobe Photoshop CS5 für Webdesigner« (ISBN 978-3-8266-5607-1) 2010 by Verlagsgruppe Hüthig Jehle Rehm GmbH, Heidelberg Nähere Informationen unter: http://www.it-fachportal.de/5607


Top Related