Jetzt registrieren · Passwort vergessen
RSS-/Atom-Feed identi.ca Twitter

Tutorial: Stylische Buttons erstellen

Verfasst von · Erstellt am 26 Aug 2006, zuletzt bearbeitet vor fast 8 Jahren CC BY-NC-Lizenz
Stylische Buttons erstellen

Motivation

Buttons kann man überall mal schnell verwenden, und wenn man sie nicht exzessiv und übertrieben einsetzt runden sie Websites richtig ab. Im folgenden Tutorial erstellen wir einen stylishen Button - am Ende könnt ihr ihn leicht und problemlos mit einer simplen Technik einfärben.

Tutorial-Details

  1. 1

    Öffnet ein neues File: 120 × 30 px. Hintergrund: Schwarz.

  2. 2

    Legt eine neue Ebene an. Drückt Auswahl / Alles oder STRG+A. Geht auf Auswahl Verkleinern: 3px.

    Als nächstes Auswahl / Ecken abrunden: Wert: 30.

  3. 3

    Wählt eine Vordergrund- und HG-Farbe (ich habe VG: #ab6000 und HG: #f88c00 gewählt). Füllt die Ebene mit dem Standard-Farbverlauf, sodass die hellere Farbe oben zu sehen ist.

  4. 4

    Lasst die Auswahl noch aktiv, legt eine neue Ebene an und füllt sie weiß. Klickt dann auf Auswahl / Auswahl verkleinern: 1px. und löscht die Auswahl indem ihr auf ENTF klickt. Es sollte ein weißer Rand aufscheinen.

  5. 5

    Stellt den Ebenenmodus auf “Weiche Kanten” und Transparenz bzw Deckkraft der Ebene 60%. Die Ebenen sehen nun so aus:

  6. 6

    Wählt nun das Textwerkzeug und schreibt einen beliebigen Text auf eine neue Ebene. Am besten nehmt ihr als Textfarbe weiß.

  7. 7

    Schiebt den Text nun etwas nach rechts und wählt das Pfadewerkzeug. Macht eine neue Ebene. Macht einen Pfad wie im Bild zu sehen (ein kleiner Pfeil). Abschließen könnt ihr den Pfad mit gedrückter STRG-Taste.

  8. 8

    Danach drückt ihr Enter um eine Auswahl zu erhalten. Füllt diese Auswahl nun mit einer helleren Farbe als der HG ist. ZB: #ffcb4b. Geht auf Auswahl / Nichts um die auswahl wegzubekommen.

  9. 9

    Dupliziert diese Ebene und schiebt den 2. Pfeil ein wenig nach rechts.

  10. 10

    Nun kommt der Glanz im oberen Button-Teil. Klickt auf die Verlaufsebene und wählt “Auswahl aus Alphakanal”. Klickt auf die oberste Ebene und wählt “Neue Ebene”. Klickt auf Auswahl / Auswahl verkleinern: 1px. Geht auf das Verlaufswerkzeug oder drückt einfach “L”. Wählt als Farbe Weiß stellt den 4. Verlauf ein (Farbe nach Transparenz). Klickt nun oben und zieht den Verlauf nun von oben in die Mitte des Bildes. Deaktiviert die Auswahl und ihr seid fertig.

  11. 11

    Wenn ihr nun diesen Button in einer anderen Farbe haben wollt ist das garkein Problem: Macht über allen existierenden Ebenen eine neue Ebene, füllt diese mit eurer Wahlfarbe und stellt den Ebenenmodus auf “Farbe”. Schon ist der gesamte Button eingefärbt – ihr könnt übrigens auch Farbverläufe nehmen um diese Ebene zu füllen.

    Hinweis: Ihr könnt ihr nur die Grundfarben verwenden – Abstufungen in Grau funktionieren nicht, da er im Modus nur den herrschenden Farbton verwendet.

    So könnten eure Buttons dann aussehen:

Kommentare

Hier kannst du Kommentare, Fragen und Anregungen loswerden. Der Autor und die anderen Benutzer können deinen Beitrag sehen und darauf antworten.

Natürlich kannst du auch im Chat fragen.

Abo-Verwaltung

Diese Funktion steht nur angemeldeten Benutzern zur Verfügung.

Benutzerbewertung

Dieses Thema (Stylische Buttons erstellen) wurde insgesamt mit 4,0 von 5 Punkten bewertet.

*

Als registrierter Benutzer kannst du Artikel und Kommentare bewerten, Bilder zu Kommentaren anhängen, dich bei Neuigkeiten benachrichten lassen usw... Außerdem werden keine CAPTCHAs mehr angezeigt.

*…optional

Crack_Dog
vor 21 Tagen

find ich lässig!

lg aus der Zukunft

ines
vor mehr als 5 Jahren

Super - danke!

Chr
vor etwa 6 Jahren

Super Tutorial. Als ziemlicher GIMP Anfänger in 20 Minuten durchgekommen, danke!

Vanquish Mitglied seit mehr als 7 Jahren Vanquish 7 Kommentare Bewertung für diesen Artikel: 5/5
vor mehr als 7 Jahren

Episch

SAG ICH NICHT! Bewertung für diesen Artikel: 5/5
vor mehr als 8 Jahren

Geiles Tutorial...

Robert
vor mehr als 8 Jahren

Super Sache deine Anleitung. Vielen Dank dafür. Kannte mich überhaupt nicht mit Gimp aus und habs trotzdem hinbekommen.

devvv Mitglied seit mehr als 12 Jahren devvv 1468 Kommentare
vor fast 9 Jahren

das heißt genau das ;) Du sollst auf die oberste Ebene klicken, damit die neue Ebene die du erstellst dann oberhalb der obersten Ebene angelegt wird. Das ist notwendig, damit der Glanz oberhalb von allem liegt!

"Neue Ebene" heißt nix anderes als dass du eine "Neue transparente Ebene" erstellen sollst. keine weiß oder schwarz gefüllte, diese neue Ebene muss durchsichtig/transparent sein!

Hoffe das hilft dir!

lg,
devvv

Franziskaner Bewertung für diesen Artikel: 2/5
vor fast 9 Jahren

also danke fuer das tut... doch etwas schwierig... hatte ueber ne stunde gebraucht um zum 10. punkt zu kommen...
doch da bin ich leider am ende...

also bei punkt 4. war das problem immer das ich eine neue ebene erstellt habe, doch immer in weiss! weil ja nirgends steht welche neue ebene? weil da ja stand in weiss habe ich anstatt die schwarze ebene in weiss zu fuellen, immer gleich eine weisse ebene erstellt und darum nie den weissen rand hinbekommen...

und jetzt auch bei 10... komme nicht weiter... weiss nicht was: "Klickt auf die oberste Ebene und wählt "Neue Ebene"...." heisst?

lg!

supernoob
vor etwa 9 Jahren

Kann maeiner nen video erstellen und reinstellen. ick bin scheinbar zu doof. :(

Skyclimber Mitglied seit etwa 10 Jahren Skyclimber 4 Kommentare
vor mehr als 9 Jahren

@kritiker: Du solltest vielleicht genauer erklären, was dir nicht gut genug erklärt wird ;)

Sonst finde ich das TUT klasse, ich arbeite zwar schon lönger mit GIMp, so dass es kein Problem für mich war, aber die Schritte sind mMn gut beschrieben, dass auch ein Neuling damit zurecht kommen sollte...

hut ab devvv ;)

kritiker
vor mehr als 9 Jahren

hm also ich komm damit nicht zurecht! da fehlen einige erklärungen für nicht-profis! und die profis, die sich mit gimp auskennen, brauchen so ein tutorial glaub nicht ...

also schöner versuch, zum nachmachen unbrauchbar...

speze88
vor mehr als 9 Jahren

super geklappt! vielen dank. endlich konnte ich was mit gimp anfangen.

predpray Mitglied seit fast 10 Jahren predpray 6 Kommentare
vor fast 10 Jahren

Schönes Tutorial...Man kann es gut nachvollziehen. Tja so habe ich das für mich nutzen können.
Danke

j0nas
vor fast 10 Jahren

weis ich auch nicht.
aber ich kann dir sagen wie das geht.
du musst das bild am besten in den ordner speichern, wo deine html-datei liegt in der du das bild einbinden möchtest.
dann gehst du in phase 5 und schreibst an der stelle wo dus haben möchtest:
.
du kannst dem tag noch css und so hinzufügen.
wenns nich klappt überprüfe den namen der datei und den namen der datei den du im html hast.
und vergesse nicht zu speichern.

lg

Max
vor fast 10 Jahren

Bin ich einfach nur blöd oder wieso bekomm ich die Grafik nicht in Phase5?
(HTML-Editor)
geht das überhaupt?

moin
vor fast 10 Jahren

Super Tutorial, absolut genial - danke, devvv!

devvv Mitglied seit mehr als 12 Jahren devvv 1468 Kommentare
vor fast 10 Jahren

stimmt. danke, norman. ist soeben aktualisiert worden.

Norman
vor fast 10 Jahren

Ich habs nach ner viertel Stuned endlich geschafft.
Der Ersteller des Toturials hätte nicht schreiben dürfen

"Klickt dann auf Auswahl / Auswahl verkleinern: 1px. und entfernt die Auswahl", sondern besser wäre gewesen

Klickt dann auf Auswahl / Auswahl verkleinern: 1px. und löscht die Auswahl durch drücken der Taste XY.

Norman
vor fast 10 Jahren

Hallöchen!
Also ich habe mich jetzt an das Toturial gehalten und auch alles gelesen, was meine Vorgänger geschrieben haben und die Lösungen dazu probiert.

Jedoch komme ich bei SChritt 4 nicht weiter. Egal was ich mache, ich bekomme keinen weißen Rand rein.

Irgendwie bescheuert...

Genau so wie die Tastenkombination Strg, k und Entf gehen bei mir nicht... Kann mir jmd sagen was ich falsch mache? ^^

devvv Mitglied seit mehr als 12 Jahren devvv 1468 Kommentare
vor etwa 10 Jahren

Wenn du das Verlaufswerkzeug ausgewählt hast kannst du in den Einstellungen ein Dropdown-Menü aktivieren, dort sollte der 4. Punkt die "Farbe nach Transparenz"-Option sein!

shiro
vor etwa 10 Jahren

habs ^^
habs über Farben -> Farben zu Transparenz gemacht, anders hab ichs net hinbekommen...

Shiro
vor etwa 10 Jahren

also, hab alles hinbekommen bis auf den glanz ^^
hab zwar die kommis gelesen, aber des hilft mir nicht weiter, bei mir ist nix mit "Farbe nach Transparenz" ^^ wo find ich diese auswahl?

Vince
vor etwa 10 Jahren

Vielen Dank.

Ensiferum Mitglied seit fast 11 Jahren Ensiferum 5 Kommentare
vor mehr als 10 Jahren

super Tutorial! Bin gerade bdabei diverse Handythemen zu erstellen, und da kommen mir solche buttons gerade recht :-)

A-Style Mitglied seit mehr als 10 Jahren A-Style 25 Kommentare
vor mehr als 10 Jahren

Super TUT ich finde die Buttons toll

jgh
vor mehr als 10 Jahren

super tut!

Jenny
vor mehr als 10 Jahren

huhu :)
hatte mit dem weißen Rand bissl Probleme ;)
Aber sonst war alles super. Tolles tut =)

Kathrin
vor mehr als 10 Jahren

Bin eigentlich super zurecht gekommen, aber habe dann Probleme beim Speichern bekommen...
In welchem Format speichert ihr, vielleicht fehlt mir da ein PlugIn, da bekomme ich dauernd Fehlermeldungen...
Danke

SolarStikkla
vor mehr als 10 Jahren

interessant wären die optimalen Farbeverläufe für rot, grün und blau

habs mal

mit
3359ff-003fbf blau
33a500-008500 grün
versucht und rot hab ich mir nicht notiert

j0nas
vor fast 11 Jahren

bei mir sieht das so aus ich hab den rand weggelassen und manches abgeändert

Jonas
vor etwa 11 Jahren

ich hab das tut nachgebaut und wollte im nachhinein noch die farbe auf schwarz stellen. wenn ich die ebene über alle anderen lege und die schwarz gefüllt ist wird bei mir der button grau der modus ist aber auf farbe gestellt. was mache ich falsch

kaaskopp Mitglied seit mehr als 11 Jahren kaaskopp 15 Kommentare
vor mehr als 11 Jahren

mal btw wie heißtn die schrift?

WackoMacko Mitglied seit mehr als 11 Jahren WackoMacko 4 Kommentare
vor mehr als 11 Jahren

@devvv:
Danke für den Hinweis!

PS: So schnelle Antworten gehören doch verboten ;-)

devvv Mitglied seit mehr als 12 Jahren devvv 1468 Kommentare
vor mehr als 11 Jahren

Wenn du STRG gedrückt hältst richtet sich der Verlauf beim Ziehen automatisch in fixen winkeln (und natürlich auch ganz gerade horizintal oder vertikal) aus!

WackoMacko Mitglied seit mehr als 11 Jahren WackoMacko 4 Kommentare
vor mehr als 11 Jahren

Bei mir entsteht oft ein schiefer Verlauf, obwohl ich ihn gerade herunterziehe :-(
(Benutze V.2.2.14 auf WindoofXP)
Liegt aber vielleicht auch an meinem Laptop-Mousepad *würg

Klappt zwar nach mehreren Versuchen, aber gibt es vielleicht eine Möglichkeit einen Verlauf genauer zu bestimmmen, in dem man Pixelangaben in einem Dialog macht?

Hubi
vor mehr als 11 Jahren

Nochwas vergessen:
1. Wenn Du den Cursor über den letzten Punkt hältst und Strg drückst, erscheint ein kleiner Bogen neben dem Zeiger.
2. Ohne Strg kannst Du die einzelnen Punkte hin und her schieben, bis alle Linien ordentlich aussehen.

Hubi
vor mehr als 11 Jahren

Hi Zero!
Ja, das Pfadwerkzeug (B) ist am Anfang recht verwirrend. Eigentlich aber nur, weil man dazu tendiert die Maustaste gedrückt zu halten. So erstellt man dann komplizierte Kurven-Pfade, die man hier aber gar nicht braucht. Einfach dreimal (für die drei Ecken) ins Bild klicken. Danach den Zeiger nochmal über den ersten Punkt, Strg gedrückt halten und klicken um den Pfad zu schließen. Und schon hast Du einen (hoffentlich) schönen Pfeil!
Dann einfach wie beschrieben weitermachen (d.h. Auswahl erzeugen und füllen). Viel Erfolg!

Zero
vor mehr als 11 Jahren

Wie bekommt man aus Schritt 7 den Pfeil hin ? Ich habe das Pfad Werkzeug noch nie verwendet.

THX schon ma

devvv Mitglied seit mehr als 12 Jahren devvv 1468 Kommentare
vor mehr als 11 Jahren

Wenn die Auswahl nicht mehr aktiv ist (die kleinen sich bewegenden gestrichelten Linien) musst du die Auswahl von vorhin erneut holen. Das geht so:

Wähl im Ebenen-Dialog (Dialoge / Ebenen) die Ebene aus auf der der orangene Farbverlauf zu sehen ist. Klick im Ebenen-Dialog rechts auf diese Ebene und wähle: "Auswahl aus Alphakanal". Dadurch bekommst du wieder eine Auswahl die genau so groß ist wie der Verlauf.

Zero
vor mehr als 11 Jahren

Ich hänge da an Schritt 4. Wie färbe ich denn die 3. Ebene weiß ?? Das geht bei mir nicht ? Wie kann ich die 3. Ebene anwählen ? Ich versteh allgemein das mit der Auswahl nicht. Wenn ich dem Tutorial folge und ich einmal was falsches klicke und die weg ist bekomm ich die ebene nicht wieder angewählt. Es steht auch nirgendwie wie das geht.

Hansi Mitglied seit mehr als 11 Jahren Hansi 8 Kommentare
vor mehr als 11 Jahren

ah....ja...OK. Blöd bin ich ja schon. Ich sollte erstmal lesen lernen ;-)

Danke

devvv Mitglied seit mehr als 12 Jahren devvv 1468 Kommentare
vor mehr als 11 Jahren

Nein, du musst es nicht in Graustufen umwandeln. Wähl die "indizierte Paletten"-Option beim Speichern. Gif's haben generell den Nachteil dass nur maximal 256 versch. Farbwerte gespeichert werden. Für kleine Buttons sollte das aber kein Problem sein.

Hansi Mitglied seit mehr als 11 Jahren Hansi 8 Kommentare
vor mehr als 11 Jahren

Klasse Tutorial..sogar für mich als noob (hab gerade mit GIMP angefangen) gut verständlich.
Ein Problem hab ich aber: Wenn ich versuche den Button als .gif zu speichern, dann muss ich ihn in Graustufen umwandeln? Muss das so sein, oder gibts da nen Trick?

Greez Hansi

Adrian
vor fast 12 Jahren

Vielen Dank, hat bei mir auf Anhieb alles geklappt :-)

devvv Mitglied seit mehr als 12 Jahren devvv 1468 Kommentare
vor fast 12 Jahren

Wenn du L drückst hast du autom. das Verlaufswerkzeug ausgewählt. Im Werkzeugfenster kannst du jetzt unterhalb ein Dropdown öffnen, in diesem wählst du den Eintrag mit Namen "Farbe nach Transparenz". Als nächstes klickst du am oberen Bildrand, hältst die Maustaste gedrückt und ziehst den Verlauf gerade hinunter. Ich hoffe es klappt nun.

Owned
vor fast 12 Jahren

Ich schffe den Schritt mit dem Glanz nicht-.-
Welches ist das Verlaufswerkzeug?
Kann mir jemand den Schritt mal näher erklären plz?

Michael
vor fast 12 Jahren

Schritt 4 kann missverstanden werden. Nicht die Ebene ist weiss zu füllen, sondern die Auswahl. Dann klappts auch mit dem Rand.

devvv Mitglied seit mehr als 12 Jahren devvv 1468 Kommentare
vor fast 12 Jahren

Hi! Du darfst nicht die Auswahl selbst entfernen sondern das was in der Auswahl liegt (bei Gimp 2.2 STRG+K ab 2.3.x einfach ENTF) Dann müsste der Rand übrig bleiben.

Hoffe es klappt

Pivi
vor fast 12 Jahren

Schritt 4 funktioniert so nicht. Kann es sein das da was fehlt ?

devvv Mitglied seit mehr als 12 Jahren devvv 1468 Kommentare
vor fast 12 Jahren

Hmm ich weiß jetzt nicht genau wie du dir das vorstellst mit dem "ohne Rand", sorry. Probier mal die leichten Tutorials (sind mit nem einzelnen grünen Punkt gekennzeichnet in der Tutorial-Liste ;)

dispy
vor fast 12 Jahren

ok... hat sich erledigt. trotzdem noch eine Frage: wie kriege ich einen Button evt. hin?
und( gehört zwar nicht hierhin) wo gibt's evt. Anfängertutorials für die Techniken?
MfG
dispy

dispy
vor fast 12 Jahren

Ich hab das irgendwann mal geschafft, aber jetzt bleibe ich bei Schritt 8 hängen:
sobald ich Enter drücke, ist die Auswahl futsch, wenn ich das dann fülle, ändert sich die Farbe inn en auch nicht....gibt's da irgendne Kniff, oder mache ich was falsch?
MfG
dispy

wurzsackerl
vor etwa 12 Jahren

und zwey und drey und vier lololrofl

lol
vor etwa 12 Jahren

aynen

TFFeasykilla Mitglied seit etwa 12 Jahren TFFeasykilla 7 Kommentare
vor etwa 12 Jahren

Das ist schlecht, dass der IE teilweise die Bilder falsch darstellt. Dann muss ich mir irgendetwas anderes überlegen. Trotzdem danke :)

devvv Mitglied seit mehr als 12 Jahren devvv 1468 Kommentare
vor etwa 12 Jahren

Hi, PNG unterstützt Transparenz, jedoch mußt du bei der Einbindung in Browsern damit aufpassen, da viele damit nicht umgehen können (FF schon, IE nur bedingt). Du kannst dir ja mal das Tutorial zu PNG hier bei uns durchlesen dazu ;)

TFFeasykilla Mitglied seit etwa 12 Jahren TFFeasykilla 7 Kommentare
vor etwa 12 Jahren

Hallo devv! Ich habe mal eine Frage zu Buttons. Und zwar habe ich einen Glasbutton erstellt der durchsichtig ist. Welches Format unterstützt die Durchsichtigkeit von Bildern? Ich habe schon die meisten ausprobiert, aber leider wird der Buttons nie durchsichtig. Kannst du mir da weiterhelfen? Ich kann dir ja mal den Button per Email senden...

ksianna Mitglied seit etwa 12 Jahren ksianna 2 Kommentare
vor etwa 12 Jahren

Yipiiieehhh!! Jetzt hat's geklappt. Danke!

devvv Mitglied seit mehr als 12 Jahren devvv 1468 Kommentare
vor etwa 12 Jahren

Hi ksianna! Zu Schritt 4: Du hast ja noch die Auswahl aktiv. Geh sicher, dass du dich auf einer leeren, neuen Ebene befindest. Stell die Vordergrundfarbe auf Weiß und nimm das Füllwerkzeug. Klick dann auf die Auswahl um sie zu füllen. Danach gehst du im Menü Auswahl auf "Verkleinern" 1 px. Danach drückst du (bei GIMP 2.2 STRG+K) ENTFernen. Alles was jetzt zurückbleiben sollte ist ein Rand von der Größe eines Pixels. Hoffe es klappt nun ;)

ksianna Mitglied seit etwa 12 Jahren ksianna 2 Kommentare
vor etwa 12 Jahren

Das sind wirklich coole Buttons. Habe gleich versucht sie nachzumachen, aber habe Probleme damit.
Ich komme bis zum 4.Schritt und das war's dann. Ich bekomme den weißen Rand einfach nicht hin. Fehlt da vielleicht eine Erklärung? Ich hab' noch nicht so viel Erfahrung mit GIMP. Helft mir, bitte.

TFFeasykilla Mitglied seit etwa 12 Jahren TFFeasykilla 7 Kommentare
vor etwa 12 Jahren

toller Kommentar ;) lol

Philip
vor etwa 12 Jahren

Am Ende des ersten Absatzes ("und problemlos einfärben mit einer simplen Technik einfärben.") steht einmal "einfärben" zu viel.