1. September 2010

Web 2.0 Button mit Platz für ein Icon / Symbol

Filed under: Tutorials von Michael um 17:01
 

Wir erstellen einen Web 2.0 Button mit Platz für ein Icon / Symbol

Dieses kleine Tutorial richtet sich auch an Anfänger. Ein paar Grundkenntnisse in der Bedienung von Photoshop sollte allerdings vorhanden sein.

Heute habe ich mir überlegt, zeige ich Euch in wenigen Schritten, wie man einen Button mit sogenannter Web 2.0 Optik erstellt, und diesen vom Style her so gestaltet, dass man auch einen
Platz für ein zusätzliches kleines Icon oder Symbol hat.
Der Button lässt sich hervorragend mit meinem Mini CSS-Tutorial kombinieren, und somit ein schöner Hover-Effekt erstellen (also ein Zustandwechsel wenn man mit dem Mauszeiger auf z.B. einer Webseite über den Button fährt.)

CSS Hover-Buttons

Wenn wir fertig sind sollte unser Button in etwa so aussehen:

Button mit Icon

Button mit Icon

Auch hier (wie immer) ist der Phantasie keine Grenze gesetzt, und mit wenig Aufwand und ein paar Einstellungen an den Ebenen-Optionen kann man schnell eine völlig andere Optik erreichen.

Ok, fangen wir an…

Zuerst einmal erstellen wir uns eine Neue Arbeitsfläche in beliebiger Grösse. Daraufhin wird eine neue Ebene erstellt, und mit dem „Rechteckwerkzeug“ kreieren wir uns ein Rechteck. Die Ecken können gerne abgerundet sein (die Stärke der Abrundung kann man oben unter „Radius“ einstellen.) Die Grösse des Rechtecks gebe ich bewusst nicht vor, da hier sicherlich jeder am besten für sich selber weiss in welcher Grösse er den Button am Ende braucht. Zur not lässt sich die Grösse über Bearbeiten–> Frei transformieren am ende auch noch etwas anpassen.

Nachdem wir nun unser Rechteck sehen wählen wir Ebene–> Ebenenstil–> Schein nach aussen und wählen die folgenden Einstellungen:

web 2.0 button - photoshop tutorial - bild 1

web 2.0 button - photoshop tutorial - bild 1

Danach wählen wir bei Ebene–> Ebenenstil–> Kontur diese Einstellungen:

web 2.0 button - photoshop tutorial - bild 2

web 2.0 button - photoshop tutorial - bild 2

Ok, wunderbar… Da fehlt doch noch was… Richtig! Wir wollten auch ein Plätzchen für ein Icon in den Button integrieren.
Dazu ziehen wir auf derselben Ebene auf dem sich der „Kasten“ befindet einen Kreis an geeigneter Stelle.
Damit es ein wirklich runder Kreis wird wählen wir hierzu das Ellipsen-Werkzeug, und halten beim Ziehen des Kreises die „Shift-Taste“ gedrückt (Umschalttaste auf gut Deutsch.)

Das bis jetzt erzielte Ergebnis sollte etwa so aussehen:

web 2.0 button - photoshop tutorial - bild 3

web 2.0 button - photoshop tutorial - bild 3

Auf das bisherige Gesamtkunstwerk wenden wir nun folgendes an: Wir gehen zu Ebene–> Ebenenstil–> Verlaufsüberlagerung, und machen ein paar Einstellungen. Am Ende soll das so etwas wie einen Glanz-Effekt darstellen. Hier darf man auch gerne ein wenig mit den Werten herumspielen…

web 2.0 button - photoshop tutorial - bild 4

web 2.0 button - photoshop tutorial - bild 4

Alles klar, nun brauchen wir noch einen Kreis um den Platz für unser Icon etwas hervorzuheben. Dazu erstellen wir uns eine neue Ebene, und ziehen mit der Farbe Weiss einen Kreis in entsprechender Grösse und positionieren den möglichst genau mittig in unserem vorgegebenen Icon-Bereich.

Damit der Kreis sich etwas mehr in das Gesamtdesign des Buttons einfügt nehmen wir noch einige wenige Einstellungen unter Ebene–> Ebenenstil bei Kontur und Verlaufsüberlagerung vor. Ich habe dafür folgende Einstellungen gewählt:

web 2.0 button - photoshop tutorial - bild 5

web 2.0 button - photoshop tutorial - bild 5

web 2.0 button - photoshop tutorial - bild 6

web 2.0 button - photoshop tutorial - bild 6

zwischenschritt

zwischenschritt

Super… Nun fehlt nicht mehr viel… Aber eine Beschriftung könnte natürlich noch helfen 🙂
Hierzu erstelle ich erneut eine neue Ebene, und wähle die Schriftart „Helvetica Condensed“ aus. Natürlich ist es jedem völlig selbst überlassen welche Schriftart er wählt.
Den ersten Teil der Beschriftung mache ich in der Farbe Weiss, und das zweite Wort in dem Farbton #dcf414 Dazu kommt noch ein leichter Glow, und eine Kontur um die Schrift etwas hervorzuheben und in das Gesamtbild einzufügen.

web 2.0 button - photoshop tutorial - bild 7

web 2.0 button - photoshop tutorial - bild 7

web 2.0 button - photoshop tutorial - bild 8

web 2.0 button - photoshop tutorial - bild 8

Unser fast fertiges Ergebnis schaut nun also etwa so aus:

web 2.0 button - photoshop tutorial - bild 9

web 2.0 button - photoshop tutorial - bild 9

Was fehlt jetzt noch? Richtig, ein Symbol. Ich habe als Beispiel einfach sozusagen irgend eins aus dem reichhaltigen Angebot der vorgefertigten Photoshop-Formen gewählt. Hier müsst Ihr für Euch eben auswählen was Ihr an der Stelle darstellen wollt.
Um einen sogenannten Hover-Button für Webseiten daraus zu machen könnte man jetzt entweder die Schrift z.B. farblich verändern für den zweiten Button-Zustand, oder mit der Darstellung des Symbols herumspielen. Nur so als Vorschlag.

Button mit Icon

Button mit Icon

So, das wars für dieses Mal wieder aus Michaels Kochstudio – Ich denke wie das Rezept geht ist klar. Die Geschmacksrichtung lässt sich variieren 😉

So Long

Michael K.


Keine Kommentare »


No comments yet.


Leave a comment




Ähnliche Beiträge zum Thema: "Web 2.0 Button mit Platz für ein Icon / Symbol"


Weitere Beiträge zum Thema: