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 (oder Photoshop) 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 erstellen
  • SVG-­Grafiken optimieren und exportieren
  • Der Aufbau eines SVG-­Dokuments
  • SVG-­Grafiken umgestalten
  • Interaktionen hinzufügen
  • Responsive SVG-­Grafiken
  • SVG-­Animationen
  • 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.

Kunden-Feedback zu unseren öffentlichen Schulungen

Das war ein wirklich toller WordPress-Workshop!

Januar 2016, Carsten Baucke, Mediengestalter – Quelle

Dieser interessante Workshop gehalten von Jonas Hellwig (kulturbanause.de) brachte viele neue Erkenntnisse in Sachen Workflow im Response Webdesign.

Juli 2014, Nina Evers – Quelle

Ich verneige mich! Wunderbarer Vortrag wie das mit dem Design im Web heute funktioniert!

August 2015, David Hellmann – Quelle

Das war so ein tolles Seminar. Einfach nur klasse. Vielen Vielen Dank !!!

Oktober 2015, Detlef Heese, Geschäftsleitung & Diplom Designer, Hasegold GmbH

[…] Begeistert war ich von Jonas Hellwigs Vortrag zur „Content Choreography für responsive Websites […]

April 2014, Die Onlinerin, Anja Böhnke, – Quelle

Mit diesen Kunden haben wir bereits erfolgreich zusammengearbeitet.

Worauf warten Sie noch?

Sie haben bereits eine Idee für ein gemeinsames Projekt? Dann nutzen Sie unsere Online-Projektplaner!

Wir planen ein Web Design-Projekt
Wir planen ein Inhouse-Seminar

Bei allgemeinen Fragen, Anregungen oder Kritik nutzen Sie bitte das Kontaktformular.