Gewusst wie: Erstellen von Rollover-Effekten in Photoshop

Ein Rollover-Button ist ein Button auf Website, die seinen Zustand ändert, wenn der Mauszeiger darüber bewegt wird. Die Statusänderung kann eine beliebige Anzahl von Änderungen, einschließlich Farbe, Schriftart, Größe oder eine Kombination davon sein. Rollover Buttons Polnisch und Professionalität zu Ihrer Website hinzufügen und leicht in Adobe Photoshop und ImageReady erstellt werden können. Diese Schritte ausführlich auf eine einfaches Rollover-Schaltfläche erstellen, aber der Prozess kann geändert werden, um weitere stilisierte Grafik.

Anweisungen

Die Button-Bilder in Photoshop erstellen

1 Gehen Sie zu Datei > neu und Festlegen der Bildgröße 80 von 25 Pixel mit einer Auflösung von 72 Pixel pro Zoll.

2 Klicken Sie auf das Vordergrund-Farbfeld am unteren Rand der Tool-Palette auf der rechten Seite des Bildschirms. Wählen Sie eine Farbe für den Text auf der Schaltfläche. Dann klicken Sie auf das Hintergrund-Farbfeld und wählen Sie eine Farbe.

3 Drücken Sie "" Control + Rücktaste, um den Bildausschnitt mit Ihrem gewählten Hintergrundfarbe füllen.

4 Wählen Sie das "Type"-Werkzeug aus der Werkzeugpalette, und legen Sie die Schriftart und-Größe im Tool-Menü am oberen Rand des Bildschirms. Klicken Sie auf den Dokumentbereich und geben Sie den Schaltflächennamen, z. B. "Portfolio" oder "Home."

5 Verwenden Sie das Werkzeug "Verschieben", um den Text nach Ihren Wünschen ausrichten.

6 Kopieren Sie die Hintergrund- und Typ Schicht. Erstellen Sie eine Kopie einer Ebene durch Rechtsklick auf eine Ebene in der Ebenen-Palette und wählen "Duplizieren."

7 Zusammenführen der ursprünglichen Hintergrund und Text-Ebenen halten der "Shift"-Taste beim Klicken auf beide Ebenen in der Ebenen-Palette. Dann wählen Sie Bearbeiten > Ebenen zusammenfügen. Benennen Sie die Ebene "Normalzustand."

8 Doppelklicken Sie auf das "T"-Bild links von der kopierten Textebene, um den Text zu markieren. Klicken Sie auf das Farbfeld im Tool-Menü am oberen Rand des Bildschirms, und wählen Sie eine andere Farbe für den Text, wenn der Mauszeiger über der Schaltfläche befindet.

9 Ändern Sie die Farbe in die Hintergrundebene, falls gewünscht.

10 Zusammenfügen Sie die zwei kopierten Ebenen, und benennen Sie die Ebene "Rollover-Staat." Ihre Datei sollte jetzt zwei Schichten enthalten: dem "Normalzustand" Schicht auf dem Boden und die "Rollover-Staat"-Schicht an der Spitze. Sie können eine Vorschau wie die Schaltfläche Änderung anzeigen von ein-/ausschalten der Sichtbarkeit der oberen Schicht. Klicken Sie auf das Auge-Grafik auf der linken Seite der Ebene ein-oder ausblenden.

Erstellen Sie die Schaltfläche "Rollover" in ImageReady

11 Klicken Sie auf "Springen zu ImageReady" am unteren Rand der Tool-Palette mit der Schaltfläche Datei noch offen.

12 Gehen Sie zu der aussehen-Palette (in CS oder höher) oder der Rollover-Palette (in älteren Versionen); Wenn es nicht bereits geöffnet ist, gehen Sie zum Menü "Fenster", und wählen Sie die Palette aus der Drop-Down-Menü.

13 Ausblenden der Schicht "Rollover-Staat"; Dies setzt den normalen Zustand der Schaltfläche auf die Ebene von "Normal".

14 Klicken Sie auf "Create New State", am unteren Rand der Palette "Erscheinung" oder "Rollover". Schalten Sie die Sichtbarkeit auf der Ebene "Rollover-Staat", es als den Rollover-Staat einzustellen.

15 Gehen Sie zu der Segment-Palette; Wenn es nicht bereits geöffnet ist, finden sie im Menü Fenster. Ihre Rolloverschaltfläche eine URL zuweisen; Dies ist die Webseite, die der Benutzer zu ausgeführt wird, wenn er auf die Schaltfläche klickt.

16 Testen Sie Ihre Rolloverschaltfläche, indem Sie auf die Schaltfläche "Vorschau in Standard-Browser" am unteren Rand der Tool-Palette.

17 Gehen Sie zu Datei > Speichern optimiert, den HTML-Datei und Bild-Ordner zu speichern.

Tipps & Warnungen

• Die beschriebenen Schritte führen Sie hier durch ein einfaches Rollover-Schaltfläche erstellen können, aber Sie die Normal und Rollover-Bilder so aufwendige wie Sie wollen.