Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Illustrator CC 2015 für Webdesigner: Webgrafik optimieren

Die Export-Dialoge im Überblick

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Es gibt viele Möglichkeiten, die in Illustrator gestalteten Inhalte in andere Formate zu exportieren. Das Video gibt einen Überblick über die verschiedenen Möglichkeiten der Export-Dialoge.

Transkript

Illustrator bietet verschiedene Möglichkeiten, Webgrafiken und Elemente aus dem Illustrator-Dokument, ja ganze Zeichenflächen oder das gesamte Dokument zu exportieren und natürlich das auch für Webgrafiken und viele weiteren Datenformate mehr. Ich möchte Ihnen in diesem Video einen kleinen Überblick über die neugestalteten Export-Funktionen geben und beschränke mich dabei allerdings zunächst einmal auf 2 Stück, und zwar finden Sie diese unter dem Menüpunkt Datei Exportieren. Und wenn Sie Vorgängerversionen gekannt haben, dann finden Sie dort auch etwas weiter oben, also nicht in so einem speziellen Unterpunkt, sogar die Möglichkeit "für Web speichern unter". Und diese Funktion, die ist jetzt hier im Export-Dialog mitgelandet. Die schauen wir uns aber in einem weiteren Video an. So, damit haben wir im Grunde zwei Export-Funktionen, und wenn wir die "Speichern unter"-Funktion mitnehmen, dann sogar drei Möglichkeiten. Ich rufe das mal auf, "Speichern unter", gehe mal kurz in einen Ordner, in dem ich das hineinspeichern könnte. Dann sieht man, habe ich natürlich ganz normal das Speichern als Illustratorfall. Ich kann aber auch hier unten beim Format auswählen, ob ich das Ganze als EPS, als PDF, oder, das ist vielleicht das Interessanteste, auch als Webvektor-Format [] Vektorgrafiks, also SVG gespeichert werden soll. Dann kann ich auch hier entscheiden, ob die Zeichenflächen, also wenn ich das auswähle, so, ob Zeichenflächen verwendet werden, und zwar alle, das Dokument oder nur ein bestimmter Bereich. So, also diese Möglichkeit, die besteht natürlich. Es ist aber keine direkte Webgrafik im eigentlichen Sinne, sondern da handelt es sich ja nur um ein Vektorformat. Also haben wir die Export-Funktion, und auch da gibt es hier zwei interessante Neuerungen. Schauen wir uns erstmal diesen "Exportieren als..."-Dialog an. So, hier öffnet sich nun auch wieder der Dialog, wo wir gerade drin waren. Und nur habe ich hier jetzt etwas andere Formate zur Auswahl. Und da taucht zum Beispiel auch das PNG auf. Ich gehe mal wieder in "export_uebungen". So, und auch hier habe ich dann die Möglichkeit, die Auswahl der Zeichenflächen zu treffen oder nur eine bestimmte Anzahl der Zeichenflächen auszuwählen, et cetera. Ja, und zur Vefügung stehen hier von den klassischen Webgrafikformaten - das Format PNG. Dann haben wir etwas weiter unten das JPEG, und da hört es in der Form eigentlich schon auf. Man sieht allerdings, auch hier taucht das SVG wieder auf, und ich habe noch ein paar andere Formate, ja einschließlich sogar Photoshop, Flash, et cetera, auf das ich zurückgreifen kann. Ein kurzer Hinweis war, der hier gerade an zweiter Stelle steht zu dem Dateiformat BMP, also der Bitmap. Bitte nicht drüber hinwegtäuschen lassen, gerade auf Windows-Betriebsystemen kommt das schon mal vor, dass man eine Bitmap, also eine BMP-Grafik in einem Webbrowser öffnet, und es wird auch angezeigt. Es ist aber trotzdem, es soll nicht dadrüber hinwegtäuschen, dass es keine geeignete Webgrafik ist, weil es eben viele Browser gibt, die das überhaupt nicht interpretieren als Webgrafik. Also, das heißt, hier drüber haben wir auch die Möglichkeit. Und das Besondere, ich wähle jetzt mal hier das PNG aus, insbesondere über diesen Export ist, ich nehme mal die Zeichenfläche und beschränke mich mal auf die Zeichenfläche 1, so, dass sich dann ein weiterer Dialog öffnet. Und dieser Dialog, der ist abhängig von dem Format, was ich im Vorfeld ausgewählt habe. Da sieht man, kann ich nun sagen, ich möchte das Ganze für Bildschirm taugliche Ausgaben haben in mittlerer PPI, also Pixel per inch Dichte oder sogar hochauflösend für beispielsweise den Druck. Und dann habe ich als zweites, was die Glätten-Algorithmen angeht, wie es auch schön in dieser Information gezeigt wird, die Möglichkeit auszuwählen, ob das Ganze ohne Glättung stattfindet, das ist in der Regel nicht zu empfehlen, oder für das Bildmaterial oder alternativ für Schriften optimiert ist. Da kann man keine Empfehlung geben. Also wenn Sie schwerpunktmäßig Bildmaterial haben, dann natürlich ist diese Auswahl das Supersampling sicherlich die bessere Wahl, haben Sie sehr viel Text, vor allen Dingen sehr kleinen Text, dann eher diese schriftenoptimierte Option, die man da in dem Moment empfehlen kann. Ja, dann haben wir noch die Wahl zwischen "Interlaced" und "Nicht Interlaced". Das bedeutet nichts Anderes, wie vielleicht haben Sie das im Web schon mal gesehen, wenn Sie eine Grafik aufrufen und die braucht etwas länger, weil sie größer ist. Dann ergibt das manchmal so wie so einen Jalousien-Effekt, oder sie erscheint langsam, sukzessive Schrittweise. Und das ist der Fall, wenn Sie diese Option "Interlaced" aktivieren, Dann ist das wie so ein Jalousien-Effekt. Hat den Vorteil, dass der Browser nicht komplett warten muss, bis eine Grafik geladen ist, bevor er sie überhaupt darstellen kann. Und somit kann man mit größeren Grafiken hier die Zeit überbrücken, dass der Benutzer dann die Webseite nicht wieder verlässt, weil er gar nicht sieht. Ja, und dann habe ich die Möglichkeit, hier verschiedene weitere Sachen noch auszuwählen, die die Transparenz beziehungsweise die Hintergrundfarbe betrifft, aber hier keine Transparenzen haben doch hier unten. Da sieht man das, da ist noch eine Transparenz mit im Spiel, glaube ich zumindest, könnte ich das jetzt entsprechend auswählen. Ja, und je nach Auswahl, was ich dann hier eingestellt habe, bin ich in der Lage, diese Grafik zu exportieren. Ich mache das jetzt mal und Sie sehen, dass wird dann relativ zügig geschrieben und der Export ist erledigt. So, zweiter Prozess oder genauer genommen dritte Funktion, dritter Dialog ist, nicht diesen "Exportieren als", sondern für "Bildschirme exportieren" auszuwählen. So, und da sieht man, es ist ähnlich aufgebaut. Auch hier habe ich wieder die Möglichkeit, auszuwählen, welche Elemente oder Zeichenflächen jetzt in dem Falle ich haben möchte. Ich kann sie alle auswählen. Ich kann das vollständige Dokument ausdrucken beziehungsweise abspeichern. Ich kann aber auch nur einen Bereich auswählen, wie ich das jetzt hier einmal gemacht habe. Dann exportieren nach dem Ziel, also den Ordner zur Ablage der Dokumente. Und das Besondere an diesem Dialog ist die Möglichkeit, verschiedene Formate hier auszuwählen, das heißt, ich kann zum Beispiel auch ein Format mal zum Beispiel JPG, also PNG und JPG. Nehmen wir mal hier JPG 20, also in einer sehr niedrigen Auflösung, und JPG 100. Das kann ich zum Beispiel auswählen. Und dann auch, wie man hier erkennen kann, verschiedene Vorgaben für zum Beispiel iOS-Geräte. Ja, da haben wir also dann hier jetzt in der Auswahl, was die Skalierung betrifft, aber da kommen wir zu einem späteren Zeitpunkt nochmal zu. So, ich werde das mal gerade wieder umstellen, also einmal 20 und zum Beispiel einmal 100, so Suffix brauchen wir nicht. Doch, den nehmen wir, den nehmen wir mit rein, damit wir das unterscheiden können. So, dann exportiere ich das auch mal. Und Sie sehen, das geht ebenfalls relativ schnell. Wenn wir uns jetzt diese drei exportierten Dateien einmal anschauen, dann haben wir hier einmal den ersten Export. Das war das PNG. Das ist ein ganz normales Dokument. Da gibt es eigentlich so gar nicht viel zu sagen. Dann haben wir den Export mit einer sehr niedrigen Auflösung. Man sieht aber, es gibt gar keinen großen Unterschied in der Dateigröße. Und ich rufe beide mal auf mit einem Webbrowser, mit Google Chrome. So, und da haben wir hier das Mock-Up 20, und das Mock-Up 100. So, und wenn man zwischen den beiden hin- und herschaltet, ich weiß nicht, ob man da jetzt einen Unterschied erkennt, na nicht wirklich, müsste jetzt wirklich suchen. Also hier haben wir zweimal die gleiche Dateigröße, und zweimal im Grunde fast keinen Unterschied von der Optik her. Also, man sieht, man kann so exportieren. Man hat den Vorteil, auf verschiedene Dateien, Formate oder Grafikformate zu wechseln. Aber die eigentlich Stärke dieses Export-Dialoges über "Für Bildschirm exportieren" liegt eher darin, dass man hier vorgefertigte und speziell für mobile Endgeräte vorgefertigte Versionen ein und desselben Dateityps exportieren kann. Und damit kennen Sie die schwerpunktmäßig zwei, in Wirklichkeit drei Exportfunktionen, mit Ausnahme des "Für Web speichern"-Dialoges, den ich im nächsten Video Ihnen zeigen werde.

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!