Wie entwerfe ich Photoshop und gehe dann zurück zum Illustrator, um einige der Symbole als SVG zu erstellen?

Ich bin es gewohnt, Sprites zu erstellen – aber lesen Sie, dass SVG der richtige Weg ist. Ich erstelle ein Mockup für den Kunden und möchte die in Photoshop erstellten benutzerdefinierten Symbole zeigen und muss sie nun für die SVG-Konvertierung wieder in den Illustrator bringen.

Ich stelle mir vor, dass es einen besseren Arbeitsablauf gibt, und ich suche nach Tipps und Techniken.

Sie verwenden Photoshop CC? Wenn ja, könnte dies für Sie funktionieren
Was meinst du? Raster -> SVG ?!?! Sie sagen "made in Ps" und "bringen sie zurück nach Ai", als ob sie in Ai hergestellt worden wären. Was machst du genau?
@Charles, können Sie mir bitte mitteilen, ob Ihre Symbole als Formen erstellt wurden?
@Komental Ich habe einige benutzerdefinierte Symbole in AI erstellt, obwohl ich einige Standard-Twitter- und Facebook-Schriftarten in PS gemischt habe. Sie sind alle intelligente Objekte, sodass sie ihre Vektordimensionen behalten.

Antworten (2)

SVG ist nicht der richtige Weg. Sprites sind immer noch viel besser. SVG ist fehlerhaft, schwer, verhält sich manchmal/oft seltsam und ist im Allgemeinen eine etwas gescheiterte Initiative.

An diesem Punkt gibt es nicht wirklich ein vektorbasiertes Äquivalent (und sicherlich keine Verbesserung) für Sprite-Blitting für Geschwindigkeit, Genauigkeit und korrekte Antworten. Seltsam, ich weiß.

Einzigartig ist, dass es auf iOS/Mac Core Graphics gibt, aber es ist eine Größenordnung (oder mehr) langsamer als Sprites und hat die gleichen Speicherprobleme, plus einen Zeichnungsaufwand aufgrund der Verwendung eines Speicherplatzes namens Kontexte, in denen sie werden zuerst gezeichnet und dann auf den Bildschirm gestrahlt. Und wenn Sie skalieren möchten, müssen Sie neu zeichnen und dann erneut bletten.

Core Animation ist viel schneller (vermeidet die Kontextphase und zeichnet direkt auf dem Bildschirm), aber Sie haben nicht annähernd so viel Kontrolle über Anti-Aliasing, noch über die gesamte Bandbreite an Zeichenwerkzeugen und Effekten und Nachbearbeitung, die in Core Graphics verfügbar sind. Und letztendlich zieht es es auch vor, Sprites zu blitten.

Diese Informationen sind hilfreich. Die Debatte über SVG-Vers-Icon-Fonts scheint auf die SVG-Implementierung ausgerichtet zu sein. Derzeit ist es also am besten, weiterhin Icons in einer Vielzahl unterschiedlicher Pixelabmessungen (32, 48, 96) zu erstellen. Empfehlen Sie in Bezug auf die Klarheit des Retina-Displays geeignete Ressourcen, um mit dem traditionellen transparenten PNG-Sprite-Sheet gestochen scharfe Grafiken zu gewährleisten?
SVG hat immer noch einige Macken, aber es wird besser! Hier ist eine schöne Demo, mit der Sie die Leistung von SVGs vs. PNG-Sprites in Ihren Zielbrowsern testen können: codepen.io/adrianosmond/pen/LCogn
@johnB gute Ressource.
Die Debatte (falls es überhaupt eine gibt) über SVG- und Bitmap-Symbole wird sofort ausgelöscht, wenn Sie eine Vektorillustrations-App verwenden und alle erforderlichen Symbole in ihrer richtigen Auflösung exportieren und entsprechend in PNG mit Alpha verpacken. Dies verbessert nicht nur die Leistung auf fast allen bekannten Plattformen radikal, sondern stellt auch sicher, dass Sie absolut exakte Exporte Ihrer Kunstwerke haben. Hier ist etwas Lustiges zum Nachforschen... SVG-Renderer sind nicht alle gleich. PNG ist es aufgrund seiner Darstellung immer.
@Confused absolut gültig, wenn es um Icons geht. Ich denke, das Wichtigste ist, dass Vektoren für kleine Bilder nicht besonders gut geeignet sind. Vektor eignet sich hervorragend zum Hochskalieren, aber wenn Sie mit ~32px² oder weniger arbeiten, sollten Sie die einzelnen Pixel Ihres Bildmaterials von Hand anpassen.

Dies hilft Ihnen jetzt wahrscheinlich nicht weiter, aber wenn Sie Symbole für die Verwendung im Internet erstellen, ist es immer am besten, sie tatsächlich in Illustrator zu starten. Von dort aus können Sie sie ziemlich einfach als SVG speichern, wie Sie sicher wissen. Der Grund dafür ist, dass Photoshop in seinen Werkzeugen nicht die Skalierbarkeit bietet, die Illustrator bietet.

Abgesehen davon ist nichts falsch daran, SVGs für das Web zu verwenden. Ihre Unterstützung geht auf IE9 zurück und Sie können PNG-Fallbacks für frühere Browser bereitstellen. Webfonts sind eine Alternative, aber abgesehen von der Browserkompatibilität sind sie tatsächlich anfälliger für Bugs und Fehler in verschiedenen Browsern.

Wie entwerfe ich Photoshop und gehe dann zurück zum Illustrator, um einige der Symbole als SVG zu erstellen?
AntwortenHierDatenschutz-Bestimmungen1y, 0v