Gismo Web Buttons

FAQs Grafix

WebButtons für "Newbiez"

Mein kleiner Button Lehrgang ist für Hobby WebDesigner gedacht, die immer auf der Jagd nach Webbuttons sind ;-)
... Leute spart Euch das ewige rumsuchen, schöne Buttons sind doch ganz einfach zu erstellen ...

Ich habe hier mit Absicht die Buttons mit ULEAD Photoimpact 5 für Euch erstellt, da dieses Tool zur Zeit sehr beliebt bei Anfängern ist und mit wenigen Mausklicks tolle Ergebnisse liefert.
Den Photoshop Besitzern braucht man ja nicht zu erklären wie man einfache 3D Buttons erstellt ... ;-)

ACHTUNG!
Bevor Ihr loslegt mit dem Erstellen, benötigt Ihr meinen GISMO WEBBUTTON TTF FONT !
Diesen Font habe ich speziell für das Webdesign entwickelt, er enthält alle möglichen Formen von Buttons.
Somit kann Zeit gespart werden und mit einem Mausklick erhält man eine glatt gerenderte Form, die beliebig eingefärbt oder mit Texturen hinterlegt werden kann.

Klicke HIER um zu der Muster & Download Seite zu gelangen.

Nachdem Ihr meinen Windows TTF Font in den Ordner der Schriftarten kopiert habt, kann es losgehen.

... am besten Ihr druckt euch diese Seite aus, um jeden Schritt nachvollziehen zu können. Alle diejenigen die noch nicht mit PI 5 gearbeitet haben aber jetzt neugierig geworden sind, können ein 30 Tage Demo bei ULEAD herunterladen.

Step1:
Wir öffnen mit der Hintergrundfarbe der Linkleiste ein neues Fenster. Am besten
optimiert auf 800 x 600 (15" Bildschirm), mit einer maximalen Höhe von 390 Pixel.

Step 2:
Über die Schriftarten Auswahl suchen wir meinen Button Font "Gismo Buttons" und
stellen eine Schriftgröße von 170 ein und wählen eine x-beliebige Farbe.
In das Texteingabefeld drücken wir den Buchstaben "o" und wir erhalten mit einem
Mausklick 5 Webbuttons (natürlich kann man einzelne Buttons auch erstellen).

step 2

Step 3:
Der nächste Schritt ist, dass wir unsere Buttons als Bild umwandeln müssen.

step 3

Step 4:
Um unseren Buttons mehr Ausdruck zu verleihen (ist nur eine Anregung von mir) legen wir über die Buttons einen Farbverlauf
- mein Beispiel zeigt weiß -> blau.

Ab hier wären 2D Buttons fertig - gehe zu Step 6 um zu lesen wie es weiter geht.

Wollt Ihr aber 3D Buttons, dann lies hier bei Step 5 weiter ...

Step 5:
Um unseren Buttons einen 3D Effekt zu geben, benötigt man den Schaltflächen-
Designer von Photoimpact 5. Hier kann man aus sehr vielen Auswahlmöglichkeiten
das Aussehen und den Schattenwurf einstellen. Mit OK wendet man die getroffene
Auswahl an.

Step 6:
Um unsere Buttons zu beschriften, benötigt man einen schönen mit vielen Knoten
gerenderten Font.
Am besten eignen sich als TTF Fonts:
Arial, MS Trebuchet, Helvetica, Genevia, TW Cen MT oder Futura.
- diese Fonts zeigen auch bei sehr kleiner Schrift noch ein optimales Schriftbild.

step 6

Step 7:
Um einen Eindrück-Effekt der Schrift in den Buttons zu erzielen, legen wir an die
Beschriftung einen Schatten in der Farbe "weiß" (bei schwarzer Schrift).
Die Verschiebung sollte nicht größer als der Wert: 1 sein.

step 7

Step 8:
Ist unsere Buttonleiste fertig beschriftet, klickt man mit der rechten Maustaste in das Bild und wählt : "Alles Einbinden" .
- anschliessend schneiden wir mit den Markierungswerkzeug alle Buttons mit einem geringen Rand aus.

step 8

Step 9 - Finalstep:
Um unsere Buttons von einander zu trennen (Einzelbuttons) und gleich automatisch in einen "HTML-Table" zu legen, verwenden wir den integrierten "Bildteiler - Smartsaver" (zu finden über den Menüpunkt "Web" - "Bildteiler").
Buttons speichert man am besten immer im GIF Format ab, um die Beschriftung nicht zu verschmieren wie es oft im JPG Format passiert. Im Bildteiler stellt man mit dem "Gitter" die "Zeilen & Spalten" Menge ein und speichert das ganze Set als HTML Seite.

step 9

FINISH!
... geschätzter Zeitaufwand 10 Minuten

SAMPLES
die ich mit meinem WebButton Font und PI5 erstellt habe.

diese Seite ausdrucken!