Grafik-Module und Animationen mit PS + Ai + CSS + SVG
Kurzbeschreibung
Bei der Entwicklung moderner und individuell gestalteter Websites werden mittlerweile zahlreiche Grafikprogramme und Coding-Techniken kombiniert. Nur so kann ein charakteristisches, flexibles und performantes Layout entstehen. Die Palette reicht von »klassischen« Layout-Elementen, die mit Hilfe von CSS erstellt werden, über komplexe Gestaltungsmöglichkeiten, Farbschemata und Styleguides mit Hilfe von Präprozessoren wie Sass bis hin zu »echten« grafischen Elementen mit Hilfe des codebasierten Dateiformats SVG. Und auch Pixelgrafiken und Webfont-Icons spielen nach wie vor eine große Rolle.
In diesem Workshop erfahren Sie, wie mit Hilfe von CSS, Photoshop und Illustrator attraktive Grafiken entstehen und im Browser zu robusten Design-Elementen kombiniert werden. Neben den Grundlagen des »Design in the Browser«-Workflows, lernen Sie zahlreiche Tipps und Tricks kennen um mit geringem Aufwand hochwertige grafische Effekte zu erreichen. Die neuen Web-Funktionen der Adobe Creative Cloud werden dabei ebenso behandelt wie neue CSS-Techniken, CSS-Animationen, Transformationen und das Dateiformat SVG inkl. der damit verbundenen Animationsmöglichkeiten. Sie lernen, was Sie bei der Gestaltung von SVG in Illustrator und Co. beachten sollen und wie Sie SVG-Grafiken exportieren, einbinden und optimieren können.
Darüber hinaus bietet das Format SVG faszinierende Möglichkeiten in Kombination mit CSS und JavaScript, denn Sie können SVGs umfärben, animieren und anderweitig manipulieren. Auch im Zusammenhang mit responsive Design bietet das Format spannende Möglichkeiten.
Das müssen Sie mitbringen
Um die Beispiele live erarbeiten zu können benötigen Sie einen Notebook mit einem Code-Editor Ihrer Wahl, Google Chrome, Photoshop und Illustrator.
Zielgruppe
Die Sprache des Seminars ist Deutsch. Die Schulungsunterlagen werden ebenfalls in deutscher Sprache bereitgestellt.
Dozent: Jonas Hellwig
Kunden-Feedback zu unseren öffentlichen Schulungen
[testimonials kategorie=“Oeffentliche Schulung“ posts_per_page=“2″]