Tutorials - Grafik und Fotos - Photoshop Tutorial I - Ein einfacher Button

Hier werden nun nach und nach ein paar Photoshop-Tutorials veröffentlicht werden.

Den Anfang macht ein einfacher Button mit einem feschen Glaseffekt:

Also los gehts:

Öffne Photoshop und erstelle eine neue Datei, indem du auf Datei/Neu gehst. Die Größe habe ich hier im Beispiel auf 100px Höhe mal 30px Breite gesetzt.

Bei Klick auf Ok wird das neue Bild in einem neuen Fenster erstellt. Hier kannst du jetzt durch Klick auf die Pyramiden im Navigatorfenster von Photoshop die Darstellungsgröße verändern. Hier 300%.

Setzte nun deine Vordergrundfarbe auf einen beliebigen Wert, indem du in der Werkzeugleiste auf das schwarze bzw. weiße Feld des Farbwählers klickst und dir eine Farbe aussuchst. Diese Farbe wird die Hintergrundfarbe des Buttons (hier 8AA9C1 - passend zur Webseite).

Mit einem Klick auf das Füll-Werkzeug-Symbol () der Werkzeugleiste und einem weiteren Klick in das neue Bild (hier weiß-grau gekachelte Fläche) wird der Bereich gefüllt.

Das Ebenenfenster sollte nun (falls noch nicht sichtbar) eingebledendet werden: Fenster -> Ebenen. Hier solltest du nun die ausgewählte Ebene sehen, auf der wir uns befinden. Du erstellst nun eine neue Ebene, die im späteren Verlauf mit einem abgerundeten Rechteck gefüllt wird, indem du entweder auf Ebene -> Neu -> Ebene oder im Ebenenfenster auf klickst. Bevor die Ebene erstellt wird, kannst du ihr im nächsten Fenster noch einen Namen und eine farbliche Abhebung zuweisen.

Bei Ebenen muss beachtet werden, dass die Inhalte so im späteren Bild erscheinen, wie sie in den Ebenen liegen, d.h. was im Ebenenfenster oben ist, erscheint im Bild vorne. (Würden wir z.B. mit Strg + eine neue Ebene unter der ersten Ebene erstellen, würden Inhalte dort nicht im Bild sichtbar sein - unsere erste Ebene würde sie verdecken)

Als nächstes werden Hilfslinien gezogen, mit denen im weiteren Schrtitt ein Button genau platziert werden kann. Klicke dazu auf eines der Lineale, die das Bild oben und links umgeben, und ziehe die Maus von dort aus mit gedrückter Maustaste in das Bild, wobei die blauen Hilfslinien entstehen. Die Hilfslinien sollten nun so platziert werden, dass eine Rechteckige Umrandung entsteht (hier beträgt der Abstand zum Rand jeweils 2 Pixel).

Wenn du die Hilfslinien verschieben willst, mußt du das Verschieben-Werkzeug benutzen ().

Nun klicke mit der rechten Maustaste auf das Rechteck-Werkzeug-Symbol () deiner Werkzeugleiste und wähle das "Abgerundetes-Rechteck-Werkzeug" (). Stelle sicher, dass du dich im "Pixel-Füllen"-Modus befindest (obere Leiste ). In der oberen Leiste sollte auch die Rundung auf 5px und "Glätten" für einen weicheren Rand eingestellt sein.

Drücke die Taste "D", um die Standardfarben einzuschalten (Vordergrundfarbe schwarz).

Nun ziehst du das abgerundete Rechteck von einem Schittpunkt der Hilfslinien zum gegenüberliegenden:

... und läßt die Maustaste los ...

Deine Ebenenpalette sollte nun zwei Ebenen beinhalten: den Hintergrund und das schwarze abgerundete Rechteck.

Erstelle nun eine neue Ebene (). Die neue Ebene befindet sich ganz oben im Ebenenfenster und ist dunkel hinterlegt - du solltest dich gerade darin befinden - wenn nicht, einmal im Ebenenfenster anklicken bzw. nach oben schieben.

Nun hältst du die Taste Strg gedrückt und klickst im Ebenenfenster auf die Ebene mit dem abgerundeten Rechteck, um eine Auswahl (gestrichelte Linie) zu bekommen, mit der wir in der neuen Ebene weiterarbeiten.

Klicke nun auf Auswahl -> Auswahl verändern -> Auswahl verkleinern und gebe im nächsten Fenster 1px ein. Die verkleinerte Auswahl füllst du nun mit einem Verlauf: Klicke mit rechts auf das Füllwerkzeug () und wähle das Verlaufswerkzeug (). In der oberen Leiste erscheint nun ein Dropdown-Feld mit grafischer Vorschau. Dort sollte ein einfacher Farbverlauf von Schwarz nach weiß sichtbar sein. Stelle dazu auch noch sicher, dass du einen linearen Farbverlauf () benutzt.

Ändere nun die Vordergrundfarbe über den Farbwähler auf 336699 und die Hintergrundfarbe auf 4C91D8. Jetzt ziehst du mit der Maus den Verlauf von der Oberkante der Auswahl zum unteren Ende und läßt die Maustaste los.

Nun klickst du wieder auf Auswahl -> Auswahl verändern -> Auswahl verkleinern und verkleinerst die Auswahl um 2 Pixel.

Erstelle eine weitere Ebene, ohne die Auswahl zu löschen. In der Auswahl wird nun ein weiterer Verlauf eingesetzt.

Wähle mit der Taste "D" die Standardfarben, ändere aber mit einem Klick auf die beiden kleinen Pfeile im Farbwähler die Vordergrundfarbe auf weiß.

Zurück zum Verlauf: aus dem Dropdown-Feld der Verlaufsleiste oben wählst du den Verlauf Vordergrund-Transparent (weiß verläuft in Hintergrund). Den Verlauf ziehst du wieder mit der Maus von der Oberkante der Auswahl - diesmal aber nur bis ca. zur Hälfte.

Jetzt ist der eigentliche Button ja schon fast fertig. Du kannst nun Beschriftungen einfügen. Ein netter Effekt ist es, die Textebene zwischen der blauen und der weißen Verlaufsebene zu platzieren - so überlagert der weiße Verlauf auch den Text.

Der Button kann nun über Datei -> für Web speichern als jpg oder gif abgespeichert werden.

Im zweiten Tutorial werden einige Feinheiten zur Formatierung des Buttons beschrieben.