Buttondesign - Web 2.0
Anzeige Hier werben
Immer häufiger finden sich im Web kleine Buttons die Banner, Webseitenheader oder sogar Inhalte schmücken und hervorheben sollen. Doch diese Buttons lassen sich nicht nur gute auf den vielen aufblühenden Web 2.0 Angeboten verwenden, sondern können mit etwas schlichteren Farben auch gut für Drucksachen verwenden werden, um Teile hervorzuheben oder auszuzeichnen. In diesem kleinen Workshop werden wir so einen einfachen Button mit Photoshop erstellen.
1. Ebene vorbereiten
Wir erstellen uns eine neue 300*300 Pixel große Ebene. Diese bezeichnen wir "Button".
Wir suchen uns eine gute Farbe für den Hintergrund unserer Buttons und stellen diesen
als Vordergrundfarbe ein (#DEE60E) und als Hintergrund Weiss (#FFFFFF)
2. Stern zeichnen
Mit dem in Photoshop integrierten Pfadwerkzeug (Taste u) rufen wir das Polygonwerkzeug auf.
Im Polygonwerkzeug haben wir eine Hand voll von weiterführenden Einstellungen. Dort stellen wir
unseren Füllmodus auf "Pixel füllen". So wird unsere Form direkt als Pixelpixel auf die Ebene
gerastert und kein Pfad erstellt.
In dem kleinen Aufklappmenu des Polygonwerkzeugs, aktivieren wir den Punkt "Stern" und stellen wir
die Anzahl der gewünschten Ecken (15 Stk.) ein und wie spitz die Seiten seinen sollen, wie weit
die diese also nach Innen eingezogen werden sollen(15%).
Dann ziehen wir uns auf unserer Bühne mit der Maus auf der Button-Ebene die Form auf.
3. Verlaufsüberlagerung
In der Ebenenpalette rufen wir in unserer Ebenenpalette den Ebenenstil "Verlaufsüberlagerung"
auf, wo wir für die Deckkraft einen Wert von "70%" setzen und den Winkel auf 65° setzen.
Um einen guten Farbverlauf einzustellen, klicken wir in den Einstellungen der "Verlaufsüberlagerung"
noch auf "Verlauf", wo wir den Verlauf oben links auswählen. Beim diesem sollte ganz Links der
Farbwert #DEE60E und ganz Rechts #FFFFFF gesetzt sein. Die Deckkraft sollten dabei stets 100% sein,
also komplett Schwarz. Mit einem "Ok" besätigen wir unsere Verlaufseinstellungen, bleiben aber
in den Ebeneneffekten.
4. Schlagschatten
Um unseren Button plastischer zu gestalten, fügen wir einen sanften Schlagschatten hinzu.
Diesen finden wir in den Ebeneneffekten unter "Schlagschatten".
5. Abgeflachte Kanten und Relief
Dies finden Sie ebenfalls unter den Ebenstilen. Diesen Stil stellen wir wie auf dem Screenshot
ein und wechseln dann in die Kontureinstellungen, ganz unten im Menu.
6. Kontur
Um unsere Button vom Hintergrund etwas mehr abzuheben, verpassen wir ihn mit einer Kontur.
Als Konturfarbe wählen wir Grau (#9E9E9E) und stellen die Größe auf "7 Pixel", sowie die Deckkraft auf "30 %".
Die Position sollte auf "Innen" gestellt sein.
7. Glanz
Als letzten Ebenstil rufen wir den Reiter "Glanz" auf. Die Einstellungen dafür übernehmen wir aus
dem Screenshot.
8. Highlight
Um dem Button noch mehr Spiegelung zu verpassen und somit einen glasigen Eindruck, versehen wir
ihn mit einer Spiegelung. Dafür erstellen wir eine neue Ebene, die wir "Spiegelung" nennen.
Mit dem Auswahlellipsen-Werkzeug (Taste m), ziehen wir uns auf dieser Ebene, eine Ellipse auf,
die unseren Button im oberen, rechten Drittel überlagert. Die Auswahl füllen wir mit unserer
weißen Hintergrundfarbe (strg + backspace).
Mit gedrückter strg-Taste klicken wir anschließend auf unsere Buttonebene, um eine Auswahl der
Buttonkontur zu erhalten. Diese Auswahl invertieren wir über "Auswahl > Auswahl umkehren" und
drücken dann die Entfernen-Taste. Dadurch haben von unserer weißen Ellipse alles gelöscht, was
nicht mit unserem Button überlagert.
Über "Auswahl > Auswahl aufheben" verlassen wir den Auswahlmodus wieder. In der Ebenenpalette
stellen wir die Deckkraft der Spielung-Ebene auf 25%.
9. Text hinzufügen
Abschließend können wir unseren Button noch mit einem kleinen Text versehen. Deinen eigenen
Text kannst du natürlich wieder mit einer Fülle von Ebenenstilen kombinieren und so besser im
Button integrieren.
Damit haben wir unseren Button fertigestellt. So ein Button kann auch gut im Printbereich eingesetzt werden, um bestimmte Bereiche hervorzuheben.
Meine Schwerpunkte liegen im Bereich Grafikdesign, SEO und Management. Seit sieben Jahren bin ich als Geschäftsführer der Team23 GbR tätig, die Webdesign in Augsburg anbietet, sowie Webmasterpro.de betreut.
Profilseite betrachten
Alles gelöscht?
Hallo,
nochmal ich. Du schreibst:
Allerdings bleibt bei mir dabei alles wie vorher auch und der weiße Bereich geht über den Button. Was mach ich denn da falsch?
Gruß
Markus
Re: Alles gelöscht?
Auf die Ebene auf die du klickst muss der Button enthalten sein. Mit dem Drücken wird eine Auswahl geladen. Erscheint bei Dir etwas, wenn du mit der gedrückten STRG+Taste auf die Ebene klickst? Es sollte eine sich leicht bewegende Auswahl auf deinem Bild erscheinen. Ist das der Fall?
Re: Alles gelöscht?
Ich bin so doof. Ich hab den Fehler gefunden. Nun geht es auch bei mir. Lag aber an meiner allgemeinen PS Bedienung. Ich habe nicht auf das Bild der Ebene geklickt sondern immer komplett in den grauen Kasten. Wenn ich in den grauen Kasten klicke markiert der den Text nämlich nicht.
Re: Alles gelöscht?
jep das stimmt. hab ich leider damals nicht nachvollziehen können.
Re: Alles gelöscht?
Sollte das vielleicht noch ergänzt werden oder als was grundsätzliches? Vielleicht würde es ja mehreren passieren.
Gruß
Markus
Re: Alles gelöscht?
Nein, das bleibt so, wie es vorher auch war. Da bleibt nur die Ebene mit der Spiegelung markiert.
Überlagern?
Hallo,
bei Schritt sieben ist die Füllmethode "überlagern" in Photoshop CS 3 gibt es die nicht. Was ist es denn da?
Re: Überlagern?
Wo genau meinst du? Hab jetzt das Problem nicht nachvollziehen können.
Re: Überlagern?
Habs jetzt gefunden. Lass in CS3 einfach auf "Multiplizieren".