Predesign einer Webseite
Web-Grafik: Heft 01/2003 (S. 74) 4 Seiten
Webseiten mit ImageReady gestalten
Auch wenn Photoshop von Adobe und das beigelegte Programm ImageReady nicht primär für die Webseitengestaltung gedacht sind, können Sie beide Tools gut fürs Webdesign verwenden. Neben der Gestaltung von Bedienelementen können Sie auch das Predesign erledigen und das "Feintuning" anschließend mit einem HTML-Editor leichter ausführen
Wir werden in diesem Workshop die Gestaltung einer ganzen Webseite nachvollziehen. Dabei sollten Sie aber beachten, dass ImageReady kein HTML-Editor ist. Textformatierungen und Ähnliches bleiben daher Spezialprogrammen - wie etwa Adobes GoLive - vorbehalten. Sie können ImageReady aber gut verwenden, um das Design der Seite festzulegen und die Bilder zu optimieren, die auf der Seite eingesetzt werden. Bereiten Sie die Fotos in Photoshop vor. Anschließend können Sie diese in ImageReady öffnen. Unsere Bilder haben eine Größe von 80 x 60 Pixeln. Ein Bild liegt größer vor: Es ist 320 Pixel breit und 100 Pixel hoch.
Ein neues Dokument
Erstellen Sie in ImageReady ein neues Dokument mit einer Größe von 800 x 600 Pixeln. Die vorbereiteten Fotos sollen nun der Reihe nach in das neue Sammeldokument integriert werden. Ziehen Sie dazu als Erstes die Ebene des größten Bilds in das Dokument. Beim Verschieben mit dem Verschieben-Werkzeug werden Sie bemerken, dass das Foto nicht am Bildrand "anschnappt". Denn diese Funktion unterstützt ImageReady im Gegensatz zu Photoshop nicht. Dafür gibt es aber eine andere, sehr nützliche Funktion. Rufen Sie die Funktion "Ebene/Ebenenposition festlegen" auf. In dem Dialogfeld können Sie genau einstellen, wo die aktuelle Ebene positioniert werden soll. So haben wir sie am oberen, linken Rand positioniert. Ziehen Sie nun per Drag & Drop alle Fotos in das Sammeldokument. Das Positionieren ist erst einmal egal - das können Sie später erledigen.
Automatische Hilfslinien einfügen
Zum Positionieren der Fotos haben Sie verschiedene Möglichkeiten. So könnten natürlich die Ebenen verbinden und die Verteiloptionen nutzen. Wir wollen aber Hilfslinien für diese Aufgabenstellung verwenden, weil ImageReady hier erweiterte, interessante Optionen bietet. Rufen Sie die Funktion "Ansicht/Hilfslinien erstellen" auf. In dem Dialogfeld können Sie automatisch Hilfslinien auf verschiedene Art einstellen. Sie können z. B. die Hilfslinien gleichmäßig verteilen, bestimmte Pixelabstände zwischen den Hilfslinien angeben oder eine Position festlegen. Wir nutzen für unser Beispiel verschiedene Varianten für die horizontalen und vertikalen Hilfslinien. Für die Horizontale wird eine Hilfslinie bei 100 Pixeln benötigt. In der Vertikalen soll alle 80 Pixel eine Hilfslinie erscheinen. Mit diesen Einstellungen können Sie alle benötigten Hilfslinien "in einem Rutsch" erstellen. Verschieben Sie nun alle Fotos an die Hilfslinien. Achten Sie darauf, dass dabei die Funktion "Ansicht/Ausrichten an/Hilfslinien" aktiviert ist. Sie sollten dann die abgebildete Anordnung vorfinden. Positionieren Sie nun zwei weitere horizontale Hilfslinien im unteren Bereich des Dokuments. Wenn Sie auch diese Hilfslinien präzise erstellen wollen, können Sie wieder die Funktion "Ansicht/Hilfslinien erstellen" verwenden. Sie müssen darauf achten, dass in dem Dialogfeld die Option "Bestehende Hilfslinien löschen" deaktiviert ist, sonst werden die bereits fertigen Hilfslinien gelöscht. Die Hilfslinien werden an den Positionen 160 und 570 benötigt. Da bei festgelegten Positionen immer nur eine Hilfslinie eingestellt werden kann, müssen Sie die Funktion jedes Mal neu aufrufen.
Ein effektvoller Untergrund
Im unteren Bereich soll links ein hübscher Untergrund gestaltet werden. Dazu wollen wir das Foto oben links in der Ecke als Basis verwenden. Duplizieren Sie deshalb im Ebenen-Palettenfenster diese Ebene. Nutzen Sie die Tastenkombination Strg-T, um das Foto zu dehnen. Fixieren Sie im Ebenen-Palettenfenster für diese Ebene die Transparenz. Verwenden Sie danach den Filter "Weichzeichnungsfilter/Gaußscher Weichzeichner" mit einem Radius von 20 Pixeln. So entsteht ein stark verschwommener Untergrund, bei dem keinerlei Bilddetails mehr zu sehen sind.
Mit websicheren Farben arbeiten
Wenn Sie sicher sein wollen, dass Farben in Flächen unter den unterschiedlichen Bedingungen gleich aussehen, sollten Sie die so genannten websicheren Farben verwenden. Diese Farben werden auch von Systemen richtig angezeigt, bei denen die Grafikkarte auf eine Darstellung von 256 Farben beschränkt ist. Die websicheren Farben finden Sie im Farbfelder-Palettenfenster. Klicken Sie mit der linken Maustaste auf die im Bild markierte Farbe, damit sie zur Vordergrundfarbe wird. Der Braunton hat den hexadezimalen Farbwert "66, 33, 00". Ziehen Sie mit dem Rechteck-Werkzeug eine Formebene zwischen den Hilfslinien in der Größe der kleinen Fotos auf. Verschieben Sie diese Formebene in das Hilfslinienfeld ganz rechts. Wenn Sie die nächste benötigte Farbe nicht über das Farbfelder-Palettenfenster auswählen möchten, können Sie wie in Photoshop gewohnt in der Werkzeugleiste auf das Farbfeld für die Vordergrundfarbe klicken, um die gewünschte Farbe im Farbwähler einzustellen.
Wird neben dem Vorschaufeld für die Farbe ein kleines Quadrat angezeigt, ist dies ein Zeichen, dass Sie keine websichere Farbe ausgesucht haben. Klicken Sie auf dieses Farbfeld um die vorgeschlagene, websichere Farbe zu übernehmen. Die von uns verwendete Farbe hat den hexadezimalen Wert "FF, CC, 99". Ziehen Sie mit der neuen Farbe ein weiteres Rechteck am unteren Bildrand auf. Verschieben Sie dann noch mit dem Verschieben-Werkzeug alle Fotos an die Hilfslinien. So ergibt sich die abgebildete, neue Anordnung.
Weitere Elemente einfügen
Nun sollen abschließend noch einige Textelemente zur Navigation eingefügt werden. Dazu dient einerseits das untere Rechteck als Navigationsleiste und das linke Rechteck zur Unterbringung der Texte für die Unterthemen der Webseite. Das Einfügen von Texten funktioniert in ImageReady genau so, wie Sie es auch aus Photoshop kennen. Stellen Sie dazu über das Zeichen-Palettenfenster zunächst wieder die gewünschten Zeichenattribute ein. Wenn Sie die Textfarbe auswählen, können Sie die Auswahl auch aus einer Liste treffen, in der nur die websicheren Farben angezeigt werden. Klicken Sie dazu auf den Pfeil neben dem Vorschaufeld. Wollen Sie die Farbe über den Farbwähler aussuchen, klicken Sie auf das Farb-Vorschaufeld. Wir haben als Textfarbe die Farbe des unteren Balkens gewählt. Für die Kategorietexte haben wir erst einmal nichtssagenden Blindtext eingesetzt. Die vorläufige Anordnung sehen Sie abgebildet. Es handelt sich dabei um fünf getrennte Textebenen. Um die Schrift gut beurteilen zu können, sollten Sie die Darstellungsgröße durch Doppelklicken auf das Lupensymbol in der Werkzeugleiste auf 100% einstellen.
Ausrichten der Ebenen
Verbinden Sie nun die Textebenen und verteilen Sie diese über die Optionen-Leiste des Verschieben-Werkzeugs gleichmäßig. Außerdem sollten die Texte links ausgerichtet werden. So sollte die abgebildete Situation entstehen.
Ändern Sie jetzt die Texteinstellungen. Reduzieren Sie dabei die Schriftgröße auf "18 Px" und ändern Sie die Farbe auf das bereits beim Rechteck benutzte, dunkle Braun. Tippen Sie mit diesen Werten den Text in der Navigationsleiste ein. Die Trennungen zwischen den Wörtern kamen einfach durch eine entsprechende Anzahl an Leerzeichen zustande. Die Ausrichtung kann bei aktiviertem Verschieben-Werkzeug mit den Pfeiltasten erfolgen - eine ganz präzise Positionierung ist hier nicht erforderlich.
Headline formatieren
Für die Überschrift sind erneut neue Texteinstellungen erforderlich. Zusätzlich zur neuen Größe von "70 Px" stellen Sie die Option "Faux Fett" ein. Dies erreichen Sie über die linke Schaltfläche unter den Texteigenschaften. Die Überschrift - das "Firmenlogo" - wird im oberen freien Bereich untergebracht. Die Ausrichtung erfolgt dabei per Augenmaß. Als Letztes wird nun noch ein nichtssagender Mengentext im unteren Bereich eingefügt. Dafür wird die Schriftgröße auf "14 Px" geändert. Der Zeilenabstand sollte außerdem auf "18 Px" eingestellt werden. Deaktivieren Sie in diesem Fall die Option "Faux Fett" wieder. Ziehen Sie mit dem Textwerkzeug - wie aus Photoshop bekannt - einen Rahmen für den Mengentext auf und geben Sie den Text ein.
Schnellere Geschwindigkeit
Anders als in Photoshop geht die Textbearbeitung in ImageReady übrigens schnell. Die langen Pausen beim Einfügen oder Editieren von Text gibt es hier - glücklicherweise - nicht. Warum es diese Unterschiede gibt ist uns leider nicht bekannt ... Richten Sie den Mengentext linksbündig zur Headline und oben bündig zum obersten Navigationstext aus. Dann erhalten Sie das abgebildete Endstadium der Gestaltung.
Das Bild in Slices aufteilen
Das Ergebnis soll nun noch "webtauglich" gemacht werden. Bis jetzt nutzt Ihnen nämlich das hübsche Ergebnis noch recht wenig. Wenn Sie das Dokument speichern, erhalten Sie ein einziges Bild. Dies zu verwenden wäre wenig sinnvoll - die Übertragung würde viel zu lange dauern. Also müssen Sie die Teile mit den bildwichtigen Elementen extrahieren - so können Sie Leerraum einsparen. Wenn Sie mit vielen Hilfslinien gearbeitet haben, ist für Sie bestimmt die Funktion "Slices/Slices entlang der Hilfslinien erstellen" interessant. Hierdurch "fährt" ImageReady alle Hilfslinien ab und teilt das Bild in lauter einzelne Slices auf. Slices haben den Vorteil, dass Sie jedes einzelne von ihnen mit anderen Optimierungswerten versehen können. Sie können beispielsweise ein Slice so optimieren, dass es im GIF-Format weniger Farben als ein anderes Slice besitzt. Sie können sogar unterschiedliche Dateiformate einstellen - so könnte ein Slice im GIF-Dateiformat und ein anderes im JPEG-Dateiformat gesichert werden. Genau diese Option ist bei dem Beispiel sinnvoll, da hier Fotos - für die das JPEG-Dateiformat besser geeignet ist - und Texte auf einfarbigen Untergründen vorkommen. Hier hilft das GIF-Dateiformat weiter. Neben der automatischen Slice-Erstellung haben Sie selbstverständlich auch die Möglichkeit, Slices nach den eigenen Vorgaben zu erstellen. Dazu sind die folgenden Arbeitsschritte erforderlich.
Slices anpassen
Laden Sie die Ebene des großen Fotos als Auswahl. Sie können dann die Funktion "Auswahl/Slice aus Auswahl erstellen" aufrufen. Verfahren Sie mit den anderen Fotos genauso. Die Slices werden beim Speichern als HTML-Dokument in Tabellenzellen aufgeteilt. So können Sie in Ihrem HTML-Editor alle einzelnen Slices mit Hyperlinks versehen. Die Slices können mit dem Slice-Auswahlwerkzeug markiert werden. Der Inhalt des markierten Slices erscheint anschließend "klar", während das gesamte Umfeld "milchig" wirkt. Über das Slice-Palettenfenster können Sie dann beispielsweise den Namen des Bilds ändern oder eine URL angeben, zu der verzweigt werden soll.
Rollover erstellen
Nun soll ein besonderer Effekt eingefügt werden. Die Miniaturbilder sollen nämlich zunächst schwarzweiß erscheinen. Erst wenn der Besucher mit dem Mauszeiger darüber fährt, soll das Bild farbig werden. Dazu können Sie den Rollover-Effekt verwenden.
Öffnen Sie über das Fenster-Menü das entsprechende Palettenfenster. Nun sind noch einige Arbeitsschritte erforderlich, die bei allen neun Fotos erledigt werden müssen: Erstellen Sie zunächst einen neuen Status über das Dokumentsymbol in der Fußleiste des Palettenfensters. Der automatisch angebotene Over-Status ist genau der, den wir benötigen - hier ist also keine Änderung nötig. Duplizieren Sie jetzt die dazugehörende Ebene im Ebenen-Palettenfenster. Verwenden Sie dabei für die Originalebene die Funktion "Bild/Einstellen/Entfärben". Sie können alternativ auch die Tastenkombination Strg-Umschalt-U verwenden. Sie sehen anschließend im Rollover-Palettenfenster, dass der Over-Status entfärbt dargestellt wird. Je nachdem, welchen Status Sie im Rollover-Palettenfenster anklicken, wird die entsprechende Ansicht im Bildfenster angezeigt. Sie sehen dort im Normal-Status die schwarzweiße Variante des Bilds. Die Ebene mit dem farbigen Bild ist ausgeblendet.
Arbeitsschritte wiederholen
Wiederholen Sie die obigen Schritte nun auch noch bei allen anderen Fotos. Am Ende sollten alle Fotos in der Reihe entfernt sein - dazu muss natürlich jeweils der Normal-Status eingestellt sein. Beachten Sie beim Bearbeiten, dass Sie zwei Auswahlen tätigen müssen: Zum einen müssen Sie die Ebene selektieren - beispielsweise mit dem "Verschieben"-Werkzeug und aktivierter Option "Ebene automatisch auswählen" - und zum anderen das Slice, um im Rollover-Fenster die betreffenden Einstellungen vornehmen zu können.
Slices optimieren
Jetzt sollen für die Slices die Optimierungseinstellungen zum Export vorgenommen werden. Dabei wäre es sehr mühselig, für jedes Slice eigene Optimierungseinstellungen zu verwenden - das ist ja möglich, wie wir schon beschrieben haben. ImageReady bietet hier aber eine Erleichterung an: Markieren Sie mit dem Slice-Auswahlwerkzeug alle Slices, die mit den selben Optimierungseinstellungen versehen werden sollen. Klicken Sie sie dazu nacheinander mit gedrückter Umschalt-Taste an. Sie erkennen die richtige Auswahl gut an der andersfarbigen Hervorhebung.
Slices zusammenfassen
Diese Slices können Sie nun zu einem Set zusammenfassen. Verwenden Sie zu diesem Zweck die Funktion "Slices verbinden" aus dem Kontextmenü. Der Slice-Satz wird anschließend andersfarbig hervorgehoben. Daraufhin können Sie für diesen die Einstellungen für den Export im Optimieren-Palettenfenster vornehmen.
Markieren Sie nun die restlichen Slices und verbinden Sie diese ebenfalls wie zuvor gezeigt. Die neue Verbindung wird mit einer andersfarbigen Markierung angezeigt. Stellen Sie für diese Verbindung das GIF-Dateiformat zur Optimierung ein. Die Auswirkungen der Optimierungseinstellungen können Sie gleich begutachten, indem Sie über das "Optimiert"-Register über der Arbeitsfläche in den Export-Vorschaumodus umschalten. Nehmen Sie Veränderungen an den Exporteinstellungen vor, wird die Ansicht sofort aktualisiert. So können Sie die Auswirkungen der Veränderungen gut testen. Stellen Sie zur detaillierten Begutachtung des Ergebnisses die Darstellungsgröße auf 100 % ein.
Verwenden Sie nun die Funktion "Datei/Optimiert-Version speichern unter", um das Dokument als HTML-Datei mit allen dazugehörenden Bildern und dem für die Rollover-Effekte notwendigen JavaScript-Quellcode zu speichern. Sie können das Ergebnis dann in einem beliebigen Webbrowser betrachten.
Die weitere Bearbeitung
In dem Webeditor Ihrer Wahl können Sie jetzt noch weitere erforderliche Anpassungen an das Design Ihrer Website vornehmen oder die zuvor erstellte Webseite mit weiteren Funktionalität oder Elementen versehen.
Weitere Möglichkeiten
Natürlich können Sie die Webseite weiter "ausgestalten". So haben Sie die Möglichkeit, in Ihrem HTML-Editor jeweils eine vergrößerte Bildansicht umsetzen, wenn auf eines der Miniaturbilder geklickt wird. In ImageReady können Sie auch andere Stati für die Schaltflächen einstellen. Aber dieser Workshop hat ja lediglich die Aufgabe, Ihnen das "Predesign" zu zeigen ...