Illustrator CC 2015 für Webdesigner: Wireframing

Flexible Schaltflächen erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Multi-State-Objekte wie Schaltflächen – also Objekte, die bei Berührung oder Maus-Event ihren Zustand ändern – sind beliebte Platzhalter in Designentwürfen. Wie man solche Multi-State-Objekte erstellt und diese so gestaltet, dass sie sich flexibel dem Textinhalt der Schaltfläche anpassen, zeigt dieses Video.

Transkript

Eine Frage, die mir immer wieder häufig gestellt wird ist, wie man mit Illustrator sogenannte Multistate-Objekte erstellen kann, wo man simuliert, wenn die Maus über die Schaltfläche bewegt wird. Vorweg gesagt: natürlich kann Illustrator nicht automatisiert auf die Maus reagieren. Aber ich kann es eben simulieren, ähnlich, wie wir hier, bei so einem Switch-Button oder so einem Switch-Schalter, die unterschiedlichen States simulieren. Und das möchte ich Ihnen in diesem Video zeigen und zusätzlich auch noch die Erstellung eines flexiblen Buttons. Ein flexibler Button oder eine flexible Schaltfläche, ermöglicht es mir im Nachhinein sehr sehr leicht Texte zu ändern, ohne dass ich mich mit den Hintergrundflächen dieser Schaltfläche weiter auseinandersetzen muss. So, diesen Text, den kann man dann noch anpassen. Ich markiere den mal. Man kann es auch noch ein bisschen größer machen, aber ich lass es mal so stehen. Bezüglich der Schrift ist es empfehlenswert, für Ihr Webdesign Fonts auszuwählen, die auf den späteren Geräten verfügbar sind. Also Helvetica oder Arial ist sicherlich eine sehr gute Wahl. Ich lasse das jetzt hier an der Stelle mal so stehen, zoome ein bisschen rein, und was wir als nächstes brauchen, um da sehr gut mit arbeiten zu können, ist das Bedienfeld Aussehen. Sie sehen bei mir taucht das hier direkt auf. Ich löse das aus den Bedienfeldern heraus, damit ich da besseren Zugriff drauf habe. Und dann schauen wir uns mal an, was wir damit hier für Techniken haben um flexible Buttons zu erstellen. So, erste Aktion ist, ich lösche mal die Schriftfarbe, indem ich hier auf dieses Farbbedienfeld klicke und als Schriftfarbe null einstellt. In dem Aussehen-Bedienfeld hingegen habe ich hier unten die Möglichkeiten, Neue Kontur, Neue Fläche hinzuzufügen, oder auch sogar Effekte. Klicke ich jetzt als allererstes hier drauf mit neuer Fläche bekommt einfach die Schrift wieder eine neue Fläche. Ein weiterer Klick erzeugt eine neue Fläche, genau da drunter. Das ist im Moment noch komplett identisch und ein weiterer Klick erzeugt da drunter eine neue Fläche. Also das heißt, die drei Flächen, die jetzt hier angeordnet sind, stehen auch tatsächlich so untereinander. Und ich denke sie ahnen schon, worauf das hinaus läuft: Das ist mein Hintergrundfläche und das ist die Fläche, die den Rollover-Status zeigen soll. Wie kann ich nun aus dieser Textfläche, wenn man sie so bezeichnen möchte, eine Rechteckfläche machen. Das ist ganz einfach. Wählen Sie bitte die mittlere Fläche aus und gehen dann auf den Menüpunkt Effekt, In Form umwandeln. Nehmen wir mal ein abgerundetes Rechteck. Das rufe ich auf und sie sehen schon habe ich hier ein abgerundetes Rechteck unter meinem Text. Ich pass mal das noch größenmäßig bisschen an, also auf 20 kann man da glaube ich gehen und die Höhe soll aber kleiner werden, also da einfach mal auf, 8, glaub ich. Na, nicht 5, sondern 8, das passt. Und der Eckenradius nicht ganz so stark, sondern eher auf 4, nicht ganz so weitab. Die Vorschau sollten Sie einschalten, damit Sie sehen, was Sie für Änderungen hier vornehmen, und dann bestätige ich das einfach. So und damit wir jetzt auch den Text besser erkennen können, hier sehen Sie schon, wenn ich mit der Maus drüber gehe, dann wähle ich mir jetzt hier eine Farbe aus, einfach mal die dunkle Hintergrundfarbe, und damit der Text besser sichtbar ist, wähle ich den in Weiß. So und jetzt brauche ich natürlich noch diese Rechteckfläche, die hier angeordnet ist, in der Fläche hier und dafür greife ich jetzt einfach diese Ebene, drücke die Alt-Taste oder halte die Alt-Taste gedrückt und bewege das hier, sobald die Fläche selektiert wird, lass ich die Maus los und Sie sehen, jetzt habe ich genau in gleicher Einstellung auch ein abgerundetes Rechteck. Ja, und jetzt muss ich im Grunde nur noch die Farbe einstellen. Sie sehen aber auch schon, was passiert, wenn ich jetzt hier auf die Sichtbarkeit klicke und die ausschalte, dann habe ich das Schwarz im Untergrund, Und wenn ich die Farbe nun auf zum Beispiel etwas grauer also etwas helleres Grau stelle, dann habe ich hier meinen Switcheffekt für den Button genau so wie ich mir das gewünscht hab. Damit aber nicht genug, das als Schaltfläche ist also eine komplette Einheit. Das brauche ich nicht probieren etc.. Wenn ich jetzt hier einen Doppelklick hinein mache, und den Text verändere, in, zum Beispiel, Schaltfläche, dann sehen Sie, passt sich die Schaltfläche ideal meinem Text an. Ich muss also nichts mehr verändern, und das ist das, was ich als flexible Buttons oder als flexible Schaltflächen bezeichne. Ich ändere das nochmal um. Button. Und, ja, platziere das nun in meinem Dokument, einfach mal hier an dieser Stelle, so. Genauso können Sie auch weiter vorgehen. Wenn Sie jetzt zum Beispiel eine Menüleiste generieren möchten. Ich fange genau so wieder an, ich nehme mir einen Text, schreibe hier Button hin und sagen wir mal, wenn ich die Einstellungen, die ich für meine Einzelbuttons mit abgerundeten Ecken verwenden möchte, wenn ich die auch hier für diese Einstellung brauche oder benutzen kann, dann sollte ich mir natürlich die Arbeit so leicht wie möglich machen. Und dem Aussehen-Bedienfeld hilft uns da das Bedienfeld der Grafikstile. Das ruf ich mal auf, hier Und um einen Grafikstil zu erzeugen, wähle ich die alte Schaltfläche einfach aus, aktiviere die und klicke dann hier auf neuer Grafikstil. Der wird jetzt übernommen, einen Doppelklick dann auf das Symbol, und ich habe die Möglichkeit, mir das neu zu benennen. Das nenn ich jetzt mal bitte btn von Button für menue, oder menuebar, so. Und das einfach mal abgespeichert als Graphikstil. So ist habe ich hier meinen Text, den wähle ich aus, und dann einen Klick auf den Grafikstil und schon habe ich sämtliche Einstellungen vorgenommen, die ich auch bei dem anderen Button eingestellt habe. Also sie sehen, das ist unglaublich leicht, hier bestimmte Vorgaben festzulegen und darauf zurückzugreifen. Sagen wir mal, jetzt möchte ich hier draus eine Menüleiste machen, da passt mir das mit den abgerundeten Ecken nicht so ganz, auch das nachträglich zu ändern bei diesem Symbol ist sehr leicht möglich. Klicke also hier auf die mittlere Fläche, und dann steht ja hier das Rechteck trennen, dann klicke ich hier auf einen Doppelklick, auf dieses Effekt symbol und sage einfach kein abgerundetes Rechteck, sondern ein normales Rechteck und Zack, dann hab ich hier schon die Ecke, das gleiche muss ich natürlich auch noch bei meinem Rollover- State machen. Also auch hier wähle ich Rechteck aus, und dann kontrollieren wir das ganze nochmal: Genauso soll es aussehen. Und der Rest ist im Grunde nur wieder Fleißarbeit. Ich drücke die Alt-Taste und halte die gedrückt, wenn ich mit der linken Maus den Button nach rechts ziehe, also ich erstelle quasi eine Kopie. Mit den Pfeiltasten passe ich das Ganze so ein bisschen an, Da machen wir das Ganze direkt zu zweit, das geht dann einfacher. So ein Stück nach oben, ein Stück nach rechts, und schon habe ich eine kleine Menüleiste. Und wenn Sie möchten, kann man diese natürlich auch noch kopieren. Das mach ich jetzt auch mal grad, damit die zusammenhängend bleibt, aber nach wie vor, und das ist das tolle: Ich mach jetzt einen Doppelklick hier in den mittleren Button, einen weiteren Doppelklick, und schreibe jetzt hier Schaltfläche hinein. So, und natürlich muss ich rechts meine Inhalte anpassen. Das ist ganz klar, aber sie sehen der Rest von der Schaltfläche oder, bzw. von der Menüleiste, der bleibt davon unbetroffen, und wenn ich jetzt hier wieder hinausgehe, dann habe ich eine zusammenhängende Ebene, oder eine Gruppe und kann so ganz ganz schnell beliebige Menüpunkte erstellen. Also Sie merken, es lohnt sich wirklich, mit dem Bedienfeld Aussehen zu arbeiten, mit dem Bedienfeld Grafikstile zu arbeiten, und Sie haben erfahren, wie sie flexible Buttons erstellen, wo sie ganz leicht die Inhalte ändern und der Button passt sich dem Schaltflächentext an.

Illustrator CC 2015 für Webdesigner: Wireframing

Lernen Sie, wie Sie die Boardwerkzeuge von Illustrator CC nutzen, um aus ihren Design-Ideen Wireframes zu erstellen

2 Std. 14 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:20.06.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!