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)


creatix sagt:

hey nettes tut aber könnte man auch noch ne ecke unaufwändiger machen...
grüße!
-cre

8 Jul. 2008 16:09:41 • Antworten


Ronny2 sagt:

Dieser Beitrag wurde leider gelöscht!

Zuletzt bearbeitet am: 6 Jun. 2008 21:49:29

6 Jun. 2008 21:26:28 •


deleted_1312627607 sagt:

Da in den Kommentaren häufig angemerkt wurde, dass User hier nicht weiterkommen, weil sich die Auswahl nicht verkleinern lässt kommt hier ein Walkaround: Ihr drückt STRG A, um alles zu makieren. Nun nehmt ihr das einzelne Reihe und einzelne Spalte Werkzeug und entfernt (ALT Taste gedrückt halten) die oberste undrnunterste reihe, so wie die am linken und rechten Rand. Jetzt klickt ihr auf Auswahl -> Verkleinern: 2px. Nun solltet ihr die gleiche Auswahl haben, wie vom Tutorial verlangtrnund könnt mit dem Verlauf fortfahren. ;)

Zuletzt bearbeitet am: 19 Apr. 2008 10:56:34

19 Apr. 2008 10:56:06 • Antworten


defunct sagt:

Naja, ich komme bei Schritt 5 nicht weiter, irgendwie klappt's mit der "dunkelgrauen" Ebene (????) und der Verlaufsüberlagerung nicht so..

11 Apr. 2008 18:42:06 • Antworten


Whisper sagt:

Super Tutorial! Erst hatte ich so meine Probleme mit dem Auswahl verkleinern Kram, aber dann habe ich es doch hingekriegt (Musste einmal eine Auswahl selbst ziehen. Das ist ja kein Untergang ^^). Das Ergebnis kann sich echt sehen lassen, danke!

4 Apr. 2008 15:58:52 • Antworten


Besserwisserchen sagt:

BTW, einfach Windows + R drücken und dann "Charmap" eingeben (=
Sind alle auf einen schlag.. *g*

1 Apr. 2008 20:43:07 • Antworten


beatnicker sagt:

Gutes, detailiertes Tutorial mit umso schönerem Ergebnis.
Thx! :)

12 Mar. 2008 13:42:57 • Antworten


mr.paule sagt:

Das Tutorials ist echt sehr gelungen. Absolut verständlich und das Ergebnis kann sich sehen lassen!

Dankeschön =)

10 Mar. 2008 19:09:49 • Antworten


deleted_1312627607 sagt:

.psd gibt es im Downloadbereich.

25 Feb. 2008 19:46:36 • Antworten


Audrey sagt:

Erstmal vorweg schönes Tutorial aber leider komme ich bei schritt 5 gar nicht weiter :( . Irgendwie macht der beim Abwedlen nichts..
Hat jemand vll eine fertige PSD-Datei zum rübersenden? wäre echt dankbar :) ..

21 Feb. 2008 22:28:43 • Antworten



Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


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