Illustrator-Svg mit Screenshot-Bild, große Dateigröße

Illustrator und SVG liefern nur dann Qualität und Klarheit, wenn Sie Dokumente mit Vektorformen erstellen, aber darin Bitmaps speichern.

Vektoren sind wie ein Rezept, das nach oben oder unten skaliert werden kann, um 2 oder 200 zu füttern, während eine Bitmap wie ein Fernsehessen für 1 ist. Es wird niemals 200 füttern. Sie können seine Qualität nicht über das hinaus steigern, was dort bereits eingefroren ist.

Der wahrscheinliche Grund, warum Sie große Dateien erhalten, ist, dass Sie den Screenshot in Illustrator hochskalieren und Illustrator dann ein viel größeres Bitmap-Bild in der SVG speichert. Auf diese Weise können Sie leicht eine 1-Megabyte-Bitmap in eine 15-Megabyte-Bitmap umwandeln, aber auch das erhöht die Qualität nicht.

Die bessere Möglichkeit, die Darstellung von Bitmap-Bildern zu verbessern, besteht darin, einen HTML-Editor – nicht Illustrator – zu verwenden und Ihre PNG-Bitmaps auf einer HTML-Seite zu platzieren. Fügen Sie dann mit CSS-Regeln Rahmen oder andere Präsentationsattribute zu Ihren Bildern hinzu.

Wenn Sie die bestmögliche Präsentationsqualität erstellen möchten, verwenden Sie keine Screenshots. Verwenden Sie stattdessen ein Tool, das eine Webansicht mit Pixelverhältnissen von 1:1 (Standard) und 2:1 (Retina) in ein Bitmap-Bild umwandeln kann. Dann werden Ihre PNG-Bilder auf dem Retina-Display in viel höherer Qualität angezeigt (vorausgesetzt, Ihre Arbeit ist Retina-fähig, was es sein sollte). Auf dem Mac gibt es beispielsweise eine App namens „Page Layers“ (erhältlich im Mac App Store). , kann bei gegebener URL das gesamte Web-Rendering dieser URL in 1:1 oder 2:1 erfassen und Ihnen entweder ein flaches PNG- oder ein mehrschichtiges Photoshop-Dokument liefern, bei dem sich jedes Element Ihrer Arbeit auf einer anderen Ebene befindet. Wenn Sie keinen Mac verwenden, suchen Sie auf Ihrer Plattform nach einem solchen Tool. Dann können diese Bitmap-Erfassungen Ihrer Arbeit in jedem HTML-Editor in ein Retina-fähiges, durchsuchbares Portfolio umgewandelt werden.

Eine Sache, die Sie jedoch berücksichtigen sollten, ist, nur die eigentliche native Webarbeit zu zeigen, nicht Bilder der Arbeit. Wenn die Arbeit webnativ ist, dann ist die beste Art, sie zu präsentieren, als webnative Elemente. Anstatt also eine HTML-Seite mit einem Bild einer Tabelle darin zu erstellen, würden Sie die eigentliche Tabelle einfügen. Möglicherweise möchten Sie die Stile mit einem Tool in Inline-Stile konvertieren und dann einfach das HTML-Beispiel Ihrer Arbeit kopieren und in ein HTML-Portfolio Ihrer Arbeit einfügen. Oder Sie können Iframes verwenden, um die tatsächliche Online-Arbeit in Ihrem Portfolio ohne Konvertierung anzuzeigen.

Das Problem ist, dass SVG ein Textformat ist und daher Bilder (afaik) alle über eine base64-Zeichenfolge eingebettet sind. Das ist normalerweise ziemlich groß.

Sie können versuchen, das PNG mit einem Tool so weit wie möglich zu optimieren (Farben reduzieren usw.), bevor Sie es in den Illustrator einfügen, und hoffen, dass dies nicht alles rückgängig gemacht wird.

Binäre Formate (oder zumindest komprimierte Formate) würden wahrscheinlich besser funktionieren, aber es gibt keine Garantie dafür, dass Sie winzige Dateigrößen erhalten.

Es kann mehrere Probleme geben:

Das PNG, das Sie speichern, weist möglicherweise Transparenz auf, die auch als Alphakanal bezeichnet wird. Wenn es mit anderen Objekten verschmilzt, oder Illustrator glaubt, dass dies der Fall sein könnte, kann dies dazu führen, dass die Dateigröße zu groß wird. LÖSUNG: Stellen Sie sicher, dass das PNG keine Transparenz hat oder, noch besser, speichern Sie es als JPEG, das keine Transparenz haben kann.

Möglicherweise möchten Sie trotzdem als JPEG speichern, da die Dateigrößen im Allgemeinen kleiner als PNG sind (da es eine verlustbehaftete Komprimierung verwendet). Speichern Sie mit einer hohen Qualitätseinstellung (8 oder 10), um Komprimierungsartefakte zu vermeiden.

Eine andere Sache könnte sein, dass Sie „Illustrator-Bearbeitungsfunktionen beibehalten“ aktiviert haben, was die Dateigröße erhöhen kann. Sie brauchen es natürlich, um es in Illustrator zu bearbeiten, aber nicht, um es für das Web zu exportieren.

Sie können auch versuchen, Ihre Screenshots zu verlinken, anstatt sie einzubetten, aber dann müssen Sie eine separate Datei im Auge behalten.

Schließlich können Sie anstelle eines Screenshots echte Vektorgrafiken verwenden. Sie können dies tun, indem Sie ein Diagramm als PDF speichern, normalerweise durch Drucken in eine PDF-Datei. Dann können Sie das PDF in Illustrator importieren, bereinigen und die Vektorgrafiken als SVG speichern. Ich würde dies jedoch nicht empfehlen, da das PDF möglicherweise schwer zu bereinigen ist und die Dateigröße bei all diesen Details möglicherweise größer als ein Screenshot ist.

Wie Jeremy S. bereits betont hat, ist das Erstellen eines PDF der Website eine Möglichkeit. Hier ist ein kurzer Tipp zum Konvertieren von Websites in PDF mit Paparazzi! und Skizze .

• Die 3-Schritte-Anleitung zum Konvertieren einer beliebigen Webseite in Sketch | Benutzeroberfläche hacken
  • Starten Sie Paparazzi, geben Sie dann die URL einer beliebigen Website in die URL-Leiste ein und drücken Sie die Eingabetaste.
  • Warten Sie, bis der Screenshot geladen ist, starten Sie dann Sketch und ziehen Sie den Screenshot in ein beliebiges geöffnetes Sketch-Dokument.
  • Filtern Sie in Sketch das Ebenenfenster nach dem Wort „Clip“, wählen Sie dann alle Ebenen aus und drücken Sie die „Rücktaste“ auf Ihrer Tastatur, um alle diese Ebenen zu löschen. (Dies sind Masken, die Sie daran hindern, Elemente in Ihrem Dokument auszuwählen).

Anschließend können Sie in PDF (oder SVG) exportieren und in Illustrator weiter bearbeiten. Dies ist mein bevorzugter Workflow für Website-Redesigns, bei denen ich mit vielen bestehenden Elementen arbeiten muss, die neu organisiert werden müssen.

Auch Paparazzi schnappt sich die ganze Seitenhöhe, was über normale Browser-Druckdialoge meist schwierig ist.