Illustrator CC 2015 für Webdesigner: Wireframing

Platzhalter für Bedienelemente in Illustrator erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Platzhalter für beispielsweise Vorschaugrafiken, Switch-Buttons oder auch Profilbilder sind ständig wiederkehrende Objekte, die in Bibliotheken gespeichert werden können. Diese müssen aber zunächst erstellt werden. Das Video zeigt, wie Sie bei der Erstellung von Platzhaltern vorgehen können.

Transkript

Cloudbasierte Bibliotheken oder auch lokale Symbolbibliotheken sind hervorragende Funktionen, um auf ständig wiederkehrende oder Objekte, die sie permanent benutzen müssen, zurückgreifen zu können. Aber diese Objekte für die Bibliotheken muss man sich natürlich erst einmal anlegen. Hierbei empfehle ich Ihnen einen Blick in die Plattformen, in die Betriebssysteme, auf die Geräte, für die Sie schwerpunktmäßig ihre Designs entwickeln. So habe ich eigene Bibliotheken für zum Beispiel Androidgeräte oder eben auch für Apple-basierte Geräte. Welche Objekte sie dort anlegen, das liegt natürlich ganz so ein bisschen an ihrem eigenen Design bzw. an Ihren Vorlieben, ich möchte Ihnen die eine oder andere Vorgehensweise demonstrieren in einem Vorschaubild oder an zwei Vorschaubildvarianten, an einem kleinem Switchbutton, und vielleicht noch an einem Profilbild. Ja, und wie man dabei vorgehen kann, zeige ich Ihnen in diesem Video. Starten wir also mit einem ganz normalen Vorschaubild. Und das möchte ich, indem ich mir ein Rechteckwerkzeug auswähle und einfach in die freie Fläche klicke, einmal anlegen. Dafür nehme ich die Maße 50 mal 50 Pixel. So, das ist jetzt recht klein, aber das stört mich nicht weiter. Ich zoome so ein bisschen hier erstmal rein. Und von den Farben her möchte ich das ganze so anpassen, wie mir das gefällt und ich hab dafür in meinen Farbfeldern eine eigene Bibliothek angelegt, also genaugenommen so ein eigenes Farbschema. Ich gehe dabei immer so vor, das ich, je dunkler eine Fläche wird, desto bedeutsamer für das Sichtfeld wird sie für den Benutzer; je heller sie wird, desto weniger Bedeutung hat das Ganze. So und hier mache ich jetzt mal so ein Mittelding. Das heißt ich möchte die Fläche selber, die soll. so in einem Grau dargestellt werden und die Kontur in einem etwas helleren Grau. Das sieht nicht so schön aus. So rum gefällts mir nicht, nein ich machs andersrum, ich nehm die Kontur etwas dunkler und die Fläche etwas heller, so. So lasse ich es mal. Und damit man erkennt, dass das Ganze ein Vorschaubild und nicht nur einfach ein Rechteck ist, platziere ich hier noch zwei Linien hinein. So, und von dort, die Konturfarben wurden übernommen. Jetzt markiere ich alles und drücke Command-G oder Steuerung-G oder alternativ einfach das ganze kopieren, das Objekt kopieren. So und damit hätte ich mein erstes Objekt angelegt. Jetzt kann ich, durch drücken der Alt-Taste, dieses Objekt leicht kopieren, und dann über das Bedienfeld transformieren, zum Beispiel auf einhundert mal einhundert hochziehen. Ich kann auch hier Verbindung klicken und wenn ich jetzt einhundert eingebe, dann wird das komplett skaliert auf die nächste Höhe, genauso wie ich das haben will. Das mach ich dann nochmal. So, an die Stelle transformieren, und jetzt 200 Pixel. Sie sehen, also relativ einfach möglich, und nach Abschluss dieser Arbeit setze ich mir das irgendwo in dieses Dokument hinein, wo ich dann permanent darauf Zugriff habe. So das Ganze kann ich natürlich erneut machen auch mit etwas anderem Vorschaubildern. Also nehme mal hier ne andere Größenordnung nehmen wir mal 150 mal 50, also etwas längliche Sachen. Und jetzt habe ich hier wieder eine Einstellung, die nicht dem entspricht, wie ich das von den Farben hier mir vorgestellt habe. Aber das ist kein Problem, ich klicke einfach mal hier drauf und dann drücke ich die Taste I auf meiner Tastatur. Und Sie sehen, jetzt bekomme ich die Pipette. Das ist hier das Werkzeug, das Pipettenwerkzeug. Und wenn ich dann in das Objekt hineinklicke, dann habe ich entsprechend ein neues Objekt. Ja, da ich zoome mal ein bisschen rein. Da brauch ich dann auch wieder meine Linien als Vorschaubild. So, meine Linien als Vorschau. Das Ganze gruppiere ich erneut mit Command G Das kommt dann hier an diese Position. Ja, und im Grunde gehe ich jetzt wieder ganz genauso vor, nur dass ich jetzt drauf achten muss beim Transformieren, hier diese Proportion rauszunehmen, und dann kann ich einfach sagen geh das ganze jetzt bitte 200 mal 100 An der Stelle. So, platzieren wir es richtig. Und dann das Ganze ein letztes Mal, zum Beispiel mit 300 mal 150. Ja, man sieht schon jetzt habe ich hier entsprechend meine Objekte einmal in quadratischer Form, einmal in länglicher Form. Also alles kein Thema, recht schnell zu machen. Die Farbbilderbibliothek kann ich mir auch mal schließen. Nehmen wir uns mal so einen Switchbutton vor: Wie kann man so etwas machen? Ich greife auch wieder an das Rectangle, also das Rechteckwerkzeug, und ziehe jetzt hier mal eine Fläche auf die ungefähr so 125 Pixel groß ist, oder wenn Sie das eben nicht aufziehen möchten, ich lösche es auch mal wieder: einfach ein Klick hier rein. Dann kann man genau sagen, wie groß das sein soll, also 125 mal 50 beispielsweise so und hab jetzt hier dieses Objekt. Ich drücke wieder die I-Taste für die Pipette und übertrage die Farbfelder, das ist so eine ganz schnelle Möglichkeit. Und wenn ich jetzt dieses Objekt aktiviere, also hineinklicke, dann hab ich hier die Greifer und da kann ich nun schön so eine Rundung auf 25 ziehen. So, jetzt habe ich ein solches Element als Hintergrund. Jetzt greif ich mir mal das Ellipsenwerkzeug und setzt den Cursor, also die Maus hier, genau in die Mitte. Dann drücke ich die alt Taste, halte die gedrückt und ziehe einen Kreis auf, mit gedrückter Shift Taste, damit ich auch wirklich ein Kreis hab, der jetzt genau hier, sie merken den Punkt, wenn er einrastet, zack, und da lasse ich los. So und da vergebe ich jetzt eine neue Farbe, nämlich die helle Farbe und ziehe das Ganze einmal nach links und hab wie so einen Switchbutton. Das kopier ich mir nach rechts, nehme den Switch auf die andere Seite, um einen zweiten Zustand zu erzeugen und jetzt tausche ich einfach nur die Farben aus zwischen den beiden und das mach ich dann, indem ich hier das weiß mache und das hier dunkel darstelle. Genau so, und damit habe ich zwei Zustände, können wir wieder rauszoomen, für so zwei Switchbuttons, natürlich auch immer dran denken, möglichst Gruppieren, damit man das nicht mehr so auseinander zieht. Wie kann man nun vorgehen, um solch ein Vorschaubild für ein Profilbild zu generieren? Da nehm ich mir mal, hier bereits, oder ich ziehe einfach ein neues Kästchen auf, das geht am schnellsten, ich klicke wieder, dann sag ich mal 150 mal 150 Pixel. So, da hat er sich die Einstellung gemerkt, die kann ich genauso brauchen und jetzt muss man so ein bisschen tricksen: Und zwar mache ich das wieder mit dem Ellipsen werkzeug. Ich ziehe mir in der Proportion in etwa so einen Kopf auf. Und dann direkt darunter nochmal na das war das, was eigene, das eigentliche Objekt. So, gehn wir mal weg. So und jetzt in der Proportion dadrunter, einfach so ein Körper. Das kann ich jetzt noch anpassen, platzieren wir es mittig so ein bisschen schmaler. Und das müsste schon ganz gut aussehen, wenn man sich das so anschaut, genau. Und um aus diesen zwei Objekten eines zu machen, da gibt es ein fantastisches Werkzeug, das ist das Formerstellungswerkzeug. Es ist viel leichter, wie früher mit den Pfadfindungsmöglichkeiten oder den Flächenverschmelzungswerkzeugen, wie auch immer man die bezeichnen möchte, so und hier gehe ich einfach hin, und markiere die beiden Objekte, um die es geht, wähle mir das Formerstellungswerkzeug aus und ziehe nun mit gedrückter linker Maustaste, Sie sehen, da gibt es hier so eine Schraffierung, eine Punktierung, und ich drücke jetzt die linke Maustaste und ziehe eine Linie hier, unten hinein und habe quasi diese beiden Objekte miteinander verbunden. Nicht ganz, ein bisschen, ja gehen wir mal ein bisschen höher, so jetzt machen wir es nochmal, also beide Objekte auswählen, und jetzt aber über die Objekte hinweg so, Sie sehen, jetzt sind beide Objekte verbunden. Ja, ich hinterlasse eine andere Farbe nehmen wir mal das helle. So, dann gehen wir hier rein, platzieren das, so ganz bisschen höher. Und jetzt gehe ich genauso wieder mit dem Formerstellungswerkzeug vor. Ich markiere mir dieses Objekt und das Objekt im Hintergrund, Wähle das Formerstellungswerkzeug aus und sie sehen schon, er erkennt die Unterschiede. Und wenn Sie jetzt mal genau schauen, da gibt es ein Plus an dem Mauscursor, drücken Sie die Alt-Taste, ist das Minus. So und mit Minus lösche ich einfach das Objekt, das im Untergrund steht und fertig ist mein Vorschauobjekt für ein Profilbild. Und ja, das kopiere ich, damit ichs auch nicht wieder auseinanderziehe und platziere mir das auf mein Dokument. Also, ich denke, Sie sehen, wie man sich solche Objekte vorbereitet, und wir haben hier Vorschaubilder in unterschiedlichen Formaten, wir haben Switch-Buttons, wir haben Profilbilder in der Vorschau. Also mit Illustrator wirklich ein Kinderspiel und so können Sie sich für alle Bedienelemente die sogenannten UI Interfaces, die Benutzerelemente, die Sie in Ihren Designs verwenden, Vorlagen gestalten. Diese dann überführt in die Cloudbibliothek oder vielleicht nur in die lokale Symbolbibliothek, ja, das erleichtert die Designarbeit ungemein.

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!