startseitekatalogpraxiswerkzeugeressourcenmagazingrammiweb

(Stand: 22.11.24, Adresse: http://www.grammiweb.de/anleitungen/ka_buttons.shtml)

 

Immer wieder werden wir gefragt, wie man selbst einfache Buttons, wie sie zum Beispiel auf unserer Startseite zu finden sind, erstellt. Die Antwort auf diese Frage geben wir Ihnen in dieser Kurzanleitung.

Zuerst einmal: Buttons haben kein Standardmaß. Sind die möglichen Abmessungen bei Bannern schon vielfältig, aber doch meist relativ strukturiert, muss man bei Buttons auf die Anforderungen eingehen. Erkundigen Sie sich vor dem Einsatz dieser kleinen Werbebanner, welcher Größe diese sein sollen. Für diese Kurzanleitung verwenden wir die häufig vorzufindende Auflösung von 80 Pixeln Breite und 30 Pixeln Höhe.

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

Los geht's

Als erstes erstellen Sie eine neue Grafik, indem Sie im Menüpunkt "Datei" den Unterpunkt "Neu" anklicken. Im daraufhin erscheinenden Fenster wählen Sie die Option "Benutzerdefiniert", als Abmessungen geben Sie 80 Pixel Breite und 30 Pixel Höhe ein. Bitte achten Sie darauf, dass die Maßeinheit "Pixel" neben den Abmessungen aktiviert ist. Nach Bestätigen der Eingaben durch Klicken auf den "Ok"-Button schließt sich das aktuelle Fenster wieder und ein neues erscheint auf der Arbeitsfläche des Photo Impacts.

Dieser neuen Grafik können Sie nun einen ansprechenden Hintergrund geben. Verwenden Sie hierzu entweder den Hintergrunddesigner (unter "Web" in der Menüzeile zu finden) oder das Füllwerkzeug in der Symbolleiste des Programms. Hier können Sie neben dem einfachen Ausfüllen mit einer einzelnen Farbe auch Farbverläufe oder Fokussierungen erstellen. Klicken Sie einfach auf die dunkel ausgefüllte linke untere Ecke des Füllwerkzeug-Symbols. Für unser Beispiel haben wir einen Farbverlauf von Dunkel- nach Hellblau gewählt.

Um der Grafik nun einen Button-, sprich Schaltflächencharakter zu geben, sollte sich diese dreidimensional vom Hintergrund abheben. Verwenden Sie einfach den Schaltflächendesigner, der unter dem Eintrag "Web" in der Menüleiste zu finden ist, und wählen Sie die Option "Jede Form". Im daraufhin erscheinenden Dialogfenster können Sie die Beleuchtung der dreidimensionalen Schaltfläche, deren Höhe und deren Form einstellen. Unser Beispiel wird von links oben angestrahlt und hat eine Abschrägungsgröße sowie -gleichmässigkeit von 2.

Die Grundlage des späteren Buttons ist nun erstellt. Was nun noch fehlt, ist ein Inhalt für die Schaltfläche. In unserem Beispiel wird der Button beschriftet. Hierzu wird das Textwerkzeug in der Symbolleiste des Photo Impact aktiviert und die Schrift erst einmal an unsere Bedürfnisse angepasst. Als Schriftart haben wir uns für Forte entschieden, die Größe beträgt 21 Pixel, die Zeichen sollen in kursivem Stil sowie in weißer Farbe dargestellt werden. Da wir den 3D-Effekt der Beschriftung selber steuern wollen, wird ein einfaches 2D-Objekt erstellt. Sind die notwendigen Einstellungen gemacht, wird mit der linken Maustaste auf die Grafik geklickt und der Text eingegeben. Im Anschluss daran wird dieser dann noch bei gedrückter linker Maustaste zentriert.

Wie bereits erwähnt wollen wir unseren Button mit leicht dreidimensional wirkender Schrift verzieren. Am einfachsten gelingt dies, wenn wir zwei verschiedenfarbige Schriften übereinander legen. Da unsere Buttonschrift einen Schatten werfen soll, kopieren wir diese einfach und färben die Kopie schwarz ein. Kopieren können Sie durch Markieren der bestehenden Schrift (einfach auf die Schrift klicken) und Verschieben des Objektes bei gedrückter STRG-Taste. Lassen Sie diese Taste erst los, wenn Sie die linke Maustaste losgelassen haben.

Markieren Sie nun eine der beiden Beschriftungen. Im Idealfall sollte die zuerst erstellte Schrift angeklickt werden, da diese auf einer tieferen Ebene als die neu hinzugekommene liegt. Ist der Text markiert, Sie erkennen es an einer ihn umlaufenden unterbrochenen Linie, ändern Sie die Schriftfarbe einfach mittels des Textwerkzeugs in Schwarz um. Markieren Sie im Anschluss daran die noch weiße Kopie des Textes und platzieren Sie sie mit einem Pixel Abstand zum schwarzen Original über diesem.

Unter Umständen könnte es vorkommen, dass Sie den falschen Text eingefärbt haben und die weiße Schrift, die eigentlich oben liegen sollte, von der schwarzen Schrift verdeckt wird. Aktivieren Sie in diesem Fall den Button "Werkzeug wählen", der in der Symbolleiste des Photo Impact durch einen Pfeil dargestellt wird, markieren Sie die weiße Schrift, und wählen Sie in der Menüleiste den Eintrag "Nach oben senden", der durch einen Pfeil nach oben symbolisiert wird.

Der Button ist nun fertig. Speichern Sie ihn einfach im .JPG-Format oder, was meist empfehlenswerter sein sollte, im .GIF-Format. Im Lieferumfang des Photo Impact befindet sich das Tool "Ulead Smart Saver", mit dem Sie die Dateigröße der Grafik optimieren können.

Zurück zum Inhaltsverzeichnis

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