Best Practices für den Export von Bildern aus Vektor-/EPS-Grafiken

Ich mache meine ersten Schritte in die Gewässer des Vektordesigns und entwerfe ein einfaches Logo (in „Sketch“ für Mac – eine Illustrator-Alternative).

Das ging gut, bis es an der Zeit war, das Artwork für eine Website zu exportieren. Ich nahm eine eps zu Fireworks und erstellte dann ein PNG für die Website.

Am Ende sah es „zackiger“ aus, als ich erwartet hatte, und an diesem Punkt begann ich mich zu fragen, ob ich die Dinge richtig machte.

In welcher Größe/Auflösung importieren Sie ein EPS-Logo in Fireworks (oder Photoshop)? Die gleiche Größe, die Sie für die Endgrafik haben möchten, oder importieren Sie sie in größerer Größe und verkleinern Sie sie in Photoshop, damit sie besser aussieht?

Eigentlich denke ich, dass so ziemlich jede 2D-Vektor-Rendering-App Dinge falsch macht (oh warum oh warum kann ich mit Lancoz Window Filetring in PS keine Sinc bekommen). Besonders Adobe ist darin schlecht, da sie das Signal so filtern, als ob der Farbraum linear wäre. Also mache ich eigentlich mein eigenes Antialiasing, wenn ich Sachen von höchster Qualität brauche. Also stimme ich zu, dass dies tatsächlich ein Problem ist. Aber auf ganz anderer Ebene. Wenn Sie es größer einbringen, haben Sie mehr Werte zum Filtern, wenn Sie die Nichtlinearität ins Spiel bringen.

Antworten (4)

Als Webentwickler würde ich sagen, dass Sie die Bilder in der Größe exportieren sollten, von der Sie erwarten, dass sie gerendert werden.

Dies aus zwei Gründen:

a) Dateigröße - eine 2 MB-Datei, die in Bezug auf die Auflösung herunterskaliert wurde, muss noch mit 2 MB heruntergeladen werden

b) Rendern – ein 1000 x 250 Pixel großes Bild, das in einem 250 x 50 Pixel-Tag angezeigt wird, wird vom Browser zur Laufzeit gerendert. Dies ist sowohl langsam als auch wahrscheinlich von schlechterer Qualität als in einer bestimmten Grafikanwendung.

Ich schlage vor, eine Photoshop-Datei mit der endgültigen Auflösung einzurichten (je nachdem, wofür Sie sie verwenden möchten) und das Logo dann als Vektorformen in Photoshop zu importieren (von Illustator funktioniert dies mit Kopieren / Einfügen, bei "Sketch" bin ich mir nicht sicher). So bleiben sie verlustfrei, auch wenn Sie später die Auflösung ändern.

Ich empfehle Ihnen, eine *.eps-Datei aus Sketch zu exportieren und sie einfach in Photoshop zu öffnen, ohne die Größe zu ändern. Wählen Sie danach die Option „Für Web speichern“ (Shift+Cmd+Alt+s oder aus dem Hauptmenü „Datei->Für Web speichern “) und ändern Sie die Größe Ihres Bildes, um die gewünschten Abmessungen zu erhalten. Hören Sie sich dougajmcdonald an und bereiten Sie die Größe vor, die Sie erwarten, dass sie in einem Browser gerendert werden. Wählen Sie eine Option „Bikubisch schärfer“ , wenn Sie die Größe verringern möchten. Es hilft Ihnen, die Details zu behalten. Andernfalls könnten sie zu stark verwischt werden.

Wenn Sie Sketch zum Erstellen der Grafik verwenden, sollten Sie wahrscheinlich Sketch verwenden, um die endgültigen Bitmap-Bilder auszugeben. Sketch kann in einigen verschiedenen Bitmap-Formaten ausgegeben werden, einschließlich PNG.

Das ist wahrscheinlich der einfachste und schnellste Weg, es zu tun.

Das habe ich anfangs getan, aber die Ausgabe schien keine sehr gute Qualität / Auflösung zu haben. Soll ich die „Kunstfläche“ oder „Folie“ so groß machen, wie ich die ultimative Grafik haben möchte, oder sollte ich sie größer machen, um eine bessere Klarheit zu erhalten?