715840

Paint Shop Pro 5 bis 7: Schaltflächen mit Roll-over-Effekt

Auf vielen Web-Seiten sind Schaltflächen zu sehen, die ihre Farbe verändern, wenn Sie den Mauszeiger darüber bewegen. Wie lassen sich solche Schaltflächen mit Paint Shop Pro erstellen? PC-WELT zeigt es Ihnen.

Anforderung

Fortgeschrittener

Zeitaufwand

Mittel

Problem:

Auf vielen Web-Seiten sind Schaltflächen zu sehen, die ihre Farbe verändern, wenn Sie den Mauszeiger darüber bewegen. Wie lassen sich solche Schaltflächen mit Paint Shop Pro erstellen?

Lösung:

Dieser als Roll-over bezeichnete Effekt entsteht durch zwei Grafiken in unterschiedlichen Farben und einige Zeilen Javascript. Eine Beispieldatei finden Sie unter dem Namen BUTTON.ZIP Beim Anlegen der Schaltflächen gehen Sie folgendermaßen vor:

1.

Erstellen Sie über "Datei, Neu" ein Bild mit den gewünschten Abmessungen der Schaltfläche, beispielsweise 100 x 25 Pixel. Wählen Sie als Hintergrundfarbe "Transparent".

2.

Blenden Sie anschließend über "Ansicht, Leisten und Paletten" die Ebenen-Palette ein, und benennen Sie über deren Kontextmenü die Ebene in "Hintergrund" um.

3.

Erstellen Sie über das Icon "Ebene erstellen" eine neue Ebene mit dem Namen "Button aus". Wählen Sie eine Farbe aus, etwa ein dunkles Blau, und füllen Sie die Ebene damit. Erstellen Sie dann eine weitere Ebene mit dem Namen "Button an", und füllen Sie diese beispielsweise mit einem etwas helleren Blau.

4.

Nun erzeugen Sie eine weitere Ebene mit dem Namen "Button". Gehen Sie im Menü auf "Effekte, 3D-Effekte, Taste", und stellen Sie unter "Höhe" den Wert "3" sowie unter "Breite" den Wert "4" ein. Klicken Sie nun zum Bestätigen auf "OK".

5.

Erstellen Sie anschließend eine weitere Ebene für die Beschriftung der Schaltfläche. Platzieren Sie mit dem Textwerkzeug den gewünschten Schriftzug. Diesen Schritt wiederholen Sie für jede benötigte Schaltfläche. Verwenden Sie das Werkzeug "Verschieben", um die Beschriftungen in der Ebene auszurichten. Für eine bessere Übersicht sollten Sie die Ebenen entsprechend benennen, so dass Sie sie in der Ebenen-Palette später auf Anhieb identifizieren können.

6.

Um die einzelnen Schaltflächen zu erstellen, blenden Sie über das Icon mit dem Brillensymbol die jeweils nicht benötigten Ebenen aus. Für die erste Schaltfläche "Links" benötigen Sie lediglich die Ebenen "Hintergrund", "Button aus", "Button" und "Links". Kopieren Sie die sichtbaren Ebenen durch Drücken der Tastenkombination <Strg>-<Shift>-<C> in die Zwischenablage. Über <Strg>-<V> fügen Sie jetzt das neue Bild in Paint Shop Pro ein. Speichern Sie beispielsweise unter dem Namen Links_aus.GIF.

7.

Blenden Sie die Ebene "Button aus" aus und die Ebene "Button an" ein. Dadurch ändert sich nur der Hintergrund zu einem helleren Blau. Erzeugen Sie wie in Schritt 6 eine zweite GIF-Datei mit dem Namen Links_an.GIF. Verfahren Sie für die restlichen Schaltflächen entsprechend. Auf Ihrer Festplatte liegen danach zwei GIF-Dateien für jede Schaltfläche. Für den Roll-over-Effekt müssen Sie die Grafiken per Script in Ihre Web-Seiten einbinden. Wie das geht, lesen Sie in diesem PC-WELT-Tipp .

0 Kommentare zu diesem Artikel
715840