Webdesign mit Photoshop
Alles inklusive
Um was es geht
Webdesign mit Photoshop
Viele Webdesigner verwenden zwar Photoshop und manchmal auch das
für Web-Aufgaben mitgelieferte Image Ready, der Web-Export von Image Ready wird aber oft links liegen gelassen. Dieser Workshop führt ein (sanftes) Plädoyer für den Web-Export. Ziel ist, eine komplette Website in Photoshop zu gestalten und mitsamt HTML in Image Ready fertig zu produzieren. Soviel sei verraten: Dieses Ziel werden Sie erreichen. Sie erfahren allerdings auch, wo die Grenzen dieses Verfahrens liegen. Grundlage ist die aktuellste Version CS. Photoshop und Image Ready 7 bieten zwar ähnliche Funktionalität, allerdings heißen dort einige Paletten anders. Die Web-Inhalt-Palette gibt es beispielsweise nicht.
Thema der hier erstellten Website ist ein Klassiker unter den Computern, der C64. Die Site soll über den C64 und das entsprechende Zubehör informieren. Der Workshop zeigt die Entwicklung zweier Seiten, die Hauptseite für den C64 und eine Unterseite für die Datasette 1530. Jede Seite erhält in diesem Fall eine eigene Photoshop- beziehungsweise Image-Ready-Datei. Sie könnten allerdings auch nur mit einer Datei arbeiten und dort mit der Ebenen- und der Web-Palette mehrere HTML-Seiten erstellen.
Vorbereitungen
Webdesign mit Photoshop
Zuerst benötigen Sie eine neue Datei in Image Ready. Sie erhält eine Größe von 600 x 500 Pixel und einen transparenten Hintergrund. Füllen Sie nun die Hintergrundebene mit einem knackigen Blau (#007DDC). Eigentlich benötigen Sie für diesen Workshop nur Image Ready. Allerdings zeigt sich schon bei der Hintergrundfarbe, dass Photoshop manchmal praktischer ist. In diesem Fall wäre es flexibler, eine Füllebene zu verwenden, statt die Hintergrundebene zu füllen. Wenn Sie das machen möchten, müssen Sie kurz von Image Ready in Photoshop wechseln, da Image Ready Füllebenen nur darstellen und bearbeiten, nicht aber erstellen kann.
Gestalten
Webdesign mit Photoshop
Die Grundform der Seite legen Sie am besten mit Hilfslinien fest. Die horizontale Hilfslinie für die obere Kante legen Sie auf 95 Pixel. Nun folgt die Überschrift der Seite. Um die klassische Optik des C64 zu erhalten, kommt der Font Emulator zum Einsatz. Sie finden ihn unter (www.freefontsnow.com/download/index.php?page=3&cat=6&u_sort=uptime&u_order=desc). Als Schriftgröße sind 14 Punkt eine gute Wahl, als Farbe #B8E0FE. Vorsicht, die Glättung sollten Sie in den Werkzeug-Optionen des Textwerkzeugs ausschalten, damit der Font richtig pixelig wirkt. Unter der Überschrift auf der linken Seite schreiben Sie direkt auf die Hilfslinie »Ready«. Diese Gestaltung ist dem alten Login-Bildschirm des C64 nachempfunden.
Bevor Sie nun aber ins Schwärmen über vergangene Zeiten und intensive Spielnächte mit Pirates und Konsorten geraten, geht es gleich weiter. Der Navigationsbereich auf der linken Seite wird von einer vertikalen Hilfslinie bei 120 Pixel begrenzt. In diesem Bereich folgen die Navigationspunkte: 10 C64, 20 1530 und 30 1541. Die Zahlen vor den Produktbezeichnungen sollen hier die Zeilennummern des klassischen C64 repräsentieren. Vor die einzelnen Navigationspunkte fügen Sie jeweils ein Quadrat in der Schriftfarbe #B8E0FE ein. Es soll später anzeigen, wo der Nutzer gerade ist, und außerdem animiert blinken. Am praktischsten ist es nun, wenn Sie Überschriften und Navigation in ein Ebenenset packen. Dann haben Sie alles übersichtlich beisammen.
Inhalt
Webdesign mit Photoshop
So, langsam wird es ernst. Nun folgt der Inhalt. Damit die Inhaltsbereiche gut aufgeteilt sind, benötigen Sie noch ein paar vertikale Hilfslinien, und zwar bei 135, 350, 365 und 580 Pixel. Nun folgen mit dem Rechteckwerkzeug Kästen für den Inhalt. Zur besseren Übersicht und optischen Abtrennung bestehen die Kästen aus einem etwas helleren Blau als der Hintergrund (#1C89DC). Jeder Kasten landet auf einer eigenen Ebene. Der große Kasten in der Mitte nimmt den Text auf. Der lange niedrige Kasten unten soll später Links als HTML-Text enthalten, der rechte Kasten ist für eine Datentabelle gedacht. Die Inhalte aller drei Kästen sind also HTML-Befehle.
HTML kann in Image Ready allerdings nur Slices zugewiesen werden. Slices sind zugeschnittene Bereiche eines Bildes. Glücklicherweise können Sie
aus dem Inhalt einer Ebene ein Slice machen. Deswegen war es so wichtig, dass alle drei Kästen jeweils auf einer eigenen Ebene liegen. Und so geht es: Sie aktivieren die jeweilige Ebene in der Ebenenpalette. Das ist übrigens auch ein guter Zeitpunkt, ihr einen aussagefähigen Namen zu geben. Dann wählen Sie den Menübefehl Ebene, Neues ebenenbasiertes Slice. Daraufhin wird aus der Ebene ein Slice. Dies sehen Sie an dem Slice-Symbol in der Ebenen-Palette. Der Vorteil an einem ebenenbasierten Slice ist, dass es nachträglich in der Größe änderbar ist. Das Slice ändert sich also mit, wenn Sie die Vektorform transformieren.
HTML einfügen
Webdesign mit Photoshop
Um HTML-Befehle in ein Slice einzufügen, müssen Sie zuerst die Slice-Palette einblenden. Aktivieren Sie dann das Slice-Auswahlwerkzeug und klicken Sie das Slice an. Geben Sie als Typ Kein Bild an. Darauf wird das Feld Text aktiv. Klicken Sie darunter noch die Option Text im HTML-Format an, um HTML-Tags einsetzen zu können.
Wenn Sie für Ihren Text oder Ihre Tabellen ein Stylesheet einsetzen möchten, können Sie im HTML-Code in Image Ready schon auf die entsprechenden Klassen verweisen, beispielsweise so:
... InhaltAllerdings müssen Sie dann am Schluss nach dem Export der HTML-Seite aus Image Ready noch das CSS einfügen. Dazu gehört der Code in den Kopf der HTML-Seite:
Oder aber Sie verlinken alternativ ein externes CSS:
"stylesheet" type="text/css" />
Nun aber weiter zu den Inhalten. Die untere Leiste mit den Links ist schnell erstellt:
home
C64
1530
1541
kontakt
impressum
Die Farbe der Links können Sie dann mit einem CSS ändern, das Sie allerdings nachträglich in den HTML-Code einbauen müssen.
Formatierung per CSS
Webdesign mit Photoshop
Für die Tabelle auf der rechten Seite können Sie auch einen Web-Editor zur Hilfe nehmen, wenn Sie das HTML nicht selbst erstellen möchten. Sie finden einen Beispielcode in der Photoshop-Datei auf der Heft-CD. Auch hier können Sie die Formatierung per CSS übernehmen:
Übrigens: Da die Slices kein Bild mehr enthalten, verlieren sie auch ihre Hintergrundfarbe. Möchten Sie einen eigenen Hintergrund, gibt es zwei Möglichkeiten: Sie stellen in den Ausgabe-Einstellungen (Datei, Ausgabe-Einstellungen, Hintergrund) eine Hintergrund-Farbe ein. Die gilt aber für alle Slices ohne Bild. Alternativ können Sie im Slice-Bedienfeld bei Hintergrund eine eigene Hintergrundfarbe für jedes Slice wählen. Je nachdem, ob Sie Slices später als HTML-Tabelle oder als CSS exportieren, ist das dann die Hintergrundfarbe der Tabellenzelle oder des div-Blocks.
Um das Ganze noch ein wenig aufzulockern, können Sie noch das Bild eines C64 verwenden. Mit ein paar Ebeneneffekten und den Gradationskurven wird hier auch aus dem hässlichsten Bild ein nettes Highlight.
Navigation und Bewegung
Webdesign mit Photoshop
Für die Navigation müssen Sie um die drei Navigationspunkte jeweils ein Slice aufziehen. Dazu verwenden Sie das Slice-Werkzeug. Jedes der Slices erhält einen URL auf die jeweilige Seite. Beachten Sie, dass die Quadrate neben den Navigationspunkten ausgeblendet sein müssen. Wählen Sie dann den ersten Navigationspunkt, fügen Sie in der Web-Inhalt-Palette einen Rollover-Effekt für das Ereignis Over hinzu und blenden Sie dafür das jeweilige Quadrat ein.
Bleiben Sie auf dem Status und wechseln Sie in die Palette Animation und fügen Sie dort ein zweites Bild ein, in dem Sie das Quadrat ausblenden. Geben Sie für beide Bilder die Dauer von 0,5 Sekunden ein. Diese Animation erzeugt ein Blinken, wenn Sie über einen der Navigationspunkte fahren.
Sie können nun noch für die jeweils aktive Seite das Quadrat dauerhaft einblenden und den Over-Status entfernen. Damit haben Sie dann noch die aktuelle Seite gekennzeichnet.
Einstellungen
Webdesign mit Photoshop
Bevor Sie sich den Ausgabe-Einstellungen zuwenden, ein kurzer Blick auf das, was Image Ready im Hintergrund produziert. Die Slices, die Sie nicht explizit erstellt haben, werden automatisch generiert.
Sie können allerdings alle automatischen Slices, die keinen Inhalt besitzen, noch auf die Option Kein Bild setzen. Damit sparen Sie Speicherplatz, da die Standardeinstellung Bild an dieser Stelle JPEGs in der Hintergrundfarbe erzeugen würde.
Das führt gleich zu den Ausgabe-Einstellungen (im Menü Datei). Dort müssen Sie unter Hintergrund nämlich die passende Hintergrundfarbe eintragen. Ansonsten gibt es bei den Einstellungen wenig zu beachten. Sie speichern nur eine HTML-Datei (unter HTML speichern). Die Slices können Sie als Tabelle oder über CSS positionieren lassen.
Code
Webdesign mit Photoshop
Nach dem Export müssen Sie noch wie oben bereits angesprochen das CSS in den Kopf der Seite einfügen. Vorsicht: Der von Image Ready erzeugte Code ist ein wenig unübersichtlich. Orientieren Sie sich am besten an den head-Tags und fügen Sie das Stylesheet vor ein.
Das einzig Unangenehme am nachträglichen Hinzufügen von CSS ist, dass diese Änderung überschrieben wird, wenn Sie die HTML-Datei aus Image Ready erneut exportieren.
Mehr Seiten
Webdesign mit Photoshop
Für alle weiteren Seiten duplizieren Sie einfach die bestehende Photoshop-Datei und ändern die Inhalte. Einzig bei der Navigation müssen Sie unter Umständen anpassen, wenn Sie die aktuelle Seite mit einem fest eingeblendeten Quadrat dargestellt haben.
Achten Sie auch darauf, dass Image Ready hier nicht die Darstellung des Bildes im Bilder-Ordner überschreibt. Eine Lösungsmöglichkeit wäre, für verschiedene Seiten auch unterschiedliche Bilder-Ordner zu verwenden. Dann laden Sie allerdings einige Bilder unnötigerweise zweimal.