Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Illustrator CC 2015 für Webdesigner: Webgrafik optimieren

Einzelne Komponenten aus einem Design exportieren

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video beschreibt, wie aus einem kompletten Layout – einem sogenannten Mock-up – einzelne Komponenten für die Web-Entwicklung als Web-Grafiken konvertiert und gespeichert werden können.

Transkript

Auf den Export einzelner Komponenten aus einem Layout bin ich in einem meiner vorherigen Videos bereits eingegangen, möchte aber Ihnen in diesem Video noch genauer eine besonders tolle neue Funktion zeigen, und zwar ist die Rede von dem neuen Dialogdokument X Element Export. Und den finden Sie hier in der Werkzeugleiste, in der Bedienleiste auf der rechten Seite. "Export von Elementen". Sollte der nicht sichtbar sein oder Sie haben eine andere Einstellung gewählt, dann finden Sie den selbstverständlich unter "Fenster" und dann haben wir es hier "Export von Element", also die gleiche Funktion. So, und das Tolle ist an dieser doch neuen Funktion nach dem letzten Update, dass ein ja weitläufig häufig genutztes Skrip für jemanden, der Webdesigns mit Illustrator gestaltet hat, im Grunde hinfällig geworden ist, und zwar ist die Rede von dem Smart Layer Object Skript. Eine tolle Funktion, aber im Wesentlichen kann ich alles, was ich machen möchte, nun mit diesem Dialog erzeugen. So, und stellen wir uns jetzt Folgendes vor, ich zoome mal hier ein bisschen in mein Dokument hinein. So. Ich habe jetzt hier mein Layout und ich möchte einzelne Elemente, die ich zum Beispiel in meinem Webdesign dem Entwickler weitergeben möchte, ebenfalls verwenden, zum Beispiel die Rede ist jetzt hier von dem Logo. Ich klicke hier das Logo an und ziehe das nun einfach in diesen Dialog hinüber. Genau das Gleiche gilt für zum Beispiel die Elemente, die hier stehen, also die drei Vorschaugrafiken, wenn man so will. Dann könnte ich hier noch mit den Grafiken weitermachen. Sie sehen also, das Spiel könnte man jetzt weiterführen für alle einzelnen Objekte, die in einem Gesamtlayout sich befinden. Dann, und das ist das wirklich Schöne dadran, habe ich die Möglichkeiten, hier auch sämtliche, ja, Datenformate auszuwählen, die für mein Layout interessant sind. Und das Ganze eben auch mit Skalierung belegt. Ich gehe jetzt mal hin und lösche erstmal die, die drin sind und rufe dann zum Beispiel für IOS die neue Einstellung auf, nehme aber das Dreier einfach mal raus, ich sage einfach, mir reicht für Retinadisplays für High DPI-Pictures diese Einstellung und ja, bleiben wir mal bei PNG, das sollte ausreichen jetzt erstmal für das Beispiel. So, der einzige Vorteil, den ich mit dem alten Smart Layer Skript hatte, war, dass ich nun die einzelnen Dateinamen automatisiert zusammenstellen lassen konnte, also ich konnte sie umbenennen und dann automatisiert quasi beim Speichern schreiben lassen. Das kann dieses Skript hier leider nicht oder dieser Dialog leider nicht, hier muss ich jedes einzelne Element benennen, also zum Beispiel hier sagen "Logo", hier zum Beispiel "icon_app" oder mobile "icon_winner", zum Beispiel "icon_idea" nennen, ich mache es jetzt nur mal kurz, und "woman". Und Sie sehen, das ist natürlich ein bisschen aufwendig, wenn ich jetzt nicht nur wie hier sechs Elemente habe, sechs einzelne Objekte, sondern wenn ich hier 20, 30 oder noch mehr Elemente extrahieren muss. Das ist sicherlich dann ein Grund, dennoch zu dem Skript zu greifen, aber zunächst einmal für die Extraktion solcher einzelnen Elemente ist das wirklich eine tolle neue Funktion, die Adobe da eingebaut hat. Ja, und führen wir den Export einfach mal durch. Ich gehe also wieder in meinen Exportordner und sage einfach "Wählen" und dann wird der Export entsprechend schon gestartet, Sie sehen, das geht relativ zügig und entsprechend habe ich jetzt hier-- Achso, einen Fehler habe ich gemacht. Sie sehen, ich hatte jetzt nur von diesem letzten Icon den Export, nur das liegt daran, dass dieses Icon markiert war und alle anderen nicht, das heißt, ich muss jetzt alle Icons oder alle Objekte, alle Elemente, die ich exportieren möchte, markieren, führen wir das Ganze nochmal durch, so. Jetzt kommt noch eine Abfrage, weil ich hier welche schonmal hatte, und jetzt macht es auch Sinn das Ganze zu exportieren. Ich habe hier ein Feld drin, da sind scheinbar andere Farbfelder, so. Und gucken wir uns jetzt an, was dabei passiert ist. Sie sehen, jetzt habe ich eine ganze Reihe an einzelnen Elementen aus meinem Komplettlayout extrahiert. Schauen wir uns das mal kurz an. Sie sehen, die sind alle da als SVG, als PNG, also als doppelte Größe, also fällt insbesondere auf, wenn man jetzt hier zum Beispiel ihn aufruft und dann das Gleiche nochmal als Retina. Da sieht man komplett die unterschiedliche Skalierung. Ja und wenn man bedenkt, das Ganze einfach mit wenigen Mausklicks aus einem kompletten Layout extrahiert. Da ist diese Funktion schon wirklich eine tolle Sache. Last but not least können Sie natürlich auch, wenn Sie das jetzt hier so einstellen, jederzeit auf die Exporteinstellungen und dann den Dialog "Export für Bildschirme", also beziehungsweise "Für Bildschirme exportieren" starten. Und hier habe ich die Möglichkeiten, natürlich das Ganze noch einmal zu machen, aber zusätzlich hier zum Beispiel auch auszuwählen, wo das Ganze hin soll, den Speicherort zu öffnen, ich kann auch hier einen diversen Präfix einsetzen, also das heißt, dass ich also auch hier den Dateinamen ein Stück weit beeinflussen kann, also das sind schon Sachen, die dann auch möglich sind und last but not least selbstverständlich auch hier auf "Erweiterte Einstellungen" gehen und dann auch sagen, okay, bitte, für den PNG Export das Bildmaterial nicht optimieren, sondern zum Beispiel die Schriften optimieren, also all das ist auch hier entsprechend möglich. Somit denke ich mal in der Summe ist dieser Dialog "Export von Elementen" durchaus eine gelungene neue Funktion, die ich Ihnen in diesem Video vorstellen wollte.

Illustrator CC 2015 für Webdesigner: Webgrafik optimieren

Erfahren Sie, wie Sie mit Illustrator CC aus Ihren vorhandenen Layouts qualitativ hochwertige Grafiken mit schlanker Dateigröße erzeugen und speichern.

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