Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Adobe Photoshop Tutorial: Schicken Button erstellen



Ranking: +140   Kommentare: 40   |   Bewertung: Keine Berechtigung!  

Herzlich Willkommen zu meinem Buttontutorial



Vorwort:
In diesem Tutorial werde ich euch zeigen, wie man einen schicken Button erstellen kann. :) Wenn ihr die Mühen, die ich mir für dieses Tutorial gemacht habe belohnen wollt, gebt dem Tutorial doch einfach eine positive Bewertung. ;)



1. Schritt:
Als erstes habe ich die Größe des Buttons festgelegt. Der Button soll 120 Pixel breit, und 35 Pixel hoch sein.




2. Schritt:
Buttonstep1
Buttonstep1

Nun wählen wir als Hintergrund einen Verlauf aus, von #232323 #5F5F5F.
Das ganze sollte jetzt so aussehen, wie im Bild.




3. Schritt:
Buttonstep2
Buttonstep2

Als nächstes erstellen wir eine neue Ebene, und drücken STRG+A um alles auszuwählen. Dann gehen wir auf Auswahl->Auswahl verändern->Verkleinern: 2 Pixel. Jetzt wählt ihr als Hintergrundfarbe #0E0E0E aus und füllt die Auswahl mit der Farbe. Lasst die Auswahl bestehen




4. Schritt:
Buttonstep3
Buttonstep3

Der nächste Schritt sieht wie folgt aus: Geht wieder auf Auswahl -> Auswahl verändern -> Verkleinern: 1Px. Dann nehmt ihr das Auswahlrechteck und makiert mit gedrückter ALT Taste das untere Drittel (einfach schätzen) der Selektion. Nun geht ihr auf Ebene -> Neue Füllebene -> Verlauf... und wählt einen Verlauf von weiß zu transparent. (Wenn weiß eure Vodergrundfarbe ist, ist dieser Verlauf schon voreingestellt) Jetzt könnt ihr, bevor ihr das Fenster schließt, den Verlauf noch ein wenig skalieren. Ich habe ihn etwas weiter unten enden lassen. Die Ebenendeckraft auf 25% stellen.




5. Schritt:
Buttonstep5
Buttonstep5

Im 5. Schritt selektiert ihr wieder die dunkelgraue Ebene (die 2. also) indem ihr mit STRG+Linksklick auf den Pinsel neben dem Namen der Ebene klickt. Jetzt geht ihr wieder auf Auswahl -> Auswahl verändern -> Verkleinern: 3 Pixel. Nun erstellt ihr eine neue Ebene (die Ebene muss in der Reihenfolge ganz oben stehen) und füllt diese in eine Farbe eurer Wahl. Nun klickt ihr mit der rechten Maustaste auf die Ebene und klickt auf Fülloptionen. Dort geht ihr auf Verlaufsüberlagerung und wählt einen Verlauf euer Wahl aus, er sollte von einer hellen Farbe (rechts) zu einer dunklen Farbe (links) verlaufen. Dann gebt ihr einen Namen für den Verlauf ein, und klickt auf "Neu" nun ist der Verlauf gespeichert. Jetzt macht ihr einen Haken bei Kontur und wählt folgende Einstellungen:

Größe: 1 Pixel
Position: Innen
- Füllmethode und Deckkraft unverändert lassen -

Füllung: Verlauf
Verlauf: Euren gerade gespeicherten Verlauf.
Umkehren: [X] (Das Kästchen makieren)

Nun könnt ihr auf Okay klicken.




6. Schritt:
Buttonstep5
Buttonstep5

Erstellt eine Ebene unter der Ebene mit dem Verlauf, wählt die Ebene mit dem Verlauf an und drückt STRG+E. So werden die Fülloptionen übernommen, aber nicht mehr als solche behandelt, sprich wir können den Hintergrund bearbeiten, zum Beispiel mit dem Abwedler, was wir jetzt tun werden. Wählt das Auswahlwerkzeug: Einzelne Zeile und makiert eine Zeile im unteren Bereich des Verlaufes. Nun wählt ihr das Abwedlerwerkzeug mit den Einstelllungen:

Einen weichen Pinsel mit der Größe 65 Pixel, Bereich: Lichter, Belichtung 85%, Kein Airbrush

Nun fahrt ihr mit dem Pinsel einmal im mitleren Bereich des Verlaufes entlang und deselektier eure Makierung.




7. Schritt:
Buttonstep7
Buttonstep7

Fahren wir fort. Selektiert die Auswahl der Ebene, die wir gerade bearbeitet haben (mit gedrückter STRG Taste auf den Pinsel klicken) und geht auf Auswahl -> Auswahl verändern -> Verkleinern: 1 Pixel
Nun erstellt eine neue Ebene und zeichnet an den äußersten rechten Rand eine Schwarze, 1 Pixel breite, Linie. Links daneben eine, 1 Pixel breite, Weiße linie und dann wieder eine Schwarze. Stellt die Ebene nun auf Weiches Licht. Kopiert diese Ebene (STRG+J) und schiebt sie auf die andere Seite, so dass es ein Symmetrisches Bild ergibt.




8. Schritt:
Buttonstep8
Buttonstep8

Es ist an der Zeit für die letzten Kleinigkeiten an unserem Button! Nehmt den Abwedlder mit gleichen Einstellungen von vorhin und hellt oben in der Mitt die farbige Ebene auf.




9. Schritt:
Buttonstep9
Buttonstep9

Kommen wir zum Text. Schreibt mit Weiß etwas auf den Button. Ich benutze Tahoma, 11 Pt. Dieses Zeichen macht man, indem man auf dem Zifferblock 175 drückt, während man die STRG Taste gedrückt hält. Wenn ihr mehr dieser Zeichen sucht, googlet mal nach ASCII.




10. Schritt:
Buttonstep10
Buttonstep10

Rechtsklickt auf die Ebene mit dem Text und geht auf Fülloptionen. Dort wählt ihr Schein nach außen, mit diesen Einstellungen:

Füllmethode: Normal
Deckkraft: 100%
Störung: 0%
Farbe: Schwarz (#000000)

Technik: Weicher
Überfüllen: 10%
Größe: 3 Pixel

Auf Okay klicken. Fertig ist unser Button! Gratulation. :)


Das war es auch schon mit diesem Tutorial. Wenn ihr Fragen habt, postet sie einfach in die Comments, so wie eure Outcomes, bin gespannt, wie ihr das umsetzt. Ansonsten, wenn euch das Tutorial gefallen hat, vergesst nicht auf zu drücken. ;)[/b]

Veröffentlicht von: deleted_1312627607
Veröffentlicht am: 24 Dec. 2007
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: button modern stylisch Xalvi


Themenverwandte Tutorials


Kommentar(e) (40)


SpeedCoreMo sagt:

Echt hilfreiches TUT.... Danke

29 Jun. 2010 22:49:11 • Antworten


marvin371 sagt:

die sehen echt geil aus, die buttons!
Ich hab das tut zwar nur überflogen sieht aber ganz nice aus!
Thx

23 Jan. 2010 17:04:27 • Antworten


Parkuhr sagt:

wenn du da nicht weiterkommst stell die härte des abwedler pinsels auf so 50


vllt. hilft das das ergebnis zu aussehen zu lassen wie im bild ;)

11 Jan. 2009 11:21:50 • Antworten


LinuXx sagt:

Sieht schön und gut aus, hänge aber bei Schritt 5. Bei mir verläuft der blaue Verlauf nicht über den "Großteil des Buttons" sondern nur über dieses verkleinerte markierte. Kann mir vll jemand helfen^^?
MFG

11 Dec. 2008 15:52:05 • Antworten


majorruin sagt:

schicker button :)

25 Nov. 2008 18:35:24 • Antworten


pRo7oUcH sagt:

Ich hänge in Schritt 4 fest...er macht mir einfach den Verlauf da nicht hin...

31 Oct. 2008 16:59:53 • Antworten


Maxximum sagt:

sehr schön! Einfach und verständlich!

29 Oct. 2008 16:55:58 • Antworten


k3kz sagt:

super, dankeschön!

4 Oct. 2008 14:56:13 • Antworten


Xsen7X sagt:

Klasse Tutorial. Kurz,prägnant und doch präzise erläutert. Toll!

2 Sep. 2008 13:18:11 • Antworten


Xycro sagt:

Hey, habs als Vollnewb gepackt :D
Gutes Tut!

20 Aug. 2008 04:10:20 • Antworten



Anfang

<<

1

234>>Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder