Illustrator CC 2015 für Webdesigner: Webgrafik optimieren

Grafiken für HiDPI-Bildschirme optimieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
HiDPI-Grafiken betreffen sämtliche Geräte, die hochauflösende Grafiken bzw. sogenannte Retina-Displays bedienen. Wie solche HiDPI-Grafiken erzeugt werden und welche Möglichkeiten Illustrator durch die Exportdialoge bietet, zeigt dieses Video.

Transkript

Zugriffe auf Online-Angebote wie Websites finden bereits jetzt, wenn man den Statistiken glauben darf, zu über 50% mit mobilen Geräten statt. Und entsprechend ist es Aufgabe von uns Designern, auch diese mobilen Endgeräte zu bedienen. Ja, und nun haben Smartphones und Tablets in der Regel sogenannte hochauflösende, also sogenannte HiDPI-Bildschirme oder auch als Retina-Bildschirme bekannt oder der englische Begriff "Retina-Bildschirme". Diese Bildschirme, die müssen mit größeren Grafiken bedient werden, also man muss sich das so vorstellen, dass die Grafik eigentlich genau so groß ist, wie bei einem nicht so hochauflösenden Bildschirm. Aber durch die höhere DPI-Anzahl brauchen wir auch zum Beispiel doppelt oder dreifach so viel DPI. Ja und wer weiß, was es da alles gibt, vom iPhone angefangen bis zum Tablet-PC, Apples, sogenannte 5K-Bildschirme und vielleicht 8 und 16, was weiß ich, was in Zukunft da alles kommt. Das bedeutet also, dass wir hier immer auch die doppelte, dreifache, vierfache Anzahl an Pixeln zur Verfügung stellen müssen, um diese hochauflösenden Bildschirme zu bedienen. Wie kann man dabei vorgehen? Illustrator bietet da ganz fantastische Möglichkeiten an, und eine möchte ich Ihnen zeigen. Die habe ich auch in einem vorherigen Beispiel schon mal angesprochen, und zwar ist das "Für Bildschirme exportieren". Das ist recht schick, wenn man jetzt zum Beispiel sagt: "OK, ich möchte hier dieses große Bild exportieren". Ich lösche das mal gerade. So in der Form standardmäßig kann das zum Beispiel per "SVG" gestehen, also, das heißt, per Vektor orientiertes Format, und das wäre natürlich das Ideal, weil wir uns jetzt nicht mehr um Skalierung Gedanken machen müssen. Ist durchaus eine interessante Alternative. Beschreibe ich auch in einem anderen Kurs von mir. Aber es ist immer noch so, dass es unter bestimmten Voraussetzungen eben auch nicht funktioniert, weil die Browser das SVG nicht einwandfrei umsetzten oder wie auch immer. Hier geht es um Webgrafiken, also bleibt uns nichts Anderes übrig, wie zum Beispiel "PNG" oder "JPG" zu nehmen. So, und jetzt kann ich das hier in der Form so einstellen, damit das Ganze als JPG exportiert. Möchte ich da nochmal genauer drauf eingehen, dann habe ich auch hier die Möglichkeit, zum Beispiel zu sagen: OK, "JPG 100", "Farbmodell", dann "Schrift optimiert" oder wie auch immer, "Hintergrund optimiert". Das kann ich dann alles hier definieren für diese einzelnen Varianten. Ich kann aber auch, wenn ich jetzt zum Beispiel weiß, ich mache das für ein Smartphone, dann klicke ich einfach hier auf "iOS" und das SVG schmeiß ich mal raus. Und jetzt bekomme ich hier 1, 2, 3 Skalierungen, also und dieses "@3" steht jeweils für 300%, 200% und normal, also 100% Größe. So, jetzt möchte ich das Ganze aber nicht als PNG haben, sondern als JPG. Und wenn ich das Ganze jetzt abspeichere, dann habe ich drei Grafiken hier auf meinem Rechner. Schauen wir uns das mal kurz mit Photoshop an. So, das ist jetzt die größte Variante. Das sieht man hier an der 3. Und wenn man sich das jetzt hier genau betrachtet, dann ist das Ergebnis aber nicht so ganz zufriedenstellend. Also bei 300% habe ich hier doch schon einige Artefakte im Bild drin. Bei 200% ja ebenfalls und bei 100% na ja, OK, das würde jetzt eventuell gehen. Unschön ist auch hier der Rand. Das könnte man jetzt versuchen zu optimieren, indem man die Hintergrundgrafik noch ein bisschen verschiebt, also das kommt auch vor, oder ich schneide hier an dem Bild, was aber auch nicht so besonders toll ist. Also Sie sehen, es ist zwar eine schnelle Möglichkeit, aber andererseits, es ist auch nicht ganz optimal. Die Dateigrößen 45, 63 und 85 KB, na ja, liegen auch nicht ganz ideal, aber immerhin auch noch in der Größe, die man akzeptieren könnte bei den Pixeln. Wie kann man also anders vorgehen? Ich persönlich mag diese Option "Exportieren für Bildschirme" sehr gerne im Produktionsprozess. Möchte was ausprobieren, dann ist das eine sehr schnelle Methode und ich muss da nicht jedes Bild genauestens nachschauen, aber spätestens, wenn ich dann für das tatsächliche Rollout die Bilder exportieren muss, dann gehe ich da lieber anders vor, und zwar wieder über den "Für Web Speichern"-Dialog. Und hier habe ich die Möglichkeiten, eben das viel präziser, viel genauer einzustellen. Ich gehe also jetzt auf "100%", und aus den vorherigen Einstellungen weiß ich, dass ich hier das beste Ergebnis mit 75% erziele, also "Qualität 75%", und das Ganze dann für die Schriftart optimiert wird. So, und jetzt bin ich hier bei 20,03 KB. Das kann man vielleicht noch ein bisschen optimieren, aber wie gesagt, das lasse ich jetzt einfach so stehen und speichere das Ganze und auch an diese Stelle, und zwar für das 100er Bild. Ich übernehme mal den kompletten Dateinamen, schreibe aber hier eine 2 davor. Speichern wir das ab. Das Gleiche mache ich jetzt nochmal. Diesmal allerdings auch wieder für JPG, diesmal allerdings mit 200%. So, und da kommt jetzt eben diese Bildgrößenangabe zutage und bitte nicht verwechseln hier, weil hier zoomen Sie einfach nur in das Bild, aber das Bild bleibt in der Originalgröße. Und hier sieht man, wenn ich hier auf 200% gehe, verändern sich die Pixel. Also ich gehe nochmal zurück auf "100", da verändern sich die Pixel mit und das Bild wird tatsächlich skaliert. So, und jetzt sind wir hier an der Stelle drin mit 200%. Ich gehe zunächst mal wieder auf "75". Das Ergebnis wird gut sein. Die Frage ist aber: "Brauchen wir das jetzt bei der Größe?", weil jetzt habe ich ein wesentlich größeres Bild und damit auch weit auseinander stehendere Schriften beziehungsweise Buchstaben. Ich schaue mir einfach mal an, wenn ich jetzt auf "Bildoptimierung" gehe, ob die Schriften noch gut sind. Meiner Meinung nach: ja. Es ist kein Unterschied mehr zu erkennen, aber die Grafik ist besser. Und was macht die Größe? Okay, die ist sogar kleiner, wenn ich auf "Bildoptimierung" gehe. So, und da habe ich ein sehr schönes Ergebnis bei 75, und jetzt muss ich im Grunde nur nochmal kontrollieren, kann ich nicht noch ein Stück weit runter? Da ich jetzt hier die Bildoptimierung habe, ist die Frage, ob ich hier-- ich scrolle mal langsam runter, wenn ich Artefakte erkenne. Also, hier tauchen jetzt Artefakte definitiv auch. Ich bin aber auch schon bei 50, gehe mal ein bisschen höher wieder, immer auf 60, 65, ja, vielleicht so 68. Das würde ich mal sagen, ist OK. So, speichere ich auch ab. Das ist die Nummer mit 2 davor. Und genau in gleicher Weise verfahre ich mit dem Letzten. Das mache ich jetzt ein bisschen schneller. Auch hier gehe ich auf "300%", so. Dann stelle ich das Ganze wieder auf "JPG" und auf "Bildmaterial optimiert". Das wird mit ziemlicher Sicherheit ebenfalls passen, weil je größer, desto weniger muss ich das eigentlich umschalten. So, also von der Seite her, denke ich mal, sieht man das auch, gibt es da keinen wirklich nennenswerten Unterschied. Und jetzt muss ich nur ebenso schauen, gibt es eine Verbesserung, wenn ich das Ganze hoch scrolle? Ja, tut es auch, aber das ist nicht mehr so gravierend. 60 ist schlecht, aber 64, 65, glaube ich, kann man lassen. Ja, das ist jetzt nicht mehr allzu viel Unterschied, aber das Ganze speichere ich ebenfalls unter 300% nun ab, auch hier eine 2 davor. Und das Ergebnis schauen wir uns jetzt nochmal in Photoshop an. Schauen wir nochmal ganz kurz auf die Dateigrößen, denn hier sieht man, mit dem, was ich persönlich quasi manuell eingestellt habe, habe ich im Gegensatz zu der vorherigen Auswahl sogar die Hälfte. Hier sind wir jetzt nicht mehr ganz so weit weg - 47 zu 63 und 77 zu 85. Aber bei allen drei Bildern gilt, dass ich die Dateigröße nochmals optimieren konnte. So, und wenn wir uns jetzt das Ganze auch noch in der Qualität anschauen einmal mit Photoshop, dann sehen wir hier das zuvor im Automationsprozess erzeugte Bild, und hier es fällt sofort auf, dass wir hier die Ränder weghaben. Das kann ich versuchen, im Original natürlich durch Skalierung der Hindergrundgrafik zu verändern, aber es ist auch schon mal ein Problem. Das wird hier deutlich. Und auch von der Qualität her würde ich ganz einfach sagen, ist das Bild, wenn Sie mal hier auf den Himmel schauen, beim schnellen Wechsel einfach besser bei kleinerer Dateigröße. Nächstgrößere Variante. Ich kann es Ihnen jetzt schon verraten: wird genauso sein. So, das heißt, das ist das Original, was ich im Automationsprozess erzeugt habe. Das ist das, was ich manuell eingestellt habe. Und auch hier denke ich, stimmen Sie mir bei, wenn Sie da mal genau reinschauen beim schnellen Wechsel, das manuell erstellte Bild hat weitaus bessere Qualität wie die anderen, und genauso ist es dann auch bei Nummer 3 der größten Auswahl, und die ist so groß, die muss ich sogar jeweils zu 100% vergrößern, damit wir da was sehen können. So. Und wenn man da jetzt das Ganze mal ein bisschen an die Stelle nimmt, und hier, dann fällt das schon direkt auf, da braucht man gar nicht mehr hin und her. Es ist schon hier mit dieser Treppenbildung ganz gravierend. Also, da sind wir im Grenzbereich, 400% wird die Grafik wahrscheinlich nicht mehr schaffen. Hier kann man jetzt sagen: "OK, geht noch vielleicht", aber da sind wir auf jeden Fall im Grenzbereich, trotz alledem: die Qualität meiner Meinung nach ist immer noch besser wie die automatisch erzeugte. Auch, wenn es jetzt hier schon sehr eng beieinander liegt. Und somit sehen Sie, dass also durchaus es eine tolle Funktion ist, dass man hier "Exportieren für Bildschirme" verwenden kann. Aber letztendlich für die eigentliche Produktion hinterher, für das eigentliche Rollout, kann ich Ihnen wirklich nur empfehlen, gehen Sie da manuell ran. Und wenn Sie es auch nur anschauen, was die Einstellungen angeht, die kann man ja hinterher auch automatisieren und einstellen über die Einstellungen, aber auf jeden Fall sieht man, dass man hier immer nochmal ein paar KB rausholen kann und auch, dass das Ergebnis in den meisten Fällen bei der manuellen Einstellung weitaus besser ist.

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!