Illustrator CC für Webdesigner: Kernkonzepte

Praktische Übung – Template-Lösungsvorschlag

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video gibt's die Lösung der gestellten Aufgabe.

Transkript

Okay, die Aufgabe war, ein Template zu erstellen, das für den Responsive-Webdesign-Entwicklungsprozess als Basis dient und eine Menge Arbeit ersparen kann. Als erstes gehe ich ür diese Erstellung auf dem Menüpunkt Datei neu und erstelle mir ein neues Dokument. Als Profile greife ich auf die Geräte zurück, weil die sind wichtiger wie die Auflösungen, wobei das jetzt nicht entscheidend wäre, zumindestens nicht für den ersten Prozess, und dann sage ich, ich möchte hier einen klassischen Desktop haben. Da eignet sich der Surface Pro 2 mit 1920 x 1080 Pixel. Dann brauche ich drei Zeichenflächen, nämlich für Smartphone, Tablet und Desktop. Die sollen nebeneinander angeordnet werden und einen Abstand von ungefähr 100 Pixel haben. Ob nun Hoch- oder Querformat, also Portrait oder Landscape, das ist an der Stelle fast egal. So, ich öffne das und dann wähle ich hier mein Zeichenflächenwerkzeug aus oder gehe rechts auf die Palette und benenne diese Zeichenflächen schon einmal um, und zwar in mobile, äh nein, in Smartphone, in Tablet und in Desktop. Das Ganze wieder ein bisschen rausgezoomt. So, mein Smartphone, also diese Zeichenfläche, die möchte ich jetzt entsprechend einstellen und da wähle ich mal das iPhone 5S, aber im Hochformat aus. Die zweite Zeichenfläche, das kommt noch mal hier so ein bisschen rüber, das war nun mein Tablet sein und dafür wähle ich mal das, ja, nehmen wir einfach mal das iPad Air und das dritte soll dann entsprechend, ja das haben wir ja schon, der normale Desktop sein, beziehungsweise ich wandel das mal so ein bisschen um und von der Größe her ist es ja tatsächlich egal, da nehme ich jetzt mal 5120 x 2880 also das typische... Ups, jetzt habe ich hier einen Fehler gemacht und muss rückgängig, noch mal rückgängign. So, ja, Breite 5120 mal entsprechend 2880 so als Retina-Display, wie dem auch sei, die Größe ist nicht relevant. Wichtig ist nur, dass Sie drei Vorgaben umgesetzt haben, Smartphone, Tablet, Desktop. Das Ganze ist hier auch in den Zeichenflächen entsprechend sauber beziffert und benannt. Nächster Schritt ist, ich brauche nun Ebenen für die einzelnen Zeichenflächen. und das ist wichtig, weil ansonsten hinterher alles durcheinander ist und wir auch Elemente, wenn wir sie verändern, nicht nur auf einer, sondern auf allen Zeichenflächen verändern, das wollen wir ja vermeiden. Also die erste Zeichenfläche, die benenne ich mal genau so, wie es jetzt aktiv ist, als Desktop. Dann erzeuge ich mir die nächste Zeichenfläche für diesen Bereich und das ist das Tablet, also im Grunde genau das gleiche wieder. Dann für diesen, für Smartphone, eine weitere Ebene und die bekommt ebenfalls diesen Namen und in die Ebene hinein, Smartphone, Tablet, Desktop, dort muss ich nun weitere Unterebenen erzeugen. Das kann ich also hier durch zum Beispiel neue Unterebene. Also, man wählt das Smartphone aus, dann neue Unterebene und die bezeichne ich jetzt mal als Header. Anschließend klicke ich auf Smartphone, wieder neue Unterebene. Das ist dann der Content. So, jetzt ändere ich das gerade hier unten noch mit dem Header um, dann passt es hinterher besser. Footer. So und dann noch mal auf Smartphone und neue Unterebene und dann haben wir den Header. So, das Gleiche mache ich nun fürs Tablet. Also auch hier, neue Unterebene, Footer, Na, da nicht. Da muss man bisschen aufpassen, so dahin klicken aufs Tablet, neue Unterebene, dann haben wir Content, neue Unterebene, Header. So, schließen wir es mal gerade oder machen es ein bisschen größer und das gleiche muss ich nun noch mal wieder fürs Desktop noch mal wiederholen, auch hier haben wir den Footer, dann entsprechend Content und last but not least, den Header. Drei Zeichenflächen, drei Geräte, jeweils mit der korrekten Struktur, Header, Content, Footer und was Sie vielleicht sonst noch so dort standardmäßig vorsehen. Also das haben wir. Die Vorbereitung ist abgeschlossen und jetzt muss ich das Ganze nur noch abspeichern, dafür sorgen, dass ich also auch in Zukunft da schnell drauf zugreifen kann und das vollziehe ich über Datei und als Vorlage speichern und das benenne ich jetzt mal anders für Responsive Webdesign also RWD, Bindestrich und dann kommt hier einfach rein Phone, Tablet und Desktop, so das abgespeichert, steht mir das dann in Zukunft zur Verfügung und drauf zugreifen kann ich sehr einfach. Ich schließe das Dokument jetzt mal, und gehe dann über den Menüpunkt Datei neu aus Vorlage und habe hier mein Responsive Webdesign, Phone, Desktop, beziehungsweise Phone, Tablet, Desktop, genau das was ich brauche, drei Stück. Ich eröffne mir neues Dokument, sage dass ich sRGB dem Arbeitsfarbraum zuweisen möchte und fortan habe ich hier direkt alle Ebenen, alles so wie es sein muss, schnell für den Zugriff und kann so wirklich ohne großartig viel Vorarbeit mit meinen Designarbeiten beginnen.

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!