Adobe Photoshop CS5 für Webdesigner

Transkript

1 Adobe Photoshop CS5 für Webdesigner von Nils Manuel Mora 1. Auflage Adobe Photoshop CS5 für Webdesigner Mora schnell und portofrei erhältlich bei beck-shop.de DIE FACHBUCHHANDLUNG Thematische Gliederung: Web Graphik & Design, Web-Publishing mitp/bhv 2010 Verlag C.H. Beck im Internet: ISBN

2 29 mm Aus dem Inhalt: Konzeption des Layouts: User Interface, Auflösungen, Proportionen, Farbwirkung Farben in Photoshop: Farbkonzepte, Farbverlä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, Eselsohr, abgerundete Ecken, Fotorahmen Logo-Gestaltung: Origami, 3D, Eis, Gold, Feuer, Chrom Buttons: Lichtreflexionen, Orb, Mini-Button, Sticker, Badges, Rollover-Effekte Typografie: Schriftarten, Größe, Formatierung, Farbe, Schmuckschriften Slicing und Coding in HTML TYPO3-Template aus Beispielprojekt erstellen TYPO3 erweitern: Mail-Formular, Gästebuch, News 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 darauf 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 Entwicklungsprozess 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 Vorgehensweisen 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. ISBN ISBN Zusätzlich zeigt Ihnen der Autor in den letzten beiden Kapiteln, wie Sie ein in Photoshop erstelltes Layout in das Content Management System TYPO3 übertragen, daraus ein TYPO3-Template mit TypoScript erzeugen und wie Sie zuvor in Photoshop erstellte Buttons für Navigation und Menüs einbinden. Im Verlauf des Buches werden zwei Beispielprojekte umgesetzt. So bekommen Sie den typischen Workflow eines Webdesigners aus nächster Nähe mit und sind schließlich auf alle Anforderungen vorbereitet. ISBN Sie werden umfassend für das Erstellen und Layouten von Websites mit Photoshop geschult, so dass Sie Ihre eigenen Ideen professionell umsetzen können. Einrichten eines eigenen Webservers Kostenlose PhotoshopPlugins Nils Manuel Mora Mora Außerdem zum Thema bei mitp: Photoshop CS5 für Webdesigner Photoshop-Funktionen speziell für Webdesigner detailliert erläutert Zahlreiche Workshops zum Erstellen einzelner Elemente und verschiedener Layout-Varianten Vollständiger Workflow bis zur statischen HTML-Seite und zum TYPO3-Template Adobe Photoshop CS5 für Webdesigner ISBN (D) 39,95 ISBN _umschlag 02.indd 1 Inklusive CD-ROM :26:26

3 00_Photoshop book Seite 3 Donnerstag, 2. September :51 16 Nils Manuel Mora Adobe Photoshop CS5 für Webdesigner

4 00_Photoshop book Seite 4 Donnerstag, 2. September :51 16 Bibliografische Information der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über < abrufbar. Bei der Herstellung des Werkes haben wir uns zukunftsbewusst für umweltverträgliche und wiederverwertbare Materialien entschieden. Der Inhalt ist auf elementar chlorfreiem Papier gedruckt. ISBN Auflage kundenbetreuung@hjr-verlag.de Telefon: / Telefax: / mitp, eine Marke der Verlagsgruppe Hüthig Jehle Rehm GmbH Heidelberg, München, Landsberg, Frechen, Hamburg Dieses Werk, einschließlich aller seiner Teile, ist urheberrechtlich geschützt. Jede Verwertung außerhalb der engen Grenzen des Urheberrechtsgesetzes ist ohne Zustimmung des Verlages unzulässig und strafbar. Dies gilt insbesondere für Vervielfältigungen, Übersetzungen, Mikroverfilmungen und die Einspeicherung und Verarbeitung in elektronischen Systemen. Lektorat: Sabine Schulz Sprachkorrektorat: Maren Feilen Satz: III-satz, Husby, Druck: Fuldaer Verlagsanstalt, Fulda Coverbild: kalafoto Fotolia.com

5 00_Photoshop book Seite 5 Donnerstag, 2. September :51 16 Inhalt EINLEITUNG E.1 Über die Beispielprojekte E.2 Der Aufbau des Buches E.3 Über die CD Kapitel 1 ERSTE ÜBERLEGUNGEN ZUM LAYOUT User Interface Zielgruppenorientiertes Design Auflösungen Proportionen Farbwirkung Verschiedene Layout-Varianten Beispielprojekt»Photo Canvas« Beispielprojekt»N.M.-Guitars« Kapitel 2 DIE ARBEITSOBERFLÄCHE VON PHOTOSHOP Ein neues Dokument anlegen Kapitel 3 FARBEN IN PHOTOSHOP Das Farbkonzept Farbverläufe Beispielprojekt»N.M.-Guitars«Farbpalette anlegen Kapitel 4 FLÄCHEN UND HINTERGRÜNDE IM WEBDESIGN Flächen mit Mustern füllen Brushes verwenden Das Zeichenstift-Werkzeug Beispielprojekt»N.M-Guitars«Aufteilung der Fläche Kapitel 5 FOTOBEARBEITUNG FÜR WEBDESIGNER Fotorecherche und Nutzungsrechte Die Tonwertkorrektur Farbton/Sättigung Schwarzweiß Der Goldene Schnitt

6 00_Photoshop book Seite 6 Donnerstag, 2. September :51 16 INHALT 5.6 Horizont ausrichten Ebenenfüllmethoden Objekte freistellen Inhaltssensitives Füllen Aktionen und Stapelverarbeitung Beispielprojekt»Photo Canvas«Füll- und Einstellungsebenen verwenden Beispielprojekt»Photo Canvas«Ein Foto altern lassen Kapitel 6 RAHMEN UND RÄNDER Out of Frame Fixe oder dynamische Rahmen Briefmarkenrand Gestrichelte Linie Eselsohr Einige weitere Möglichkeiten Photoshop-Plugins Beispielprojekt»N.M.-Guitars«Abgerundete Ecken Beispielprojekt»N.M.- Guitars«Optische Aufwertung durch klare Konturen und farbliche Highlights Beispielprojekt»Photo Canvas«Der alte Fotorahmen Kapitel 7 LOGO-GESTALTUNG Das Origami-Logo Das Abstraktions-Logo Das 3D-Logo Das Eis-Logo Das Gold-Logo Das Feuer-Logo Das Chrom-Logo Beispielprojekt»Photo Canvas«Das Logo gestalten Beispielprojekt»N.M.-Guitars«Header und Logo gestalten Kapitel 8 BUTTONS Simpler Button mit Lichtreflexion Orb (kugelförmiger Button) Vista-Style

7 00_Photoshop book Seite 7 Donnerstag, 2. September :51 16 INHALT 8.4 Mini-Button Sticker Badges Beispielprojekt»N.M.-Guitars«Horizontale Navigationsleiste Ebenenkompositionen Beispielprojekt»Photo Canvas«Vertikales Menü Kapitel 9 TYPOGRAFIE IM WEBDESIGN Schriftarten und Font-Stacks Größen und Abstände Schriftformatierung Textfarbe Schmuckschriften Kapitel 10 SLICING UND CODING HTML-Grundlagen Beispielprojekt»N.M.-Guitars« Beispielprojekt»Photo Canvas« Browserkompatibilität Kapitel 11 BEISPIELPROJEKT»N.M.-GUITARS«DAS TYPO3-TEMPLATE Layout-Dateien einbinden Grafiken mit TypoScript einbinden Menü und Unterseiten Content-Darstellung Der Footer Kapitel 12 ALTERNATIVE NAVIGATIONSKONZEPTE IN TYPO Vertikales Textmenü Dynamisches Grafikmenü Kapitel 13 BESONDERE INHALTSELEMENTE IN TYPO Das Mail-Formular Gästebuch News Zusammenfassung

8 00_Photoshop book Seite 8 Donnerstag, 2. September :51 16 INHALT Anhang A DAS EINRICHTEN EINES WEBSERVERS A.1 Externes Webhosting A.2 Installation eines eigenen Servers Anhang B DER HTML-EDITOR UND DIE SYNCHRONISATION MIT DEM SERVER B.1 Dreamweaver B.2 CoffeeCup Free HTML Editor Anhang C DER FTP-MANAGER Anhang D TYPO3 INSTALLIEREN D.1 Das Backend konfigurieren D.2 Benutzereinstellungen D.3 Die TYPO3-Datenbank Anhang E KOSTENLOSE PHOTOSHOP-PLUGINS E.1 Gridmaker E.2 Virtual Photographer E.3 Thredgeholder E.4 Luce E.5 Ulead Particle E.6 Ulead FantasyWarp INDEX