Wirklich clever: Smart Objekte
Von Chris Converse für Layers Magazine
Die neusten Funktionen bietet Adobe® GoLive® CS2 nicht nur bei Design, Aufbau, Entwicklung und Verwaltung von Internetseiten. Ebenso tatkräftig unterstützt die Anwendung Sie bei der Erstellung und Bearbeitung von Material für Ihre Webseiten, und zwar mit Hilfe von Smart Objekten, die zu den hilfreichsten Workflow-Funktionen von GoLive gehören. Sie erhalten die Möglichkeit, programmeigene Dateien aus Adobe Photoshop® einzubinden und den Text auf Textebenen anzuordnen. Weiterhin können Sie programmeigene Dateien aus Adobe Illustrator® platzieren, SWF-Animationen oder SVG-Dateien erstellen sowie Adobe PDF-Dateien einbinden und darin ganz bestimmte Zielseiten festlegen. Außerdem ist es möglich, Dateien in zahlreichen druckoptimierten Standardformaten zu platzieren, u. a. TIF, EPS und PICT.
Wenn Sie in einem GoLive-Dokument eine Datei einbinden, deren Format nicht standardmäßig für das Internet vorgesehen ist, wird das Dialogfeld „Für Web speichern“ angezeigt. Hier können Sie ein webfähiges Format auswählen und GoLive erstellt eine Webgrafik, die Sie auf Ihrer Website verwenden können. Vorteilhaft dabei ist, dass GoLive die „Verknüpfung“ zwischen der Originaldatei und der entstandenen Webgrafik beibehält. Wenn Sie also die Originaldatei (die etwa im PSD-, PDF-, EPS-Format usw. vorliegt) aktualisieren, erstellt GoLive automatisch eine neue Webgrafik. In den folgenden Abschnitten wird ein Beispiel für ein Smart Objekt näher beleuchtet; eine Photoshop-Datei dient dabei als Originaldatei.
1. Erstellen einer grafischen Überschrift als neues Dokument in Photoshop
Die folgende Abbildung zeigt die Beispielwebseite. (Sie können dieses Beispiel entweder mit Ihrer eigenen Website oder mit einer Beispielsite aus GoLive CS2 nachvollziehen.) In dem mit dem roten Rahmen gekennzeichneten Bereich soll die grafische Überschrift ihren Platz finden. Die vorgesehene Größe beträgt 400 x 40 Pixel. Die Überschrift soll als Grafik in Photoshop erstellt werden. Wählen Sie also in Photoshop im Menü „Datei“ die Option „Neu“. Stellen Sie die Größe auf 400 x 40 und die Auflösung auf 72 ein. Klicken Sie anschließend auf „OK“.
Erstellen Sie in Photoshop ein neues Dokument mit der Größe 400 x 40 Pixel.
2. Festlegen der Schriftart und Hinzufügen von Ebenenstilen
Wählen Sie das Werkzeug „Text“ (T), ziehen Sie den Cursor bei gedrückter Maustaste über das Dokument, um eine neue Textebene zu erstellen, und geben Sie einen Text ein. Sie können z. B. die Bezeichnung der gewünschten Schriftart eingeben. Versehen Sie den Text dann mit einem Schlagschatten, indem Sie „Ebene“ > „Ebenenstil“ > „Schlagschatten“ wählen. In GoLive können Sie alle Spezialeffekte verwenden, die auch in Photoshop zur Verfügung stehen.
Wählen Sie das Werkzeug „Text“, geben Sie einen Text ein und fügen Sie der Textebene dann einen Schlagschatten hinzu.
3. Ausblenden der Hintergrundebene und Speichern des Dokuments
Vor dem Speichern des Dokuments muss die Hintergrundebene ausgeblendet werden. (Klicken Sie dazu in der Ebenen-Palette auf das Augensymbol neben der betreffenden Ebene.) Auf diese Weise lässt sich das Smart Objekt in GoLive transparent darstellen. Wenn Sie in GoLive bereits eine Website eingerichtet haben, speichern Sie die Photoshop-Datei im Verzeichnis für Smart Objekte. Wenn noch keine Seite eingerichtet ist, müssen Sie das jetzt nicht nachholen: Speichern Sie die Datei einfach in einem Ordner auf dem Desktop. Nennen Sie die Datei „überschrift.psd“.
Klicken Sie auf das Symbol für die Ebenensichtbarkeit, um die Hintergrundebene auszublenden.
4. Platzieren der PSD-Datei in GoLive
Wechseln Sie wieder zu GoLive CS2. Ziehen Sie die PSD-Datei aus dem Ordner im Websitefenster bzw. direkt vom Desktop in GoLive und legen Sie sie dort ab.
Platzieren Sie das in Schritt 3 erstellte Dokument per Drag-und-Drop im GoLive-Dokument.
5. Ändern von Text im Dialogfeld „Variableneinstellungen“
Zunächst wird das Dialogfeld „Variableneinstellungen“ angezeigt. GoLive erkennt die aktuelle Textebene als Variable und gibt Ihnen die Möglichkeit, den im Photoshop-Dokument eingegebenen Text durch einen anderen zu ersetzen. Wenn Sie „Abbrechen“ wählen, verwendet GoLive den Text aus der ursprünglichen PSD-Datei. Da es sich bei dem Beispiel um eine Seite mit Firmeninformationen handelt, geben Sie den Text „Über uns“ ein. Aktivieren Sie das Kontrollkästchen in der Spalte „Verwenden“ und geben Sie unten im Feld den gewünschten Text ein. Klicken Sie auf „OK“.
Geben Sie den gewünschten Text in das Dialogfeld „Variableneinstellungen“ ein.
