Illustrator CC 2015 für Webdesigner: Wireframing

Die passende Vorlage für ein Bildschirmdesign anlegen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Damit Dimensionen und Abmessungen für ein Bildschirmdesign auch exakt stimmen, bietet Illustrator die Möglichkeit, auf Vorlagen zurückzugreifen. In diesem Video erfahren Sie, wie Sie eine solche Vorlage aufrufen und nach eigenen Ansprüchen abändern können.

Transkript

Ich habe bereits ausführlich, in einem anderen Training von mir, "Illustrator CC für Webdesigner"-Kernkonzepte erklärt, welche Schritte für die Anlage eines Templates, einer Vorlage also, notwendig sind, und wie Sie dabei unterschiedliche Gerätegrößen berücksichtigen können. Trotzdem möchte ich auch an dieser Stelle noch einmal ganz kurz darauf, eingehen. Ihr Design muss sich ja immer an den Geräten orientieren, für die Sie das Design entwickeln. Das können mehrere Geräte oder auch nur ein einziges sein. Illustrator bietet alle Möglichkeiten, solche Gerätedimensionen in Form eines Dokumentes bzw. einer Zeichenfläche zu simulieren. Ich zeige Ihnen in diesem Video, worauf sie dabei achten sollten und wie sie die Vorlagen erstellen, dessen Dimensionen nicht von Illustrator angeboten werden. Starten, wir den Prozess durch die Neuanlage eines Dokumentes über den Menüpunkt Datei, Neu. Und in diesem Dialog haben Sie eine Vorauswahl. Achten Sie darauf, dass sie als Profil Geräte wählen oder zumindestens Web. Denn wenn Sie beispielsweise auf Druck stehen, dann haben wir hier unter dem Punkt Erweitert, also, falls der zu ist, dann einfach mal aufklappen, Farbmodus und Rastereffekte, die wir für das Web- oder App- Design so nicht benötigen. Also gerade der Farbmodus wäre kritisch. Natürlich kann ich das auch alles manuell einstellen. Genauso wie Breite und Höhe, aber es empfiehlt sich, ja direkt, wenn ich schon für Geräte oder das Web entwickeln möchte dann auch hier das Ganze auszuwählen. So, zum Beispiel, wenn ich jetzt ein Gerät habe, das hier in der Liste ist, kann ich das ganz schnell auswählen. Wenn es aber ein Gerät ist, was hier noch nicht aufgelistet wird, dann muss ich das manuell eintragen. Wie man sehen kann liefert Adobe mit Illustrator durchaus eine beachtliche Liste einigermaßen aktueller Geräte. Aber jetzt zur Zeit ist aktuell das iPhone 6s oder das iPhone 6s Plus, und hier befindet sich aber nur das Iphone 5 in der Auswahl. Ich kann also theoretisch gesehen dieses auswählen, aber ich möchte doch eine andere Größe haben. Und ja, wie kommt man an solche Größen ran, da würde ich Ihnen empfehlen am besten auf die Seiten der Hersteller zu gehen und dort unter den Gerätespezifikation nachzuschauen. Ich hab das mal vorbereitet, hier auf der Seite von Apple. Ich wähle also das iPhone aus. Dann sieht man, da gibts hier das iPhone 6s oder auch ganz neu, das iPhone SE. Ich bleib mal bei dem 6s. Und ganz häufig muss man einfach nach technischen Daten oder dergleichen, Gerätespezifikationen oder wie auch immer das der Hersteller nennt, Ausschau halten. Und wenn man dann da drauf klickt, dann findet man auch irgendwo diese Angabe, die wir suchen. Zunächst einmal habe ich auf der linken Seite das iPhone 6s und hier das Plus. Wenn ich jetzt runterscrolle kriege ich alle Spezifikationen zu diesen Geräten. Da haben wir, was wir suchen, nämlich das Display. Einmal 4,7 Zoll und einmal 5,5 Zoll. Und da sieht man dann auch das, was wichtig ist für mich jetzt: die 1334 mal 750 Pixel. 326 ppi, da kann ich jetzt nicht direkt was mit anfangen, das ist ja nur die Anzahl der Bildschirmdiagonalen . Also diesen wert, den merke ich mir einfach mal und wechsel dann hierhin zurück und kann dann zum Beispiel hier 1334 pixel mal 750 Pixel im Hochformat eingeben, also da muss ich jetzt ein bisschen drauf achten Und man sieht Breite ist 750 Höhe ist 1334, so soll es sein. Weiter wichtig ist die Einheit, die sollte auch auf Pixel stehen und nicht auf Punkt, Zoll oder cm, sondern Pixel ist die Einheit, mit der wir beim Web- oder Appdesign auch arbeiten. Und die Ausrichtung, habe ich gerade schon gesagt, auch das ist nicht ganz unwichtig, weil es ist zwar möglich, ein vorhandenes Design so anzupassen, dass es im Querformat dann auch funktioniert oder bzw. im Hochformat, aber trotzdem ist es immer ärgerlich, wenn man dann erst im Nachhinein alles wieder umstrukturieren muss. Also da auch am besten sich genau überlegen, was präsentieren Sie Ihrem Auftraggeber, Ihren Kunden und wählen dann direkt die Ausrichtung, die passende Ausrichtung aus. Klicken Sie auf OK, öffnet sich dieser neue Dialog und ein weiterer Klick hier auf Zeichenflächenwerkzeug ermöglicht uns hier nochmal genau zu kontrollieren, ob wir die richtige Dimensionen haben, das sieht gut aus. Hier steht benutzerdefiniert drin, und ich kann aber auch jederzeit im Nachhinein solch eine Vorlage umändern. Also, wenn ich jetzt zum Beispiel sage, das war doch nicht das, was ich mir vorstelle, ich nehme das jetzt lieber fürs iPad Air, dann sieht man, kann ich das auch anpassen. Und dann habe ich auch hier meine Vorgaben, und hier Breite und Höhe entsprechend signalisiert. Sie wissen also nun, wie Sie Vorlagen anlegen können, und Sie können sich ganz sicher sein, sich vollständig darauf verlassen, daß nun diese Dimensionen, die hier in der weißen Zeichenfläche angeboten wird, auch wirklich der Bedienfläche des Gerätes entspricht, für das Sie ihr Design entwickeln und sich daran orientieren zu können, ist glaube ich eine große Erleichterung, weil so einfach auch die Proportionen stimmen und die Abläufe sich besser anpassen lassen, wenn man so eine Dimension vor sich hat. Und das können Sie für jedes Gerät anlegen, so können Sie mit ihren Kunden kommunizieren, Vorentwürfe schicken, und dass ist eine sehr starke Erleichterung, wie ich finde.

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!