TOUR DE EDGE. Einstieg in Adobe Edge Animate und Edge Reflow

Transkript

1 TOUR DE EDGE Einstieg in Adobe Edge Animate und Edge Reflow

2 vorträge und seminare für anwender und entscheider aus medienproduktion und marketing medien[plan]tage müller ditzen ag PHOTOSHOP ULI STAIGER CALVIN HOLLYWOOD MAIKE JARSETZ MARIUS SCHWIEGK TOM KRIEGER KARSTEN ROSE FOTOGRAFIE KAI GEBEL EBERHARD SCHUY THOMAS HERBRICH JAMARI LIOR ROLF NOBEL ILLUSTRATOR SABINE HAMANN MONIKA GAUSE INDESIGN DPS CROSSMEDIA PUBLISHING ANTOINETTE ROZEMA SVEN FISCHER GREGOR FELLENZ ACROBAT PDF STEPHAN JAEGGI JAN HILLMER WEBDESIGN ANIMATION JONAS HELLWIG SIMON WIDJAJA SASCHA WOLTER VIDEO MOTION GRAPHICS DESIGN SVEN BRENCHER ROBERT HRANITZKY 3D-GRAFIK ULI STAIGER KREATIVITÄT DESIGNPROZESSE ANDREAS JACOBS JOCHEN GÜRTLER MATTHIAS GÜNTHER STIMME PRÄSENTATION ANNO LAUTEN WERBETEXTE SABINE WEGNER GABRIELE BARON SOCIAL MEDIA MARKETING PATRICK MÖLLER THOMAS PATALAS GERD-INNO SPINDLER u.v.m. NATÜRLICH DRUCKEN UND VEREDELN! Tour de Edge Der perfekte Einstieg in interaktive Webanimationen und Responsive Web Design mit Adobe Edge Animate und Edge Reflow. Mit dieser kleinen Lektüre wollen wir Dir als Gestalter den Einstieg in das Moderne Web mit den beiden Tools Edge Animate und Edge Reflow vereinfachen. Wage mit uns Deine ersten Ausflüge in die Welt von interaktiven Webanimationen und Responsive Web Design. Mit unserem kostenlosen Getting-Started-Kit haben wir Dir u.a. ein paar Beispielprojekte samt Assets zusammengestellt, damit dem Bastel spaß und ersten Erkundungstouren der Tools nichts im Wege steht. Außerdem findest Du in diesem Heft eine Liste mit weiterführenden Links, die wir für erste Schritte empfehlen können. Happy Creating! Daniel Connerth & Simon Widjaja klimaneutral energiesparend Strom aus Wind, Wasser und Sonne GETTING STARTED KIT für Edge Animate und Reflow Jetzt kostenlos downloaden:

3 DESIGN FOR THE MODERN WEB Die folgenden Herangehensweisen helfen bei der Gestaltung mit Webstandards im modernen Web EDGE ANIMATE & REFLOW The Big Picture SPIELTRIEB Webstandards (HTML u. CSS) unterliegen einer fortwährenden Evolution. Entsprechend uneinheitlich ist die Unterstützung in den verschiedenen Browsern und Autorenwerkzeugen. Um ein Gespür für die kreativen Möglichkeiten zu bekommen, lohnt es sich mit einem gewissen Spieltrieb die Gestaltungsoberfläche modern Web zu erkunden und sich mit offenen Augen durch das Web zu klicken. Dabei unterstützen einen Award-Seiten wie oder html5gallery.com. KENNE DEIN MEDIUM...und kenne Deine Zielgruppe. Ein initiale Analyse der Zielgruppe und deren Verhalten sollte stets am Anfang eines jedes Projekts stehen. Daraus können notwendige Features, Content-Strategien und Herangehensweisen wie mobile first abgeleitet werden. TESTE FRÜH UND OFT Die Fülle an verschiedenen Geräten, wie Laptops, Tablets und Smartphones führt zu unterschiedlichen Darstellungsumgebungen. Darüber hinaus werden einige Funktionen der Webstandards noch nicht auf jedem Gerät unterstützt. Um potentiellen Fallstricken zu entgehen, gilt die Devise test early and often und das am besten auf realen Geräten. Sog. Open Device Labs ünterstützen Dich dabei, so dass Du keine tausende von Euros in eine eigene Geräteflotte investieren musst. Die teilnehmenden Städte findet Du hier: opendevicelab.com. DESIGN IN THE BROWSER Um früh ein Gespür für die Gestaltungsoberfläche Browser und dessen Einschränkungen zu bekommen, hat sich das Paradigma design in the browser etabliert. Je früher in einem Projekt mit Webstandards gestaltet wird, desto schneller kann getestet werden. Während man aufgrund der technischen Aspekte HTML und CSS bisher eher vom code in the browser sprechen musste, machen die Adobe Edge Tools diese Vorgehensweise nun auch für Gestalter zugänglich. Creation Animation Interaction Publishing EDGE ANIMATE: WORKFLOW Edge Commons JavaScript Browser... Complex Web Projects InDesign / DPS Creation Layout Interaction Output Edge Commons Communicating with clients Testing on devices EDGE REFLOW: WORKFLOW

4 EDGE ANIMATE: HIGHLIGHTS The right tool for the right job. HTML ANIMATION Entwirf aussagekräftige und animierte Inhalte mit Leichtigkeit oder verleihe bereits existierenden HTML Layouts und Templates mehr Pepp durch Animation und Interaktivität. PRÄZISE CHOREOGRAPHIEN Steuere Animationen mit einer intuitiven Zeitleiste, die enorme Präzision und Produktivität ermöglicht. Erstelle verschachtelte Animationen mit Symbolen und deren unabhängigen Zeitleisten. BEWEGUNGSPFADE Interaktive Webanimationen Der perfekte Einstieg in die Welt fesselnder Webanimationen und interaktiver Anwendungen mit Edge Animate Edge Animate ist das richtige Tool, wenn Du plattformübergreifende Inhalte auf der Basis von HTML/CSS erstellen möchtest, jedoch nicht auf den Komfort eines soliden Autorenwerk zeuges verzichten willst. Frei nach dem Motto mit wenig bis gar kein Code kannst Du Deine in Photoshop, Illustrator und Co. erstellten grafischen As- sets in Edge Animate zum Leben erwecken, spannende Geschichten erzählen und den Betrachter durch Interaktionen in einen Dialog verwickeln. Selbst flexible Layouts können problemlos realisiert werden, sodass die Ergebnisse auch auf mobilen Geräten oder im Rahmen eines InDesign/DPS Magazins eine gute Figur machen. Erstelle realistische und abwechslungsreiche Animationen mit frei modifizierbaren Bewegungspfaden inklusive Easings und Richtungs steuerung. MOBILE READY Durch den Einsatz von Webstandards lassen sich Animate-Kompositionen auf modernen Mobilgeräten abspielen. Touch-Gesten gehören ebenso zum Repertoire der möglichen Interaktionen. ZAHLREICHE VERÖFFENTLICHUNGSOPTIONEN Animate Projekte lassen sich alleinstehend im Web veröffentlichen, aber auch in größere Projekte z.b. mit Dreamweaver oder Muse inte grieren. Darüber hinaus lassen sich Animate Kompositionen nahtlos in E-Publikationen mittels InDesign/DPS einbinden. Darf s etwas mehr sein? Erste kostenlose Erweiterung für Edge Animate & Reflow z.b. Parallax, Spotlight uvm.

5 EDGE ANIMATE: DAS TOOL Den Überblick bewahren. EDGE ANIMATE: QUICKSTART Ein Schritt nach dem anderen. 1 1 Eigenschaftsinspektor. Hier werden sämtliche visuellen Einstellungsmöglichkeiten (CSS-Eigenschaften) zum jeweils ausgewählten Element auf der Bühne aufgelistet. 2 Bühne. Auf der Bühne siehst Du den aktuellen Zustand deiner Komposition bzw. des ausgewählten Symbols zum selektierten Zeitpunkt auf der Zeitleiste. In WYSIWYG-Manier können hier Anpassungen per Drag-And-Drop gemacht werden. 3 Zeitleiste. In der Zeitleiste, dem Herzstück von Animate, findet die eigentliche 2 3 Animations-Choreographie statt. Sämtliche animierten Symbol eigenschaften erhalten eine eigene Spur, die wiederum Animationsübergänge in Form von farbigen Sequenzen darstellt. 4 Projektstruktur. Hier siehst Du die einzelnen Ebenen der Gesamtkomposition bzw. des jeweils ausgewählten Symbols. 5 Bibliothek. In der Bibliothek werden nicht nur sämtliche externen Assets wie Bilder, Fonts und Sounds aufgelistet, sondern auch sämtliche Symbole des aktuellen Projekts. 4 DIE OBERFLÄCHE VON EDGE ANIMATE 5 Du kannst es kaum abwarten, ein kreatives Feuerwerk in Edge Animate zu zünden, hast aber noch gar keine Orientierung, wo und wie Du beginnen sollst? Die folgende Kurzanleitung unterstützt dich dabei. SCHRITT 1 // Als erstes laden wir eins der Beispielprojekte von der Web-Adresse ( herunter. Falls noch nicht geschehen, installieren wir Edge Animate CC via Creative Cloud. Wer kein Abo besitzt, kann hier die 30-Tage-Testversion nutzen. Wenn wir nun Animate starten, können wir das Sample Projekt öffnen. SCHRITT 2 // Nun möchten wir das Projekt erkunden und seine Bestandteile kennenlernen. Wir schauen uns die Elemente auf der Bühne an. Beim Anwählen verändert sich entsprechend der Eigenschaftsinspektor auf der linken Seite. Die Symbole des Projekts finden wir in der Bibliothek rechts. Per Doppelklick gelangen wir in die Symbolinstanz und können hier die jeweiligen Elemente und Zeitleiste betrachten. // Beispielprojekt SCHRITT 3 // Nun modifizieren wir die vorhandene Animation etwas. Wir verschieben dafür einen beliebigen Keyframe (Diamanten) auf der Zeitleiste und betrachten das Ergebnis (Leertaste zum Abspielen). SCHRITT 4 // Jetzt schauen wir uns das Ergebnis im Browser an. Mit Strg./Cmd + Enter wird das Animate Projekt direkt im Browser gestartet. So können wir unmittelbar das Resultat unserer Änderungen unter realen Bedingungen überprüfen. SCHRITT 5 // Wenn Du fertig bist, kannst Du einen Blick auf die Veröffentlichungs-Optionen werfen, indem Du auf Datei -> Einstellungen für Veröffentlichungen... klickst. Für Einsteiger sind besonders die beiden Optionen Web (Export für Web) und Bereitstellungspaket (Export für u.a. InDesign/DPS) spannend. Die Ausgabedateien findest Du dann im publish -Ordner Deines Projekts.

6 LINKLISTE: DESIGN FOR THE MODERN WEB Lesestoff und hilfreiche Videoanleitungen EDGEDOCKS.DE: EVERYTHING EDGE Erste Anlaufstelle für Einsteiger und Profis Mit der folgenden Linksammlung gelingt der schnelle und unkomplizierte Einstieg in die Welt von Edge Animate und Reflow. EDGEDOCKS EVERYTHING EDGE Hier findest Du alles, was im Zusammenhang von Adobes Edge Tools von Relevanz ist. edgedocks.de ADOBE TV Auf dieser Plattform präsentiert Adobe massenweise Videos zu den einzelnen Werkzeugen, u.a. den Edge Tools. Besonders die Reihe Create Like Crazy widmet sich dabei Edge Animate und Reflow. tv.adobe.com tv.adobe.com/show/create-like-crazy-with-adobe-edge LYNDA Lynda ist eine Online-Bibliothek mit Video-Tutorials zu diversen Themen. Zugriff erhälst Du über ein kostenpflichtiges Abo. Das Angebot ist aber entsprechend hochwertig und empfehlenswert. lynda.com TREEHOUSE Tutorials für CSS, HTML, Ruby, JavaScript, ios und vieles mehr gibt es bei Treehouse. Von elementaren Grundlagen bis Expertenwissen bekommst Du hier alles vermittelt, was Du für den Einstieg in das moderne Web benötigst. teamtreehouse.com Mit EdgeDocks haben wir bereits vor zwei Jahren das erste internationale Portal mit dem Fokus Edge Animate und Reflow gestartet. Wir sammeln Tutorials aus der ganzen Welt. Entsprechend groß ist mittlerweile der Fundus an spannenden Beispielen und Anleitungen. HOME OF EDGE COMMONS Einer der Kernaspekte von Edge Docks ist die Open Source Bibliothek Edge Commons. Mit diesen kostenlosen Erweiterungen für Edge Animate und Reflow lassen sich Projekte und spannende Features wie Parallax Scrolling mit minimalem Code-Aufwand realisieren. Dazu gibt es auch gleich die passende Anleitungen samt Beispielen. edgedocks.com/edgecommons MARKETPLACE Von einzelnen Komponenten wie Buttons bis hin zu ganzen Projekten findest Du auf dem Marketplace von Edge Docks eine große Auswahl an kostenlosen Angeboten. Wer mag, kann hierfür auch selber Komponenten beisteuern. edgedocks.com/market VIDEOS Im eigenen Channel bei Youtube und auf Edge Docks selbst findest Du eine Vielzahl von ausgewählten oder eigens produzierten Videos mit Anleitungen zum Nachbauen, hilfreichen Tipps und Tricks sowie reichlich Inspiration für eigene Projekte. Vorbeischauen lohnt sich! edgedocks.com youtube.com/edgedocks 2013, 238 Seiten E 33,90 (D) ISBN , 286 Seiten E 36,90 (D) ISBN , 308 Seiten E 29,90 (D) ISBN dpunkt.verlag GmbH Wieblinger Weg Heidelberg fon: / fax: / bestellung@dpunkt.de

7 EDGE REFLOW: HIGHLIGHTS The right tool for the right job. LAYOUT MIT VISUELLEN BREAKPOINTS Platziere Media Query Breakpoints genau an den Stellen, wo sie gebraucht werden, um Dein Design für unterschiedliche Bildschirmgrößen zu optimieren. PHOTOSHOP SCHNITTSTELLE Starte Dein Design in Photoshop und gestalte das responsive Layout in Reflow. Nutze das neue Photoshop Generator Plug-In um schnell Assets für Dein responsives Design zu erstellen. FLEXIBLES GESTALTUNGSRASTER Flexibel konzipieren und gestalten Mit Adobe Edge Reflow lassen sich Layout-Konzepte für die Gerätevielfalt des modern Webs entwerfen Ob Laptop, Tablet, Smartphone oder gar SmartTV: Das moderne Web wird überall konsumiert. Alle Medien haben entsprechend verschiedene Größen. Um keine Konsumenten zu vergraulen, sollten sich visuelle Kompositionen an die Darstellungs umgebungen anpassen. Bei der Konzeption und Kreation von solchen flexiblen und re- sponsiven Designs hilft Dir Edge Reflow. Das neue Tool für Layout im Web ist zwar noch ein Preview, bietet jedoch bereits zahlreiche Mehrwerte, wenn es darum geht ein Gefühl für Responsive Web Design (RWD) zu bekommen und das Lookand-Feel flexibler Inhalte mit dem Team und/oder Kunden zu kommunizieren. Nutze das flexible Gestaltungsraster, um Dein anpassungsfähiges Layout zu entwerfen. Wähle die jeweils optimale Spaltenzahl und Gitterbreite für verschiedene Layouts. MULTI PAGES Setze Links zu weiteren Seiten in Deinem Reflow Projekt oder zu einer externen Quelle. Erstelle so eine Navigation und klicke durch Deinen Prototyp. TESTING Nutze den Anfasser, um direkt im Reflow Projekt das Anpassungsverhalten Deines Layouts zu prüfen und starte es aus Reflow direkt in verschiedenen Browsern. Die Edge Inspect Integration ermöglicht zudem das unmittelbare Testen auf Mobilgeräten. Teste Deine responsiven Layouts und mobilen Apps. Früh und oft. Auf realen Geräten. In Deiner Stadt. Kostenlos.

8 EDGE REFLOW: DAS TOOL Den Überblick bewahren GETTING STARTED KIT für Edge Animate und Reflow DIE OBERFLÄCHE VON EDGE REFLOW 1 Gestaltungsfläche (Canvas). Hier lassen sich die einzelnen Elemente per Drag & Drop platzieren und anhand des flexiblem Gestaltungsrasters in WYSIWYG-Manier anordnen. Die Darstellungsfläche ist bereits eine Browserinstanz. 2 Anfasser. Das wohl wichtigste Werkzeug ist der Anfasser, mit dem sich verschiedene Bildschirmgrößen unmittelbar und stufenlos durch Hin- und Herbewegen bei gedrückter Maustaste simulieren lassen. 3 Eigenschaftsinspektor. Hier werden die jeweiligen (CSS-)Eigenschaften des aktuell angewählten Elements aufgelistet. 4 Jetzt kostenlos downloaden! Das Getting-Started-Kit enthält Beispielprojekte, Projektvorlagen und Komponenten Media Query Leiste mit Pixel-Maßstab. In dieser Leiste werden die Media Query Breakpoints und die durch sie erzeugten Bereiche angezeigt. Darunter befindet sich zur Orientierung ein Pixel-Maßstab. Neue Breakpoints lassen sich mit Klick auf das +-Zeichen hinzufügen. Impressum: Simon Widjaja (V.i.S.d.P, Herausgeber) und Daniel Connerth (Redaktion), Herbrandstr. 1, Köln EDGE DOCKS

9 EDGE DOCKS ANLEITUNGEN, VI DEOS, VORLAGEN, KOM PONENTEN UVM.