Illustrator CC für Webdesigner: Kernkonzepte

Vorlagen für responsives Design erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Damit Zeichenflächen und weitere Einstellungen nicht jedes Mal für jeden Designentwurf aufs Neue definiert werden müssen, bietet Illustrator die Möglichkeit, Vorlagen – sogenannte Templates – zu erstellen. Das Video beschreibt, wie Sie ein Template-File für responsives Webdesign erstellen.

Transkript

Ich habe bereits über die Bedeutung der Zeichenflächen im Designprozess gesprochen. Jede Zeichenfläche steht mit ihren pixeldefinierten Größenangaben für ein Gerät. Ihre Designarbeit kann sich somit perfekt an diesen Dimensionen orientieren. Dabei können Sie sogar auf Quer- oder Hochformat, beziehungsweise Landscape oder Portrait Rücksicht nehmen. In jedem Designprozess verwendet man solche Dokumente. Damit Sie diese aber nicht immer von neuem anlegen müssen, empfiehlt es sich, eine Vorlage, also ein sogenanntes Template für Ihre Arbeiten anzulegen. Wie Sie ein solches Template anlegen und was dabei zu berücksichtigen ist, zeige ich Ihnen in diesem Video. Starten wir mit der Einrichtung und öffnen den Dialog neues Dokument über den Menüpunkt Datei neu. Hier wählen Sie als Profil beispielsweise die Geräte aus. Das muss nicht unbedingt sein. Sie können natürlich auch Breite und Höhe manuell eingeben, aber wenn ich schon für spezielle Geräte entwickeln möchte, dann ja, suche ich mir auch hier eins aus, was zumindestens meiner Vorstellung so nah wie möglich kommt. und ich möchte mit der Desktopauflösung beginnen und da passt das Surface Pro 2 mit 1920 x 1080 Bildpunkten recht gut ins Bild. Also wenn man nicht immer für 5k Retina-Displays entwickeln möchte, dann ist das so die Standardbildschirmauflösung an der man sich orientieren kann. Jetzt brauche ich für meine Designarbeit nicht nur ein Desktop, sondern ich brauche ein Tablet, ich brauche ein Smartphone und ich möchte für kleine einfache Mobilgeräte das Ganze auch noch entwickeln und entsprechend sag ich, brauche ich insgesamt vier Zeichenflächen, die ich einrichten möchte und der Abstand zwischen diesen Zeichenflächen, der soll nicht 20 Pixel betragen, sondern 100 Pixel und dann haben Sie hier die Bezeichnung Raster nach Zeile, nach Spalte oder eben nach Zeile anordnen. Das bedeutet, also wenn Sie sich das hier, diese Pünktchen oder diese Karrees, die hier drin sind, als Zeichenflächen vorstellen, dann ist das die Reihenfolge, wie die Zeichenflächen angeordnet werden und ich möchte die alle nebeneinander in einer Zeile stehen haben, Also wähle ich diesen Punkt aus. Die Einheit Pixel sollte ausgewählt sein und die Ausrichtung lasse ich mal auf hochkant. also jetzt in dem Moment habe ich die Breite natürlich das ist Breiter das Dokument. Es sieht eher aus wie ein Querformat, aber es soll Hochkantformat sein. Und dann bestätige ich das und habe nun hier vier Dokumente, die ich nun bearbeiten kann. Meine Desktopgröße habe ich hier auf der rechten Seite, also beziehungsweise alle sind ja im Moment noch in dieser Größenordnung und durch die Auswahl des Zeichenflächenwerkzeuges komme ich in die Bearbeitung dieser Zeichenflächen und jetzt kann ich hier beliebige Größen zum Beispiel vorgeben. Fange ich mal links an mit der Mobilgröße. Ich möchte für ein kleines Mobiltelefon, das hat in der Regel so 320 x 480 Pixel, eine Auswahl treffen und die finde ich hier wieder hier unten, in dieser Auswahl noch bei den Geräten, also das muss ich nun manuell vornehmen und entsprechend gehe ich nun hier auf Breite und Höhe und trage ein 320 x 480. So, und habe dann quasi schon meine Dimensionen für ein klitzekleines Mobiltelefon. Die nächste Schaltfläche, ich wähle wieder das Zeichenflächenwerkzeug aus Das kann ich mir dann hier herausholen. Da wähle ich jetzt als iPhone-Größe, als Smartphone-Größe diese Fläche, bin jetzt hier im Querformat, möchte das nicht, also Hochkantformat wähle ich aus. Die nächste Zeichenfläche soll ein Tablet sein und da nehme ich einfach das iPad Air. So, auch das soll im Hochkantformat stehen. Ja, und jetzt muss ich im Grunde oder kann ich, muss ich nicht, aber sieht ja schöner aus, wenn man die ganzen Zeichenflächen nun so platziert, dass sie einigermaßen vernünftig nebeneinander passen und jetzt habe ich alle Dimensionen vom mobilen Endgerät bis hin zum Desktoprechner und das kann ich auch noch benennen, indem ich hier auf dieses Zeichenflächenbedienfeld gehe und schreibe einfach hier rein Desktop. Die nächste Zeichenfläche ist das Tablet. Die nächste Zeichenfläche ist das Smartphone und die nächste Zeichenfläche ist das Mobilgerät. So und jetzt haben wir alle und wie man sieht, wenn man das so ein bisschen passend jetzt in der Dimension hier reinzieht, da haben wir sie alle drin. Dann habe ich meine Vorlagen, meine Pixel-Dimensionen für jedes Gerät, was ich in meinem Designprozess jetzt berücksichtigen möchte. Damit ich genau diese Schritte jetzt nicht immer wieder vornehmen muss, speicher ich mir dieses Dokument als Vorlage ab und da gibt es über den Menüpunkt Datei, diesen Auswahlpunkt als Vorlage speichern und das benenne nicht auch direkt auf diese Weise ich sag einfach Mobile, Smartphone, Tablet, Desktop. Das soll reichen und dann lege ich das in diesen Standardordner. Im übrigen dieser Standardordner, den finden Sie unter den Programmen und da gibt's dann weitere, also bei Max sind das zum Beispiel coole Inhalte, so heißt das, wo Sie dann auch die weiteren Vorlagen drin finden. Ich speicher es auf jeden Fall ab und damit lege ich dieses Dokument als Vorlage für die weitere Verwendung an. Können wir schließen. Und wie komme ich da wieder dran? Einfach über Datei, neu aus Vorlage und da sehen Sie, taucht jetzt das angelegte Dokument auf. Beachten Sie bitte die Endung. Das ist nicht mehr die Endung AI von Adobe Illustrator, sondern jetzt AIT für Adobe Illustrator Template. Noch ein kurzer Hinweis zu einem Template oder zu einer Vorlage. Der Unterschied zu einem normalen Dokument ist, dass Sie in diesem Templates ja quasi keine Inhalte speichern und somit besteht auch nie die Gefahr, die Sie bei dem Laden von Dokumenten haben, dass Sie vielleicht ein Dokument aus einem anderen Projekt fälschlicherweise überschreiben. Das ist immer eine Katastrophe, weil dann das alte Projekt weg ist und verwenden Sie Vorlagendokumente, kann Ihnen das nie passieren. Sie öffnen also jetzt wirklich ein neues Dokument und das sehen Sie auch daran, dass dann gleich der Dateiname unbenannt heißt. So, jetzt bekomme ich noch die Abfrage fehlendes Profil. Ich habe in einem vorherigen Schritt definiert, dass ich immer wenn ich ein Illustrator-Dokument öffne, befragt werden möchte, wie ich mit den Farbprofilen umgehen will und mein aktuell eingestelltes Farbprofil ist sRGB, RGB ist richtig und das möchte ich auch jetzt bei dem geöffneten Dokument oder bei dem neu angelegten Dokument zuweisen. Also bestätige ich das einfach mit OK. So, und dann sehen Sie hier steht jetzt unbenannt und nicht irgendein Dateiname und damit besteht auch keine Gefahr, dass Sie ein altes Dokument überschreiben. Ja, und das ist der Start. Jetzt können Sie loslegen mit Ihrem Designprozess und den vordefinierten Geräteeinstellungen.

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!