Falls Sie den Hintergrund der Website schon kennen, wählen Sie am einfachsten die gleiche Farbe in Photoshop für die Schaltfläche.

Transkript

1 1. Schritt Schaltfläche vorbereiten In Photoshop eine neue Datei in Größe der Schaltfläche erstellen. Hier: Breite: 100 Pixel Höhe: 50 Pixel Auflösung 72 dpi Hintergrund: Weiß* Der weiße Hintergrund ist auf einer Website mit weißem Hintergrund unsichtbar. Wählen Sie transparent, wenn die Schaltfläche ohne Hintergrund erscheinen soll oder löschen Sie die Hintergrundebene. Falls Sie den Hintergrund der Website schon kennen, wählen Sie am einfachsten die gleiche Farbe in Photoshop für die Schaltfläche. Speichern Sie die Datei unter Schaltfläche mit Image Ready in Ihrem Ordner. 2. Schritt Eine eigene Form verwenden Mit dem Werkzeug Eigene Formen ein Rechteck mit runden Ecken ziehen. Einstellungen: Farbe Dunkelblau: # Radius für abgerundete Ecken 10 pixel Die Basisfläche für die Schaltfläche ziehen und in die Fläche einpassen.

2 Den Ebenenstil Abgeflachte Kante und Relief zuweisen. Doppelklick auf die Ebene Alternativ das Menü: Ebene > Ebenenstil > Abgeflachte Kante und Relief Die Einstellungen: Es sind hier die Standardeinstellungen von Photoshop 3. Schritt Text hinzufügen: Einstellungen für den Text: Schriftart: Verdana Schriftschnitt: Bold Schriftgröße: 24 Punkt Schriftfarbe: #EAD074 Den Text auf der Basisfläche mittig ausrichten. Kontrollieren Sie, ob die Basis der Schaltfläche den Hintergrund genau ausfüllt. Ggf. transformieren Sie das Rechteck größer (Bearbeiten > frei transformieren ) Den Text auf der Schaltfläche mittig ausrichten: Die Ebene der Schaltfläche und des Textes verbinden. Das Auswahlwerkzeug wählen und im Arbeitsbereich vertikal und horizontal mittig ausrichten.

3 4. Schritt Die Schrift mit einem Ebenenstil versehen Für die Schrift verwenden Sie die Ebenenstile: Abgeflachte Kante und Relief: Verlaufsüberlagerung: Farbüberlagerung: Standard Weiß zu transparent #EAD074 Die Farbüberlagerung wird vorerst die Verlaufsüberlagerung verdecken. Durch die Farb- und Verlaufsüberlagerungen können Sie später in Image-Ready schöne Rollovereffekte erzeugen. Speichern Sie die Datei. 5. Schritt Zu Image Ready springen Das Programm Image Ready ist ein Zusatzprogramm zu Photoshop, mit dem fertige Schaltflächen für das Internet mit Rollover-Effekten und HTML-Quelltext gespeichert werden können. Sie springen zu Image Ready durch Klick auf die Schaltfläche ganz unten in der Hilfsmittelleiste

4 6. Schritt In Image Ready den Rollover-Button erstellen Das Fenster von Image Ready sieht ähnlich aus, wie das Fenster von Photoshop. Links die Werkzeugleiste, am rechten Bildschirmrand die Paletten und das Ebenenfenster. Zusätzlich finden Sie eine Palette für Rollover. Sollten Sie diese Palette nicht sehen, wählen Sie Fenster > Rollover Die Ebenen- und die Rolloverpalette brauchen Sie für eine Rollover-Schaltfläche. 7. Schritt Rollovereffekte in der Rolloverpalette erstellen Der Rollover-Button hat verschiedene Zustände. Normal Status: Over Status: Down Status: Selected Status: Out Der Button beim Öffnen der Seite im Internet Beim Berühren mit der Maus (mouseover) Beim Anklicken mit der Maus (onclick) Bei Auswahl der Schaltfläche durch Loslassen der Maus (onrelease) Wenn die Schaltfläche verlassen wird Einen neuen Zustand der Schaltfläche erzeugen Sie im Palettenmenü der Rollover-Palette Oder durch Klick auf das Symbol Rollover-Status erstellen, das genauso aussieht wie Neue Ebene erstellen. 8. Schritt Den ersten Status (mouseover) erzeugen Die Palette Rollover und die Ebenenpalette arbeiten eng zusammen. Markieren Sie im Rollover-Fenster Status: over. Danach blenden Sie in der Ebenenpalette die Farbüberlagerung aus. Sie sehen jetzt die Farbverlaufsüberlagerung deutlich.

5 Mögliche weitere Schaltflächeneffekte erstellen Sie genauso. Wiederholen Sie hierfür Schritt 8 und verändern durch Bearbeitung der Schaltflächenebenen das Erscheinungsbild der Schaltfläche. 9. Schritt Die Schaltfläche in HTML einbinden Um die Schaltfläche in eine HTML-Seite einzubinden wählen Sie Datei > Optimiert Version speichern unter Image Ready hat hier Einstellungen für Ihre Website. Wählen Sie diese Einstellungen bei Dateityp aus. Wählen Sie hier: HTML und Bilder und suchen den Ordner, in den Sie speichern wollen.

6 10. Schritt Rollover-Effekt testen Öffnen Sie im Windows-Explorer den Ordner, in den Sie die HTML-Datei gespeichert haben. Sie finden hier einen Ordner Bilder und eine HTML-Datei mit dem Dateinamen, den Sie in Image Ready gegeben haben. Im Ordner Bilder sind die Grafiken die ausgetauscht werden. Öffnen Sie die Datei und testen den Rollover-Effekt. 11. Schritt Einen Hyperlink eintragen Öffnen Sie den Quelltext der Seite. Sie finden ein Javascript im HEAD-Bereich für den Rollover-Effekt, das Image Ready geschrieben hat. Im Script finden Sie die Zeile für den Hyperlink. Im BODY-Bereich finden Sie den bekannten HTML-Rollover, der das Javascript aus dem HEAD-Bereich aufruft. <!-- ImageReady Slices (Eigener Workshop Schaltfläche für Screenshots.psd) --> <A HREF="#" ONMOUSEOVER="changeImages('Eigener_Workshop_Schaltfl_che_f_r_Screenshots_01', 'Bilder/Eigener-Workshop-Schaltf-02.gif'); return true;" ONMOUSEOUT="changeImages('Eigener_Workshop_Schaltfl_che_f_r_Screenshots_01', 'Bilder/Eigener-Workshop-Schaltfl%e4c.gif'); return true;"> <IMG NAME="Eigener_Workshop_Schaltfl_che_f_r_Screenshots_01" SRC="Bilder/Eigener-Workshop-Schaltfl%e4c.gif" WIDTH=100 HEIGHT=50 BORDER=0 ALT=""></A> <!-- End ImageReady Slices --> Im Quelltext ist das Standardziel für einen Hyperlink die selbe Seite mit # eingetragen. Fügen Sie hier den Dateipfad für die Zieldatei ein. Erweiterung dieser Übung Erstellen Sie mehrere Rolloverbuttons mit Photoshop und Image-Ready. Speichern Sie hierfür die Datei jeweils unter einem anderen Namen, wenn Sie den Text verändern. Erstellen sie eine Webseite mit mindestens zwei Schaltflächen. Kopieren Sie diese Seite und erstellen Sie eine Navigation zwischen diesen beiden Seiten mit den Schaltflächen aus Image-Ready. Testen Sie die verschiedenen Statusmöglichkeiten für die Maus ausführlich in einer Website.