Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Illustrator CC 2015 für Webdesigner: Wireframing

Formular und Media-Platzhalter mit Illustrator erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Zu häufig genutzten Platzhalter-Objekten gehören natürlich auch Formulare oder beispielsweise ein Videoplayer-Objekt. Der Film zeigt, wie Sie mit vorhandenen Elementen schnell und einfach solche Platzhalter in gleichem Stil erstellen und gruppieren.

Transkript

Weitere, sehr häufig eingesetzte, Bedienelemente der Userinterfaces sind interaktive Eingabemöglichkeiten, wie zum Beispiel Formulare oder eine Vorschau für einen Videoplayer. In diesem Video beschreibe ich schrittweise die Erstellung von Formularfelder und zeige wie ein Videoplayer-Objekt gebaut werden kann. Starten wir mit der Erstellung eines kleinen Eingabeformularfeldes bzw. zwei Felder, die ich benötige, und zwar für so einen Registrierungsformular. Also Benutzername, Passwort und zwei Buttons. Ich klicke, ich wähle mir das Rechteckwerkzeug aus. Klicke mit der linken Maus hier ins Dokument, und trage die Größe ein, und ich denke mal mit 350 mal 50 Pixel sind wir ganz gut dabei. Und ja, dann muss ich nur mir überlegen, das passt von der Optik her natürlich schon ganz gut, aber ich muss mir überlegen wie ich das überhaupt formatieren möchte da ich jetzt hier die Farbe, was haben wir da, das ist das ein, zwei, drei, vier, fünfte Farbfeld von rechts. Also wähle ich das jetzt hier auch mal für die Kontur aus. Eins, zwei, drei, vier, fünf, von rechts. Ein bisschen dunkler kanns glaube ich sein, damit man die Kontur ein bisschen besser erkennt, so ist es meiner Meinung nach ganz gut. Ja, und ich brauch noch ein zweites Feld. Also halt ich die Alt-Taste auf meiner Tastatur wieder gedrückt und mit der linken Maus ziehe ich es einfach runter, lass es anpassen. So, dann benötige ich zwei Buttons. Dafür kopier ich mir Button eins, und das Ganze dann erstmal bischen einzoomen, dass man das besser sehen kann. Das ganze nochmal, nebeneinander. Und die bekommen schon mal eine Beschriftung wie zum Beispiel Einloggen. Hoppsala. Einloggen. Sie sehen, das tolle an diesen flexiblen Buttons ist, dass sie da beliebigen Text eintragen können. Und: Registrieren. Jetzt mache ich das gerade ein wenig passend, gehen wir nochmal raus. Ja, ich denke, so sieht das schon ganz vernünftig aus, damit sich das auch wieder nicht verschiebt. Markiere ich alle Objekte wo ich so etwas dichter dran bin. Stelle ich fest, dass mir die Kontur dann doch etwas zu dunkel ist? Ich geh dann doch wieder hier auch das ursprüngliche Graufarbfeld, dami tes auch zu den restlichen Objekten passt und ein wenig harmoniert. Also, ich markiere alle vier Objekte und betätige die Tastenkombination CommandG oder Steuerung-G, alternativ auch Kopieren über die Menüpunkte. Der zweite Schritt oder das zweite Formular, was ich bauen möchte ist nun ein etwas größeres Eingabeformular. Da ich jetzt ja schon Objekte, hier habe, ich wechsle in den Isolationsmodus und markiere mir ein Feld, Drücke Command-C, oder Steuerung-C, verlasse den Isolationsmodus und füge das Dokument mit Command-V wieder ein, bzw. nicht das Dokument, sondern das Objekt. Noch ein bisschen rauszoomen. So und davon brauche ich zwei Stück, also quasi so für Name und Vorname. Machen wir das direkt ein bisschen breiter, 350 habe ich hier. Ich denke 550, das passt ganz gut. Machen wir das mal, obwohl, 550 insgesamt, das ist dann zuviel, da komme ich auf 1000. Ich überlege immer so grob, meistens habe ich so ein Design von 1200 Pixel in der Breite, 550, das wären damit 1100, wenn ich die nebeneinander setze, mit Lehrraum sogar noch etwas weiter. Also nehme ich ungefähr 500 Pixel, oder 450 sogar. So und davon das ganze zwei mal. Ja, dann brauchen wir ein Feld zum Beispiel die Firmennamen und Sie sehen, wie einfach das auch mit dem Raster ist in Illustrator. Dann brauch ich ein Feld für die Straße. Und ein Feld vielleicht noch für Postleitzahl und Ort, also schiebe ich das wieder so ein bisschen zusammen. Dann das ganze in der Form ausgerichtet. Ja, ich glaube, hier muss ich dann noch bisschen nach unten das Ganze auch noch etwas anpassen damit wir genau hier gleiche Abstände bekommen, und dann sieht das schon ganz passabel aus. Auch hier brauche ich einen Button, den hole ich mir mit gedrückter Alt-Taste hier hinein. Und ja, benenne diesen mit beispielsweise dem Text "Absenden". Es gibt jetzt mehrere Möglichkeiten, entweder ich kopiere das komplette Feld, das mach ich jetzt auch mal, richte dann den Text, also den Button an diesem kompletten Feld aus und kopiere das Ganze dann noch einmal. Und damit wäre auch schon so ein großes Eingabefeld als Gruppe fertig. Natürlich jederzeit anpassbar, man kann das ein bisschen anders aufbauen. Ich denke, das demonstriert aber sehr schön, wie man dabei vorgehen kann. Und das letzte Bedienelement, was ich erstellen möchte ist ein Videoplayer. Da habe ich auch hier bereits ein Rechteck, also zieh ich mir das nach unten und vergrößere das einmal, transformiert das einmal auf die Größe 650 mal 480. Das ist so eine typische Größe eines Videoplayer-Objektes. Oder machen wir es, ja, eher etwas kleiner, 350, so. So passt es besser. Und im Wesentlichen habe ich ja hier schon alle Einstellungen drin. Nur möchte ich das unterscheiden zu den normalen Vorschauobjekten von Bildern, indem ich die Farbe ändere. Erstmal gehe ich in den Isolationsmodus durch einen Doppelklick und dann greife ich mir die Linien und Stelle dann die Kontur der Linie mal auf etwas dunkler ein und die Kontur auch hier auf dunkler, und die Flächenfüllung, vor allen Dingen auf dunkler. Das kann ruhig noch etwas dunkler sehe ich gerade also bezüglich der Linien, oder heller, das wir das genau andersrum machen. Ich denke das ist noch schöner, ich gehe mal auf hellere Konturen, genau, machen wir es so rum, das gefällt mir noch besser. Dann benötige ich ein erneut einen Button, eine Schaltfläche, ach so, das ist auch in der Gruppe, das wollte ich jetzt nicht. So, nehmen wir sie von hier. Und entsprechend platziere ich das hier drüber und benenne das ganze als VIDEO PLAYER OBJEKT. Nun noch ausrichten, zentriert auf das Objekt, und fertig ist die Kiste. Ich habe ein Videoplayerobjekt. Das kopiere ich noch, und kann es dann für weitere Arbeiten hinterher nutzen. Ich bin sicher anhand der drei Beispiele ist erkennbar, wie leicht und schnell Sie mit Illustrator Wireframe-Platzhalter erstellen können, die dann für weitere Designprojekte ausgewählt und zeitsparend eingesetzt werden können. Zusätzlich besteht die Möglichkeit, all diese Objekte in eine Symbolbibliothek zu überführen, wenn sie ausschließlich lokal benötigt werden, oder aber in die Bibliothek der Creative Cloud, um allen Teammitgliedern, Kunden oder Ihnen selbst von einem anderen Arbeitsplatz aus Zugriff darauf zu gewähren.

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!