Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative

Inhaltsverzeichnis
Vorwort
1 Was ist neu in Photoshop CS2?
2 Digitalfotos optimal vorbereiten
3 Retusche
4 Grundlagen Farbe
5 Farb- und Tonwertkorrekturen
6 Farbmanagement
7 Fotomontage und Composing
8 Effekte für Text und Bild
9 Filter
10 Screendesign mit Photoshop CS2
11 Druckausgabe
12 Ausgabe für das Web
13 Ausgabe für Video
14 Teamwork und Versionierung
15 Adobe Bridge
16 Automation in Photoshop
17 Tipps und Tricks
Die Buch-DVD
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Adobe Photoshop CS2 professionell von Thomas Bredenfeld
Buch: Adobe Photoshop CS2 professionell

Adobe Photoshop CS2 professionell
komplett in Farbe, mit DVD
507 S., 49,90 Euro
Rheinwerk Design
ISBN 978-3-89842-700-5
gp 10 Screendesign mit Photoshop CS2
  gp 10.1 Verfahren und Montagetechniken
    gp 10.1.1 Arbeitsvorbereitung: Die Bildgröße festlegen
    gp 10.1.2 In Screenshot arbeiten
    gp 10.1.3 Die Montage-Werkzeuge in Photoshop
  gp 10.2 Adobe ImageReady
    gp 10.2.1 Slices und Rollover
    gp 10.2.2 Verschiedene Browserfenstergrößen: Was tun?
    gp 10.2.3 Größenveränderbares Webdesign
    gp 10.2.4 HTML-Sprengstoff im Design
  gp 10.3 Gestaltungselemente und -tricks
    gp 10.3.1 Stretched Pixels
    gp 10.3.2 Fake Barcode
    gp 10.3.3 Raster und Gitternetze
    gp 10.3.4 Endlos-Hintergrund für Webseiten
    gp 10.3.5 Stilmix: Fotografische und zeichnerische Elemente
    gp 10.3.6 Farbverfremdungen
  gp 10.4 Farbschemata
    gp 10.4.1 Farbtabellen aus Bildern gewinnen
    gp 10.4.2 Farbschemata entwickeln
    gp 10.4.3 Animationen


Rheinwerk Design

10.2 Adobe ImageReady  downtop

Das Programm ImageReady schaut Photoshop auf den ersten Blick sehr ähnlich. Vor allem das User Interface ist großteils gleich. Ursprünglich war ImageReady als »Mini-Photoshop« für Webdesigner und als Ausgabe-Werkzeug für Photoshop-Dateien in Richtung Web gedacht. In der Anfangszeit haben es viele Photoshop-User lediglich benutzt, weil es kleinere JPEGs bei besserer Qualität produzieren konnte als Photoshop selbst. Nur wenige haben ImageReady benutzt, um komplettes Webdesign darin zu entwickeln. In dieser Hinsicht hat das Konkurrenzprodukt von Macromedia, Fireworks, dem Adobe-Programm den Rang abgelaufen. Macromedia hat bereits frühzeitig große Teile der Vektorzeichen-Engine von FreeHand in Fireworks integriert und als vollwertige Webdesign-Applikation mit gleichberechtigter Pixelbild- und Vektorbearbeitung in einem Programm positioniert. Zudem kann Fireworks Photoshop-Dateien genauso für das Web aufbereiten wie ImageReady, bisher jedoch meist mit einem Kompatibilitätsunterschied von mindestens einer Version. Da ist natürlich die Integration Photoshop – ImageReady viel besser. Die Frage der Konkurrenz ImageReady – Fireworks hat sich inzwischen durch die unmittelbar bevorstehende Übernahme von Macromedia durch Adobe auf Marketing-Spekulationen reduziert. Ohnehin ist ein großer Teil der ImageReady-Features im Laufe der Zeit in Photoshop integriert worden, seien es die Slice-Funktionen, der Befehl Für Web Speichern oder auch (neu hinzugekommen mit Photoshop CS2) die Animations-Funktion, sodass die Daseinsberechtigung für ImageReady immer schwächer wird. Man darf gespannt sein.


Rheinwerk Design

10.2.1 Slices und Rollover  downtop

Die wichtigste Aufgabe für ImageReady ist die Aufbereitung von Screendesigns für das Web. Das beinhaltet im Wesentlichen das so genannte Slicing (Zerschneiden) des Designs in eine Reihe von Einzelbildern, die webtauglich komprimiert und per HTML-Code für die Darstellung im Browser wieder zusammengebaut werden. Das geschieht entweder auf der Basis eines Layout-Gerüsts mit HTML-Tabellen oder mit einzelnen Rahmen (Layers) nach dem CSS-Standard. Es geht also um eine reine Ausgabe-Funktion. Gestalterisch passiert hier dann kaum noch etwas.


Abbildung

Daten auf der DVD

Sie finden die Datei zu diesem Workshop auf der Buch-DVD unter Workshops/10_Screendesign/10_Webdesign_IR.psd.


Schritt für Schritt: Slicing und Rollovers in ImageReady

Das Slicing wurde früher ausschließlich in ImageReady erledigt. Mittlerweile kann man das auch bereits in Photoshop mit dem Slice-Werkzeug () machen.

Abbildung 10.35   Slice- und Slice-Auswahl- Werkzeug

Slices zeichnen in Photoshop

Mit dem Slice-Werkzeug zeichnet man im Bild Bereiche, die dann später als Einzelbild exportiert werden. Die Linien, die beim Slicing entstehen, kennzeichnen gleichzeitig die Zeilen und Spalten der später generierten HTML-Tabelle oder die CSS-Layer-Boxen. Die Slices werden im Bild mit gelben Linien markiert (Abbildung 10.36). Wählt man eines mit dem Slice-Auswahl-Werkzeug aus, so ist es blau. Durch gleichzeitiges Drücken der / - Taste wechselt das Slice-Werkzeug jederzeit zum Slice-Auswahl-Werkzeug. Die erstellten Slices werden durchnummeriert, was an den kleinen blauen Etiketten in der linken oberen Ecke eines Slices zu sehen ist. Grau gekennzeichnete Slices werden für die Restflächen vergeben. Diese so genannten »Auto Slices« haben einen gestrichelten Rand. Beim Zeichnen kann man sich oft an jene Hilfslinien halten, die man zur Gestaltung des Screendesigns verwendet hat.

Abbildung 10.36   Im Bild gekennzeichnete Slices

Beim Zeichnen der Slices kann man bereits sehr früh etwas für eine schlanke Struktur und größere Übersichtlichkeit der künftigen HTML-Datei tun. Bei der Ausgabe wird ImageReady später eine mehr oder weniger komplexe HTML-Tabelle generieren, wobei sowohl vertikal als auch horizontal jede einzelne Linie für eine Tabellenzeile und -spalte steht. Man kann die Anzahl der Tabellenzellen, die ja immer eine bestimmte Menge an Code bedeutet, sehr stark reduzieren, wenn man sauber und überlegt arbeitet. So sollte man immer schauen, dass Slices sich an längeren Linienfluchten orientieren (blaue Pfeile in Abbildung 10.36), auch, wenn dadurch vielleicht der eine oder andere Button ein wenig größer wird. Die Summe der Bild-Dateigrößen bleibt ohnehin immer etwa gleich, unabhängig von Anzahl und Lage der Slices. Sorgt man dafür, dass möglichst viel horizontale und vertikale Slice-Grenzen in einer Linie fluchten, kommt man mit wesentlich weniger Tabellenzellen aus. Das betrifft vor allem die Slices, die Photoshop automatisch anlegt. Diese bekommen zusätzlich auch oft noch lange Dateinamen, was im Code unangenehm ins Gewicht fällt. Ein weiterer großer Vorteil liegt in der größeren Übersichtlichkeit des Codes. Viele Photoshop-User oder deren Webdesign-Kollegen, die ein solches Screendesign auf Slice-Basis geliefert bekommen, müssen das dann meist in Web-Editoren wie Dreamweaver, GoLive oder per Hand Coding weiterbearbeiten. Wenn man sich dann durch unnütze Tabellenzellen wühlen muss, steigert das nicht gerade die Produktivität. Auch für den Betrachter ist es viel netter, wenn eine Seite durch weniger Code schneller lädt. Es lohnt sich also, hier wirklich pixelgenau zu arbeiten (Abbildung 10.37 und 10.38).

Abbildung 10.37   Korrektes Slicing

Abbildung 10.38   Unsauberkeiten produzieren unnötige Tabellenzellen!

Nach dem Zeichnen sollte man noch die selbst erstellten Slices sinnvoll benennen. Das kann man zwar auch später noch in ImageReady nachholen, allerdings ist es besser, das bereits in Photoshop zu erledigen, weil dann später die Web-Inhalt-Palette in ImageReady, in der alle Slices gelistet werden, gleich von Anfang an wesentlich übersichtlicher ist.

Mit einen Doppelklick auf ein selbst erstelltes Slice öffnet sich der Dialog Slice-Optionen (Abbildung 10.39). Mit dem Slice-Typ kann man alternativ zu Bild auch Kein Bild auswählen. Dann erhält man an dieser Stelle eine »leere« Tabellenzelle. Das ist dann von Vorteil, wenn das Screendesign hier glatt einfarbig ist. Das kann man nämlich auch per HTML in der Tabelle über das Einfärben des Zellenhintergrundes erledigen. Man kann hier bereits einige Code-relevante Dinge eintragen, wie Link-Adresse (URL) und optional Ziel (Target für Websites mit »Frames«). Auch der Alt-Tag (Text für die »Tooltips«) kann hier bereits ebenso angegeben werden wie Text für die Statusleiste des Browsers (Meldungstext). Wichtig ist hier aber in erster Linie der Name. Bei URL sollte man zunächst eine Raute eintragen. Damit ist der Link zwar schon da, aber er tut noch nichts. Wichtig ist, dass er sich friedlich verhält und während der weiteren Bearbeitung und bei Tests keine Fehlermeldungen auswirft. Oft weiß man in diesem Stadium eines Projekts auch noch gar nicht, was dort hinkommen wird.

Abbildung 10.39   Slice-Optionen

Wechseln zu ImageReady

Abbildung 10.40   Schneller Wechsel zu ImageReady

Mit / + + oder dem Button am Fuß der Werkzeugleiste kann man nach dem Zeichnen der Slices zu ImageReady wechseln, um die Arbeit fortzusetzen. Hier lauert manchmal ein Fehlerdialog (Abbildung 10.41), der davor warnt, dass nun einige Smart Objects rausgeworfen werden, weil sie nicht erkannt wurden. Um welche Art es sich dabei handelt, wird nicht verraten. Man muss also nach dem Wechseln selbst kontrollieren, ob Ebenen fehlen. In der Hilfe-Datei zu beiden Programmen ist nichts dazu zu finden. Nachdem aber zum Thema Platzieren bei ImageReady im Kleingedruckten vermerkt ist, dass dort im Gegensatz zu Photoshop keine PDFs platziert werden können, geht der Verdacht in diese Richtung.

Abbildung 10.41   Warnung bei bestimmten Typen von Smart Objects

Eine weitere Unregelmäßigkeit ist ebenfalls zu beachten. Fallweise weichen Ebeneneffekte in beiden Programmen bei exakt gleichen Einstellungen visuell voneinander ab (Abbildung 10.42). Die Kante des Buttons ist viel schärfer als in Photoshop. Erst eine Erhöhung mancher Werte auf das Doppelte bringt in etwa eine Entsprechung.

Abbildung 10.42   Ebeneneffekt in Photoshop (links) und identischer Effekt in ImageReady

Offensichtlich ist die Integration von Photoshop und ImageReady noch immer nicht optimal und es ist wirklich wünschenswert, dass ImageReady eines Tages komplett in Photoshop aufgeht.

Nach dem Wechseln zu ImageReady erscheinen die in Photoshop erstellten Slices in der Web-Inhalt-Palette (Abbildung 10.43). Hier macht sich jetzt die Benennung bezahlt, denn gerade bei Buttons schauen die kleinen Thumbnails in der Platte alle gleich aus. Hat man viele Slices, empfiehlt sich der Gebrauch von Ordnern, den Slice-Sets, die man mit dem mittleren Button am Palettenfuß erstellen kann.

Abbildung 10.43   Web-Inhalt-Palette

In der Slice-Palette (Abbildung 10.44) finden wir die gleichen Eintragungen wieder, die in Photoshop in den Optionen des Slice-Werkzeugs zu sehen waren. In ImageReady gibt es einige Einstellmöglichkeiten mehr. Wählt man unter Typ Kein Bild aus, so kann man hier das Aussehen (Zellausrichtung und Hintergrund) und den Inhalt (Text) der Tabellenzelle bestimmen.

Die Textbox akzeptiert normalen Text (der dann in HTML »übersetzt« wird) oder direkte Code-Eingabe. Die Abbildung 10.46 zeigt das Resultat.

Abbildung 10.44   Slice als Tabellenzelle mit HTML-Text gefüllt

Abbildung 10.45   Slice-Palette

Abbildung 10.46   Slice-Palette mit Slice-Typ Kein Bild

Rollover-Effekt für Buttons erstellen

Abbildung 10.47   Neuen Rollover-Effekt erzeugen

Interaktive Effekte wie Rollover bereits in grafischen Umgebungen wie Photoshop, ImageReady oder Fireworks anzubieten, ist Teil der Erfolgsstory dieser Programme. In ImageReady ist dieses Feature noch dazu recht einfach und User-freundlich gelöst. Am Fuß der der Web-Inhalt-Palette findet man den Button Rollover-Status erstellen . Alternativ dazu kann man auch das Palettenmenü bemühen. Wir fügen den Status Over hinzu. Eine Unterebene zum Slice entsteht (Abbildung 10.48, links), die so benannt ist. Nun wird in der Ebenen-Palette (Mitte) zunächst das visuelle Erscheinungsbild dieses Zustandes mit Aus- und Einblenden der entsprechenden Ebenen hergestellt. Diese spezifische Kombination der Ebenen wird mit dem jeweiligen Status des Slices verknüpft. Das Prinzip ist der Ebenenkomposition sehr ähnlich, nur dass das hier auf bestimmte lokale Abschnitte beschränkt ist. In Abbildung 10.48 und 10.49 sind die beiden Zustände eines Buttons in beiden relevanten Paletten dargestellt.

Abbildung 10.48   »normal«-Zustand eines Buttons in der Web-Inhalt-Palette, der Ebenen-Palette und im Bild

Abbildung 10.49   »Rollover«-Zustand eines Buttons in der Web-Inhalt-Palette, der Ebenen-Palette und im Bild

Für den Wechsel im Erscheinungsbild mittels Rollover-Effekten kommen neben der Sichtbarkeit einer Ebene auch deren Position und alle Parameter infrage, die unter Ebenen-Stil zusammengefasst sind, also auch Deckkraft oder die Stärke eines Schlagschattens. Das eröffnet vielfältige visuelle Möglichkeiten, vor allem, wenn man weitere Zustände wie Down, Up, Out, Click etc. mit einbeziehen möchte. Die Kombination aller mit einem Rollover-Status verbundenen Änderungen lassen sich in der Stile-Palette für die spätere Wiederverwendung abspeichern. Rollover-Stile sind gegenüber den normalen Ebenen-Stilen mit einem schwarzen Dreieck gekennzeichnet .

Abbildung 10.50   Gespeicherter Rollover-Stil

Abbildung 10.51   Vorschau im Browser

Nach dieser Arbeit ist ein erster Check in einem oder mehreren Browsern angezeigt. Die links von Vorschau im Browser ( / + / + ) befindliche Dokument-Vorschau ist nicht zu empfehlen. Sie ist viel langsamer und zudem eher unrealistisch im Vergleich zu einem echten Browser, wo man auch gleich kontrollieren kann, ob der Code (HTML und JavaScript) passt. Im Browser wird bereits nahezu das Endergebnis dargestellt. Der JavaScript-Code, der sowohl für Effekte selbst als auch für das Vorausladen (Preloading) der für den späteren Tausch nötigen Bilder gebraucht wird, ist speziell bei Adobe-Produkten nicht immer einwandfrei gewesen. Bei ImageReady CS2 scheint in dieser Hinsicht alles okay zu sein. Der Code ist sauber, übersichtlich und verständlich, was vor allem für spätere Nachbearbeitung sowie Anpassungen wichtig ist.

Remote-Rollover-Effekt für die Landkarte erstellen

Da bei JavaScript, mit dem diese Rollover-Effekte realisiert werden, alle Bilder auf einer Webseite gleichberechtigte Objekte sind, gleich, ob es sich um Links handelt oder nicht, können Buttons nicht nur ihre eigenen Bilder tauschen, sondern auch andere »fernsteuern«. Man nennt diesen Effekt »Remote Rollover«. Er ist mit ImageReady leicht zu erstellen. Unabhängig davon, ob der Button für sich selbst bereits einen Rollover-Effekt hat, kann man dem Over-Status Änderungen in einem anderen Slice zuweisen. Bei unserem Landkarten-Beispiel werden zunächst die einfachen Rollovers für die vier Pins erledigt. Das funktioniert genauso wie bei den Buttons für das Menü. Hier wird einfach für den Over-Status die Ebene mit den gelben Pins sichtbar gemacht.

Bevor man beginnt, Remote Slices, wie sie bei ImageReady genannt werden, einzurichten, sollte man alles auf einen definierten Normalzustand setzen. In unserem Fall heißt das, die vier Ebenen mit Städtebild, Adressfeld sowie den beiden Rahmenboxen mit den Ebeneneffekten abzudrehen. Sie sollen unsichtbar sein, wenn die Maus nicht über einem der Pins auf der Karte ist.

Nun wählt man einfach für den ersten Pin in der Web-Inhalt-Palette das zugehörige Slice und dort den Zustand Over aus (Abbildung 10.52). Dann zieht man mit der Maus vom »Kringel«-Symbol zu dem Slice, das sich ändern soll, hier zum Slice »stadtbild«. Danach trägt dieses Slice ein »Target«-Symbol (Fadenkreuz ). Das »steuernde« Slice bekommt einen kleinen kreisförmigen Pfeil .

Abbildung 10.52   Verbindung zwischen Rollover-Slice und Remote-Slice herstellen

Abbildung 10.53   Wenn der Rollover-Status aktiviert ist, erscheint das Remote-Slice mit »Target«-Symbol

Die beiden Slices sind jetzt verbunden und man kann wie bei den einfachen Rollovers für die verschiedenen Zustände bestimmen, was wie aussehen soll. Abbildung 10.55 zeigt das für den Normalfall und für Over. Wichtig ist, dass dafür nicht das Remote-Slice ausgewählt wird, sondern das »steuernde« Slice mit seinen Zuständen!

Abbildung 10.54   Dieser Status hat ein Remote Slice (Pfeil).

Abbildung 10.55   »Normal«-Zustand (oben) und Over-Zustand (unten) des Remote Slice in der Web-Inhalt-Palette, der Ebenen-Palette und im Bild

Bild-Kompression: JPEG oder GIF?

Für eine möglichst niedrige Gesamtdateigröße der späteren Webseite ist es sehr vorteilhaft, dass man jedes Slice separat behandeln kann, was die Bild-Kompression angeht. Die Einstellungen hierzu finden Sie auf der Palette Optimierung (Abbildung 10.56). Die grundsätzliche Entscheidung zwischen den beiden gängigen Bild-Dateiformaten im Web, JPEG und GIF, fällt in unserem Beispiel leicht: Feine Details fotografischen Ursprungs und viele sanfte Verläufe verlangen eindeutig nach dem JPEG-Format. Das GIF-Format kommt für glatte Farbflächen und klare grafische Formen infrage. Da das gesamte Sceendesign relativ gleichmäßig detailliert ist, braucht hier auch keine Unterscheidung getroffen zu werden zwischen fein strukturierten Bereichen, die eine geringe Kompression benötigen, und weichgezeichneten Flächen, die eine starke Kompression vertragen. Deshalb kann man sorglos alle Slices markieren, entweder mit dem Slice-Auswahl-Werkzeug oder in der Web-Inhalt-Palette, und pauschal die Vorgabe mit dem Namen JPEG hoch auswählen, die mit 60 % Qualität komprimiert.

Da die Bildkompression nicht nur die Slices in unserem Beispiel betrifft, sondern allgemein die Ausgabe von Bildern für das Web sowohl in ImageReady als auch in Photoshop (bei Für Web speichern), werden Details hierzu im Kapitel »Ausgabe für Web« (siehe Seite 407) besprochen.

Abbildung 10.56   Einstellungen der Bild-Kompression für ein Slice (Optimierung)

Abbildung 10.57   Vergleich von Original und optimierter Version im 2-fach-Fenster

Finale Ausgabe als HTML-Seite

Ein wesentlicher Sprung vorwärts im Webdesign war die Fähigkeit von Programmen wie ImageReady oder Fireworks, ganze Webseiten inklusive Bildmaterial fix und fertig auszugeben – ein paar Mausklicks statt endlosem Copy & Paste. Es ist aber genug zu tun und zu beachten übrig geblieben. Damit die automatische Generierung einer kompletten HTML-Seite auch wirklich klappt, muss einem der wichtigsten Dinge in ImageReady Aufmerksamkeit geschenkt werden. Unter Datei · Ausgabe-Einstellungen · HTML legt ein mehrseitiger Dialog fest, welcher Code um die Bild-Slices herum ausgegeben wird. Die drei wichtigsten Seiten dieser Einstellungen seien im Folgenden genauer beschrieben.

Auf der ersten Seite HTML werden Formatierung und Kodierung eingestellt. Die Formatierung sorgt für gute Lesbarkeit, vor allem das Einrücken (Einzug ).

Abbildung 10.58   Ausgabe-Einstellungen · HTML

Bei den Zeilenenden kann auf die unterschiedlichen Gegebenheiten der drei wichtigsten Betriebssysteme (Mac, Windows, Unix) Rücksicht genommen werden, was die Verwendung von CR (Carriage Return) und LF (Line Feed) angeht. Die Wahl Automatisch macht in der Regel keine Probleme. Auch die automatische Kodierung nach ISO-8859 – 1 ist okay. Unten in dieser Dialogseite sollten die Kommentare auf jeden Fall aktiviert werden. ImageReady fügt dann einige (unsichtbare) Kommentarzeilen ins HTML ein, die später die Orientierung im Code ein wenig erleichtern.

Die Ausgabe in XHTML ist gegenüber HTML vorzuziehen. XHTML ist eine stark an das formal rigorose XML (Extended Mark–up Language) angelehnte Variante von HTML. XML schreibt für alles, was es beschreibt, eine zwar einfache und klare, dafür aber auch ganz strikte Auszeichnung vor. Das macht seine Stärke aus, denn man kann Daten derart allgemein gültig beschreiben, dass sie überall verstanden werden. HTML hingegen hat immer darunter gelitten, dass es laufend proprietäre Tags (Sprach-Elemente) gegeben hat, eingeführt sowohl von Netscape in seinem Navigator als auch von Microsoft für den Internet Explorer, denen das Standardisierungs-Konsortium W3C immer nur »hinterhergerannt« ist. Dieser lockere Umgang mit der Sprache HTML hat das Webdesign immer sehr erschwert, weil kaum eine Webseite mit allen Browsern gleich gut funktioniert hat, vom Aussehen einmal ganz zu schweigen. Dieser Zustand hat sich durch die Einführung des wesentlich strengeren XHTML sehr gebessert. Mit der entsprechenden Einstellung kann man dem auch in ImageReady Rechnung tragen, was sehr zu empfehlen ist.

Die nächste Seite des Dialogs, Slices, legt die Vorgaben für die Struktur des HTML-Codes und die Benennungskonventionen für die Bilder in den einzelnen Slices fest. Hierbei kann man grundsätzlich zwischen dem Gebrauch einer (HTML-)Tabelle oder dem von CSS unterscheiden. Zusammen mit der Einstellung XHTML ist CSS wegen der Konformität mit aktuellen Standards die bessere Wahl.

Abbildung 10.59   Ausgabe-Einstellungen · Slices

Sollen trotzdem Tabellen verwendet werden, ist einiges zu beachten und einzustellen. Da eine Tabelle ja lediglich eine Hilfskonstruktion ist, um Layout in HTML überhaupt möglich zu machen, muss/kann man hier entsprechend viel einstellen. Leere Zellen machen in einigen Browsern Ärger. Deshalb füllt man sie mit Dummy-Inhalten. Das ist in der Regel eine transparente 1x1-Pixel-GIF-Datei, die in Breite (W) und Höhe (H) per HTML skaliert wird. Die gezeigte Standard-Einstellung sollte man so lassen. Hinter dem Kürzel TD W&H verbirgt sich die Codierung für Breite und Höhe der einzelnen Tabellenzellen. Hier kann man Code sparen, indem man den Wert auf Nie setzt. Eine Tabellenzelle braucht nämlich keine Bemaßung, wenn sich ein Bild darin befindet, weil eine Zelle niemals kleiner werden kann als dieses Bild. Die Maße des Bildes, die sowieso ausgegeben werden, reichen aus. Bei den Abstandhalter-Zellen, der so genannten »Shim Row« (Shim = Unterlegscheibe), handelt es sich um eine unsichtbare, 1 Pixel hohe Tabellenzeile, die nur aus Einzelzellen besteht. Sie sollte immer eingefügt werden, weil ein Screendesign nach der Ausgabe als HTML fast immer aus Tabellenzellen besteht, die mit »Colspan« und »Rowspan« zusammengefasst wurden. Solche Gebilde können, je nach Browsertyp und -version des Betrachters, sehr instabil werden. Deshalb reiht man am Ende der Tabelle nochmals alle Spalten der Tabelle einzeln auf, um diese quasi »aufzuspannen«. Die Einstellung sollte hier also lauten: Immer (unten). Bei Immer würde sich oben ein sehr dünner, aber eventuell sichtbarer Abstand zum Browserfenster bilden.

Auf der Dialogseite Dateien speichern (Abbildung 10.60) wird die Benennung der Ausgabedateien fixiert. Zunächst kann der Name des Ordners bestimmt werden, der die einzelnen Bilder enthalten soll. Existiert er nicht, wird er angelegt. Im Bereich Dateibenennung legt man fest, wie die einzelnen Slices als Dateien benannt werden. Das umfasst auch die verschiedenen Zustände von Slices mit Rollover-Zuständen. Hier sollte man die Möglichkeit zu Abkürzungen wahrnehmen, denn manche Betriebssysteme gestatten keine langen Dateinamen. Fallweise wird man da von ImageReady aber gewarnt. Eine solche Warnung basiert auf der jeweiligen Einstellung für die Kompatibilität der Benennung .


HINWEIS

Vorsicht! Gibt man mehrere Screendesign-Dateien mit ImageReady aus und lässt dabei den Namen des Bilderordners gleich, kann es vorkommen, dass bei gleich benannten Slices in verschieden Dateien Bilder überschrieben werden. Hier muss man sehr sorgfältig mit den Benennungs-Optionen von ImageReady umgehen!


Alle diese Einstellungen kann und sollte man unter einem Vorgaben-Namen abspeichern. Beim endgültigen Abspeichern (Abbildung 10.61) unter Datei · Optimiert-Version speichern unter muss man darauf achten, dass HTML und Bilder ausgegeben und Alle Slices dabei erfasst werden.

Abbildung 10.60   Ausgabe-Einstellungen · datei Speichern

Test

Abbildung 10.61   Ausgabe von Bildern und HTML


Abbildung

Daten auf der DVD

Sie finden die ausgegebenen Daten zu diesem Workshop auf der Buch-DVD unter Workshops/10_Screendesign/10_Webdesign_Output.


Nach der Ausgabe sollte die HTML-Datei überprüft werden. Zunächst ist es ratsam, zu schauen, ob alles dort gelandet ist, wo man es hinhaben wollte. Das ist vor allem dann sehr wichtig, wenn solche Dateien gleich in eine bestehende Website eingebunden werden sollen. Im Bilder-Ordner erkennt man gut die Bilder der selbstbenannten Slices, die Bilder für den »Over«-Zustand sowie die Bilder mit Namen, die von ImageReday automatisch vergeben wurden.

Der nächste Schritt ist der Test im Browser. Im Gegensatz zur Vorschau im Browser werden jetzt die echten Dateien angezeigt. Sind Rollover im Spiel, sollte hier eine kurze Funktionskontrolle stattfinden.

Abbildung 10.62   HTML-Datei und Bilder-Ordner nach der Ausgabe

Abbildung 10.63   Rollover bei den Buttons

Abbildung 10.64   Rollover und Remote Rollover bei der Karte

Diese sollte in verschiedenen Browsern und sowohl auf der Windows- als auch auf der Mac-Plattform durchgeführt werden. An sich ist der von ImageReady produzierte JavaScript-Code weit gehend okay, aber speziell Microsoft hat beim Internet Explorer versionsabhängig fallweise andere Vorstellungen davon, wie JavaScript zu funktionieren hat. Auch ist bei Microsoft der bei der Interpretation des Codes zu Grunde liegende JavaScript-Dialekt »JScript« nur bedingt kompatibel zur Original-Version. In den meisten Fällen soll die HTML-Seite später weiterbearbeitet und ergänzt werden. Hier ist es nützlich, die Lage einzelner Elemente zu kennen. Für Tests und Weiterentwicklungen der Webseite ist der Open Source-Browser Firefox, der sich sehr eng an die vom W3C definierten Standards XHTML und CSS hält, sehr zu empfehlen. Er ist über so genannte »Extensions« erweiterbar, von denen es aufgrund der großen Gemeinde an freiwilligen Entwicklern inzwischen eine große Anzahl gibt.

Sehr nützlich ist die Web Developer Extension (download unter https://saddons.mozilla.org/extensions/?application=firefox). Mit ihr kann man diverse Eigenschaften von Webseiten bequem überprüfen, z. B. die Tabellenstruktur einer von ImageReady ausgegebenen Seite auf unsaubere oder überflüssige Slices untersuchen oder Namen von CSS-Layer-Boxen im Layout lokalisieren.

Abbildung 10.65   Die Web Developer Extension im Firefox-Browser

Auch sollte man auf Fehler in der Codierung achten, die ImageReady bei manchen Gelegenheiten leider macht, wie hier bei den Umlauten in einem Eintrag im Feld Statusleistenmeldung in der Slice-Palette. Gegen solche Überraschungen kann man sich mit gründlichen Tests und gutem Werkzeug wie dieser Firefox-Extension gut zur Wehr setzen. Aufgrund der hohen Standard-Kompatibilität kann man meist davon ausgehen, dass die Webseite auch auf Microsofts Internet Explorer gut funktioniert, wenn das auf Firefox der Fall ist, umgekehrt dagegen ist das sehr viel unsicherer.

Abbildung 10.66   Kontrolle der Ausgabe auf Tabellen-Basis im Firefox mit Outline · Outline Table Cells

Abbildung 10.67   Kontrolle der Ausgabe auf CSS-Layer-Basis mit Information · Display ID & Class Details

Abbildung 10.68   Codierungsfehler von ImageReady

Mancher Leser wird sich jetzt fragen, warum dieser Einstellungsdialog derart ausführlich besprochen wurde. Was geht einen Photoshop-User all dies HTML, XHTML oder CSS an?

Ein Grafiker, der einem Web-Editor oder -Programmierer Bilddateien oder meist ein komplettes Screendesign zuliefern muss, könnte diesem die Bilder zu jedem Slice und jedem Rollover-Zustand auch einzeln übergeben und dieser baut sich das mit eigenem Code zusammen. Dies ist allerdings mühsam und teuer. Änderungen bedeuten praktisch einen Neubeginn der Arbeit. So wie der Fotograf heute einiges von Color Management und Druckausgabe verstehen muss, braucht ein Designer, der im Web-Bereich mit Programmierern zusammenarbeiten muss, zumindest grundlegende Kenntnisse davon, was eine »Blackbox« wie ImageReady da überhaupt fabriziert.


Rheinwerk Design

10.2.2 Verschiedene Browserfenstergrößen: Was tun?  downtop

Ein Screendesign, wie es im vorangegangenen Beispiel produziert wurde, hat eine fixe Größe, hier für einen Bildschirm mit 1024x768 Pixel Auflösung. Was passiert, wenn der User einen größeren Monitor hat und das Browserfenster aufzieht? In der Regel würde eine aus ImageReady ausgegebene Webseite in einem solchen Fall immer links oben im Browserfenster sitzen. Das schaut selten gut aus. Für diesen Fall gibt es drei Möglichkeiten:

  • Es gibt einen Check mit JavaScript, der die Bildschirmgröße herausbekommen kann und dann dem Betrachter eine für diese Größe gestaltete Webseite abliefert. Der funktioniert aber leider nicht überall verlässlich. Außerdem muss man sich hier die Arbeit des Designs für jede Größe noch einmal machen.
  • Man kann die Seite zentrieren, entweder mittig oben oder in der Vertikalen und der Horizontalen. Das kann man im Webeditor regeln, indem man den Code, den ImageReady ausgegeben hat, an zwei leicht zu findenden Stellen modifiziert. Nach der von ImageReady eingefügten Kommentarzeile, die nach dem umfangreichen Seitenkopf mit den JavaScript-Passagen den Beginn des Slice-Bereichs und den Beginn der Tabelle markiert, ändert man Folgendes:
<!-- ImageReady Slices (043_screendesign_crop_ir.psd) --> 
 
<!-- Eingefuegt fuer Zentrierung hoch und quer --> 
<table width="100%" heigth="100%" border="0"> 
<tr><td valign="middle" align="center"> 
<!-- Ende Einfuegung --> 
<table id="Tabelle_01" width="996" border="0" cellpadding="0" cellspacing="0">
    • Soll nur oben mittig zentriert werden, lässt man das align="middle" einfach weg. Am Schluss der Datei müssen die neuen Tabellen-Tags natürlich auch wieder geschlossen werden. Diese Stelle ist ebenfalls leicht zu finden:
</table> 
<!-- Eingefuegt fuer Zentrierung hoch und quer --> 
</td></tr></table> 
<!-- Ende Einfuegung --> 
<!-- End ImageReady Slices -->
    • Dieser Trick mit der einzelligen Tabelle verhindert, dass die Webseite links oben hängen bleibt, und funktioniert prima, wenn der eigentliche Seiteninhalt nicht größer werden soll (Abbildung 10.69).
  • Will man ein Design mit veränderlicher Größe entwerfen, wird es kniffliger. Hier kann man durch geschickten Einsatz von Slices, die leere Tabellenzellen mit einer HMTL-definierten Hintergrundfarbe anstelle von Bildern enthalten, Zonen schaffen, die dehnbar sind. Das geht sowohl in horizontaler als auch vertikaler Richtung. So etwas funktioniert gut für Websites mit einem eher grafischen Look. Sollen allerdings Slices mit Bildern »elastisch« gemacht werden, so muss man sich mit Tricks behelfen.

Abbildung 10.69   Zentriertes Design mit übergeordneter Tabelle


Rheinwerk Design

10.2.3 Größenveränderbares Webdesign  downtop

Für ein solches Webdesign müssen an den richtigen Stellen »Dehnungsfugen« eingebaut werden. Die Methode ist im Grunde nicht allzu schwierig und gliedert sich in zwei Schritte: Zunächst muss das Design darauf abgestimmt werden und dann folgt nach der an sich vollkommen normalen Ausgabe über ImageReady einige Nachbearbeitung im Web-Editor.

Für eine Veränderbarkeit in der Höhe des Screendesigns muss über die gesamte Breite des Design mindestens einmal irgendwo ein Bereich auftauchen, der so gestaltet ist, dass sich seine Struktur vertikal ohne weiteres wiederholen kann. Ein solcher Bereich muss entweder glatt einfarbig oder vertikal gemustert sein, wobei für das Muster wichtig ist, dass es sich in der entsprechenden Richtung nahtlos wiederholen lässt (siehe hierzu auch Seite 318). Das Prinzip soll Abbildung 10.71 verdeutlichen. Sie zeigt ein Beispiel, in dem das sowohl für eine Veränderbarkeit in der Breite als auch in der Höhe berücksichtigt wurde. Der Kernteil , der später HTML-Text als Inhalt bekommen soll, ist glatt einfarbig. Das kann man in den Slice-Optionen bereits in Photoshop einstellen (Abbildung 10.70). An den Seiten werden Bereiche angelegt, die sich entweder horizontal ( und ) oder vertikal ( und ) wiederholen lassen. Der Schriftzug in der linken oberen Ecke und die Buttons müssen natürlich fix an ihrem Platz bleiben.

Abbildung 10.70   Kernbereich wird nicht als Bild ausgegeben, sondern als Zelle mit HTML-Text

Für die Ausgabe aus ImageReady ist in diesem Fall eigentlich nur wichtig, dass als HTML-Tabelle ausgegeben wird, nicht auf CSS-Basis. Außerdem muss man für die Tabellen in den Ausgabe-Einstellungen die Bemaßung abstellen. Auch in diesem Beispiel wird alles mit der Kompression JPEG hoch ausgegeben, weil es eine ganze Reihe weicher Verläufe in den Schatten und an den Kanten gibt.

Abbildung 10.71   Auf Größenveränderbarkeit ausgelegtes Screendesign

Nach der Ausgabe der Webseite aus ImageReady sind dann Korrekturen des Codes in einem Web-Editor nötig. Manche sind teilweise auf der grafischen Oberfläche des Editors zu erledigen und machen keine Schreibarbeit im Code selbst nötig. Die Änderungen beschränken sich im Wesentlichen darauf, in den Zellen, die »e lastisch« werden sollen, das Bild vom Inhalt der Zelle zu deren Hintergrundbild zu machen. Dann wird es nämlich »gekachelt« und so oft wiederholt, wie es die Größe der Zelle erfordert. In der Regel muss man immer ein wenig herumprobieren, bis es perfekt klappt. Vor allem ein Test auf verschiedenen Browsern ist Pflicht, weil es gerade hier heftige Unterschiede in der Darstellung geben kann. Für den Umgang mit CSS gibt es in diesem Zusammenhang ebenfalls Strategien, die aber hier den Rahmen sprengen würden. Diese Dinge gehören auch zu den eher schwierigen Unternehmungen im Bereich Webdesign.


HINWEIS

Manchmal bietet sich auf den ersten Blick der gemischte Einsatz von JPEG- und GIF-Ausgabe im gleichen Screendesign an. Das nebenstehende Beispiel käme dafür infrage. Hier könnte z. B. für die Wiederholungsbereiche eine GIF-Kompression sinnvoll sein, weil auf langen geraden Strecken die gleiche Farbe vorhanden ist. Aber Vorsicht! JPEG und GIF komprimieren intern auf der Basis unterschiedlicher Farbmodelle, wobei GIF relativ genau die originale RGB-Farbe wiedergibt, JPEG hingegen leichte Farbverschiebungen produziert, die in einem solchen Fall aber unschöne Kanten auf der Webseite hervorrufen würden.



Rheinwerk Design

10.2.4 HTML-Sprengstoff im Design  toptop

In den gleichen Themenkreis wie der vorangegangene Abschnitt gehört beim Webdesign die Rücksichtnahme auf HTML-Bereiche innerhalb von Webdesigns. Bild-Elemente auf einer Webseite sind im Vergleich zu HTML-Elementen relativ starr und berechenbar. Da HTML, wie bereits erwähnt, kaum typografische und layoutmäßige Stabilität besitzt, drohen hier Überraschungen. HTML dehnt eine Tabellenzelle immer so weit aus, dass der komplette Text darin Platz hat. Es gibt, anders als bei CSS-Boxen, keinerlei Parameter für den Überlauf von Text. Abhängig von der verschiedenen Darstellungsgröße für Schrift bei den diversen Browsern können diese Unterschiede sehr groß sein. Ein Design kann in einem Browser korrekt ausschauen, in einem anderen haben Tabellenzellen mit HTML-Text das Design komplett »gesprengt«. Text selbst lässt sich dabei relativ gut in den Griff bekommen, indem man nicht die (nur relativen) HTML-Schriftgrößen von 1 bis 7 verwendet und auch nicht die Headings von 1 bis 6, sondern die Schift per CSS formatiert und dort nur auf der Basis von Pixelgrößen. Das gilt auch für den häufigen Fall, dass in einem solchen HTML-Bereich Text aus einer Datenbank einfließt, beim Einsatz von Content Management Systemen (CMS) also. Solche Texte sind oft im Umfang nicht recht abschätzbar. Hier ist neben einer Formatierung per CSS wie zuvor beschrieben, eine gute Kommunikation von Designer und Programmierer verpflichtend, damit durch entsprechende Programmiermaßnahmen gesichert ist, dass Text eine gewisse Länge nicht überschreitet und vom System entsprechend abgekürzt wird. Eine weitere Ursache von Webdesigner-Alpträumen sind Formulare mit ihren diversen Elementen, vor allem aber Input-Feldern, Buttons und Text Areas. Ohne weitere Maßnahmen sind hier die Schwierigkeiten vorprogrammiert, wenn man solche Elemente mit einem Screendesign unter einen Hut bringen muss. Besonders in diesen Fällen sind die Größenunterschiede streckenweise sehr groß, besonders zwischen der Mac- und der Windows-Plattform. Auch hier trägt die Lösung den Namen CSS. Mittlerweile wird die präzise Formatierung von Formular-Elementen per CSS von praktisch allen gängigen Browsern unterstützt.


TIPP

Eine hervorragende Methode, um Ärger mit Formularen im Zusammenhang mit Webdesign zu verhindern, ist die Methode, das Formular vorher auf der Basis von CSS zu entwerfen, auf möglichst allen Browsern und Plattformen zu testen und von der Version, die die größte Ausdehnung hat, einen Screenshot zu machen, der in Photoshop als Ebene platziert wird. So kann man sicher sein, dass dem Formular im künftigen Design der nötige Platz reserviert wird.




Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Adobe Photoshop CS2
Adobe Photoshop CS2
Jetzt bestellen


 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: Adobe Photoshop CS6 und CC






 Adobe Photoshop
 CS6 und CC


Zum Rheinwerk-Shop: Photoshop Lightroom 5






 Photoshop
 Lightroom 5


Zum Rheinwerk-Shop: Photoshop Artworks






 Photoshop Artworks


Zum Rheinwerk-Shop: Adobe Photoshop für Fortgeschrittene






 Adobe Photoshop für
 Fortgeschrittene


Zum Rheinwerk-Shop: Die Schöne und das Biest






 Die Schöne und
 das Biest


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo





Copyright © Rheinwerk Verlag GmbH 2007
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

Cookie-Einstellungen ändern