Anzeige
Tutorialbeschreibung

Universal Button

Universal Button

In diesem Tutorial erkläre ich euch wie ihr mit wenigen einfach Schritten einen tollen Button erstellen könnt.


Schritt 1:
Voreinstellungen

Als aller erstes erstellt ihr eine neue Datei (STRG+N oder Datei -> Neu...) mit folgenden Einstellungen:

Bilder


 

Nun stellt ihr das Raster so ein (Bearbeiten -> Voreinstellungen -> Hilfslinien, Raster, Slices und Zählungen):

Bilder



Blendet das Raster mit dem Kürzel 
STRG+ALT+Shift L+;
(oder unter Ansicht -> Einblenden -> Raster) ein.



Schritt 2:
Grundformerstellung

Es empfiehlt sich seine Datei immer etwas größer anzulegen und sie später noch zu skalieren, da ihr zu kleine Dateien nicht und endlich vergrößern  (außer es sind Vektorgrafiken) aber immer kleiner machen könnt.

Erstellt eine neue Eben (STRG+SHIFT L+E oder Ebene -> Neu -> Ebene) mit dem Namen "Hintergrund".
Wählt eine Vordergrundfarbe die zu euerm Projekt passt. (In meinem Fall ein Orangeton [#ffc000]).
Benutzt nur die eine Hälfte der Datei (ich habe die Teile mal mit einer Cyanfarbigen Hilfslinie eingezeichnet zum besseren Verständnis).

Nun zieht ihr jetzt mit dem Abgerundeten-Rechteck-Werkzeug mit "einem Kästchen"-Abstand und einem Radius von 20px/Pixeln eine abgerundete Form.
Bilder
Bilder


Jetzt habt ihr sowas:

Bilder


Wenn euch das zu Dick erscheint von der Höhe oder Breite könnt ihr natürlich mit STRG+T (oder Bearbeiten -> Frei Transformieren) die Form so stauchen/transformieren, bis es euren Vorstellungen entspricht. Man kann natürlich auch gleich solange rumprobieren bis man die richtige Größe hat - nur mit dem Transformieren kann man sich an die Sache herantasten und muss nicht jedes mal praktisch von vorne anfangen.


Schritt 3:
Zusatzformerstellung

Erstellt eine neue Ebene mit dem Namen "Blackblock" und wählt erneut das Abgerundete-Rechteckwerkzeug.
Wählt jetzt als Vordergrundfarbe einen verweißlichten Schwarzton. Ich habe #2c2c2c genommen.
TIPP: Ihr könnt auch den verweißtlichten Schwarzton als Hintergrundfarbe einstellen und mit dem Kürzel "X" auf der Tastatur zwischen den Farben wechseln.
Zeichnet ein Rechteck auf der neuen Ebene so, dass nach Links, Oben und Unten ziemlich der gleiche Abstand ist (Rechts kommt später der Text).

Bilder



Macht einen Doppelklick auf die "Blackblock"-Ebene und macht folgende Einstellungen:
Bilder



Schritt 4:
Pfeilerstellung

Nun folgt der wohl schwierigste Teil und der unangenehmste für alle Pfad-Werkzeug-Hasser ;-) Aber ich kann euch beruhigen: So schwer wird es nicht.

Macht den Pfad einfach so wie hier in der GIF:

Bilder


Erstellt eine neue Ebene mit dem Namen "Arrow" und wechselt zu den Pfadebenen.
Drückt auf eurer Tastatur den Buchstaben "D" (um Schwarz/Weiß einzustellen) und anschließend "X" um die Farben zu wechseln. Macht nun einen Rechtsklick auf den Arbeitspfad und wählt "Pfadfläche füllen" aus. Ein Fenster geht auf, welches ihr mit OK bestätigt.
Klickt unter die Eben um den Pfad zu deaktivieren.


Jetzt sieht die Datei bis jetzt ungefähr so aus:
Bilder



Noch ziemlich unspektakulär aus... Fügen wir der Pfeilebene Effekte hinzu... wechselt zurück zu den Ebenen und macht einen Doppelklick auf die Ebene "Arrow".
Wählt "Schatten nach innen" aus und macht folgende Einstellungen:

Bilder




Schritt 5:

Gloss-Erstellung

Erstellt mal wieder eine neue Ebene mit dem Namen "Overlay". Drückt mit gedrückter STRG Taste auf das kleine Vorschaubild in der Ebenenliste von unserer ersten Ebene "Hintergrund". Nun ist die Form der Eben markiert. Wählt nun das Markieren-Werkzeug (Das allererste Werkzeug oben links) aus.
Jetzt haltet ihr die ALT-Taste eurer Tastatur gedrückt und zieht von unten rechts bis etwa zur Hälfte der Form eine Rahmen.... So etwa:

Bilder



Übrig bleibt der obere Teil der Auswahl. Haltet mit gedrückter Maustaste auf dem Farbeimer in der Werkzeugleiste (neben dem Radiergummi) und wählt das Verlaufswerkzeug aus. Zieht nun von der Mitte der orangenen Fläche bis zum äußeren Rand der Markierung einen Verlauf von Weiß zu Transparent:

Bilder


Wählt erneut das Markieren-Werkzeug und klickt einmal kurz in die derzeitige Auswahl um alles zu deselektieren.
Setzt nun die "Fläche" der Ebene von 100% auf 37%
Bilder


TIPP: Ihr könnt nun wenn ihr "V" auf der Tastatur drückt mit den Pfeiltasten die Ebene Overlay nach Oben und Unten bewegen und genau platzieren.


Schritt 6:
Schrift

Das ist denke ich mal der einfachste Teil von dem ganzen Tutorial, neben der Dateierstellung. ;)

Ich würde mir außerdem angewöhnen ab und zu mal zwischenzuspeichern wenn ihr das nicht machen solltet - man weiß nie was passiert und dann ist alles weg.

Drückt "T" oder wählt das Textwerkzeug aus und zieht einen Textrahmen neben eurem schwarzen Kästchen und schreibt rein was ihr möchtet. Die Schriftfarbe und die Schriftklasse hängt von euch und eurem Projekt ab. Ich habe in meinem Fall eine serifenlose benutzt. Nachdem ihr einen Text geschrieben habt könnt ihr mit dem Verschiebenwerkzeug euren Text noch richtig platzieren falls er nicht ganz passen sollte. Schiebt nun die Texteben unter die Ebene "Overlay" um auch bei dem Text den Effekt zu erzielen.


Schritt 7:
Gruppierung und Spiegelung

Erstellt nun eine Gruppe (Ebene -> Neu -> Gruppe oder unten in der Ebenenliste auf den kleinen Ordner klicken) und nennt sie "StockButton".
Klickt auf die Ebene "Overlay" und drückt mit gedrückter SHIFT Taste (Die Linke auf der Tastatur) auf die Ebene "Hintergrund".
Nun sind alle Ebenen markiert. Zieht nun mit gedrückter linker Maustaste die Ebenen in die Gruppe und minimiert sie mit einem Klick auf den kleinen Pfeil vor dem Gruppen Symbol.

Bilder


So sieht der Button jetzt aus.... Kümmern wir uns um die Spiegelung.

Macht einen Rechtsklick auf die Gruppe und klickt "Gruppe duplizieren" an. Nennt die Gruppe "StockButton_Mirror". Wählt die Gruppe aus. Nun wieder mit "V" das Verschiebenwerkzeug auswählen und mit "STRG+T" um das Transformieren-Werkzeug aufrufen. Macht einen Rechtsklick in den Button und wählt "Vertikal transformieren" aus. Drückt Eingabe/Enter/Return/... um die Veränderung zu akzeptieren. Mit gedrückter SHIFT-Taste und ausgewähltem Verschiebenwerkzeug verschiebt ihr nun den eben auf den Kopf gestellten Button nach unten das ein kleiner Abstand zwischen beiden ist.

Jetzt haben wir so etwas:

Bilder



Geht jetzt auf "Ebene -> Ebenenmaske -> Alle einblenden" und wählt bei dem Verlaufswerkzeug einen Schwarz-Weiß Verlauf aus.
Auf der Ebenen maske zieht ihr nun von der Mitte des unteren Buttons zu der Mitte des oberen Buttons.

Schwarz wird kaschiert, Weiß bleibt zu sehen
.

Nun stellt ihr noch etwas an der Deckkraft der Gruppe herum bis es euch gefällt. Ich habe die Gruppe auf 30% Deckkraft gestellt und habe folgendes Ergebnis:

Bilder

Optimaler Schritt:
Für diesen Schritt muss eine größere Datei (700x300) erstellt werden und alle Gruppen und ebene hinübergezogen werden.

Schritt 8:

Schatten


Nun könnt ihr (wenn es zu euerm Projekt passt) auch noch einen kleinen Schatten machen. Für diesen Schritt öffnet ihr die Gruppe "StockButton" und dupliziert die Ebene "Hintergrund" und nennt sie "Shadow". Zieht die Ebene "Shadow" aus der Gruppe, zieht sie unter die Gruppe und minimiert die Gruppe "StockButton" wieder.

Markiert wieder die Ebene ("Shadow") wie in Schritt 5 (STRG+Vorschaubild klicken). Wählt den Farbeimer (lange auf Verlaufwerkzeug gedrückt halten) und stellt als Vodergrundfarbe Schwarz ein. Nun einfach ein Klick auf die Selektion und unser Schatten ist schon mal schwarz (zu sehen im Vorschaubild/Thumb). Drückt nun STRG+T um die Ebene Freizutransformieren. Macht einen Rechtsklick und die Transformation und wählt "Perspektivisch" aus. Jetzt fahrt ihr mit der Maus innerhalb der Transformation soweit nach oben bis ihr 2 Pfeile seht, die nach Links und Rechts gehen. Zieht alles etwas nach Rechts. Bestätigen.

Noch einmal STRG+T und nun zieht ihr in der Mitte oben alles etwas nach unten das es dann so aussieht:

Bilder


Geht jetzt auf "Filter -> Weichzeichnungsfilter -> Gaußscher Weichzeichner" und stellt den Wert auf 7.
Jetzt habt ihr auch noch unter dem Button einen leichten Schwarzrand, der die räumlichkeit des Buttons noch unterstützt.
Stellt nun die Deckkraft noch auf 30-50%. Jetzt den Schatten noch ein bisschen platzieren (Bei mir: 2 mal nach Links drücken)

Geschafft....


Ergebnis:



Bilder



  Ich hoffe euch hat das Tutorial geholfen, Spaß gemacht und ihr habt einige neue Funktionen und Effekte lernen können. ;-)


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Smitza
  • 26.02.2017 - 20:23

Super Button, super gebräuchlich und sehr gut erklärt. Danke!

Portrait von kiks
  • 17.01.2012 - 15:46

Super Tutorial, vielen Dank. Sehr gut erklärt!

Portrait von YannickDrost
  • 06.11.2011 - 16:19

Einfaches Tutorial. Gibt der Oberfläche einen schönen Wiedererkennungswert. Danke

Portrait von FloSinger
  • 10.08.2011 - 08:19

Gut aufbereitet und auch flexibel für andere Buttons nutzbar. Die "gebastelten" Buttons sehen einfach toll aus!

Portrait von Pat21
  • 21.06.2011 - 21:16

Ein gutes Tutorial. Hat mir sehr weitergeholfen.

Portrait von Cyancali
  • 28.04.2011 - 19:31

sehr gut erklärt!
hat geklappt merci

Portrait von Kecko
  • 06.10.2010 - 14:47

schöner button, und seh gut erklärt !

Portrait von buuunz
  • 28.09.2010 - 16:16

Gutes Tutorial , Vielen Dank

Portrait von daunman
  • 07.08.2010 - 10:44

Gutes Tutorial , Vielen Dank

Portrait von ProWeb99
  • 16.04.2010 - 22:24

Danke, das hab ich gebraucht.

Portrait von orzowei
  • 07.04.2010 - 07:40

Danke, konnte es gerade jetzt brauchen. Warum selbst tüfteln, wenn es jemanden gibt der es gut erklärt. ggg Danke

Portrait von MrBerlin7
  • 19.03.2010 - 22:48

Gut verständliches Tutorial, mehr davon!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 01.03.2010 - 10:14

Gutes Tut. war gut zu verstehen. Hatte aber Probleme mit dem Verlauf, scheint bei CS4 anders zu gehen.

Portrait von typotoni
  • 23.02.2010 - 16:45

gut erklärt. Vielen Dank

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 31.01.2010 - 22:55

dnake !....hat alles prima geklappt !

Portrait von natalja
  • 05.11.2009 - 15:56

Alles hat geklappt, sieht sehr schön aus, danke!

Portrait von loriot2101
  • 30.10.2009 - 15:02

klingt gut und hilfreich, werde ich gleich mal auprobieren

Portrait von arturw123
  • 29.10.2009 - 20:41

Schönes Tutorial, THX!!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 22.10.2009 - 19:19

Schönes Tut sehr gut nachvollziehbar und auch sons sehr gut

Portrait von Karteikarte
  • 02.10.2009 - 10:58

nett gemacht und gut erklärt!

x
×
×