Jetzt registrieren · Passwort vergessen
RSS-/Atom-Feed Twitter

Tutorial: Ein einfacher Web 2.0-Button

Verfasst von · Erstellt am 07 Mär 2009, zuletzt bearbeitet vor mehr als 8 Jahren CC BY-NC-Lizenz
Ein einfacher Web 2.0-Button

Motivation

In diesem Tutorial zeigt euch unser User A-Style wie man einen einfachen Web 2.0 Button für beispielsweise Warnungen, Hinweise oder Angebote auf einer Webseite erstellt.

Tutorial-Details

  1. 1

    Wir fangen damit an, indem wir die Form und Farbe unseres Buttons definieren:
    Als erstes macht ihr eine neue Datei auf, 200*200 Px groß. Macht eine neue, transparente Ebene auf und zieht mit der elliptischen Auswahl einen Kreis.

    In den Werkzeugeinstellungen könnt ihr die genaue Position und Größe des Kreises bestimmen .
    Nehmt die Position 10/10 und stellt eine Größe von 180*180 ein. Füllt die Auswahl mit einer Farbe, ich habe ein Grau, #3c3c3c genommen

  2. 2

    Als nächstes kümmern wir uns um die Form unseres Buttons:

    Geht auf Auswahl: Alles Auswählen [Strg-A].
    Geht auf Filter→Verzerren→Zacken und führt die Aktion mit folgenden Werten durch:

    Periode:22
    Amplitude: 2
    Wellentyp: Könnt ihr beides nehmen sieht ähnlich aus, ich nehme Sinus.
    Kanten:Umfalten
    Kantenglättung:Aktiviert

    Und Orientierung nehmt ihr erst Horizontal; und danach führt ihr dieselbe Aktion mit den gleichen Werten Vertikal durch.

  3. 3
  4. 4

    Jetzt Beschriften wir den Button:
    - Nehmt eine Schrift eurer Wahl und Beschriftet den Button mit eurem Schriftzug. Ich habe ein Hellblau #93cbff genommen und die Schriftart | Varsity |. Auf dem Button könntet ihr Zum Beispiel Schreiben : Neu!!! oder BETA oder ähnliches.

    Ihr könnt den Schriftzug danach auch etwas drehen , auch das sieht gut aus…

  5. 5

    Jetzt Vinniettieren wir den Button :
    - Nehmt das Verlaufswerkzeug und nehmt die Standart Farben Schwarz und weis, oder drückt einfach die Taste D.
    - Macht eine neue Ebene auf und zieht einen Verlauf von Rechts nach links.
    - Stellt den Ebenen Modus auf „Überlagern“.
    - Geht auf die Ebene mit dem Kreis und wählt im Kontextmenü Auswahl aus Alphakanal aus.

  6. 6
  7. 7

    Als nächstes geben wir dem Button einen Glas Effekt:
    - Macht eine neue Ebene auf und wählt das obere Drittel des Buttons aus.
    - Füllt es mit Weiß und stellt die Ebenen Transparenz auf 18.
    - Geht auf die ebene mit dem Kreis und wählt im Kontextmenü Auswahl aus Alphakanal aus.
    - Geht auf die Ebene mit dem Glas Effekt und geht auf Auswahl → Auswahl invertieren , oder drückt die Tasten [Strg-I].drückt Entfernen um die Auswahl zu löschen.

  8. 8

    Kommen wir zum Schatten:

    Wechselt zu der Ebene mit der Form des Buttons und geht auf Filter → Licht und Schatten→Schlagschatten und führt die Aktion mit diesen Werten durch:
    Versatz x und y : 0
    Weichzeichnenradius: 20
    Deckkraft: 80
    Größenänderung zulassen: deaktiviert.

  9. 9

    Fertig! Speichert den Button zB als .png.

    Tipp: In allen modernen Browsern könnt ihr bei pngs auch transparente Bildteile speichern.

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 (Ein einfacher Web 2.0-Button) wurde insgesamt mit 4,5 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

gegengimp Mitglied seit etwa 7 Jahren gegengimp 12 Kommentare Bewertung für diesen Artikel: 4/5
vor etwa 7 Jahren

Mit Filter--Render--Gfig bekommt man die Zacken so leicht hin.

gegengimp Mitglied seit etwa 7 Jahren gegengimp 12 Kommentare Bewertung für diesen Artikel: 4/5
vor etwa 7 Jahren

Auch n bisschen abgeändert

David
vor mehr als 8 Jahren

Hey A-Style,

danke für dein Klasse Tutorial...

Vielen Dank

David

Gimp Bewertung für diesen Artikel: 5/5
vor etwa 9 Jahren

Hey ich habe das ganze Tutorial verfimlt ..
http://www.youtube.com/watch?v=Eek7w3BHW5o

netw0rk Bewertung für diesen Artikel: 5/5
vor etwa 9 Jahren

http://img.dafont.com/dl/?f=varsity_regular

Das ist der Font. Zum Installieren auf Vista einen Rechtsklick auf die Entpackte Datei machen und dann auf Installieren klicken. Dannach GIMP neu Laden/Öffnen.

Auf Windows XP die Font Datei in den Order Font's rein kopieren und GIMP neu Laden/Öffnen
(Start -> Systemsteuerung -> Schriftarten)
(C:\Windows\Fonts)

mimbi Mitglied seit mehr als 9 Jahren mimbi 7 Kommentare
vor mehr als 9 Jahren

hey, echt geil. habs n bissl anders gemacht.

EvanBourne
vor mehr als 9 Jahren

Wie dreht man den Text?

SolidFake Mitglied seit mehr als 9 Jahren SolidFake 5 Kommentare
vor mehr als 9 Jahren

Klasse Tutorial, gut geschrieben und sehr verständlich erklärt, ideal für Anfänger!

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

@Ul_m2
rechte Maustaste ---> das folgende Menü nennt man Kontextmenü. Aber man kann für so eine Frage auch gerne mal das Wikipedia benutzen.

http://de.wikipedia.org/wiki/Kontextmenü

Gruss Predpray

Ul_m2 Mitglied seit fast 10 Jahren Ul_m2 7 Kommentare
vor fast 10 Jahren

was heißt kontextmenü?

mfh Ul_m2

Jonacid
vor etwa 10 Jahren

@ DeeVil: Diesen Dialog findest Du so: Pfeil rechts oben in irgendeinem Dialog drücken -> Reiter hinzufügen -> Ebenen.

Wenn Du schon dabei bist, hier mal die wichtigsten Reiter, die man auf jeden Fall offen haben sollte: Ebenen, Schriften, Werkzeugeinstellungen (!), Pinsel, Journal, Muster, Farbverläufe. Du kannst die auch alle nebeneinander stellen, einfach in einem Reiter über die Pfeiltaste wie oben beschrieben die anderen hinzufügen. Hoffe Du kommst jetzt weiter... LG, Jonacid

DeeViL
vor etwa 10 Jahren

Hallo,

Ich kriege das irgendwie nicht hin. Ich komme bis Schritt 4 und dann nicht mehr weiter. Ich finde diesen DIalog nicht wo alle Ebenen sind.

gs93 Mitglied seit mehr als 10 Jahren gs93 11 Kommentare
vor etwa 10 Jahren

Ich poste auch mal meine Grafik.

A-Style Mitglied seit fast 11 Jahren A-Style 25 Kommentare
vor etwa 10 Jahren

Sieht Klasse aus !
Lol fllt. Besser als meins..
Freut mich das es verständlich rüberkommt ..

Wolverine Mitglied seit mehr als 10 Jahren Wolverine 8 Kommentare
vor etwa 10 Jahren

@ a-style: ja schon aber das sieht schon ziemlich cool aus.. ja ich kanns ja mal zeigen.. ich würde es als avatar in nem forum von mir benutzen...

A-Style Mitglied seit fast 11 Jahren A-Style 25 Kommentare
vor etwa 10 Jahren

hmmm keine Ahnung, du kannst ja mal dein Resultat Posten , du kannst aber auch andere Schriftarten nehmen das ist nur ein Beispiel.
Es gibt die Schriftart auch auf mehrere Arten

Wolverine Mitglied seit mehr als 10 Jahren Wolverine 8 Kommentare
vor etwa 10 Jahren

@ a-style: irgendwie sieht das varsity anders aus als das das du verwendest=?

A-Style Mitglied seit fast 11 Jahren A-Style 25 Kommentare
vor etwa 10 Jahren

@Mohi : Danke ; Ggif ist ne Gute alternative Möglichkeit für Zacken.
@gs93: Ja, das ist meine Seite aber die werde ich bald schließen da sie nicht genug Besucher bekommt.
@Wolverine: Gratis Schriftarten gibt es Hier, da ist Varsity auch dabei
http://www.ulf-theis.de/tutorials/schriftarten
Dann musst du die Schriftart nur noch in den Ordner "Fonts" im Gimp Ordner einfügen.

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

hmm. ich weiß natürlich das es nicht leicht ist gute Botton zu produzieren. Das mit den "Zacken" ist Ansichtssache, aber die Verläufe könnte man doch sauberer arbeiten. Das letzte Foto zeigt es besonders deutlich, der untere Verlauf z,B. ist zu breit. Trotzdem Danke für das Tutorial.

Wolverine Mitglied seit mehr als 10 Jahren Wolverine 8 Kommentare
vor etwa 10 Jahren

wie kan ich varsity auf gimp einbeziehen? es is ja keine standard schrift.. wie kann ich die dl'n und dann in gimp "einfügen"???

gs93 Mitglied seit mehr als 10 Jahren gs93 11 Kommentare
vor etwa 10 Jahren

Ist das nicht von http://htmlprojekt.npage.de/web_button_88751271.html?

myke Mitglied seit mehr als 11 Jahren myke 22 Kommentare
vor etwa 10 Jahren

Super Tutorial, so ein Bild werde ich für mein Projekt nachbauen ;)

MaleXx Mitglied seit fast 12 Jahren MaleXx 80 Kommentare
vor etwa 10 Jahren

Ich persönlich sehe da keinen großen Unterschied zu dem anderen Web 2.0 Button Tutorial.
Den Schatten könnteste du etwas sauberer gestalten. Da hast du ein bisschen gefuscht.
Trotzdem ein gutes Tutorial und für Anfänger gut nachvollziehbar.

webpadrone Mitglied seit mehr als 11 Jahren webpadrone 6 Kommentare
vor etwa 10 Jahren

ich denke so gehts einfacher: http://milian-web.byto.de/files/pdfs/supermarkt-sticker.pdf

Mohi Mitglied seit mehr als 10 Jahren Mohi 19 Kommentare
vor etwa 10 Jahren

Sieht toll aus.
Wer beim Button aber gleichmäßige Zacken möchte, dem würde ich den Filter Render/GFig empfehlen.
Gefällt mir persönlich ein bisschen besser, aber das ist ja Geschmackssache.
Trotzdem, tolles Tutorial. Gut bebildert und einfach zu verstehen.

micha
vor etwa 10 Jahren

Vielleicht liegt das an den total un-zweinulligen Farben, der un-zweinulligen Schriftart, oder daran, dass die Zacken eher wie ’ne angefressene Kante aussehen, aber ich finde den Button nicht schön.

EagleX Mitglied seit mehr als 10 Jahren EagleX 14 Kommentare
vor etwa 10 Jahren

simple aber sehr schick! gut nachvollziehbar geschildert...

Wolverine Mitglied seit mehr als 10 Jahren Wolverine 8 Kommentare
vor etwa 10 Jahren

sieht SUPER aus, danke