In diesem Artikel wird die chinesische Version von Photoshop CS2 als Beispiel verwendet. Die Schritte für andere Versionen von Photoshop können geringfügig abweichen. Schauen wir uns zunächst den Endeffekt an.
Die spezifischen Schritte für
den Endeffekt
sind wie folgt.1. Starten Sie die chinesische Version von Photoshop CS2, drücken Sie Strg+N, um das Dialogfeld „Neu“ zu öffnen, nehmen Sie nach Bedarf einige Einstellungen vor (die Größe sollte für das zukünftige Navigationsmenü geeignet sein) und klicken Sie auf die Schaltfläche „OK“. ein neues Dokument erstellen.
2. Klicken Sie auf die Schaltfläche „Neue Ebene erstellen“ unter dem Ebenenbedienfeld, um eine neue Ebene zu erstellen. Wählen Sie in der Toolbox das „Abgerundete Rechteck-Werkzeug“ aus, stellen Sie in der Optionsleiste seinen Radius auf 15 Pixel ein und zeichnen Sie dann ein abgerundetes Rechteck wie in Abbildung 1 auf der neuen Ebene.
Abbildung 1
3. Wenden Sie nun den folgenden Ebenenstil auf die obige Form an.
Vorsprung:
Abbildung 2
innerer Schatten:
Abbildung 3
Inneres Leuchten:
Abbildung 4
Farbüberlagerung:
Abbildung 5
Strich:
in Abbildung 6
wird der in Abbildung 7 gezeigte Schaltflächeneffekt erhalten.
Abbildung 7
4. Verwenden Sie nun erneut das „Abgerundete Rechteck-Werkzeug“, zeichnen Sie dieses Mal ein kleineres weißes abgerundetes Rechteck über der Schaltfläche, wie in Abbildung 8 gezeigt.
Abbildung 8
5. Stellen Sie den Mischmodus dieser Ebene auf „Überlagern“ und stellen Sie die Deckkraft auf 30 % ein. Sie erhalten den Schaltflächeneffekt wie in Abbildung 9 gezeigt.
Abbildung 9
6. Kopieren Sie als Nächstes diese Schaltflächen, ordnen Sie sie in einem Navigationsmenü an und fügen Sie den Text hinzu, wie in Abbildung 10 dargestellt.
Abbildung 10
7. Wählen Sie das „Slice-Tool“ in der Toolbox aus, öffnen Sie das Menü „Ansicht“ und vergewissern Sie sich, dass sich links neben „Ausrichten“ ein Häkchen befindet. Dadurch werden die Slices automatisch an den Kanten ausgerichtet und genauer erstellt Scheiben. Verwenden Sie das „Slice-Tool“, um Knopf für Knopf zu schneiden, und jedes Slice enthält einen Knopf. Das Ergebnis ist in Abbildung 11 dargestellt.
Abbildung 11
8. Nachdem das Slicing abgeschlossen ist, können Sie es nun als HTML-Datei ausgeben, um es für das spätere Webdesign vorzubereiten. Wählen Sie den Menübefehl „Datei | Für Web speichern“. Um den besten Bildeffekt zu erzielen, verwenden Sie die in Abbildung 12 gezeigten Einstellungen. Klicken Sie nach der Einstellung auf die Schaltfläche „Speichern“.
Abbildung 12
9. Wählen Sie im Dialogfeld „Optimierungsergebnisse speichern unter“ den Ort aus, an dem die Webseitendatei gespeichert werden soll, geben Sie den Dateinamen ein, wie in Abbildung 13 gezeigt, und wählen Sie den Speichertyp „HTML und Bilder (*. html)“ und klicken Sie dann auf die Schaltfläche „Speichern“.
Abbildung 13
: Dies führt zu einer HTML-Seite und einem Bilderordner, der Schaltflächenbilder enthält.
Jetzt müssen Sie nur noch den HTML-Code auf andere Webseiten kopieren, um ihn zu verwenden. Kopieren Sie beim Kopieren jedoch nicht die von Photoshop generierten Header-/Body-Tags.