Share
Die Funktion "Für Web speichern" in Adobe Illustrator hat das Ziel, Grafiken für die Verwendung auf einer Website oder einer anderen Bildschirmanzeige, z. B. einem Telefon oder Tablet, zu optimieren. Das Wort "Optimieren" bezieht sich auf die optimale Balance zwischen Dateigröße und Qualität. Wir möchten kleine Dateigrößen, damit sie schnell auf eine Webseite geladen werden können, aber wir möchten nicht ihr Erscheinungsbild opfern. Mit „Für Web speichern“ können Sie eine Vorschau anzeigen, wie eine optimierte Vektorgrafik aussehen wird, sodass Sie den besten Kompromiss auswählen können.
In diesem Artikel gehe ich auf die Dateiformate ein, die unter "Für Web speichern" verfügbar sind, und zeige Ihnen, welche Formate für verschiedene Arten von Grafiken am besten geeignet sind.
Sie greifen auf die Speichern Sie für Web Dialog unter der Datei Speisekarte. Save for Web ist an sich schon fast eine Anwendung, und das Dialogfenster nimmt den Großteil Ihres Bildschirms ein.
Sie haben drei Möglichkeiten, eine Vorschau Ihres Kunstwerks anzuzeigen. Sie können das Original einfach alleine zeigen. Dies scheint jedoch eher nutzlos zu sein, da Sie wahrscheinlich sehen möchten, wie die Grafik aussehen wird, sobald sie optimiert ist. Sie können die optimierte Vorschau allein anzeigen oder auswählen 2-Up, Dadurch erhalten Sie nebeneinander Voransichten. Sie können auf eines der Fenster klicken, um die Einstellungen anzupassen. In der Abbildung unten befindet sich das Original links und die optimierte Version (in diesem Fall als GIF) rechts.
Sie können die Größe der Vorschau im Dropdown-Menü unten links anpassen. Sie können auch bekannte Tastaturkürzel wie verwenden Befehl / Steuerung-0 um das Kunstwerk in das Fenster zu bringen, oder Befehl / Steuerung plus oder Minus- um die Vergrößerung zu erhöhen oder zu verringern.
Klicken Sie auf die Vorschau Schaltfläche öffnet die optimierte Grafik in Ihrem Standardbrowser. Wenn Sie sehen möchten, wie es in anderen Browsern aussieht, können Sie weitere hinzufügen, indem Sie auf das kleine Globus-Symbol neben der Schaltfläche Vorschau klicken.
Einer der wichtigsten Abschnitte der Save for Web-Benutzeroberfläche ist die Dateigröße. Unter jeder Vorschau befindet sich der Dateityp und seine jeweilige Größe. In der Abbildung unten befindet sich auf der linken Seite das Original-EPS mit einer Dateigröße von 2,44 MB. Die optimierte GIF-Datei befindet sich auf der rechten Seite mit einer wesentlich kleineren Dateigröße von etwa 39 KB. Da Save for Web zum Ziel hat, die ideale Balance zwischen Größe und Qualität zu finden, werden diese Zahlen häufig betrachtet.
GIF ist eines der ältesten und am häufigsten verwendeten Formate im Web. Dies ist ideal für Bilder mit flachen Farbbereichen, wie in diesem Beispiel. Der GIF-Farbraum ist indizierte Farbe. Auf diese Weise können Sie eine genaue Anzahl von Farben in der Farbtabelle angeben, sodass Sie nur die Farben verwenden können, die Sie benötigen, wodurch die Gesamtdateigröße reduziert wird.
Der Dialog "Speichern für Web" enthält mehrere GIF-Voreinstellungen. Wählen Sie andere Einstellungen und behalten Sie das Bild und die resultierende Dateigröße im Auge. In der Abbildung unten habe ich eine Voreinstellung mit 128 Farben verwendet. Wie Sie sehen, sieht das Bild gut aus und die Dateigröße beträgt 37,72 KB.
Im nächsten Beispiel habe ich nur 8 Farben ausgewählt. Die Dateigröße beträgt jetzt 23,3 KB. Es ist eine erhebliche Einsparung, aber das Image verliert an Qualität. Die Kanten sind rau, da nicht genügend Farben vorhanden sind, um die Übergänge zwischen den einzelnen Formen auszufüllen. Obwohl nur fünf Farben in der Abbildung vorhanden sind - drei Schattierungen in Blau, Gelb und Weiß -, verwendet Illustrator beim Anti-Aliasing-Verfahren mehr Farben, sodass die Kanten und Kurven glatt erscheinen.
GIF-Farben können auf diejenigen beschränkt werden, die als "Web-Safe" gelten. Dies ist heutzutage nicht wirklich ein Problem, da Monitore Millionen von Farben anzeigen können, aber es gab eine Zeit, in der Designer empfohlen wurden, nur die 216 Farben zu verwenden, die Windows- und Macintosh-Systeme gemeinsam nutzen. Wenn Sie also sicherstellen möchten, dass Ihre Grafik auf jeder Plattform gleich aussieht, beschränken Sie ihre Farben auf diese Palette. Im folgenden Beispiel habe ich die verwendet Web-Palette voreingestellt, und Sie können sehen, wie sich die hellblaue Farbe in ein grünliches Blau verschoben hat.
Ein GIF kann schwarzweiß sein und verwendet ein sogenanntes Dithering, um einen Dauerton zu simulieren. Sie können verschiedene Dithering-Methoden wählen, aber alle haben einen entschiedenen 80er-Look.
GIFs unterstützen eine Transparenzebene. Das bedeutet, dass jedes Pixel entweder durchgehend oder vollständig transparent ist. Sie würden keine GIF für ein Bild mit weichem Schatten oder transparentem Verlauf verwenden.
Neben dem Kontrollkästchen Transparenz können Sie eine Mattfarbe auswählen. Dadurch wird das Bild in dieser Farbe leicht konturiert. Wenn Sie also das GIF auf einen farbigen Hintergrund stellen, können Sie dieselbe Farbe wie die Mattfarbe auswählen. Auf diese Weise wird der Übergang zwischen der Grafik und dem Hintergrund glatt dargestellt.
Sie können das Bild an der Zeichenfläche befestigen, wodurch die Pixelabmessungen der gespeicherten Grafik der Illustrator-Zeichenfläche entsprechen. Sie können auch dieses Kontrollkästchen nicht aktivieren, wodurch das Bild an die Grenzen der Vektorgrafiken gekürzt wird. Dies ist die Einstellung, die Sie wahrscheinlich am häufigsten verwenden werden, da für das Bild keine zusätzliche Transparenz erforderlich ist. Die resultierende Dateigröße wird ebenfalls kleiner sein.
Im Abschnitt Bildgröße können Sie die optimierte Grafik verkleinern oder vergrößern. Die Nomenklatur ist hier etwas mehrdeutig. Es bezieht sich nicht auf die Dateigröße des Bildes in Kilobyte, sondern auf die Pixelgröße, ausgedrückt als Breite und Höhe.
Hier hat Illustrator gegenüber Raster- oder Pixelanwendungen wie Photoshop einen Vorteil. Wenn Sie das Bild für eine optimierte Ausgabe vergrößern, verwendet Illustrator die Vektorinformationen in der Datei für die Vergrößerung, und die resultierende Grafik ist scharf und glatt. Wenn Sie in Photoshop „Für Web speichern“ verwenden und versuchen, ein Rasterbild zu vergrößern, würde das vergrößerte Bildmaterial unscharf aussehen.
Unter den Feldern für die Bildgröße befindet sich ein Dropdown-Menü, in dem Sie die Optimierungsmethode auswählen können. Wenn Ihre Grafik textlastig ist, wählen Sie möglicherweise Typoptimiert. In den folgenden Beispielen sehen Sie den Unterschied zwischen dem optimierten Bild und einem Bild, auf das keine Optimierung angewendet wurde.
Die Farbtabelle enthält Farbfelder für jede Farbe, die in der optimierten Grafik enthalten sein wird. Sie können tatsächlich auf ein Farbfeld doppelklicken und dessen Farbe ändern. Hier habe ich das Gelb in Pink geändert. Sie sehen, dass das Farbfeld in der Farbtabelle jetzt halb gelb und halb rosa ist. Wenn Sie den Mauszeiger darüber halten, erhalten Sie mit dem Tooltipp die RGB-Aufteilung für das Original und für die neue Farbe. Dies kann nützlich sein, wenn Sie eine Serie desselben Bildes speichern und ein Element in jeder Version eine andere Farbe haben soll. Durch das Ersetzen der Farbe in "Für Web speichern" müssen Sie den ursprünglichen Vektor nicht ändern.
Unter der Farbtabelle befindet sich eine Reihe von Symbolen, mit denen Sie die Farbe weiter anpassen können. Wenn Sie ein Farbfeld auswählen, können Sie es transparent machen, auf eine sichere Webfarbe beschränken, es sperren oder löschen. Ein Raute in einem Farbfeld zeigt eine sichere Webfarbe an. Wenn Sie den Mauszeiger darüber halten, wird der Hexadezimalcode angezeigt.
Es gibt einige weitere Einstellungen und Vorgehensweisen, die Sie mit GIFs verwenden können. Sie können beispielsweise die GIF-Funktion verschachteln, wodurch das Bild in mehreren Durchgängen in einem Browser geladen wird. Diese Methode wurde in den Tagen entwickelt, als die meisten Leute langsame DFÜ-Verbindungen hatten. Eine interlaced Grafik scheint schneller zu laden als sie tatsächlich ist. Es gibt keinen Grund, es heute zu verwenden, insbesondere bei einer relativ kleinen Datei wie einer GIF. Die anderen Optionen in den GIF-Einstellungen sind entweder hochspezialisiert oder etwas veraltet, sodass ich nicht mehr Zeit darauf verwenden werde. Lassen Sie uns zu den anderen Formaten übergehen!
Das PNG-Format (manche sagen "P-N-G" und andere sagen "Ping") ist oft eine bessere Alternative zu GIF. PNG-8 ist ähnlich wie GIF, da es 256 Farben verwendet, 1-Bit-Transparenz unterstützt und Dithering verwenden kann. Die "8" bedeutet, dass es sich um ein 8-Bit-Bild handelt. Der Hauptunterschied zwischen den beiden ist die Art und Weise, wie sie die Bildinformationen komprimieren. GIF verwendet eine "verlustbehaftete" Methode, was bedeutet, dass einige Daten verworfen (oder "verloren") werden, um eine kleinere Dateigröße zu erreichen. Die PNG-Methode ist verlustfrei, aber aufgrund ihres Komprimierungsalgorithmus ist die resultierende Dateigröße oft erheblich kleiner als eine GIF. Warum sollten Sie dann sogar eine GIF verwenden, wenn PNG besser ist? Nun, nicht alle Browser unterstützen das PNG-Format (ich sehe Sie an, Internet Explorer 6!). Aber da immer mehr Benutzer auf neuere Browser aufrüsten, ist dies kein so großes Problem. Probieren Sie also PNG-8 für Bilder aus, für die normalerweise eine GIF erforderlich wäre. Die meisten Optionen für PNG-8 sind die gleichen wie für GIF im vorherigen Abschnitt.
JPEG wurde ursprünglich zum Komprimieren von Fotos entwickelt und eignet sich daher am besten für Vektoren mit kontinuierlichen Tönen. JPEGs sind 24 Bit und unterstützen somit weit über 16 Millionen Farben. Die JPEG-Komprimierung ist verlustbehaftet und das Bild wird beeinträchtigt, wenn Sie versuchen, es zu stark zu komprimieren. Im Bild unten sehen Sie blockierte JPEG-Artefakte, die unerwünscht sind. Wählen Sie eine höhere Qualitätseinstellung, bis Sie mit einer akzeptablen Dateigröße eine schönere Grafik erhalten.
Sie können wählen, ob Sie das Bild in mehreren Durchgängen laden möchten, indem Sie Progressiv auswählen. Sie können das Bild auch verwischen, um einige der Artefakte zu mildern. Keine dieser Methoden ist ideal oder eigentlich notwendig. Sie sind eine Rückbesinnung auf die Tage der DFÜ-Verbindungen und langsameren Maschinen.
Wie bei GIF und PNG-8 können Sie im Feld Bildgröße eine Pixelgröße angeben, die Optimierungsmethode auswählen und festlegen, ob das Bild auf der Zeichenfläche ausgeschnitten werden soll. Es gibt keine Farbtabelle, da sich JPEGs im RGB-Modus und nicht in indizierten Farben befinden.
JPEG eignet sich gut für Bilder mit Dauerton, eignet sich jedoch nicht für Grafiken mit größeren Flächen in flachen Farben. Im folgenden Beispiel befindet sich das JPEG auf der rechten Seite. Selbst bei höchster Qualität sieht es schlechter aus als die GIF und zeigt einige Artefakte.
PNG-24 ist, wie der Name schon sagt, ein 24-Bit-Bild. In gewisser Weise kombiniert es das Beste aus beiden Welten von GIF und JPEG und ist ein überlegenes Format. Wie JPEG unterstützt es Millionen von Farben. PNG-24 kann auch Alphatransparenz enthalten, sodass es für Grafiken mit unscharfen Kanten und transparenten Schatten verwendet werden kann. Alle diese Farben und Transparenz sind jedoch mit einem größeren Preis verbunden. Im folgenden Beispiel können Sie sehen, dass ein JPEG, das in der oberen Einstellung gespeichert wird, fast 22 KB beträgt, während das PNG-Format etwa 95 KB beträgt. Mit der Transparenz können Sie die PNG-24-Grafik jedoch auf einen gemusterten oder strukturierten Hintergrund platzieren. Wenn Sie diese Flexibilität benötigen, ist PNG-24 der richtige Weg.
Ich hoffe, Sie haben ein besseres Verständnis für die Dateiformate der Funktion "Speichern für Web" in Illustrator. Jedes Format hat seine Vor- und Nachteile, aber mit ein paar sorgfältigen Tests können Sie die besten Einstellungen für Ihr Bildmaterial finden. Dies ist ein leistungsfähiges Werkzeug, das Ihren Web-Arbeitsfluss wesentlich einfacher und schneller machen kann. Wenn Sie die idealen Einstellungen für Ihre Bilder festgelegt haben, können Sie diese als benutzerdefinierte Voreinstellungen speichern. Dann können Sie ganze Ordner voller ähnlicher Bilder im Nu bearbeiten.
Vektorgrafiken in diesem Artikel wurden von GraphicRiver gekauft: Hausmeistervektor, Kürbisvektor.
Accentsconagua