photoshop cs5 - · pdf filemora 29 mm photoshop cs5 für webdesigner adobe photoshop cs5...

Mor

a

29 mm

Phot

osho

p CS

5 f

r W

ebde

sign

er

Adobe

Photoshop CS5 fr Webdesigner

Nils Manuel Mora

Auerdem zum Themabei mitp:

Aus dem Inhalt: Konzeption des Layouts:

User Interface, Auf-lsungen, Proportionen, Farbwirkung

Farben in Photoshop: Farbkonzepte, Farb-verlufe, Farbpaletten

Flchen und Hintergrnde: Muster, Brushes, Formen

Fotobearbeitung fr Webdesigner: Nutzungsrechte, Tonwertkorrekturen, der Goldene Schnitt, Ebenenfllmethoden, Objekte freistellen

Rahmen und Rnder: 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, Gre, Formatierung, Farbe, Schmuckschriften

Slicing und Coding in HTML

TYPO3-Template aus Bei-spielprojekt erstellen

TYPO3 erweitern: Mail-Formular, Gste-buch, News

Einrichten eines eigenen Webservers

Kostenlose Photoshop-Plugins

Photoshop CS5 ist eine extrem umfangreiche Software und bietet zahlreiche Funktionen fr viele unterschiedliche Anforderungen. Wollen Sie Photoshop CS5 im Webdesign einsetzen, stehen Ihnen dafr unzhlige Effekte und Werkzeuge zur Verfgung. 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 hierfr bentigen.

Der Autor zeigt Ihnen den vollstndigen Entwick-lungsprozess fr 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 fr schlichte oder kreative Layouts kennen. In zahlreichen kleinen Workshops stellt der Autor Schritt fr Schritt einzelne Elemente vor, die Sie fr Ihre Website einsetzen knnen. Diese sind auch als Photoshop-Datei auf der CD enthalten.

Zustzlich 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 fr Navigation und Mens ein-binden.

Im Verlauf des Buches werden zwei Beispielpro-jekte umgesetzt. So bekommen Sie den typischen Workflow eines Webdesigners aus nchster Nhe mit und sind schlielich auf alle Anforderungen vorbereitet.

Sie werden umfassend fr das Erstellen und Layouten von Websites mit Photoshop geschult, so dass Sie Ihre eigenen Ideen professionell umset-zen knnen.

Photoshop-Funktionen speziell fr Webdesigner detailliert erlutertZahlreiche Workshops zum Erstellen einzelner Elemente und verschiedener Layout-VariantenVollstndiger 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

391

IndexAAbdunkeln siehe EbenenfllmethodenAktionen 104Aufhellen siehe EbenenfllmethodenAuflsungen 22Ausschluss siehe Ebenenfllmethoden

BBildschirmauflsungen siehe AuflsungenBriefing 35Browserkompatibilitt 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 EbenenfllmethodenDigital Native 19Disclaimer 290Drittel-Regel 24Dynamische Inhalte 350

EEbenenfllmethoden 95Ebenenkompositionen 208Ebenenmasken 143Eselsohr 128

FFarbbalance 115Farbe

Adobe Kuler 50Das Farbkonzept 49Farbpalette 49Farbverlufe 51, 79Farbwirkung 25Hexadezimale Farbangaben 48

Farbe siehe EbenenfllmethodenFarbig abwedeln siehe EbenenfllmethodenFarbton siehe EbenenfllmethodenFarbton/Sttigung 88, 112, 114

Frben 89Favicon 318

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

des Titels Adobe Photoshop CS5 fr Webdesigner (ISBN 978-3-8266-5607-1) 2010 by Verlagsgruppe Hthig Jehle Rehm GmbH, Heidelberg Nhere Informationen unter: http://www.it-fachportal.de/5607

392

I N D E X

Flchen und Hintergrnde 55Muster 57

Formen 171Fotobearbeitung fr Webdesign

Kante verbessern 101Fotobearbeitung fr Webdesigner 81

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

Fotofilter 112FTP-Manager 369Fll- und Einstellungsebenen 109

GGoldener Schnitt 24, 93Gradationskurve 91, 176Grids

960-Grid-System 23, 384Gridmaker 384

HHaftungsausschluss siehe DisclaimerHart mischen siehe EbenenfllmethodenHartes Licht siehe EbenenfllmethodenHellere Farbe siehe EbenenfllmethodenHelligkeit/Kontrast 115Hierarchisches Men 316Hover-Effekt 208HTML

Formulare 283Grundgerst 239Interaktives Men 268Sonderzeichen 262Zeichenkodierung 239

HTML-Editor 361CoffeeCup Free HTML Editor 366Dreamweaver 362HTML-Grundgerst 365Weaverslave 367

IImageMagick 358Indizierte Farbe 273Ineinanderkopieren siehe Ebenenfllmethoden

Inhaltbewahrendes Skalieren 122Interface siehe User Interface

KKarbonfasermuster 59

LLichtpunkt siehe EbenenfllmethodenLinear abwedeln (Hinzufgen) siehe Ebenen-

fllmethodenLineares Licht siehe EbenenfllmethodenLogo

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 Ebenenfllmethoden

NNavigationsebenen 316Navigationskonzepte 315Negativ multiplizieren siehe Ebenenfllmetho-

den

OOut of Bounds siehe Out of FrameOut of Frame 121

PPage Curl siehe EselsohrPhotoFrame 136Photoshop

Die Arbeitsflche 45Farben 47Photoshop-Versionen 44

Pinselspitzen siehe BrushesPlugins 383Prgnanz siehe User InterfaceProportionen 23

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

des Titels Adobe Photoshop CS5 fr Webdesigner (ISBN 978-3-8266-5607-1) 2010 by Verlagsgruppe Hthig Jehle Rehm GmbH, Heidelberg Nhere Informationen unter: http://www.it-fachportal.de/5607

393

I N D E X

RRahmen 119

Dynamische Rahmen 124Fixe Rahmen 124Gestrichelte Linie 127

Rnder 119Abgerundete Ecken 137Briefmarkenrand 126

Raster 206Relative Grenzuweisung in HTML/CSS 222

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

SSttigung siehe EbenenfllmethodenScanline-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 EbenenfllmethodenStapelverarbeitung 104, 107Statische Inhalte 350Strahlendes Licht siehe EbenenfllmethodenSubtrahieren siehe Ebenenfllmethoden

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 312Gstebuch 328GhostScript 379Grafiken einbinden 299Grafikmen 306, 320Hover-Effekt 307Installation des CMS 373Install-Tool 378Konstanten 303Konstanten-Editor 336, 346Mail-Formular 326Neue Seite erstellen 298News 338News-Eintrge 340Plugins 329, 338, 346Root-Seite 298Seitenbaum 298Seiteneigenschaften 305Seiten-ID 298Seiteninhalt anlegen 310Seitensprache 332, 342Spracheinstellung 380Statische Templates einbinden 346Statische Templates einschlieen 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 fr 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 fr Webdesigner (ISBN 978-3-8266-5607-1) 2010 by Verlagsgruppe Hthig Jehle Rehm GmbH, Heidelberg Nhere Informationen unter: http://www.it-fachportal.de/5607

394

I N D E X

Schriftart 216, 217Schriftgewicht 229Schriftgre 222Schriftstil 228Schriftvariante 229Serifen 218Systemunabhngige Schriftarten 216Textausrichtung 233Textdekoration 229Texteinrckung 231Textfarbe 234Texttransformation 230Typetester 220White Space 226Wort- und Zeichen