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

Der "Für Web speichern"-Dialog im Überblick

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Speziell zum Speichern web-optimierter Grafiken steht der "Für Web speichern"-Dialog zur Verfügung. Die besondere Stärke dieses Dialogs liegt in der Möglichkeit, alle Komprimierungsstufen und Einstellungen direkt mit der Dateigröße und dem optischen Ergebnis abzugleichen.

Transkript

In diesem Video zeige ich Ihnen den speziellen "Für Web speichern"-Dialog als Exportfunktion, "Legacy" wird es auch genannt. Der große Vorteil dieses Dialoges liegt einfach in der präzisen Auswahl und Vorschau, welches Format, welches Datenformat in welchen Kompressionsstufen mit welchen Einstellungen das beste Ergebnis liefert, ohne alles direkt exportieren zu müssen. So, und diesen Dialog können Sie aufrufen unter Datei Exportieren Für Web speichern, und da sehen Sie, da gibt es auch eine Tastenkombination. Das ist die Option-Taste oder Alt-Taste, dann die Shift-Taste und die Command- oder Strg-Taste + S. Also man muss schon sich die Finger ein bisschen verbiegen. Ich rufe es meistens einfach so mit der Maus auf. So, und dann haben wir hier einen Dialog, der ist sehr sehr mächtig und nicht neu im eigentlichen Sinne, also seit es Illustrator oder Photoshop gibt, sind diese Dialoge bekannt, aber die Besonderheit hierbei liegt wirklich an der Menge, an dem Funktionsumfang und an den Möglichkeiten der Darstellung. Das schauen wir uns in diesem Video einmal etwas genauer an. Zunächst einmal haben wir hier links ein paar Werkzeuge, die man auswählen kann, also zum Beispiel auch das Slice-Auswahl-Werkzeug, wenn man hier in dieser Vorschau bestimmte Objekte aus dem Gesamtobjekt ausschneiden möchte. Dann natürlich haben wir eine Lupe, um ein- oder auszuzoomen, das Ganze kann man eben auch hier an der Stelle mit direkter Prozentangabe machen. Ich habe Pipetten, um mir bestimmte Werte, Farbwerte rauszuholen, dann habe ich Farbwähler in der Form, die ich auswählen kann, also die Pipettenfarbe, Slices die ein- und ausgeblendet werden können, also all diese Werkzeuge, die sind möglich. Dann dieses eigentliche Hauptfenster, das hat hier interessante Informationen. Wir haben also im Moment die Orginalgrafik, und die ist 11,4 MB groß. So, und wenn man diese Grafik ändert, beziehungsweise das, worauf die Grafik basiert hinterher, dann bekomme ich hier weitere Informationen über die Größe. Ja, dann haben wir entsprechend, wenn Sie mit der Maus über die Grafiken gehen, auch immer die Hinweise, um was es sich für Hex-Werte, für RGB-Werte, für Alpha-Werte, wenn sie vorhanden sind, handelt. Das ist ganz wichtig, um zum Beispiel auch im Schnelldurchgang einfach mal abzutesten, was haben wir denn hier, es sind die Farben hier, die sehen unterschiedlich aus, sind die wirklich gleich? Und hier sieht man zum Beispiel schon, die sind unterschiedlich. Links das Blau hat einen Hex-Wert von 4393BE und hier 4495C0, also das heißt, 67,68 im RGB-Bereich, da gibt es einen kleinen Unterschied. Und das wäre so gar nicht aufgefallen, müsste ich also jetzt theoretisch sogar noch anpassen, wenn ich "Farbechtheit" hierfür haben möchte. Dann können Sie die Vorschau auswählen, damit wird ein Standardbrowser geöffnet, falls Sie den nicht haben wollen, können Sie hierdrüber immer noch einen Browser auswählen und sich dann das gesamte Dokument oder zumindestens das Objekt, was hier dargestellt wird, in einem Webbrowser anschauen. Das ist auch durchaus empfehlenswert, je nachdem, was Sie sich da genau betrachten möchten. Bevor wir hier in diese große Einstellung hinüberkommen, haben wir die Möglichkeit auch, mir zum Beispiel die optimierte Version anzuzeigen, also das war das Original gerade eben, und ich habe jetzt ausgehend von der Vorgabeeinstellung hier stehen, dass es sich um ein GIF handelt und dieses GIF ist nicht mehr 11,4MB groß, sondern nur noch 407 Kilobyte. Das ist also schon ein rieser Unterschied. Man kann aber, wenn man genau hinschaut, hier bereits die Artefakte erkennen, die durch diese wenigen Farben zum Beispiel, die das GIF mit sich bringt, da entstehen durch. Das Ganze kann ich sogar in einer zweifachen Variante machen, wo ich dann zum Beispiel hier sage, bitte stelle mir nach Vorgabe das Orginal ein und hier auf der rechten Seite zum Beispiel die optimierte Version. Oder Sie sagen einfach, ich möchte eine optimierte Version und eine andere optimierte Version haben. Jetzt haben wir hier zum Beispiel auch wieder ein GIF, aber mit einer sehr reduzierten Palette, verlustfrei, aber ganz ganz wenige Farben, das sieht man auch schon an der Farbtabelle, die wir hier haben, und hier das normale GIF, hier ist der Farbumfang größer, aber immer noch beschränkt auf 256. Und da sieht man schon sofort die Auswirkungen: 85 Farben, 256 Farben, 157,5 KB, 407 KB. Aber sein wir mal ganz ehrlich, wirklich nutzbar ist das zumindestens hier im Fotobereich nicht. Was anderes wäre das, wenn es Objekte sind, die so aussehen. Also wenn Sie sagen: "das reicht mir von der Qualität her", dann ist das nicht ganz das vierfache kleiner wie hier das, und das ist schon Etliches. Also ich stelle das Ganze jetzt erstmal wieder auf Orginal um, damit wir das Orginal auf der linken Seite haben und hier auf der rechten Seite dann mal die Einstellung der unterschiedlichen Möglichkeiten. So, und die schauen wir uns dann hier an. Da gibt es also auch Vorgaben. Und zwar haben wir eine größere Auswahl an unterschiedlichen GIF-Einstellungen: Einmal die Web-Palette, die ich Ihnen gerade schon gesagt habe, ist eine sehr beschränkte Farbpalette, und das hat dann auch alles im Grunde etwas mit den Farben zu tun, also 128 Farben, 32 Farben, ob dieses Dithering drin vorkommt oder nicht, das hat auch was damit zu tun, was so Annäherungsberechnungen sind, also da werden Farben angeglichen. Ein Dithering ist wieder qualitativ etwas hochwertiger, braucht aber wiederum mehr Speicherplatz je nachdem, und das können Sie also auswählen. Dann haben wir drei Punkte JPGs oder drei Auswahlmöglichkeiten JPGs, nämlich einmal in einer hohen, in einer mittleren und niedrigen Qualität, sowie die PNG-Grafiken, einmal die Farbtiefe 24, maximale Farbtiefe, so, das sehen wir hier und da sind wir dann aber auch schon bei 956,7 KB. Das ist schon heftig. Bei 8 zum Beispiel, da sieht es anders aus, und ja wenn man sagt, das reicht mir von der Qualität her in der Vorschau, sind wir da bei 221 round about. Also ich wähle mal jetzt zum Beispiel ein "JPG Hoch" aus, da sind wir bei 325, ist also ein bisschen mehr wie gerade eben. Und dann kann ich hier über diese Einstellungen zusätzlich alles noch einmal definieren, also ob hoch, mittel, sehr hoch zum Beispiel, da sind wir jetzt bei 80% Qualität. Das ist so in der Regel eine extrem gute Darstellung, aber hat schon fast ein halbes MB und das ist im Grunde schon wieder zu viel für die Darstellung im Web. Deswegen findet man auch die Standardeinstellungen "Hoch" mit 60%, 325 das geht gerade noch so, und dann können Sie sagen, ob das Ganze auch hier wieder interlaced oder progressiv sein soll, ob das Ganze weich gezeichnet werden soll et cetera und später, das ist auch ganz interessant für die Bildgröße, grade bei dem Export auch von unterschiedlichen responsive Versionen für mobile Endgeräte. Auch hier habe ich da die Möglichkeit mit zu arbeiten. Ich kann ganze Zeichenflächen exportieren oder eben nur auch Auswahl davon, also das sieht man jetzt hier, da werden dann einzelne Elemente herausgerechnet. Das ist aber in der Regel nicht unbedingt das Beste. Also ich gehe wieder auf ganze Zeichenflächen, dann passt es auch wieder. So und ich kann natürlich sagen auch hier wieder, ob das Bildmaterial oder die Schrift optimiert werden soll. Und somit haben Sie wirklich nur in diesem einen Dialog schon eine ganz große Möglichkeit, Ihre fertigen Designs und Layouts zu überprüfen, abzutesten anhand der Größen, die Sie hier haben, und die richtigen Einstellungen dann dafür zu wählen, ohne jedes Mal im Vorfeld abspeichern zu müssen, zum Beispiel den Browser aufrufen zu müssen, sich das anschauen, welche Qualität hat das und das dann mit der Dateigröße vergleichen. Das bekommen Sie alles hier schön in diesem einen Dialog, und somit kann man dort dann sehr schöne Voreinstellungen tätigen und dann bleibt im Grunde nur noch über, je nachdem, was Sie jetzt hier ausgewählt haben, also zum Beispiel "JPEG Hoch", das Ganze zu speichern, dann wird die Datei geschrieben, also die JPG-Datei geschrieben, oder Sie klicken auf "Fertig", dann merkt er sich für den nächsten Export diese Einstellungen, die Sie hier gewählt haben, auch ganz wichtig, oder last but not least Sie klicken auf "Abbrechen" und dann wird entsprechend der Dialog wieder geschlossen. Das mache ich jetzt auch an der Stelle mal und beende den Dialog. Auf jeden Fall kennen Sie jetzt diesen "Für Web speichern"-Unterdialog, ein ganz mächtiges Werkzeug für die Bewertung des richtigen Grafik-Webformates.

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!