So speichern Sie ein Logo für das Web aus Illustrator (das Logo sieht nach dem Hochladen verpixelt aus)

Jedes Mal, wenn ich versuche, mein Logo aus Illustrator zu speichern, ist es verschwommen.

Das Logo wurde in Illustrator (als Vektordatei) erstellt. Ich habe versucht, die Umrisse nachzuzeichnen, zu rastern, in allen Dateitypen zu speichern ... Die Schrift sieht immer noch verschwommen aus. Ich habe keine Idee warum. Ich verwende einen Retina Display Mac und habe ihn nicht auf einem normalen Computer getestet.

Anregungen? Unten sind ein paar verschiedene Dateispeicherungen ...

Sparen Sie #1

Sparen Sie #2

Sparen Sie #3

Sparen Sie #4

Sparen Sie #5

Klärungsbedarf; welcher anwendungsfall? Browser?.... welche Plattformen & Browserversionen? Budget?
Hey @Joel Cas, hast du dieses Problem immer noch?
Hey @Jenna, ja das bin ich immer noch. Ich weiß nicht, wie ich das Logo speichern soll, damit es nicht körnig aussieht und die Schriftart perfekt ist. Ich habe das ganze Logo gerastert.
Ok Joel, also wie Tom gefragt hat, was für ein Anwendungsfall? Das letzte sieht auf meinem Handy und Computer gut aus ...
Hallo @Jenna, was meinst du mit "welcher Anwendungsfall?" #Anfänger
Wofür wird das Logo verwendet? Wenn Sie drucken, wären die Exporteinstellungen anders als wenn es nur für das Web ist. Wenn Sie es als kleines Symbol verwenden, können die Einstellungen anders sein, als wenn Sie es als riesiges Bannerbild verwenden. Sobald Sie wissen, wofür genau es verwendet wird, können Sie es entsprechend speichern :)
Ich möchte das Logo für meine Website verwenden und als Titelbild für unsere Social-Media-Kanäle hochladen. Aber ich habe das Gefühl, dass ich die Einstellungen falsch mache und die Bilder (insbesondere die Schriftart) nicht so scharf sind, wie sie sein sollten. Können Sie mich durch die Schritte zum Speichern einer HD-Datei aus Illustrator führen? Das Bild ist eine Vektordatei und wurde gerastert. Vielen Dank im Voraus @Jenna

Antworten (2)

Ist Ihre Grafik noch im Vektorformat? Ihr zuletzt hochgeladenes Logo sieht ziemlich gut aus, aber vielleicht finden Sie unten etwas Nützliches.

Datei als JPEG oder PNG speichern

Gehen Sie zuerst zur Datei - für das Web speichern. Ich würde vorschlagen, hoch zu speichern (denken Sie daran, dass die Ladezeit einer Webseite umso länger ist, je höher die Qualität ist). Wenn Ihre Arbeitsdatei ein Vektor ist, können Sie sie in jeder gewünschten Größe exportieren. Ich würde sicherstellen, dass Type Optimized aktiviert ist . Siehe unteres Bild. Für PNG würde ich PNG-24 für beste Ergebnisse verwenden. Stellen Sie einfach sicher, dass Sie wieder "Type Optimized" verwenden.

Geben Sie hier die Bildbeschreibung ein

Sie können das Bild jederzeit in einem Browser im Dialogfeld „Für Web speichern“ anzeigen. Klicken Sie unten auf Vorschau. Möglicherweise müssen Sie zuerst einen Browser auswählen.

Die folgenden Optionen erfordern Programmierkenntnisse.

Speichern von Dateien als SVG-Datei

Sie können Ihr Logo als SVG speichern und das Bild mit CSS auf jede beliebige Größe skalieren.

Css Tricks hat ein großartiges Tutorial, wie man das für das Web macht.

Speichern von Dateien für Retina Displays

Da Sie einen Mac mit einem Retina-Display verwenden, können Sie 2 verschiedene Dateien speichern. Angenommen, Sie möchten Ihr Bild mit 50 Pixeln haben. Sie würden 2 verschiedene Dateien speichern. 1 Datei mit 50 Pixel und die Retina-Version mit 100 Pixel.

Sie benötigen Programmiererfahrung, um das Logo auf der Website bereitzustellen, um die Retina-Version anzuzeigen.

Hier ist ein großartiges Tutorial dafür: The Right Way to Retinafy Your Websites

Auch dafür gibt es eine tolle js-Datei: Retina-Grafiken für Ihre Website

Diese Unschärfe ist das Anti-Aliasing von Illustrator, wenn die Formen nicht mit dem Pixelraster übereinstimmen. Aktivieren Sie „Ansicht“ > „Pixelvorschau “, um zu sehen, wie Ihr Bild nach dem Export aussehen wird. Dann können Sie die Formen am Pixelraster ausrichten, um die Unschärfe zu minimieren. Hier ist ein offizielles Adobe-Tutorial, wie es geht:

http://helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html

Beachten Sie, dass das Bild in Illustrator ohne aktivierte Pixelvorschaufunktion immer besser aussieht als das, was Sie exportieren - das liegt daran, dass Sie mit Vektorformen arbeiten und die Ausgabe gerastert ist.

ETA: Um den Text zu bearbeiten, könnten Sie ihn in einen Pfad konvertieren und seine Größe an das Pixelraster anpassen, aber ich wäre vorsichtig - die Manipulation der Typografie ohne guten Grund und ohne Erfahrung kann mehr schaden als nützen. Es sei denn, Sie sind damit vertraut, in diesem Fall - fahren Sie fort.

So speichern Sie ein Logo für das Web aus Illustrator (das Logo sieht nach dem Hochladen verpixelt aus)
AntwortenHierDatenschutz-Bestimmungen1y, 0v