CREATIVE CLOUD WAS GIBT ES NEUES IM WEB-BEREICH?

Transkript

1 CREATIVE CLOUD WAS GIBT ES NEUES IM WEB-BEREICH?

2 ADOBE PHOTOSHOP CC

3 ZEICHENFLÄCHEN Ähnlich wie in Illustrator kann man jetzt auch in Photoshop mit Zeichenflächen arbeiten. Über Zeichenflächen lassen sich z.b. Designs für unterschiedliche Endgeräte erstellen. Über die + Schaltfläche kann eine Zeichenfläche einfach dupliziert werden. In der Eigenschaften Palette können über Voreinstellungen Zeichenflächen für diverse Endgeräte ausgewählt werden.

4 CC BIBLIOTHEK UND DEVICE PREVIEW Über die Anbindung an die Creative Cloud Bibliothek lassen sich Bilder, Farben, Schriften, Stile usw. einfach mit anderen Adobe Programmen austauschen. Die Device Preview ermöglicht eine Vorschau des Design direkt auf dem mobilen Endgerät.

5 ADOBE DREAMWEAVER CC

6 BOOTSTRAP INTEGRATION Das Bootstrap Framework fest wurde fest in Dreamweaver implementiert. Beim Anlegen einer neuen HTML Seite bietet Dreamweaver Bootstrap als Auswahl. Zusätzlich gibt es 6 Startvorlagen zu unterschiedlichen Themen mit denen der Einstieg erleichtert wird. Bootstrap wurde auch in der Einfügen Palette fest integriert und befindest sich dort unter einer eigenen Kategorie wieder. Das Layout lässt sich mit Containern und Spalten über die Einigen Palette erstellen. Alle wichtigen Komponenten wie Navigationselemente, responsive Bilder, Buttons, usw. befinden sich ebenfalls in der Palette.

7 MEDIAQUERIES ANPASSEN Über visuelle Medienabfragen (Mediaqueries) lassen sich die Breakpoints für unterschiedliche Endgeräte intuitiv erstellen. Ein Klick auf einer der visuellen Medienabfragen passt die Live- Ansicht direkt and die entsprechende Größe an. Eine Überprüfung durch lästiges Skalieren des Browserfenster entfällt.

8 LIVE-ANSICHT VERBESSERUNGEN Layouts lassen sich jetzt noch leichter in der Live-Ansicht von Dreamweaver editieren. Über sogenannte HUB s (Head Up Displays) lassen sich sehr einfach und intuitiv Änderungen vornehmen. HTML5 Elemente lassen sich per Drag & Drop aus der Einfügen Palette in die Live Ansicht ziehen.

9 CSS DESIGNER Über die CSS Designer Palette lassen sich die CSS Eigenschaften sehr einfach und intuitiv anpassen. Mit jedem Update von Dreamweaver wird der CSS Designer weiter optimiert und verbessert. Die Bootstrap CSS Datei bleibt geschützt, so dass diese unabhängig aktualisiert werden kann.

10 ADOBE ANIMATE CC

11 UNTERSTÜTZUNG VON ANIMATE Animate unterstützt jede Plattform, jedes Gerät und jeden Anwendungsfall. Flash Player AIR for Desktop AIR for ios AIR for Android HTML5 Canvas WebGL Snap.SVG kompatibel zu weiteren Plattformen

12 UNZÄHLIGE NEUERUNGEN New Paint Brush Tool Brush Library with art brushes Improved Brush tool Vector Art Brush Editor CC Libraries Panel Support for Adobe Stock Stage Rotation SVG Import dialog Colored Onion Skins Tagged Swatches Publish text as outlines in HTML5 Canvas Stage Scaling Content Scaling Custom Platform optimizations Video Export to multiple resolutions OAM Publishing support Improved Object Drawing Mode Representation New buttons for commonly used operations Bone Tool HTML5 Canvas Sprite Sheets with customizations Timeline Video Guide Audio Splitting Scaled Brushes ios 64-bit Output Typekit support Static Text support HTML5 Canvas template support

13 BEISPIEL PROJEKTE Animation - all animations in his portfolio are animate/flash compositions - Hugely popular flash artist with 500k followers on youtube Another one with 700 k subscribers - Games webgl game trailor by Alex Fleisig who has done animations for Hollywood movies like shrek, madagaskar, ratarouile etc. Grant Skinners Html5 canvas games with images below. The source code is available on github - HTML5 Canvas Game TossTheseSnowballs/ WebGL Game WebGL Animation SVG Support (Custom Platform) Example Source: By - Ikeda Tainobe

14 VIEL SPASS BEIM AUSPROBIEREN!! André Reinegger