startseitekatalogpraxiswerkzeugeressourcenmagazingrammiweb

(Stand: 22.12.24, Adresse: http://www.grammiweb.de/anleitungen/ka_buttonr.shtml)

 

Nahezu täglich wird im Grammiweb eine neue Homepagevorlage vorgestellt - und beinahe jedes Mal beinhaltet der Neuzugang grafische Schaltelemente, die so genannten Buttons. Da es mühselig ist, andauernd die gleichen Arbeitsschritte zu wiederholen, haben wir uns etwas Besonderes einfallen lassen.

Immer wieder die gleichen Arbeitsschritte: Rechtecke und Kreise erstellen, diese ausfüllen, zu einem Einzelobjekt zusammenfügen, dann nachbearbeiten, schließlich löschen, weil's doch nicht so gut aussah, und dann das Ganze von vorn - wer kennt das nicht? Beinahe täglich erstellen wir neue Schaltflächen für Templates und Kundenhomepages. Um uns die Arbeit ein wenig zu erleichtern, haben wir deshalb den Grammiweb-Webfont entwickelt, der uns wichtige Elemente für Homepages mit wenigen Tastendrucken zur Verfügung stellt.

Als Grafikprogramm kommt bei dieser Kurzanleitung Uleads Photo Impact in der Version 4.0 zum Einsatz. Die hier vorgestellten Arbeitsschritte lassen sich aber leicht auf nahezu jedes andere Programm umsetzen.

Des weiteren wird vorausgesetzt, dass der Grammiweb-Webfont bereits installiert wurde. Auf der Webfont-Seite finden Sie alle notwendigen Informationen hierzu.

Los geht's

Die für Schaltflächen benötigten Elemente werden durch die Tasten "W", "E" und "R" erzeugt. Geben Sie als Text einfach "weeeeer" ein, und das Ergebnis sollte wie folgt aussehen:

Die Farbe und die Größe des Buttons können Sie nun wie bei jedem anderen Text verändern.

Als nächstes wird der Schaltfläche der 3D-Effekt zugeordnet. Dies erreichen Sie bei Photo Impact, indem Sie im Menü "Web" den Unterpunkt "Schaltflächendesigner" und im Anschluss "Jede Form" wählen. Geben Sie nun die Beleuchtung, die Randstärke und die Rundungsstärke vor. In unserem Beispiel haben wir einen Lichteinfall von links oben, einen Rand von 2 Pixeln und eine Rundungsstärke von 3 Pixeln gewählt. Der Schriftzug bekommt nun dreidimensionale Züge:

Nun muss dieses Element nur noch beschriftet werden. Wählen Sie hierzu eine andere Schriftart und eine zur Schaltfläche passende Farbe. Für das Beispiel haben wir "Arial" in Weiß gewählt. Nach Eingabe des Textes muss dieser nur noch wie gewünscht justiert werden. Das Endprodukt muss anschließend in einem webfähigen Format (.GIF, .JPG oder .PNG) gespeichert werden. Die Schaltfläche ist nun einsatzbereit:

Zurück zum Inhaltsverzeichnis

[an error occurred while processing this directive] [an error occurred while processing this directive]