Exportieren Sie ein hochauflösendes Logo für das Web in Illustrator?

Ich habe ein Logo in Illustrator erstellt, das ich zum Drucken verwendet habe, aber jetzt brauche ich es für eine Website. Wie konvertiere ich es, damit ich ein hochauflösendes Bild für das Web habe?

Ich bin nicht webaffin, das ist für mich der erste Tritt in die Dose.

Sie benötigen keine "hohe Auflösung". Sie benötigen eine bestimmte Größe in Pixeln.
Was meinst du mit "konvertieren"? Was umwandeln? Abgestimmt, um als unklar zu schließen, was Sie fragen.

Antworten (3)

Versuchen Sie zunächst, Ihre Fragen so konkret wie möglich zu stellen. Es hilft denen, die dir helfen wollen.

Jetzt können Sie ein Logo exportieren, das Sie verwenden können

Datei > Für Web speichern.

Hier sind einige Dinge zu beachten:

1. Größe in Pixel

Es ist wichtig, dass Sie das Logo in der richtigen Pixelgröße exportieren. Wenn es zu groß ist, muss der Benutzer eine unnötig große Datei herunterladen, was Ihre Website verlangsamt und zu einer schlechten Erfahrung führt. Wenn es zu klein ist, erscheint es verpixelt und sieht schlecht aus. Sie können die Pixelgröße beim Exportieren anpassen, indem Sie die Größe auf exakte Pixel oder Prozentsätze ändern.

2. Dateiformat (und damit Größe in Bytes)

jpg

Wenn Sie keine Transparenz benötigen, können Sie das JPG-Format verwenden. Dies hat eine sehr kleine Dateigröße. Der Nachteil ist, dass es eine verlustbehaftete Komprimierung hat, was zu Artefakten und einem pixeligen Erscheinungsbild führt, wenn es zu stark komprimiert wird. Spielen Sie mit dem „Qualität“-Schieberegler herum, um eine Vorschau des gerenderten Bildes zu sehen. Normalerweise schadet ein wenig Komprimierung nicht und kann Ihre Datei erheblich verkleinern.

png

Kann mit Transparenz umgehen, führt aber normalerweise zu höheren Dateigrößen. Bietet sowohl verlustfreie als auch verlustbehaftete Komprimierung. Gleiche Bemerkungen wie bei jpg.

SVG

Wie vorgeschlagen, bietet dies das beste Verhältnis von Dateigröße zu Qualität. Da es sich um ein Vektorformat handelt, wird es am besten für Bilder verwendet, die im Vektorformat erstellt wurden (aber da Sie aus AI exportieren, ist das kein Problem). Positiv ist eine perfekte Qualität in jeder Auflösung, da auflösungsunabhängig. Zu beachtende Nachteile sind: Sie müssen über HTML-Kenntnisse verfügen, um dieses Format auf Ihrer Website richtig verwenden zu können, und die Unterstützung durch ältere Browser ist nicht so gut (siehe: Kann ich für weitere Informationen verwenden ).

Hoffe, das hilft, und viel Glück mit der Website.


Bearbeiten : ein bisschen mehr über Komprimierung.

3. Komprimierung

Ein bisschen mehr über das Komprimieren Ihrer Bilder. Die Komprimierung ist eine großartige Möglichkeit, die Dateigröße und damit die Downloadzeiten Ihrer Bilder zu reduzieren. Dies ist besonders wichtig für Benutzer, die Ihre Website von einem mobilen Gerät aus besuchen.

Es gibt zwei Formen der Komprimierung:

verlustfrei

Sie verlieren keine Daten, der Algorithmus findet nur einen Weg, sie effizienter zu verpacken. Kann die Dateigröße enorm reduzieren, insbesondere wenn Sie aus einem Designprogramm exportiert haben, das bei der Komprimierung keine sehr gute Arbeit leistet (ja, ich spreche von Fireworks).

verlustbehaftet

Sie verlieren einige Daten, was zu Artefakten wie Pixelbildung, verschwommenen Flecken, wackeligen oder dunklen Rändern usw. führen kann. Andererseits kann es bei maßvoller Verwendung die Dateigröße drastisch reduzieren und ist für den nicht sichtbar überhaupt mit bloßem Auge.

BONUS: Werkzeuge

Es gibt viele Tools, mit denen Sie Ihre Bilder komprimieren können. Einige sind großartig, einige sind gut, einige sollten vermieden werden. Bewahren Sie beim Komprimieren von Bildern immer eine Sicherungskopie des Originals auf, nur für den Fall, dass etwas schief geht (was schließlich der Fall sein wird).

Eine große Liste verfügbarer Tools finden Sie hier . Mein persönlicher Favorit ist FileOptimizer . Es ist nicht das schnellste, aber es bietet die beste verlustfreie Komprimierung, die ich je gesehen habe, und reduziert manchmal Dateien ohne Datenverlust auf 4 % ihrer ursprünglichen Größe.

Ich verwende PNG für fast alle Logos und Symbole im Web. Bei kleinen Bildern ist ein PNG nicht wesentlich größer als ein JPG, aber Sie werden die Klarheit bemerken. Wenn es sich um eine Web-App handelt oder sie sich nur an jüngere Benutzer richtet, verwende ich SVG.
Auch hier, aber ich wollte trotzdem einen Überblick über alle Optionen geben. Obwohl ich zugegebenermaßen denke, dass ich SVG mehr verwenden könnte als ich.

File > Save for Webist alles, was Sie brauchen sollten.

Sie können das SVG-Format für das Web verwenden und erhalten die höchste Auflösung mit dem niedrigsten Gewicht (als SVG speichern).