Fantasylife-Bastelecke: Oktober 2010

Mittwoch, 13. Oktober 2010

Einen Button mit GIMP erstellen

Einen Button mit dem kostenlosen Zeichenprogramm GIMP zu erstellen ist gar nicht so schwer.

Du öffnest zuerst unter Datei → Neu ein neues Dokument in der Größe die dein Button oder auch Banner haben soll. Eine gute Größe zum Beschriften ist 100 x 25 Pixel (diese Werte werde ich auch im Beispiel verwenden).

Es öffnet sich ein neues Fenster „Ein neues Bild erstellen“, dort gibst du die Werte Breite 100 px und Höhe 25 px ein. Etwas weiter unten siehst du ein Feld indem „Hintergrundfarbe“ steht. Klicke am Ende des Feldes auf den Auswahlpfeil und gib „Transparenz“ an. Das brauchst du um deine Hintergrundfarbe frei wählen kannst.

Bestätige deine Auswahl durch „Ok“. Das Fenster schließt sich wieder und es wird ein kleines rechteckiges, schwarzweiß kariertes Feld sichtbar.

Im linken Feld „Werkzeugkasten“ siehst du einen „Farbeimer“, wähle diesen durch anklicken aus. Du sieht zwei rechteckige Felder in schwarz und weiß, du klickst diese an und kannst dann deine Wunschfarbe einstellen. Ich habe mir ein dunkles Blau mit dem Wert 000098 ausgewählt, den Farbwert kannst du entweder über das Farbfeld auswählen oder wenn du den HTML-Code kennst auch direkt im Feld HTML-Notation eingeben. Bestätige mit „Ok“.

Im Dokumentenfenster klickst du nun mit deiner Wunschfarbe auf den durchsichtigen Button.

Damit du besser weiterarbeiten kannst, solltest du im Werkzeugkasten die „Lupe“ auswählen und damit zwei- oder dreimal auf den Button klicken um ihn zu vergrößern, dann wählst du das „Verschieben“-Werkzeug.

Nun klickst du mit der rechten Maustaste auf den Button und wählst „Filter“ → „Dekoration“ → „Rand hinzufügen“. Es öffnet sich ein Fenster „Rand hinzufügen“ und gibst bei Randgröße X und Y jeweils den Wert 5 an. In der Zeile „Randfarbe“ kannst du einstellen welche Farbe dein Rand haben will, ob heller, dunkler, gleich oder eine Kontrastfarbe bleibt deinem Geschmack überlassen.

Ich habe ein noch dunkleres Blau mit dem Wert 261f2f gewählt.

Du bestätigst beide Auswahlfenster mit „Ok“ und das Programm errechnet automatisch einen Rand dazu.

Wenn dir der Buttonrohling so gefällt, solltest du ihn schon mal abspeichern um in später nach Wunsch immer wieder neu Beschriften zu können.

Zum Speichern wähle „Datei“ → „Speichern unter“, dann gibst du deinen Zielordner an. Es öffnet sich ein Fenster, indem du oben den Namen deines Buttons im gewünschten Format angeben musst. Am besten wählst du das .png Format, denn dieses Format lässt sich später leichter weiterbearbeiten. Ein Beispielname wäre also buttonblau.png.

Beschriftung:

Wähle im Werkzeugkasten das Werkzeug „Text“ (Buchstabe A) und wählst deine Schriftfarbe, -größe und -art nach deinem Geschmack aus.

Ich habe die Schriftart Serif Bold Italic in der Größe 24 und Farbe b19643 (gold) gewählt.

Klicke dann auf den Button, und es öffnet sich das Texteingabefenster. Hier gibst du nun deine Beschriftung ein. Ich habe als Beispiel „Forum“ gewählt. Vergiss nicht im Eingabefenster das Häkchen bei „in ausgewählter Schriftart“ zu machen. Bestätige wieder und platziere durch Verschieben das Textfeld in die Mitte des Buttons. Der Text sollte jetzt sichtbar sein.

Feintuning:

Da es so ein bisschen öde aussieht kommt jetzt noch das Feintuning – die Effekte – dazu.

Schlagschatten einfügen:

Klicke in der oberen Leiste auf „Auswahl“ → „Auswahl nach Farbe“ und im Textfeld auf einen der Buchstaben – diese werden animiert umrahmt.

Jetzt mit der rechten Maustaste wieder auf den Button klicken und „Filter“ → „Licht und Schatten“ → „Schlagschatten“ wählen. Es öffnet sich ein Eingabefenster. Hier gibst du bei X und Y Versatz jeweils 3 eingeben und bestätigen.

Der Schlagschatten wird berechnet.

So sieht's schon professioneller aus. :-)

Donnerstag, 7. Oktober 2010

Mondsüchtig

Ein Bastelelement von mir, dass ich mit Gimp erstellt habe.

Das Bild ist im png-Format, 800 x 800 px. Klicke auf das Bild, es öffnet sich ein neue Fenster. Zum Download mit rechts anklicken und "Grafik speichern unter ..." wählen.
Viel Spass damit! ;)

Homepagezubehör: beschriftete Buttons

Hier kommt nun mein erstes selbsterstelltes Buttonset für euch. Es ist in den Farben blau (Hintergrund) und silber (Schrift) gehalten und beinhaltet 11 beschriftete und einen Blankobutton.

Vorschau:

Download über 4shared.com

Die Buttons sind wie folgt beschriftet: Chat, Download, FAQ, Gästebuch, Home, Impressum, Kontakt, Links, Mail, weiter, zurück und 1 x blanko zum Selbstbeschriften.

Ein Backlink zu meiner Seite wäre schön.