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

Illustrator CC 2015 für Webdesigner: SVG

Illustrator-SVG in Adobe Muse kopieren

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das Zusammenspiel von Adobes Creative-Cloud-Software ist in vielen Bereichen bekannt. Auch beim SVG-Support hat Adobe eine Funktionalität umgesetzt, die speziell bei der Arbeit mit Illustrator, SVG und Muse zum Tragen kommt.

Transkript

Einer der ganz großen Vorteile der CreativeCloud ist, dass Sie Zugriff auf alle Applikationen von Adobe haben. Eine Software die mir besonders gut gefällt, ist Adobe Muse, denn mit Adobe Muse können Sie, ohne eine einzige Zeile Sourcecode schreiben zu müssen, vollständige Webseiten gestalten und dem Kunden demonstrieren. Es ist nicht dafür gedacht, Webseiten zu erstellen und diese dann in echt ins Web zu stellen, sondern es ist wirklich eine Gestaltungsgrundlage im Laufe eines Webprojektes, um dem Kunden bereits die Webseite zu zeigen und auch zu demonstrieren, wie sie funktionieren wird, wenn man auf einen Button klickt oder auf einen Menüpunkt. Auch hier ist das Zusammenspiel wieder zwischen Illustrator, SVG und Adobe Muse schlicht phänomenal. Das möchte ich Ihnen in diesem Video kurz demonstrieren. Ich habe also hier ein Logo vorbereitet für ein Webseitenprojekt, für die Firma VECTORKINGS. Eine Ideefirma einfach, die sich um App-Entwicklung und dergleichen kümmert. Das zeige ich Ihnen mal in Adobe Muse. So sieht das in Adobe Muse aus. Wir haben also hier die eigentliche Startseite, wir haben Unterseiten. Gehen wir mal in die Startseite hinein. Ein Doppelklick da drauf öffnet das. Dann haben wir hier verschiedene Inhalte auf der Webseite, und das Tolle ist an Adobe Muse, dass es sich hier um eine Responsive-Gestaltung handelt. Das kann ich mit Adobe Muse eben auch hervorragend umsetzen. Sie sehen, sobald ich das vergrößere, hier auf den nächstgrößeren Abschnitt, habe ich ein etwas anderes Aussehen, und genauso ist das auch gedacht. So, gehen wir wieder zurück, hier hinein, ganz sichtbar, fehlt das Logo. Und ich rufe es jetzt doch noch mal auf, und zwar hier. Fällt sofort auf. Da fehlt uns das Logo. Und das ist genau das, was ich hier im Illustrator gestaltet habe. Das Schöne ist, da wir ja hier in Illustrator ein Logo in Form von Vektoren haben, kann ich dieses Logo einfach markieren und dann mit COMMAND+C oder Strg+C in die Zwischenablage kopieren, alternativ natürlich über den Menüpunkt "Kopieren". Und wenn ich jetzt in Adobe Muse hineinwechsle, allerdings nicht in dieses Seite, sondern ich gehe jetzt in die Masterpage hier unten. So, und da sieht man, da fehlt also auch hier-- Das ist nur die Struktur, und hier oben links soll das Logo hin. Jetzt muss ich nur an Eines denken, dass ich das Ganze erstmal in der vollen Größe zeige. So soll das aussehen, wenn die volle Größe da ist. Und hier hinein kopiere ich das jetzt mit COMMAND beziehungsweise Strg+V. Und Sie sehen, da kommt es schon. Und das Tolle ist, dass das Ganze ein SVG-File bleibt. D. h., wenn wir jetzt hier mal auf die Elemente gehen, dann sieht man, dass das Ganze tatsächlich als SVG eingefügt wurde. Ich mache es mal ein bisschen breiter, so! Also, man hat die Maße, und man hat vor allem den Hinweis, dass es ein SVG-Dokument ist. Und gerade bei der Gestaltung jetzt im Vorfeld mit Adobe Muse, da Sie Responsive-Seiten generieren, diese Seiten ja unterschiedlich groß sind, die Logos skaliert werden müssen, ist SVG natürlich allererste Wahl, weil, Sie haben in jeder Auflösung, für jede Darstellung die maximale Qualität, die möglich ist. Jetzt passe ich das Ganze noch ein bisschen an, so dass das von der Größe her hier passt. Ich denke, so ist ganz nett! Ich gehe gerade noch ein bisschen nach links, so. Und dann soll das, glaube ich, so ausreichen. Ich schließe die Master-Ansicht und wechsle hier hin, Sie sehen schon, in meine Homepage. Hier haben wir es schon. Und wenn wir uns das jetzt mal in der Vorschau anschauen-- Ich schalte das Ganze mal ein. So, jetzt rendert er das Ganze, das dauert einen kleinen Augenblick, und jetzt zeigt er die Vorschau. Ja, und hier haben wir eine vollständige Seite mit dem Logo, und das Ganze funktioniert natürlich auch, wenn ich das jetzt kleiner mache. Man sieht, jetzt kommen die Punkte langsam zum Tragen. So, da haben wir VECTORKINGS in kleiner Darstellung. Dafür müsste ich jetzt noch etwas machen, also, es ist noch nicht ganz perfekt, Sie sehen das. Aber vom Prinzip her wird es deutlich, dass das ganze Konzept funktioniert. Das ist auch gleichzeitig jetzt auf allen Seiten. Wenn ich also die andere Seite aufrufe, so, dann haben wir hier in der Form das Logo. Ich habe es beim Service in der Form, Referenzen, Kontakt, überall, also quasi schon eine funktionstüchtige Seite, und das ist wirklich eine schicke Sache. Wenn man bedenkt, dass jetzt hier wirklich ein SVG-File, direkt aus Illustrator importiert werden kann. Damit kennen Sie die beiden Möglichkeiten hier in Illustrator. Das bezieht sich natürlich nicht nur auf Logos, sondern auf Icons, auf Elemente, auf Schmuckelemente, auf all das, was ich bereits im Vorfeld angesprochen habe. Das wird direkt als SVG exportiert, und Sie brauchen sich in Muse, wenn Sie es kleiner und größer haben wollen, keine Gedanken mehr machen, denn die Qualität ist durch das SVG-Format, durch die Vektoren immer gleich gut.

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!