Wie Vektorgrafiken erstellen und dann von ihnen erzeugen Symbole?

Question

Für eine Webseite Ich entwickle, werde ich brauche ein paar Grafiken zu erstellen. Ich habe noch nicht in den Größen gesperrt, damit ich nicht von Bilddateien (PNG, GIF, JPG) direkt erzeugt werden soll, falls ich meine Meinung ändern, nachdem ich weiter komme zusammen mit Layout und Benutzeroberfläche zu sehen, was funktioniert und was nicht .

Das hat mir denken: Vielleicht sollte ich sie als Vektorgrafiken (zB SVG) erzeugen und dann eine Reihe von Bilddateien erzeugen auf meiner Website zu nutzen. Ich habe noch nie mit Vektorgrafiken, bevor obwohl so, was ich nach wird gespielt um:

• Einige Tools erstellen (vorzugsweise grafisch) einige Vektorgrafiken in einem gewissen akzeptablen Format;
• Eine programmatische Art und Weise Vektorgrafiken zu erstellen. Zum Beispiel, sagen, dass ich ein Gitter hätte, würde ich nicht unbedingt will, dass von Hand zeichnen. „Snap to Grid“ und ähnliche Merkmale würden diesen Fall abdecken, andere aber nicht; und
• Einige, wie ich programmatisch kann (zB als Build-Task) eine Reihe von Vektor-Grafiken nehmen und eine Reihe von Bildern erzeugen und haben vorzugsweise eine gewisse Kontrolle (zB von der Kommandozeile) über Dinge wie Namenskonventionen, Ausgabeformat, Größe, usw. ich will nicht in ein Programm gehen und individuell tun „Speichern unter ...“ auf mehr als 100 Dateien meine Symbole zu erzeugen.

Welche Art von Tools und Workflow würde diese Situation passen?

Answer 1

Es gibt verschiedene Ansätze, da gibt es mehrere verschiedene kommerzielle Vektorgrafikpakete sind. Die, die ich verwende, sind Adobe Illustrator, Adobe Fireworks, Adobe Photoshop. Zugegeben, Fireworks und Photoshop sind Bitmap-Grafik-Pakete, die Vektor-Unterstützung haben.

Ich finde Feuerwerk eine einfachere Zeit mit Vektoren zu tun hat, weil sie „first class“ Objekte sind, während in Photoshop sie tatsächlich eine Kombination aus einer Vektormaske und eine Farbfüllung sind. Der Vorteil der in einem Bitmap-Paket entwerfen Vektoren ist seine viel einfacher, das gerasterte Ergebnis in der Vorschau durch Zoomen auf das Dokument, so dass Sie die einzelnen Pixel zu sehen. Illustrator hat einen „Pixel-Vorschau“ Modus hinzugefügt, dies auch zu erreichen.

Alle drei Pakete Scripting-Fähigkeiten haben, die Sie repetative Aufgaben wie Multi-Export, Namensgebung etc. Photoshop jedoch automatisieren lassen, hat Aktionen als auch, ein vereinfachtes Makro-System, das Sie aufzeichnen und wiedergeben einfache Batch-Aktivitäten kann.

So wie ich neige dazu, mein Icon-Pack zu bauen, ist durch alle Symbole in einem einzigen Dokument zu entwerfen. Ich benutze „Gruppen“ (in Illustrator) oder „Ordner“ (Fireworks oder Photoshop) voneinander jedes Symbol zu isolieren, aber mir alle einzelnen Schichten lässt behalten, dass das Symbol nicht abgeflachte bilden.

Wenn ich den Export gehen, ich laufe ein Skript, das iteriert über die Top-Level-Gruppen / Ordner, alle, aber einer nach dem anderen zu verstecken, und die Ergebnisse in Bitmaps für alle wichtigen Beschlüsse zu exportieren; 16x16, 24x24, 32x32, 48x48, 128x128 und 256x256.

Hier ist ein ausgezeichnetes Style Guide rel="nofollow dass Microsoft hat, wie Symbole für Vista und XP zu entwerfen. Es konzentriert sich auf Photoshop die meiste Arbeit zu tun.

Answer 2

Hier finden Sie aktuelle Kairo und seine verschiedenen Bindungen. In der Tat, es gibt sogar ein Rezept rel="nofollow ein SVG zum Drehen in Kairo Befehl .

Answer 3

Wenn Sie brauchen ein solides kostenloses Tool für SVG erstellen und dann Dumping es in Bitmap-Bilder, wenn Sie auf die Größe entschieden haben, die Sie benötigen, Inkscape wäre eine gute Option sein. Die Benutzeroberfläche sieht ein bisschen weniger poliert als Illustrator, aber es funktioniert auf Windows, Mac und Linux. Die Einschränkungen sind, dass das Farbmanagement ist viel weniger leistungsfähig als Illustrator und die Unterstützung für druckempfindliche Grafiktabletts ist weniger gut, wenn man nicht auf einer Linux-Box ist.