Galileo Computing < openbook > Galileo Design - Know-how für Kreative
Know-how für Kreative

Inhaltsverzeichnis
Vorwort
1 Was gibt es Neues in Photoshop CS4?
2 Camera Raw, DNG und HDR
3 Probleme bei Digitalfotos beheben
4 Retusche
5 Schwarzweiß, Duplex und Schmuckfarben
6 Farb- und Tonwertkorrekturen
7 Farbmanagement
8 Fotomontage und Composing
9 Effekte für Text und Bild
10 Filter
11 Photoshop und Web
12 Photoshop und Druck
13 Automatisierung in Photoshop
14 Datenhandling und Teamwork
15 Tipps und Tricks
16 Photoshop und 3D
17 Photoshop und Video
18 Die DVD zum Buch
Stichwort
Ihre Meinung?

Spacer
<< zurück
Adobe Photoshop CS4 - Fortgeschrittene Techniken von Thomas Bredenfeld
Kreative Lösungen für den professionellen Arbeitsalltag
Buch: Adobe Photoshop CS4 - Fortgeschrittene Techniken

Adobe Photoshop CS4 - Fortgeschrittene Techniken
geb., komplett in Farbe, mit DVD
843 S., 59,90 Euro
Rheinwerk Design
ISBN 978-3-8362-1237-3
Pfeil 11 Photoshop und Web
Pfeil 11.1 Grundlagen des Webdesigns mit Photoshop
Pfeil 11.1.1 Photoshops Aufgaben im Web
Pfeil 11.1.2 Produktpflege innerhalb der Creative Suite
Pfeil 11.2 Verfahren und Montagetechniken
Pfeil 11.2.1 Arbeitsvorbereitung: Die Bildgröße festlegen
Pfeil 11.2.2 Mit einem Screenshot arbeiten
Pfeil 11.2.3 Die Montage-Werkzeuge in Photoshop
Pfeil 11.2.4 Bilder und HTML
Pfeil 11.2.5 Schriften für das Web
Pfeil 11.2.6 Farben für das Web
Pfeil 11.3 Bildformate im Web
Pfeil 11.3.1 GIF
Pfeil 11.3.2 PNG
Pfeil 11.3.3 JPEG
Pfeil 11.4 Zoomify
Pfeil 11.4.1 Zoomify-Export aus Photoshop
Pfeil 11.4.2 Ausgabe
Pfeil 11.4.3 Ansicht im Browser
Pfeil 11.4.4 Zoomifyer for Flash
Pfeil 11.4.5 Einsatz
Pfeil 11.5 Für Web und Geräte speichern
Pfeil 11.5.1 JPEG-Einstellungen
Pfeil 11.5.2 GIF-Einstellungen
Pfeil 11.5.3 Droplets
Pfeil 11.6 Device Central für Mobilgeräte
Pfeil 11.7 Webausgabe direkt aus Photoshop
Pfeil 11.7.1 Slicing
Pfeil 11.7.2 CSS
Pfeil 11.8 Photoshop und Fireworks
Pfeil 11.8.1 Photoshop-Dateien in Fireworks bearbeiten
Pfeil 11.8.2 Alternativen zum direkten Import aus Photoshop
Pfeil 11.8.3 Entwürfe aus Fireworks in Photoshop weiterbearbeiten
Pfeil 11.8.4 Slicing und HTML-Ausgabe aus Fireworks
Pfeil 11.8.5 HTML-Sprengstoff im Design
Pfeil 11.8.6 Mutationen und Seiten
Pfeil 11.9 Photoshop und Dreamweaver
Pfeil 11.9.1 Export aus Photoshop
Pfeil 11.9.2 Arbeiten in Dreamweaver
Pfeil 11.9.3 Fazit
Pfeil 11.10 Gestaltungselemente für das Webdesign
Pfeil 11.10.1 Grunge-Look mit Pinselspitzen
Pfeil 11.10.2 Stretched Pixels
Pfeil 11.10.3 Fake Barcode
Pfeil 11.10.4 Stilmix: Fotografische und zeichnerische Elemente
Pfeil 11.10.5 Farbverfremdungen
Pfeil 11.11 Nützliche Helfer
Pfeil 11.11.1 Art Directors Toolkit
Pfeil 11.11.2 xScope
Pfeil 11.11.3 Caliper
Pfeil 11.11.4 GridMaker
Pfeil 11.11.5 Layout Grid Generator
Pfeil 11.11.6 Firefox: Web Developer und Firebug
Pfeil 11.11.7 Microsoft Internet Explorer: Developer Toolbar und Entwicklertools


Galileo Computing - Zum Seitenanfang

11.7 Webausgabe direkt aus Photoshop Zur nächsten ÜberschriftZur vorigen Überschrift

Man kann direkt aus Photoshop fix und fertige HTML-Seiten inklusive aller benötigten Grafiken ausgeben lassen. Der Weg führt über den Befehl Für Web und Geräte speichern. Es wird statt nur eines einzigen Bildes eine HTML-Seite mit allem benötigten Code erzeugt, und alle passenden Bilder dazu werden in einen verknüpften Ordner ausgegeben.

Abbildung 11.25 Das Slice-Werkzeug ist bei Photoshop CS4 nun mit dem Freistellungswerkzeug gruppiert und teilt sich mit diesem den Shortcut Taste C .

Slicing | Eine wesentliche Rolle spielt dabei das sogenannte »Slicing«, das die Bilddatei in einzelne Segmente »zerschneidet«, die dann in das Gerüst vom HTML-Code eingefügt und damit im Browser darstellbar und im Web funktional gemacht werden.

Tabelle oder CSS | Der ausgegebene HTML-Code kann entweder in Form einer Tabelle oder in Form von <div>-Blocks mit dazugehörigem CSS-Code ausgegeben werden. Der favorisierte Weg führt über dieses Box-Modell von CSS (Cascading Style Sheets). Hierbei wird mit Rahmen pixelgenau layoutet. Dies ist konform zu aktuellen Standards im Web, produziert weniger Code und damit kleinere Dateien. Inhalt und Gestaltung sind sauber getrennt. Außerdem ist die Arbeit mit CSS verlässlicher und genauer in der Gestaltung.


Galileo Computing - Zum Seitenanfang

11.7.1 Slicing Zur nächsten ÜberschriftZur vorigen Überschrift


TIPP

Die Unterteilung des Screendesigns sollte in sinnvollen -Abschnitten erfolgen, die der Struktur des Designs (Menüs, Textboxen, Buttons) folgen und vor allem sehr sorgfältig gemacht werden. Ungenauigkeiten produzieren besonders bei der HTML-Ausgabe in Tabellenform kleine, oft nur 1 Pixel hohe bzw. breite Zellen, die manchmal massenhaft auftauchen und viel überflüssigen Code benötigen und zu sehr unübersichtlichen Verhältnissen im HTML-Code führen. Erfahrungsgemäß gehen die Feinarbeiten beim Slicing bei 200 % Vergrößerung am besten von der Hand.


Das Slice-Werkzeug rastet an Hilfslinien und Ebenenkanten ein und zerschneidet das Bild. Die einzelnen Segmente werden nummeriert und können nach einem Doppelklick darauf mit dem Slice-Auswahlwerkzeug ( Taste C ) benannt sowie mit einer URL und anderen Angaben für den späteren HTML-Code versehen werden. Besonders die sinnvolle Benennung erhöht stark die Übersicht und erspart später lange Suchereien im Code. Zudem sind selbst vergebene Namen in der Regel wesentlich kürzer als die von Photoshop automatisch vergebenen, was den Code verkürzt und die Dateigröße verringert.

Zur besseren Übersicht vor allem bei kleinteiligen Designs empfiehlt es sich, in der Optionenleiste des Slice-Werkzeugs den Button Auto-Slices ausblenden zu aktivieren.

Abbildung 11.26 Screendesign mit Slice-Segmenten

Dann werden die von Photoshop selbst errechneten Slices (grau markiert) zwischen den manuell aufgezogenen (blau markiert) nicht mehr angezeigt.

Abbildung 11.27 Optionen für ein Slice-Segment

Abbildung 11.28 Slice mit HTML- statt Bildausgabe

»Für Web und Geräte speichern« wählen | Ist man mit dem Slicing fertig, wählt man wie bei einem Einzelbild DateiFür Web und Geräte speichern. An dieser Stelle kann man nun mit dem hier ebenfalls verfügbaren Slice-Auswahlwerkzeug einzelne oder mehrere Segmente markieren und im rechten Dialogteil wie gewohnt deren Kompressionseinstellungen und den Dateityp (GIF, JPEG oder PNG) auswählen.

Slice-Optionen | Auch der Dialog Slice-Optionen steht hier noch per Doppelklick auf ein Slice zur Verfügung. Man kann übrigens auch einzelne Slices von der Ausgabe als Bild ausnehmen und sie als Textabschnitt im HTML-Ergebnis ausgeben lassen, wenn man im Screendesign z. B. Platzhaltertext stehen hat, der später durch HTML-Text ersetzt werden soll, der sich bereits hier einfügen lässt.

Abbildung 11.29 Datei mit Slices im Dialog Für Web und Geräte speichern

Abbildung 11.30 Einstellungsmöglichkeiten im unteren Teil des Dateidialogs von Für Web und Geräte speichern

Klickt man auf Speichern, kann man die Ausgabe im Dateidialog noch weitgehend modifizieren. Als Format muss in unserem Fall HTML und Bilder gewählt werden.

Slices unterteilen | Für regelmäßige Layouts wie z. B. Bildergalerien oder Katalogseiten kann man das Slicing vereinfachen, indem man Slices unterteilt. Dazu finden Sie bei aktiviertem Slice-Auswahlwerkzeug ( Taste C ) den Button Unterteilen in der Optionenleiste. Dort kann man wahlweise mit der Anzahl der Unterteilungen oder mit einem festen Abstand in Pixeln arbeiten.

Abbildung 11.31 Unterteilen von Slices

Einstellungen unter »HTML« | Im Abschnitt HTML des Dialogs Ausgabeeinstellungen bei Für Web und Geräte Speichern (Abbindung 11.32, links) lässt sich der Code formatieren und sein Standard zwischen HTML und dem moderneren und verlässlicheren XHTML umschalten.

Einstellungen unter »Slices« | Unter Slices kann man unter Slice-Ausgabe (Abbildung 11.32, rechts) entscheiden, ob das in althergebrachter Tabellenform oder modern und standardgerecht in Form von CSS-Boxen geschehen soll. Darunter kann die Benennung der von Photoshop selbst vergebenen Namen für die Slices geändert werden.

Abbildung 11.32 Die Abteilungen HTML (links) und Slices (rechts) bei den Ausgabeeinstellungen

Einstellungen unter »Dateien speichern« | In der Abteilung Dateien speichern wird unter Dateibenennung festgelegt, wie die einzelnen Bilddateien heißen sollen, und unter Optimierte Dateien wählen Sie aus, wo sie abgelegt werden sollen. Auch die Kompatibilität der Benennung mit den verschiedenen Dateisystemen lässt sich hier regeln.

Abbildung 11.33 Die Abteilung Dateien speichern bei den Ausgabeeinstellungen

Abbildung 11.34 Ergebnisdateien nach dem Speichern

Das Ergebnis | Nach dem Speichern liegen anschließend eine HTML-Datei und ein Bilderordner an der angegebenen Stelle bereit, die man im Browser betrachten kann. Man beachte die von Photoshop vergebenen und die selbst bei den Slices eingetragenen Namen für die Bilder. Rufen wir nun im Browser eine Variante mit der Ausgabe in Tabellenform auf und machen die Struktur der Tabelle mit einem Hilfswerkzeug (Web Developer Tools für Firefox oder Developer Toolbar bei MSIE 7) sichtbar, so bietet sich die in Abbildung 11.35 Ansicht in.


Galileo Computing - Zum Seitenanfang

11.7.2 CSS topZur vorigen Überschrift

Gibt man das Ganze in Form von CSS-formatierten <div>-Boxen aus, schaut das so aus wie in Abbildung 11.36.

Abbildung 11.35 HTML-Ausgabe in Tabellenform

Abbildung 11.36 HTML-Ausgabe mit CSS

Abbildung 11.37 Slice-Namen als IDs für die <div>-Boxen bei der CSS-Ausgabe

Der eigentliche Seitencode umfasst bei der CSS-Variante 104 Zeilen, bei Tabellenausgabe 160 Zeilen. Die Boxen tragen die in Photoshop eingesetzten Namen als ID.

Da man ja bereits in Photoshop z. B. Menüpunkte und Buttons mit Links hinterlegen kann, funktionieren die so erstellten HTML-Seiten sofort und sind im Grunde auch so einsetzbar. Meist wird man diese allerdings weiter bearbeiten.



Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen. >> Zum Feedback-Formular
<< zurück
  Zum Katalog
Zum Katalog: Adobe Photoshop CS4 - Fortgeschrittene Techniken






Adobe Photoshop CS4
Fortgeschrittene Techniken

bestellen


 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: Adobe Photoshop CS6 und CC






 Adobe Photoshop
 CS6 und CC


Zum Katalog: Photoshop Lightroom 5






 Photoshop
 Lightroom 5


Zum Katalog: Photoshop Artworks






 Photoshop Artworks


Zum Katalog: Adobe Photoshop für Fortgeschrittene






 Adobe Photoshop für
 Fortgeschrittene


Zum Katalog: Die Schöne und das Biest






 Die Schöne und
 das Biest


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo





Copyright © Rheinwerk Verlag GmbH 2010
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de