Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Mini-Buttons

Kleiner ist besser, das behaupten nicht nur Flash-Designer, auch viele Webgrafiker sind der gleichen Ansicht. Und so findet man immer mehr Mini-Buttons auf immer mehr Webseiten. So kommen Sie rasch zur eigenen Kollektion. Zum Erstellen lässt sich praktisch…

Kleiner ist besser, das behaupten nicht nur Flash-Designer, auch viele Webgrafiker sind der gleichen Ansicht. Und so findet man immer mehr Mini-Buttons auf immer mehr Webseiten. So kommen Sie rasch zur eigenen Kollektion.

Zum Erstellen lässt sich praktisch jedes Grafikprogramm verwenden. Wir benutzen als Beispiel Adobe Photoshop. Kleiner Vorgeschmack? So könnten Ihre Buttons nachher aussehen:

Screenshot Screenshot
Vorschau

Öffnen Sie in eine neue Datei mit den Maßen 100 x 100 Pixel und zoomen Sie mit der Lupe ordentlich hinein. Der Hintergrund sollte transparent sein, muss er aber nicht. Ziehen Sie zunächst ein Rechteck auf mit den Maßen 60 x 14 Pixel. Als Farbe haben wir ein dunkles Blau gewählt: #4043B8.

Screenshot
So gehts los

Füllen Sie die Kontur mit Schwarz. Um gleich einen leichten dreidimensionalen Effekt zu erhalten, hellen wir die obere und die linke Kante etwas auf, indem wir die Kontur mit einem helleren Grau nachziehen.

Wählen Sie mit dem Zauberstab den blauen Hintergrund aus und erzeugen Sie in der Auswahl einen Verlauf mit einem helleren Blau von oben zum ursprünglichen Blau unten.

Screenshot
Mit Verlauf etwas weniger klobig

Mit dem Filter „Störungen Hinzufügen“, einem Wert von 3 und der Einstellung monochrom wirkt der Verlauf später weniger künstlich.

Für den Text benötigen Sie nach Möglichkeit einen Pixelfont, den Sie ohne Antialising verwenden. Achten Sie darauf, im Fenster Zeichen eine Laufweite von 100 einzustellen, damit die Buchstaben nicht zu eng aneinander liegen.

Jetzt ist etwas Handarbeit gefragt, ziehen Sie mit einem Tiefblau die Konturen der Schrift nach. So hebt sie sich besser vom Hintergrund ab und ist besser zu lesen.

Screenshot
Die Schrift peppt den Hintergrund auf

Ein Symbol oder Icon, zum Text passend, sorgt dann für das i-Tüpfelchen auf dem neuen Button.

Screenshot
Wenn man die Schrift nicht mehr lesen kann….

Font Quellen:

Von Nicolas Rotermund

Nicolas war Mitarbeiter im Dr. Web Team in unserer Ahrensburger und frühen Lübecker Zeit.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.