Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Illustrator CC für Webdesigner: SVG

Illustrator-Datei für den SVG-Export vorbereiten

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Um eine SVG-Grafik aus Illustrator für den Web-Entwicklungsprozess zu exportieren, sollte das Dokument dafür vorbereitet werden. Das Video zeigt die wichtigsten Schritte vor einem Export.

Transkript

Mit diesem Video starten wir den praktischen Teil, und ich möchte Ihnen aufzeigen, welche vorbereitenden Schritte ich in der Regel unternehme, um nach einem SVG-Export auch das gewünschte Ergebnis zu erzielen und vor allen Dingen, an die Elemente zu gelangen, die ich hinterher auch separat ansprechen muss. Sie sehen, wir haben hier zwei Zeichenflächen in Illustrator, nämlich einmal die Zeichenfläche, die den Login als einzelne Seite darstellt, und einmal die Zeichenfläche, die den eigentlichen Player, ein Musicplayer darstellt. Und erster Schritt ist, den ich immer wichtig empfinde, wenn Sie nun Text in Ihren Gestaltungen haben, der später so direkt nicht mehr angesprochen werden muss. Also, will heißen, der muss nicht ausgetauscht werden durch einen anderen Text innerhalb des Codings, dann empfiehlt es sich diesen Text als sogenannten Pfad zu exportieren. Also nicht als Zeichen, denn SVG hat mit Zeichensätzen, mit Zeichendarstellungen, durchaus...Schwierigkeiten ist vielleicht das falsche Wort, aber das kann zu Problemen führen. So, und aus solch einem Text, Sie sehen, das ist bereits ein Pfad, um aus solch einem Text, den Sie getippt haben in Illustrator, einen Pfad zu erzeugen, gehen Sie bitte wie folgt vor. Ich zeige Ihnen das mal, ich rufe einfach einen neuen Text auf. Ich klicke also hier mal rein, und es ist sehr klein, aber ich schreibe jetzt mal gerade: "Benutzername", und machen wir das mal einfach größer, dann sehen Sie es. So sieht der normale Text aus, also über dieses Textwerkzeug eingefügt, und um daraus einen Pfad zu generieren, gehen Sie auf den Menüpunkt "Schrift", und dann findet man hier "In Pfade umwandeln", alternativ natürlich auch die Tastenkombination Shift+Command+O oder Shift+Steuerung+O auf einem PC. Wenn ich das auswähle, dann haben wir jetzt hier genau das gleiche Aussehen. Das heißt, wenn ich da drauf klicke, komme ich an jeden einzelnen Buchstaben, und damit ist es auch kein Fließtext mehr. Das wären die ersten Schritte, die ich vornehme, wenn es sich um solche speziellen Text-Exports handelt. Löschen wir das wieder. Die zweiten vorbereitenden Maßnahmen oder Schritte ist, die Ordnung in ein Illustrator-Dokument zu bringen. Denn beim Export hinterher ist es ja wichtig, dass Sie an die einzelnen User Interface Elemente oder einzelnen Objekte Ihrer Oberfläche gelangen, zumindestens die, die Sie auch einzeln, separat durch Scripting, durch Programmierung ansprechen müssen. Schauen wir uns das kurz an, wie die Ebene hier aufgebaut ist. Zunächst einmal haben wir nur eine einzige Ebene. Ich nehme das gerade mal raus, dann kann man das ein bisschen größer machen. dann ist das hinterher angenehmer. Wir haben eine einzige Ebene hier in Illustrator, und in dieser einen Ebene befinden sich halt diese zwei Oberflächen oder die Inhalte der zwei Zeichenflächen, wenn Sie so wollen. Erster Schritt ist, ich erstelle mir für jede Zeichenfläche oder für jedes Bild, für jede Benutzeroberfläche eine eigene Ebene. Das geht schnell. Hier unten einfach "Neue Ebene" erstellen, in der Ebenenpalette hier. Und diese Ebene, die neue Ebene nenne ich einfach nur "Player". Die zweite Ebene, die wir hier haben, betrifft die Elemente des Logins, und da bietet sich auch an, das genauso zu benennen. Benennen können Sie das durch einen Doppelklick einfach auf den Text, oder wenn Sie einen Doppelklick, einfach auf diese Ebene machen, dann öffnen sich hier die Ebenen-Optionen und man kann das Ganze entsprechend auch hier eingeben. Um jetzt nach der Erstellung solcher Inhalte alles in eine Ebene zu überführen, markieren Sie mit gedrückter linker Maustaste einfach alle Objekte. Sie sehen, jetzt sind Sie alle blau und hier leuchtet ein blaues Kästchen auf. Dahinter verbirgt sich eine tolle Funktion, denn wenn Sie dieses kleine blaue Kästchen hier mit der linken Maustaste festhalten und dann die Maus nach oben in die andere Ebene schieben, dann gibt es da einen Punkt, ein Moment, wo auch ein rotes Kästchen aufleuchtet, und wenn Sie dann die linke Maustaste loslassen, dann sind alle Elemente, die Sie gerade markiert hatten, nun von der einen Ebene "Login" in die Ebene "Player" verschoben worden. Also, eine schicke Funktion. Übrig bleiben dann jetzt in der Ebene "Login", wenn ich hier auf dieses runde Icon klicke, übrig bleiben dann alle Elemente in der Ebene "Login". Sie sehen, jetzt sind die auch markiert. Oder hier eben, in der Ebene "MUSIC PLAYER". Dann schauen wir uns an, was haben wir hier in der Ebene, zum Beispiel in dem Zeichenfenster "Login", dort gibt es einen Block, wenn man den anklickt, da ist alles gruppiert. Und wenn ich mir mal die einzelnen Bereiche anschaue, dann fällt das auch auf, dass ich im Grunde hier nur eine einzige Gruppe dran habe. Um solch eine Gruppierung aufzuheben, können Sie über den Menüpunkt "Objekt" "Gruppierung aufheben" diese Zusammenfassung quasi erst mal wieder auflösen. Alternativ Tastenkombinationen: Shift+Command+B oder Shift+Steuerung+B auf dem PC. Das mache ich jetzt mal, und da sieht man jetzt direkt nicht den großen Unterschied, weil es war eine Gruppierung. Dann hebe ich noch mal eine auf. Wenn ich jetzt mal woanders hinklicke, dann sieht man, habe ich jetzt hier zum Beispiel dieses Fenster separat, und hier unten an diese einzelnen Blöcke muss ich auch dran. Also gehe ich wieder auf "Objekt" "Gruppierung aufheben", klicke woanders und gehe wieder hier rein. Und jetzt sind wir separat. Die dritte Möglichkeit, wie Sie das auch noch aufheben können, ist neben Menüpunkt und Tastenkombinationen einfach die rechte Maustaste. Sie sehen, auch hier gibt es "Gruppierung aufheben". Da komm ich jetzt entsprechend auch an die einzelnen Elemente dran. Sie sehen hier in der Ebenenpalette, dass sich nun mehrere Gruppen hier drin befinden. Wechseln wir mal in die Zeichenfläche des Players, machen das mal zu, und das mal auf. Hier haben wir die gleiche Struktur, und da gibt es einen Textbereich für den Titel, wie auch immer, für den Song oder Liednamen, und hier unten sieht man jetzt zum Beispiel auch die einzelnen Bedienelemente des Players: Abspielknopf und schneller Vorlauf, schneller Rücklauf. Diese Elemente sind ebenfalls gruppiert, und das ist bei einem SVG-Export natürlich so nicht sinnvoll, denn an die einzelnen Elemente kämen Sie nach jetzigem Zustand nicht mehr heran. Sie hätten nur einen großen Block, der aus diesen drei einzelnen Bedienelementen besteht, und dass es wenig sinnvoll. Sie müssen alle Elemente so exportieren, dass Sie auch einzeln erreichbar sind. Also klicke ich auch hier wieder mit der rechten Maustaste drauf und sage "Gruppierung aufheben". Jetzt sehen Sie, kann ich das Element anklicken. Da haben wir nochmal eine Gruppierung, also gleiche Variante auch hier: "Gruppierung aufheben". Jetzt müsste ich genau das Element, der schnelle Rücklauf, der schneller Vorlauf, und den eigentlichen Abspielknopf, beziehungsweise Play-Button aktivieren können. Gleiches gilt hier: Einmal drauf geklickt, auch hier habe ich wieder "Vorlauf". Mit rechter Maustaste, "Gruppierung aufheben" Jetzt komme ich an den kleinen Abspielknopf dran. Ich komme an den Progressbar dran. Dann haben wir hier die Timecodes, auch hier hebe ich das mal auf, dass ich an einzelne Teile komme. Den Songnamen, der ist ok, und hier später auch vielleicht für das Cover etc., aber das denke ich mal, soll reichen. Nachdem ich dann alle Objekte soweit aufgelöst habe, dass zumindest die, an die ich später einzeln dran kommen muss, dass sie hier dann in der Ebene erreichbar sind, ist es sinnvoll, diese natürlich auch zu benennen, weil so sagt mir das herzlich wenig. Da kann man der Reihe nach durchgehen, entweder über die Ebenenpalette oder indem Sie die hier anklicken; ich mache das mal hier. Da sieht man, da habe ich hier den Timecode, und das kann ich hier zum Beispiel auch direkt hinschreiben: "Timecode". Dann haben wir hier" "Timecode 2". Was haben wir da drunter? Da haben wir den Songnamen. Jetzt kann ich hier natürlich einen Namen ersetzen, kann es aber auch in dem Fall jetzt tatsächlich sein lassen, was alle Texte betrifft, die hinterher ausgetauscht werden müssen. Also, theoretisch gesehen, muss ich das jetzt nicht benennen, weil ich das hinterher innerhalb der Programmierung sowieso austausche. Wichtiger sind zunächst mal die Objekte, die ich ansprechen möchte. Gehen wir mal weiter. Das brauchen auch nicht verändern. Da haben wir einen Button, das ist der schnelle Rücklauf, Nennen wir das mal "SRL", von schneller Rücklauf, und das ist der schneller Vorlauf, "SVL". Dann haben wir hier den Play-Button. Da haben wir den kleinen Abspielknopf. Den Progressbar zum Beispiel. Das brauchen wir nicht. Ich denke mal, das soll jetzt genügen. Sie sehen jetzt, dass ich alle Elemente aus einer Gruppierung herausgeholt habe und diese dann, zumindest die, die hinterher wichtig sind, auch benannt habe. Fassen wir es nochmal ganz kurz zusammen. Falls Ihnen übrigens auch die Darstellung hier mit den Icons zu klein ist, dann können Sie das ganz schnell ändern, indem Sie auf das Ebenen-Menü klicken, Bedienfeld "Optionen" aufrufen und dann zum Beispiel die Zeilengröße, also, das ist damit gemeint, was hier in der Ebenenpalette angezeigt wird, auf "Groß" zum Beispiel stellen oder sogar eigene Größen definieren und das mit OK bestätigen. Dann sieht man hier teilweise schon viel schneller, welche Objekte gemeint sind. Ich überführe mal die Ebene mal wieder hier unten hinein. Damit habe ich zunächst mal alle vorbereitenden Maßnahmen gemacht. Fassen wir das noch mal zusammen: Texte, die ich nicht direkt austauschen möchte, sondern die, [die] nur für die Optik dort stehen, die möglichst in Pfade konvertieren. Dann alle Ebenen aus den Zeichenflächen sauber zueinander zuordnen, jede Ebene für jedes Zeichenfläche. Dann innerhalb der Zeichenflächen oder Ebenen sämtliche gruppierten Objekte so weit extrahieren, dass man an die einzelnen Objekte, die man braucht, herankommt. Und im letzten Schritt diese Objekte sinnvoll benennen, sodass man dann auch bei dem Export auf diesen Namen direkten Zugriff hat, und auch versteht, was sich dahinter befindet, beziehungsweise auch der Entwickler, der vielleicht die Grafik so direkt noch gar nicht gesehen hat.

Illustrator CC 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!