Illustrator CC für Webdesigner: Kernkonzepte

Zeichenflächen als Richtwerte für unterschiedliche Designs

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Nutzen Sie unterschiedliche Zeichenflächen, um die ausgewählten Größen als Anhaltspunkte für die Veränderung Ihres Designs heranzuziehen. Das Video demonstriert die Vorgehensweise in Illustrator.

Transkript

Ich werde immer wieder danach gefragt, woran ich mich orientiere, ab welchen Größenordnungen ich mein Design verändere, wenn ich eben den Sprung von einem Gerät zum anderen vollziehe und es fällt mir auch immer wieder schwer, das zu beantworten, weil das ist von ganz vielen Kriterien abhängig und auch nicht immer gleich, denn es kommt darauf an, was ich a) einmal für eine Designanforderung habe, welche Informationen und welches Design ich überhaupt transportieren möchte, aber es kommt natürlich auch auf die Zielgruppe an, denn da muss man sich ja überlegen, welche Geräte benutzen diese Zielgruppen in erster Linie. Der nächste Gedanke ist, kann ich auch vielleicht ein Gerät quasi einfach auslassen, weil dort mir die Benutzergruppe zu klein ist. Es lohnt sich für mich nicht, da extra ein eigenes Design für zu entwickeln. Also Sie sehen, es gibt ja ganz unterschiedliche Herangehensweisen. Illustrator bietet uns nun einmal keine Funktion an, um automatisierte Größen berechnen zu können, je nach Gerät also quasi das Ganze zu automatisieren und so müssen wir uns, ja ich will es nicht als Krücke bezeichnen, denn das ist es wirklich nicht, aber so müssen wir uns mit festen Layouts behelfen, um zumindestens auch der Entwicklungsabteilung zu sagen, hey schau zu, ab dem Sprung, also ab diesem Breakpoint von A nach B musst du dieses und jenes anders anordnen, anders strukturieren oder so möchte ich mein Design haben. Starten wir also, das zeige ich Ihnen in diesem Video, wie man bei Illustrator und mit Illustrator sich solche Orientierungsgrößen schafft und zwar in einem Dokument und die Rede ist auch hier von dem Zeichenflächen. Zunächst einmal kann ich ja ein neues Dokument anlegen und dieses neue Dokument, ja da würde ich dann zum Beispiel auf den Bereich Geräte gehen. Da habe ich dann die Auswahl zwischen iPad Air, Mini, 5S und beispielsweise Surface Pro et cetera. So, ich wähle mir jetzt einfach mal das iPhone 5S aus mit den vorgegebenen Größen und ja, das soll auch ruhig im Hochformat stehen bleiben und die anderen Einstellungen lasse ich mal soweit im Standardformat stehen und dann gehe ich hin und öffne mir da ein neues Dokument. So, jetzt habe ich das Ganze hier in meinem Dokument als hochkant, als Portrait, iPhone 5S. Jetzt möchte ich aber den nächst höheren Sprung, das nächste Gerät. das nächste Gerät, all das möchte ich definieren und so kann ich dann zum Beispiel hier über die Zeichenflächenwerkzeuge oder das Zeichenflächenwerkzeug, Umschalt O, mir neue Zeichenflächen generieren und vorhandene bereits benennen. Auch das mache ich mal. Das ist das iPhone 5S. Damit ich auch weiß, womit ich es zu tun habe. Ein Klick auf diesen Button bringt mir eine neue Zeichenfläche und das ist auch, wie hier in der Vorgabe zu sehen, erstmal das iPhone 5S. Das kann ich aber hier in der Breite und Höhe natürlich beliebig anpassen und so zum Beispiel auch ein 5k Retina-Display von Apple generieren, also mit 5120 x 2880 Pixel. Das Ding ist wirklich gigantisch, also das sieht man auch, wenn man wirklich jetzt hier beide mal nebeneinander hat. So und das bekommt den Namen iMac 27 Zoll. Auch die Anordnung kann ich jederzeit in einem Dokument verändern. Wenn ich ein weiteres Dokument habe, ich nehme mal das iPhone 5S wieder als Ausgangslage, und ich klicke jetzt hier drauf, dann bekomme ich diese Wahl und dann kann ich auch hier bereits auf vorgefertigte Varianten umschalten, zum Beispiel auf das Nexus 7. Sie sehen, jetzt passt er das direkt hier in dieser Form an. Ja ich kann sogar hingehen und sagen, ich möchte Landscape-Format oder im Portrait-Format haben. Also auch das ist möglich, aber was mache ich denn jetzt, wenn ich ein Gerät habe, was hier nicht in dieser Liste drin steht? Ich kann mir all diese Geräte auch als Vorlagen abspeichern. Das ist möglich, aber zunächst muss ich auch mal an die Informationen kommen und das kann man zum Beispiel, wenn man jetzt mal die Apple Seite besucht. Ich gehe hier auf iPhone und wähle mir jetzt mal das neue iPhone 6S aus und dann finden Sie hier die technischen Daten und unter diesem Bereich muss man ein bisschen scrollen. Dort haben wir alles was wir benötigen. Da haben wir die 1334 x 750 Pixel beim iPhone 6S und die 1920 X 1080 beim iPhone 6S Plus und wenn ich das Ganze nun übernehmen möchte, ganz nebenbei mal gesagt, auch hier schon wieder die Unterschiede zwischen den Pixel per inch, also wegen der Bildschirmdiagonale 4,7 Zoll, 5,5 Zoll. Also wenn ich das nun übernehmen muss, dann würde ich mir das einfach merken, Wechsel also hier hin und trage diese Werte manuell ein, also 1334 x 750 zum Beispiel für das iPhone 6S und das möchte ich im ersten Sprung als Breakpoint, sagen wir mal vom 5S zum 6S, im Hochkantformat nehmen. Das ganze verdoppel ich, also Sie sehen, er merkt sich immer die letzte Einstellung und das Ganze jetzt aber auch im Landscape-Format, wenn ich das iPhone drehe und so könnte ich nun weiter machen, indem ich für jedes beliebige Gerät meine unterschiedlichen Größen definiere, das ganze benenne und ich habe hier mit meine Orientierung, von welchem Layout zum anderen ich eigentlich einen Sprung machen möchte. Und hier sieht man auch so ein ganz kleines bisschen, deswegen bewusst das gewählt, ich habe hier das 5S. Der Sprung von 5S zu 6S ist für mich jetzt in Wirklichkeit nicht so relevant, dass ich sagen würde, ich mache hierzwischen ein unterschiedliches Layout, also das was da reinpasst und was gut aussieht, das ist im Grunde das Gleiche, wie auch hier, vielleicht ein bisschen vergrößert. Also wäre es tatsächlich sinnvoller anstatt ein 6S zu nehmen, hier tatsächlich mit 1920 zum Beispiel, also müsste man hier hinsetzen, 1920 x 1080 Pixel zu arbeiten oder eben bei dieser Schaltfläche genau andersrum. Da haben wir hier die 1920 und da die 1080. So, da sieht man hier lohnt es sich schon durchaus. Ich muss mal ein bisschen rauszoomen. Hier lohnt es sich jetzt durchaus schon zu überlegen, machen wir ein unterschiedliches Layout, weil das ist schon recht deftig und ich kann eine ganze Menge andere Informationen vom... gesehen vom 5S aus, progressiv nach oben zum 6S unterbringen und auch das kann wieder anders aussehen im Landscape, also im Querformat und das muss natürlich anders aussehen, wie auf einem großen Desktop-Computer, wie dem 27 Zoll. Also Sie sehen, die einzelnen Unterschiede kann man sehr schön über die Art der Größen der Zeichenflächen definieren und sich damit Anhaltspunkte schaffen, wie ich mein Design inhaltsbasiert auf die Geräte anpassen kann.

Illustrator CC für Webdesigner: Kernkonzepte

Lernen Sie die grundlegenden Begriffe des Webdesigns kennen und konfigurieren Sie Illustrator für den teamfreundlichen Webdesign-Einsatz.

1 Std. 49 min (18 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:31.05.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!