Illustrator CC 2015 für Webdesigner: SVG

Varianten beim Text-Export mit Illustrator

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Texte können entweder als Pfade oder als Schriften exportiert werden. Das Video beschreibt die Auswahleinstellungen und verdeutlicht die Unterschiede nach dem Export.

Transkript

Bereits im Vorfeld habe ich auf die Unterschiede beim Textexport mit Illustrator und SVG hingewiesen. Ich möchte in diesem Video darauf noch einmal etwas genauer eingehen. Um das zu demonstrieren, eröffne ich einfach ein neues Dokument, wähle hier als Profil mobil aus, nehmen wir mal das iPhone 6/6s, Dann sind wir hier in einem Dokument, das Dokument ist eigentlich egal. Starten wir damit, dass ich ein kleines Icon generiere, und in diesem Icon auch später einen Text aufnehme, anhand des Textes kann man dann später sehr gut beim Export erkennen, worin die Unterschiede liegen. Zunächst mal ein Rechteck auf die Fläche. Ich klicke dafür, also nicht mit gedrückter linker Maustaste ziehen, sondern ich klicke dafür in diese Fläche hinein, wähle 180x180 Pixel, das passt, sage dann, dass es keinen Rahmen haben soll. Die Flächenfüllung, am besten ein schickes Blau. Zoomen wir mal ein bisschen ran, um mehr erkennen zu können. Das ist ein Icon für ein iPhone, und das soll dann runde Ecken bekommen. Jetzt habe ich hier nur eine ausgewählt, das wollte ich nicht. Beide, also alle Ecken sollen rund werden. So sieht es doch ganz nett aus. Dann gestalten wir als nächstes ein User Login. Dafür einfach mal das Ellipsenwerkzeug auswählen, ich eröffne einen Kreis mit gedrückter SHIFT-Taste, damit der auch wirklich rund ist, und mache das Ganze nochmal. Hier gehe ich jetzt einfach nicht mit gedrückter SHIFT-Taste ran, dass wir es so ein bisschen ellipsenhaft haben, aber etwas größer, und platziere das so ungefähr, vielleicht ein bisschen höher mit dem darüber liegenden Icon oder Kreis, besser gesagt. So sieht es doch ganz gut aus. Jetzt ist mir das noch ein bisschen zu viel, ich möchte das gerne abschneiden, und dafür können Sie die Schere benutzen, oder eben die Tastenkombination C. Das heißt, ich klicke einmal hier, auf der linken, und einmal hier auf der rechten Seite, dann wähle ich wieder hier oben das Auswählwerkzeug, und dann sieht man schon, habe ich hier einen eigenes Objekt, und kann mit BACKSPACE oder nochmal BACKSPACE dieses Objekt löschen. Jetzt das Ganze markieren und mit weißer Farbe auswählen, dann hier reinschieben, und jetzt muss ich das Ganze noch ein bisschen kleiner machen. Das in die Mitte. Sieht doch ganz gut aus, ja, reicht. Man könnte das Ganze noch ein bisschen kleiner machen, und ein bisschen anpassen, aber ich glaube, so ist es doch ganz nett. Jetzt fehlt uns der besagte Text. Dafür wähle ich mir das Textwerkzeug aus, klicke hier einfach einmal in die weiße Fläche, und schreibe mit großen Buchstaben LOGIN. Das machen wir ein bisschen größer, 24, glaube ich, ist ganz gut, dann wähle ich hier Helvetica, und zwar Helvetica Neue Bold, damit wir einen dickeren Text haben, platziere das hier im Dokument, vielleicht gerade auch zentrieren, dann kriegen wir es hier schön zentral drunter. Dann natürlich die Farbe, weiß, das passt. Dann haben wir einen kleinen Login Button konstruiert. Ich denke, vielleicht noch einen Ticken größer, dass wir das auf die gleiche Breite kriegen, dann ist das Ganze perfekt. Jetzt habe ich hier mein Objekt, und würde normalerweise das Dokument jetzt abspeichern, aber da es mir nur darum geht, Ihnen auch die Unterschiede von diesem Objekt zu zeigen, reicht das erstmal, dass wir hier wie folgt vorgehen. Ich erstelle mir jetzt hiervon nochmal ein weiteres Objekt, indem ich alles markiere, die ALT-Taste gedrückt halte, und dann einfach das Ganze hier rüber ziehe. Zwei identische Symbole. Hier in dem zweiten Symbol klicke ich jetzt diesen Text an, und gehe auf "Schrift In Pfade umwandeln". Dann habe ich einmal normalen Text, das kann man hier sehr schön erkennen an der Umrandung, und einmal einen Pfad, ebenfalls erkennbar. Diese beiden Symbole exportieren wir jetzt. Ich gehe jetzt bewusst hin, das muss ich aber manuell machen, einmal dieses Objekt, das wähle ich mir aus, also das Textobjekt, und gehe auf "Datei Auswahl exportieren". Das nenne ich mal "login_btn_text". Damit ich auch sicher bin, dass das wirklich Text ist, muss ich hier in die Preferences, in die erweiterten Einstellungen, und da auf den Typ SVG. Da möchte ich nämlich hier nicht "In Konturen umwandeln" haben, sondern hier auf SVG gehen. Das Minifizieren lasse ich mal weg, Einstellungen speichern und Element exportieren. Das Gleiche mache ich jetzt hiermit nochmal. Ich kann auch alternativ hier wieder das Bedienfeld verwenden, muss dann aber auch das Gleiche machen, also von der Seite ist es im Grunde egal. Ich gehe auch hier wieder auf "Auswahl exportieren", nenne das um, "login_btn_pfad". Den möchte ich haben, auf jeden Fall. Dann hier wieder auf die Einstellungen gehen, auf SVG, und jetzt sage ich "In Konturen umwandeln". Jetzt muss man fairerweise sagen, theoretisch gesehen hätte ich mir diesen Schritt jetzt schenken können. Ein Schritt ist zu viel, Sie brauchen ein Dokument prinzipiell nicht in Pfade umwandeln, und dann auch noch zusätzlich hier bei den Formateinstellungen "In Konturen umwandeln" aktivieren. Weil, wenn hier "In Konturen umwandeln" aktiviert ist, dann wandelt er automatisiert beim SVG-Export alle Texte in einen Pfad um. Andernfalls, wenn es so hier steht, haben Sie natürlich die Möglichkeit, zu entscheiden: "Ich nehme mir jetzt ein Icon, mache manuell die Pfadkonvertierung, und bei dem einen lasse ich Text stehen." Dann haben Sie beim Export auch wirklich beide Varianten drin. Müssen Sie entschieden, wie Sie da vorgehen. Ich nehme auf jeden Fall jetzt mal "In Konturen umwandeln" , "Einstellungen speichern", und exportiere das auch. Wechseln wir in den Ordner. Hier haben wir jetzt die beiden, einmal Pfad, einmal Text. Den ersten öffne ich mir mit Google Chrome. Jetzt will er es nicht öffnen. So, jetzt haben wir es. Das Ganze nochmal im zweiten Tab. Jetzt habe ich hier zwei Elemente, zwei Komponenten, zwei Icons im Browser geöffnet, einmal Pfad und einmal Text. Jetzt achten Sie bitte mal auf den Unterschied beim Text, wenn ich zwischen diesen beiden Fenstern hin und her schalte. Jetzt sehen Sie es. Das eigentliche Text Icon ist ein bisschen unschärfer, ein bisschen schwammiger als die Pfade. Hier sehen wir die Pfade, und wenn Sie jetzt sehen beim Klick auf die Registerkarte Text, da wird es etwas dicker, etwas größer. Von der Optik her ist ansonsten nicht viel Unterschied erkennbar, auch wenn es hier kleiner ist, da sieht man auch nochmal sehr schön, wenn man das Ganze zusammensetzt, bisschen kleiner schiebt, dann wird es nochmal deutlich, wie unschön das werden kann, wenn vor allen Dingen die Buchstaben so eng beieinander sitzen, oder je nachdem, wie die ausssehen. Dann verschwimmt das wirklich sehr unschön. Da ist der Pfad die wesentlich bessere Wahl. Vorteil ist allerdings, beim Pfad habe ich hier keinen Text, das ist nur eine SVG-Grafik, beim Text habe ich Text, und zwar kann ich das auch markieren. Ich kopiere das gerade in die Zwischenablage, wenn ich hier eine Registerkarte aufrufe, das hier hinein kopiere, sehen Sie, ist das nun gerade Login aus diesem Textbereich hier markiert, und damit wirklich echter Text. Ich denke aber, diese Demonstration zwischen den beiden Icon "login_btn_text" und "login_btn_pfad" zeigt deutlich auf, vor allen Dingen, wenn man es verkleinert, wie unschön die reine Schrift dann eventuell werden kann, und deswegen auch die Empfehlung: Meistens jedenfalls lieber auf Pfade zu setzen, als auf reinen Text. Sie wissen jetzt, wie Sie mit Illustrator einzelne Komponenten als Text oder als Pfad exportieren können.

Illustrator CC 2015 für Webdesigner: SVG

Lernen Sie, wie Sie in Illustrator CC SVG erstellen, exportieren und die Grafikelemente direkt in Muse CC oder ihren HTML-Code einbinden.

1 Std. 3 min (10 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!