Tutorial zur Vektorisierung einer Grafik
Tutorial: Wie vektorisiere ich eine Grafik?
INHALT
- Was brauche ich?
- Wie gehe ich vor
- Die Wahl des Programms
- Beziérkurven
- Erzeugen des Bildes
A: WAS BRAUCHE ICH?
Bevor du überhaupt anfängst, brauchst du auf jeden Fall eine Vorlage, nach der du arbeiten kannst, z.B. ein Scan des Logos oder das Logo der Internetseite deines Vaters. Je besser die Qualität des Bildes, desto besser wird das Endergebnis.
Wenn du eine solche Vorlage hast, gibt es zwei Wege, fortzufahren: Du kannst das Logo manuell nachbauen oder du kannst es vollautomatisch vektorisieren lassen. Das automatische Vektorisieren ist sicher die einfachere Lösung, dazu brauchst du aber eine ordentliche Vorlage (die nicht zu verpixelt ist). Es gibt Onlinedienste, die dir das Bild vektorisieren, allerdings sind die meines Wissens nach kostenpflichtig (z.B. VectorMagics). Vektorgrafikprogramme wie Illustrator können afaik auch vektorisieren, Fireworks dagegen nicht (glaube ich, allerdings weiß ich es nicht!). Mit dem ganzen automatischen Vektorisieren kenne ich mich leider nicht aus.
Also Plan B: Manuell nachbauen!
B Wie gehe ich vor?
Die Wahl des Programms
Um eine Vektorgrafik zu erstellen brauchst du - oh Wunder! - ein Vektorgrafikprogramm. Photoshop und Photoshop Elements zählen zu den Bildbearbeitugnsprogrammen und sind damit für Pixelgrafiken zuständig, nicht aber für Vektorgrafiken (das Pfadwerkzeug, welches du gleich kennenlernst, existiert in Photoshop nur, um damit präzise Auswahlen machen zu können).
Platzhirsch unter den Vektorgrafikprogrammen ist Adobe Illustrator. Fireworks ist zwar auch (mehr oder weniger) ein Vektorgrafikprogramm, aber Fireworks ist in erster Linie zum Gestalten und Entwickeln von Benutzteroberflächen für Anwendungen oder Internetseiten gedacht. Dies hat zwei Nachteile: Erstens kennt Fireworks nur den sRGB Farbraum, der den kleinsten gemeinsamen Nenner aller Bildschirme darstellt. Dies ist für Logos nur bedingt geeignet, da Logos im Normalfall auch gedruckt werden müssen und sich somit eher der CMYK Farbraum anbietet (das ist der Farbraum für Drucker), den Fireworks aber meines Wissens nach nicht versteht. So weit, so schlecht, damit könnte man aber ggf. je nach Anspruch sogar noch leben. Viel problematischer finde ich die Auswahl an Dateiformaten: Sofern du nicht der Einzige sein sollst, der deine Vektordatei bekommt, sollte die Datei als EPS, SVG o.ä. gespeichert werden - auch hier bockt Fireworks, da es fürs Web konzipiert ist und somit keinen Bedarf an Formaten wie EPS hat. Als Ausweg könntest du die Datei am ehesten noch als Adobe Illustrator 8 (.ai) Datei speichern - sofern dies MX 2004 schon unterstützt und nicht erst in CS3 neu dazugekommen ist. Solltest du keine Illustrator Datei speichern können und darauf angewiesen sein, die Datei irgendwem anders zu geben, wäre Fireworks für dieses Vorhaben gestorben.
Kostenlose Alternativen währen im Opensource-Lager z.B. Inkshape (benötigt X11!), welches afaik leider keine EPS Dateien, wohl aber SVG Dateien unterstützt. Ob es mit CMYK klarkommt, weiß ich nicht (würde mich ehrlich gesagt wundern, aber ich möchte hier nichts schlechtreden). Ob Inkshape nun ausreicht ist leider auch fragwürdig, zumindest wäre es mir neu, dass das SVG-Format im Profibereich eine Rolle spielt.
Fazit: Fireworks und Inkshape kommen nur dann in Frage, wenn du definitiv ausschließen kannst, dass du die Datei irgendwann in deinem Leben weitergeben musst - und sei es „nur“ an eine Druckerei. Wenn du auf Dateiaustausch angewiesen bist, wirst du - soweit ich informiert bin - um Adobe Illustrator leider nicht herumkommen. Wenn Dateiweitergabe für dich gar kein Thema ist, ist es auch egal, welches Format du nutzt…
So. Jetzt gehts los:
Jedes Vektorgrafikprogramm hat das Pfadwerkzeug
(in Fireworks heißt es "Stift") - dieses hat meistens das (den?) Tastaturkürzel „P“ wie „Path“. Mit diesem Werkzeug kannst du sogenannte „Beziér-Kurven“ bzw. „Pfade“ erzeugen (wenn ich im folgenden Beziérkurve oder Pfad sage, ist damit grob gesagt das gleiche gemeint!):
Beziérkurven - was ist das?
(Anmerkung: Vielleicht kennst du Beziérkurven schon: Die „Animationspfade“ aus Keynote'08 sind auch Beziérkurven. Wenn du diese nicht kennst, lies eben meine Erklärung durch und experimentier herum, bis du es verstehst. Es sieht furchtbar kompliziert aus, dabei ist es kinderleicht - Nur ist es schwer, es mit einem Text zu erklären).
Drei kleine Schritte zur perfekten Beziérkurve:
- Es fängt zunächst ganz einfach an: Mit dem Stift kannst du durch Klicken Punkte erzeugen, die automatisch durch gerade Linien verbunden werden. Wenn du wieder auf den ersten Punkt klickst, „schließt“ du den Pfad ab und hast damit ein Dreieck, Viereck oder N-Eck (Polygon) erzeugt. Die Punkte, die du gemacht hast, nennen wir einfach mal Eckpunkte.
- Im Gegensatz dazu gibt es auch Kurvenpunkte. Diese zeichnen sich dadurch aus, im Pfad keine Ecke zu bilden, sondern eine Kurve (wer hätte das gedacht!).
Du kannst sie erzeugen, indem du klickst, die Maus gedrückt hälst und dann ziehst - dabei erzeugst du eine Tangente zur Kurve. Je länger du die diesen Anfasser ziehst, desto stärker folgt der Pfad dieser Tangenten. Probier es bitte aus, es ist wirklich einfacher, als ich es mit Worten erklären kann.
- Wie du siehst, erstellst du immer zwei Anfasser, auf jeder Seite einen.
Normalerweise sind diese Anfasser symetrisch (gleiche Richtung, gleiche Länge). Du kannst sie, nachdem du den Kurvenpunkt erzeugt hast, nun aber auch mit Befehl+Klick oder Befehl+Alt+Klick einzeln verändern und so anpassen, bis sie dir gefallen. Probier das einfach mal aus.
Erzeugen eines Bildes mit Pfaden
- Wenn du nun eine Vorlage hast, kannst du diese mit dem Stift-Werkzeug wie oben beschrieben nachbauen. Ein paar Grundregeln, die man im Allgemeinen befolgen sollte:
- Setze die Punkte so geschickt, dass du möglichst wenige brauchst - je weniger, desto besser!
- I.d.R. sollte jeder Pfad geschlossen sein, dein letzter Klick sollte also immer auf dem Startpunkt sein, sodass immer eine Fläche entsteht!
- Eine Fläche kann übrigens immer nur EINE Farbe (bzw. einen Farbverlauf oder ein Muster) enthalten, für mehrere Farben brauchst du mehrere Flächen.
- Für Schriftzüge gibt es natürlich das Textwerkzeug.
So, nachdem ich nun wahrscheinlich mehr Verwirrung angestiftet hab als geholfen hab, beende ich nun meinen Roman und hoffe, dir wenigstens ein bisschen geholfen zu haben.
Viel Erfolg beim Logo erstellen!
Gruß, Micha
dan werde ich mir mal adobe illustratur anschaffen und mal das logo nachbasteln (es ist 1500*3000pixel gross, ich denke das reicht schon
)
