In Teil 1 unserer Serie “To-Top Link” erstellen wir alle grafischen Elemente in Photoshop. Das Ergebnis soll wie folgt sein.

Sie können diesen Teil auch überspringen und die Grafiken weiter unten einfach downloaden.

Wir werden den Link in Form eines Link-Elements mit einem Verlauf als Hintergrundbild erstellen. Der Pfeil befindet sich als eigenständiges IMG-Tag innerhalb des Link-Elements und kann via jQuery animiert werden.
Pseudocode: <A><IMG>TEXT</A>
Damit benötigen wir zwei Bilder. Eine für den Hintergundverlauf sowie den Pfeil.

1. Hintergrund

1.1 Erstellen Sie in Photoshop eine neue Grafik mit 24×24 Pixel

1.2 Erstellen Sie mit dem Rechteck-Werkezug eine Rechteck über die komplette Fläche

1.3 Erstellen Sie eine Verlaufsüberlagerung

1.4 Speichern Sie Ihre Grafik als to-top-bg.psd

1.5 Erstellen Sie eine PNG-Datei mit Datei->Für Web und Geräte speichern.

Download des PSD’s: to-to-bg.psd

 2. Grafik für Pfeil erstellen

2.1 Erstellen Sie in Photoshop eine neue Grafik mit 26×26 Pixel

2.2 Erstellen Sie mit dem Ellipse-Werkzeug einen Kreis über die ganze Bildfläche (Ø 26px)

2.3  Vergößern Sie die Arbeitsfläche auf 38px x 38px

2.4 Erstellen Sie für den Kreis eine Verlaufsüberlagerung

2.5 Machen Sie eine Kopie der Ebene mit dem Kreis

2.6 Weisen Sie der Kopie die dunklere Farbe vom Verlauf des 1. Kreises zu

2.7 stellen Sie die Ebenen Transparenz auf 30% Multiplizieren

2.8 Erstellen Sie von oben eine Auswahl bis ca. zur Mitte des Bildes

2.9 Erstellen Sie von der Auswahl eine Ebenenmaske 

3.0 Klicken Sie direkt auf die Ebenenmaske und invertieren Sie diese mit [ctrl]+[i]

3.1 Erstellen Sie erneut eine Kopie der Ebene mit dem 1. Kreis und setzen Sie die Ebene an die 1. Stelle

3.2 Erstellen Sie eine Kontur und einen Schein nach innen

3.3 Stellen Sie für die “Erweiterten Fülloptionen” der Effekte die Deckkraft auf 0%

3.4 Erstellen Sie eine neue Ebene und zeichnen Sie eine Pfeil

3.5 Setzen Sie die Deckkraft des Pfeiles auf 80% und erstellen Sie einen Schlagschatten

3.6 Beschneiden Sie zum Schluß noch die Grafik

3.7 Speichern Sie die Garfik als to-top-arrow.psd und erstellen Sie eine PNG-Datei

Download des PSD’s: to-top-arrow.psd

Nun haben wir die grafischen Elemente erstellt – ich hoffe Sie hatten Spaß beim Ersellen der Grafik mit Photoshop. Im nächsnten Teil geht es dann um das Thema jQuery.