Mini-Buttons

von Fries Websolutions

Manchmal ist kleiner doch besser und das behaupten nicht nur Flash-Designer, denn auch viele Webgrafiker sind auch der Meinung. Jetzt finden wir immer mehr" Mini-Buttons" auf vielen Webseiten. Hier kommen wir auch zur eigenen Kollektion.

Das Erstellen kann von jedem Grafikprogramm angewendet werden, wir benutzen hier als Beispiel: Adobe Photoshop.

Wir öffnen eine neue Datei, mit den Maßen 100 x 100 Pixel und zoomen die mit der Lupe genau hinein. Dabei sollte der Hintergrund transparent sein, wir ziehen jetzt ein Rechteck: mit den Maßen 60 x 14 Pixel.

Wir füllen die Kontur mit Schwarz und um einen leichten drei dimensionalen Effekt zu haben, können wir die Kanten etwas aufhellen, indem wir die Kontur nachziehen.

Jetzt wählen wir mit dem Zauberstab den Hintergrund aus.

Nun mit dem Filter: "Störungen Hinzufügen", und einem Wert von 3 und der Einstellung monochrom, dadurch wirkt der Verlauf auch weniger künstlich.

Für unseren Text benötigen wir vielleicht noch einen Pixelfont, den wir ohne Antialising aber gebrauchen. Doch wir müssen im Fenster Zeichen, eine Laufweite von 100 einstellen und dann werden die Buchstaben auch nicht zu eng aneinander liegen.

Jetzt ist unsere Handarbeit gefragt, wir ziehen die Konturen der Schrift nach. Dadurch hebt sie sich besser vom Hintergrund ab und ist dann auch besser zu lesen.

Die Schrift peppt den Hintergrund auf

Und ein Symbol, oder Icon,der zum Text passt, sorgt dann noch für das "i-Tüpfelchen", auf dem neuen Button.

Wenn wir die Schrift nicht mehr lesen können...

Hier Font Quellen:

Minifonts
wpdfd Pixelfonts
wpdfd MiniFonts
Atomicmedia
Miniml
Fontsforflash