Buttons mit Illustrator

Übungen für Anfänger anhand von SPD-Buttons

Stefan Schmäling, 14.08.2004 18:42

Illustrator Grundlagen

Ein paar originelle Buttons (nicht von der Stange) braucht jeder Webmaster mal. Gleichzeitig nutzen wir diesen Workshop um den Illustrator (hier den Illustrator CS) etwas kennenzulernen. Diese vier Buttons bauen wir nun Schritt für Schritt im Illustrator auf.
Wir lernen einfache Pfade, Pinsel, Verläufe, Verzerrungen und eine einfache 3D-Perspektive kennen.

1. Maßeinheit einstellen / Lineal anzeigen
Klick auf "Ansicht" und dann auf "Lineale" einblenden.
Wir müssen die Maßeinheiten auf Pixel stellen, ideal für Web.

<>2. Pixel / Lineal anzeigenHier Pixel markieren.

<>

3. Geometrisches Werkzeug
Klicke in der Werkzeugleiste auf das Rechtecksymbol, halte die Maus gedrückt und gehe zum Ellipsensymbol. Schneller geht es wenn Du einfach L auf der Tastatur drückst, damit ist das Ellipsenwerkzeug automatisch aktiviert.

4. Kreis Zeichnen
Gehe nun auf die Zeichenfläche und zeichne den Kreis, halte dabei die "Hochtaste" der Tastatur gedrückt, damit zeichnest Du einen Kreis und keine Ellipse.

5. Größe des Kreises angeben
Gebe nun in der "Transformieren-Box" bei B und H die gewünschte Größe ein, drücke die Return-Taste, ich habe bei diesem Beispiel 60 Pixel angegeben.

6. Füllung angeben
Klicke auf den Reiter "Verlauf", Du siehst nun einen schwarz-weiß Verlauf.
Klicke in der Farbenbox auf die gewünschte Farbe und ziehe diese zuerst in der Verlaufsbox auf die linke Seite (siehe roter Pfeil), dann die dunklere Farbe auf die rechte Seite. Unser Kreis muß dabei aktiviert sein, d.h. bevor Du mit dem füllen loslegst, klicke V, damit ist das Auswahlwerkzeug links ober (schwarzer Pfeil) aktiviert.
Mit dem ersten Teil des Buttons sind wir nun fertig.

7. Briefsymbol zeichnen
Wir zeichnen nun ein einfaches Briefsymbol. Es sind zwar etliche in den Bibliotheken vorhanden, aber dass macht nur halb soviel Spaß.
Wir gehen wieder auf der Werkzeugleiste auf die Geometrischen Formen und wählen das Rechteck aus. Zeichne nun das Rechteck. Lass es aktivert (markiert). Klicke nun in der Werkzeuleiste auf die Schere (siehe roter Kreis). Klicke nun lauf das linke sowie rechte Eck des Rechteckes. Wir haben damit den Pfad zerschnitten....

und können den oberen Teil entfernen. Zuerst Auswahlwerkzeug (V) aktivieren und dann einfach oben hinklicken und wegziehen. Dann mit der entf-Taste löschen.

7. Polygon-Werkzeug / Dreieck zeichnenWir gehen nun wieder auf unser Geometrie-Werkzeug und klicken auf Polygon-Werkzeug und zeichnen nund ein gleichschenkliges Dreieck mit Hilfe der gedrückten Hochtaste beim zeichnen.

dies ziehen wir nun zu unserem Rechteck...

<>setzen es zuerst ins linke Eck. Wir wählen nun das Direkt-Auswahlwerkzeug aus (A) (siehe roter Kreis). Mit diesem hast Du die Möglickeit das Dreieck frei zu verformen und genau anzupassen. Klicke dazu zuerst auf A dann irgendwo außerhalb unserer Zeichnung. Klicke nun auf eine Ecke des Dreiecks und verforme nach Geschmack.
Gruppiere nun die Zeichnung ind dem Du wieder mit dem Auswahlwerkzeug (V) Dreieck sowie Rechteck markierst und dann mit gleichzeitiger STRG-Taste sowie G-Taste gruppierst. Nun sind beide Elemente (lösbar) verbunden.





8. Offene Pfade zeichnen
Klicke nun wieder auf der Werkzeugleiste auf das Zeichenstift-Werkzeug (Pfadwerkzeug) (P) und klicke anschließend zuerst in die linke Ecke unten dann oben. Auf der anderen Seite wiederholen wir das ganze. Mit dem Direkt-Auswahlwerkzeug (A) kannst Du die Striche wie ein Gummiband positionieren.

<>





9. Briefsymbol verzerren
Damit unser Symbol nicht so statisch und etwas dynamischer aussieht werden wir es etwas verzerren. Klicke oben unter Effekte auf "Verzerrungs und Transformationsfilder" und dann auf "Frei verzerren".



Hier kannst Du dann bequem nach Geschmack den Brief verzerren. Ziehe rechts oben und unten die Ecken nach oben und unten, anschließend klicke auf OK.






10. Briefsymbol drehen
Klicke nun wieder auf der Werkzeugleiste auf das Auswahlwerkzeug (V).
Wenn Du nun mit der Maus auf eine Ecke fährst kommt das Drehsymbol, klicke nun mit der rechten Maustaste und ziehe das Symbol nach oben oder unten. Probier dies an dieser Stelle öfters, hier ist etwas Fingerspitzengefühl gefragt.
Markiere anschließend den Brief und fülle diesen mit weiß, Rand ist schwarz.







11. Schlagschatten in Illustrator
Klicke oben auf Effekt und gehe auf "Stielisierungsfilter" anschließend auf "Schlagschatten".



..nun öffnet sich dieses Fenster. Stelle es mal so ein wie ich. Du kannst auch gerne etwas herumexperimentieren, wichtig ist dabei nur das die Box Vorschau angeklickt ist.
Wiederhole nun diesen Vorgang auch mit dem Kreis.






12. Briefsymbol-Button fertig
Gehe auf Auswahlwerkzeug (V) und ziehe den Brief in den Kreis.
Mit Hilfe der gedrückten Hochtaste kannst Du bei Bedarf den Brief auf die richtige Größe transformieren (in eine Ecke und dann herunterziehen).






13. OK-Button mit Pinselwerkzeug
Wir bauen nun noch ein Button mit Pinseldesign.
Kopiere dazu unseren Kreis vom Briefsymbol. Markieren, dann Taste C (kopieren) dann Taste V (einsetzen). Klicke auf den Pinsel-Reiter, dann auf den Pfeil (siehe roten Kreis)...



...hier kannst Du Dir den gewünschten Pinsel aussuchen. Wähle "Künstlerisch_Pinsel".





14. Zeichnen mit Pinsel
Wähle nun den Pinsel aus der geöffneten Box aus und Zeichne einen Haken wie ich. Versuche es öfter, es klappt meistens nicht beim ersten mal, hier ist auch zugegeben eine gute Maus sehr von Vorteil. Übung macht den Meister deswegen erst mal 10 Minuten herumprobieren bis es klappt.






15. Pinselformate in Pfade umwandeln
Wenn der Haken fertig und mit der gewünschten Farbe gefüllt ist, sollten wir diesen in Kurven umwandeln. So gibt es z.B. bei Logos u.ä. keine Probleme wenn man davon Klebefolien herstellen möchte. Auch die Skalierung ist nun einfacher und man muß die Strichstärke des Pinsel nicht ständig nach einer Größenänderung ändern.
Gehe dazu auf "Objekt" und dann auf "Aussehen umwandeln".  Nun ist unsere Pinselzeichnung Pfade umgewandelt. Wichtig: Falls Du nachträglich noch die Farbfüllung ändern möchtest, mußt Du unbedingt vorher "Objekt - Gruppierung aufheben" durchführen, sonst funzt das nicht.






16. Ok-Button fertigFüge nun dem Haken und dem Kreis wieder einen Schlagschatten wie oben beschrieben zu. Lege den Haken über den Kreis, fertig ist der Button.
Sieht doch fetzig aus oder?






17. SPD-Home Button mit 3D SPD-BoX
Zeichne hierfür ein Rechteck, fülle es mit rot. Schreibe mit dem Textwerkzeug den gewünschen Text und fülle ihn mit weiß. Gruppiere nun Text und Rechteck.
Klicke oben auf "Effekte" dann auf "3D" dann auf "Extrudieren und abgeflachte Kante".
Nun öffnet sich ein neues Fenster.



In diesem Fenster kannst Du nun sehr bequem die gewünschten Einstellungen vornehmen. Bitte auch hier den "Vorschau" Haken nicht vergessen. Den Würfel kannst Du drehen und damit die Perspektive festlegen. Experimentiere etwas und klicke dann auf OK.
Die fertige Box legst Du nun wieder über unseren Kreis.






18. Buttons fertigDiese waren nun nur ein paar Grundfunktionen von Illustrator.
Du siehst, mit diesem Werkzeug sind Deiner Phantasie praktisch keine Grenzen gesetzt.
Versuche es mal mit eigenen Farben und Formen, Du wirst sehen es macht riesigen Spaß.
Tipp: Damit Du nicht ständig bei gezoomten Darstellungen scrollen mußt, klicke H - Du kannst anschließen mit gedrückter Leertaste die ganze Seite hin und herschieben, sehr bequem.
19. Export für Web
Um diese Buttons auf Deiner HP zu nutzen, solltest Du diese nacheinander kopieren und auf einer leeren Seite einfügen. Dann "Datei" > "Für Web speichern", hier kannst Du alle wichtigen Einstellungen wie Alphatransparenz (transparenter Hintergrund) sowie Größe einstellen.