Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Kurzbeschreibung

Das vektorbasierte Web-­Grafikformat SVG hat in der letzten Zeit enorm an Popularität gewonnen. SVGs können ohne Qualitätsverlust skaliert werden, sehen auf jedem Display scharf aus und können darüber hinaus animiert oder mit Interaktionselementen versehen werden. In diesem Seminar lernen Sie anhand in sich abgeschlossener Übungen die Möglichkeiten von SVG kennen.

Zunächst erfahren Sie, wie SVG-­Grafiken mit Hilfe von Adobe Illustrator und/oder Sketch erstellt werden und was Sie bereits bei der Gestaltung der Grafik beachten sollten. Anschließend lernen Sie die verschiedenen Export-­Einstellungen kennen und erfahren, wie Browser-­Kompatibilität, Bildqualität und Dateigröße entscheidend beeinflusst werden können. Auch verschiedene Plugins und Tools zur Optimierung der SVGs werden vorgestellt.

Im zweiten Teil des Seminars lernen Sie SVG-­Dokumente aufgebaut sind und wie der SVG-Code manipuliert werden kann. Sie werden Mouse-­Over-­Effekte erstellen, die Grafiken umgestalten oder Breakpoints hinzufügen, um unterschiedliche Grafiken für unterschiedliche Displaygrößen zu erstellen. Neben den nativen Möglichkeiten von SVG existieren dazu auch diverse CSS-­Eigenschaften.

Der letzte Teil des Seminars beschäftigt sich mit dem Thema SVG-­Animation. Auch hier existiert eine native SVG-Syntax mit der beispielsweise Elemente an Pfaden entlang bewegt werden können. Darüber hinaus lassen sich auch zahlreiche CSS-Animationstechniken auf SVG anwenden.


Agenda

  • SVG-­Grafiken mit Adobe Illustrator erstellen
  • SVG-­Grafiken exportieren und optimieren
  • SVG-Grafiken einbinden
  • Fallback-Lösungen
  • Der Aufbau eines SVG-­Dokuments
  • SVG-­Grafiken mit CSS umgestalten
  • Interaktionen hinzufügen
  • Responsive SVG-­Grafiken
  • SVG Sprites und Icon-Systeme
  • SVG-­Animationen mit CSS
  • Tools und Hilfsmittel

Voraussetzungen & Zielgruppe

Das Seminar richtet sich an Webdesigner und Frontend-­Developer. Solide Kenntnisse in Adobe Illustrator und Photoshop sowie in HTML und CSS werden vorausgesetzt.

Die Sprache des Seminars ist Deutsch. Die Schulungsunterlagen werden ebenfalls in deutscher Sprache bereitgestellt.


Feedback zu unseren Schulungen

  • Wir hatten eine Online-Schulung von den Kulturbanausen. Jonas ist ein sehr kompetenter und sympathischer Seminarleiter. Wir haben viele nützliche Informationen erhalten, die wir für unser Unternehmen gut gebrauchen können. Wir können die Online-Schulungen nur weiterempfehlen!

    Mai 2022, Tobias Mamerow, Leitender Grafiker,
    Staude GmbH

  • Vielen lieben Dank noch einmal für den Konzeptionsworkshop. Wir alle haben die Schulung sehr genossen. Toll, was in so kurzer Zeit mit Live-Prototyping entstehen kann!

    April 2022, Helen Otte, Senior Art Director, pressrelations GmbH

  • Es war eine Customer Journey, wie sie im Buche steht: 

    1. Wir hatten ein Problem – die Prozesse zwischen Designer, Agentur und Kunde waren suboptimal. 
    2. Wir haben gegoogelt – und sind auf das Schulungsangebot der Kulturbanausen gestoßen. 
    3. Wir haben ein Kontaktformular ausgefüllt – und ein Online-Training „Modernes Webdesign“ gebucht. 

    Die Schulungs-Inhalte waren intensiv, der Trainer empathisch und professionell – Ihr habt unsere Erwartungen deutlich übertroffen!

    März 2022, Anne Wentzel, Marketingleitung, Ei Electronics GmbH

Vergleichbare Schulungsthemen