Benutzerhandbuch Abbrechen

Exportieren von Bildern und animierten GIF-Dateien

  1. Adobe Animate-Benutzerhandbuch
  2. Einführung in Animate
    1. Neue Funktionen in Animate
    2. Visuelles Glossar
    3. Systemanforderungen für Animate
    4. Tastaturbefehle für Animate
    5. Mit verschiedenen Dateitypen in Animate arbeiten
  3. Animation
    1. Grundlagen von Animationen in Animate
    2. So verwenden Sie Bilder und Schlüsselbilder in Animate
    3. Einzelbildanimation in Animate
    4. So arbeiten Sie in Animate mit klassischen Tween-Animationen
    5. Pinselwerkzeug
    6. Bewegungsführung
    7. Bewegungs-Tweens und ActionScript 3.0
    8. Bewegungs-Tween-Animationen
    9. Bewegungs-Tween-Animationen
    10. Erstellen von Bewegungs-Tween-Animationen
    11. Verwenden von Eigenschaftenschlüsselbildern
    12. Animieren der Position mithilfe eines Tweens
    13. So bearbeiten Sie Bewegungs-Tweens mit dem Bewegungs-Editor
    14. Bearbeiten des Bewegungspfades einer Tween-Animation
    15. Manipulieren von Bewegungs-Tweens
    16. Hinzufügen von benutzerdefinierten Beschleunigungen
    17. Erstellen und Anwenden von Bewegungsvoreinstellungen
    18. Einrichten von Animations-Tween-Bereichen
    19. Arbeiten mit als XML-Dateien gespeicherten Bewegungs-Tweens
    20. Vergleich von Bewegungs-Tweens und klassischen Tweens
    21. Form-Tweening
    22. Verwenden von Animation mit dem Bone-Werkzeug in Animate
    23. Arbeiten mit Figuren-Rigging in Animate
    24. So verwenden Sie Maskenebenen in Adobe Animate
    25. So arbeiten Sie in Animate mit Szenen
  4. Interaktivität
    1. So erstellen Sie in Animate Schaltflächen
    2. Konvertieren von Animate-Projekten in andere Dokumenttypen
    3. HTML5 Canvas-Dokumente in Animate erstellen und veröffentlichen
    4. Interaktivität mit Codefragmenten in Animate hinzufügen
    5. Erstellen benutzerdefinierter HTML5-Komponenten
    6. Verwenden von Komponenten in HTML5 Canvas
    7. Erstellen von benutzerdefinierten Komponenten: Beispiele
    8. Codefragmente für benutzerdefinierte Komponenten
    9. Empfohlene Verfahren – Anzeigen mit Animate
    10. Authoring und Veröffentlichen für VR
  5. Arbeitsbereich und Arbeitsablauf
    1. Erstellen und Verwalten von Pinseln
    2. Verwenden von Google Fonts in HTML5 Canvas-Dokumenten
    3. Verwenden von Creative Cloud Libraries in Adobe Animate
    4. Bühne und Bedienfeld „Werkzeuge“ in Animate verwenden
    5. Arbeitsablauf und Arbeitsbereich in Animate
    6. Verwenden von Webschriftarten in HTML5 Canvas-Dokumenten
    7. Zeitleisten und ActionScript
    8. Arbeiten mit mehreren Zeitleisten
    9. Festlegen von Voreinstellungen
    10. Verwenden der Animate-Authoring-Bedienfelder
    11. Zeitleisten-Ebenen in Animate erstellen
    12. Exportieren von Animationen für Apps und Game-Engines
    13. Verschieben und Kopieren von Objekten
    14. Vorlagen
    15. Suchen und Ersetzen in Animate
    16. Rückgängigmachen, Wiederholen und das Bedienfeld „Protokoll“
    17. Tastaturbefehle
    18. So verwenden Sie die Zeitleiste in Animate
    19. Erstellen von HTML-Erweiterungen
    20. Optimierungsoptionen für Bilder und animierte GIF-Dateien
    21. Exporteinstellungen für Bilder und GIF-Dateien
    22. Bedienfeld „Elemente“ in Animate
  6. Multimedia und Video
    1. Transformieren und Kombinieren von Grafikobjekten in Animate
    2. Erstellen von und Arbeiten mit Symbolinstanzen in Animate
    3. Bildnachzeichner
    4. So verwenden Sie Sound in Adobe Animate
    5. Exportieren von SVG-Dateien
    6. Erstellen von Videodateien zur Verwendung in Animate
    7. So fügen Sie in Animate ein Video hinzu
    8. Arbeiten mit Video-Cue-Points
    9. Objekte in Animate zeichnen und erstellen
    10. Umformen von Linien und Formen
    11. Striche, Füllungen und Farbverläufe in Animate CC
    12. Adobe Premiere Pro und After Effects
    13. Farb-Bedienfelder in Animate CC
    14. Öffnen von Flash CS6-Dateien mit Animate
    15. In Animate mit klassischem Text arbeiten
    16. Platzieren von Bildern in Animate
    17. Importierte Bitmaps in Animate
    18. 3D-Grafiken
    19. Arbeiten mit Symbolen in Animate
    20. Zeichnen von Linien und Formen mit Adobe Animate
    21. Mit Bibliotheken in Animate arbeiten
    22. Exportieren von Sounds
    23. Auswählen von Objekten in Animate CC
    24. Arbeiten mit Adobe Illustrator AI-Dateien in Animate
    25. Anwenden von Mustern mit dem Sprühen-Werkzeug
    26. Anwenden von Mischmodi
    27. Anordnen von Objekten
    28. Automatisieren von Aufgaben mit dem Menü „Befehle“
    29. Mehrsprachiger Text
    30. Verwenden der Kamera in Animate
    31. Verwenden von Animate mit Adobe Scout
    32. Arbeiten mit Fireworks-Dateien
    33. Grafikfilter
    34. Sounds und ActionScript
    35. Zeichnungsvoreinstellungen
    36. Zeichnen mit dem Stiftwerkzeug
  7. Plattformen
    1. Konvertieren von Animate-Projekten in andere Dokumenttypen
    2. Unterstützung benutzerdefinierter Plattformen
    3. HTML5 Canvas-Dokumente in Animate erstellen und veröffentlichen
    4. Erstellen und Veröffentlichen eines WebGL-Dokuments
    5. So packen Sie Apps für AIR for iOS:
    6. Veröffentlichen von Apps für AIR for Android
    7. Veröffentlichen für Adobe AIR für den Desktop
    8. ActionScript-Veröffentlichungseinstellungen
    9. Empfohlene Verfahren – Organisieren von ActionScript in einer Anwendung
    10. So verwenden Sie ActionScript mit Animate
    11. Empfohlene Verfahren – Richtlinien für Eingabehilfen
    12. Eingabehilfen für den Animate-Arbeitsbereich
    13. Schreiben und Verwalten von Skripts
    14. Aktivieren der Unterstützung für benutzerdefinierte Plattformen
    15. Unterstützung benutzerdefinierter Plattformen – Übersicht
    16. Erstellen barrierefreier Inhalte
    17. Arbeiten mit Plug-ins zur Unterstützung benutzerdefinierter Plattformen
    18. Debuggen von ActionScript 3.0
    19. Aktivieren der Unterstützung für benutzerdefinierte Plattformen
  8. Exportieren und Veröffentlichen
    1. So exportieren Sie Dateien aus Animate CC
    2. OAM-Veröffentlichung
    3. Exportieren von SVG-Dateien
    4. Exportieren von Grafiken und Videos mit Animate
    5. Veröffentlichen von AS3-Dokumenten
    6. Exportieren von Animationen für Apps und Game-Engines
    7. Exportieren von Sounds
    8. Exportieren von QuickTime-Videodateien
    9. Steuern der Wiedergabe von externen Videos mithilfe von ActionScript
    10. Empfohlene Verfahren – Tipps zum Erstellen von Inhalten für mobile Geräte
    11. Empfohlene Verfahren – Videokonventionen
    12. Empfohlene Verfahren – Authoring-Richtlinien für SWF-Anwendungen
    13. Empfohlene Verfahren – Strukturierung von FLA-Dateien
    14. Empfohlene Verfahren für die Optimierung von FLA-Dateien für Animate
    15. ActionScript-Veröffentlichungseinstellungen
    16. Veröffentlichungseinstellungen für Animate festlegen
    17. Exportieren von Projektor-Dateien
    18. Exportieren von Bildern und animierten GIF-Dateien
    19. HTML-Veröffentlichungsvorlagen
    20. Adobe Premiere Pro und After Effects
    21. Schnelles Teilen und Veröffentlichen Ihrer Animationen

In diesem Artikel erfahren Sie, wie Sie Bilder und animierte GIF-Dateien exportieren.

Animate führt die Funktionen „Bild exportieren“ und „Animiertes GIF exportieren“ ein, mit denen Sie Elemente auf benutzerfreundliche und interaktive Weise in das PNG-, das JPEG-, das statische GIF- und das animierte GIF-Format exportieren können.

Beim Vorbereiten von Bildern für das Web und andere Online-Medien müssen Sie häufig einen Kompromiss zwischen Anzeigequalität und Dateigröße des Bildes finden.

Die Optimierungsfunktionen im Dialogfeld „Bild exportieren“ können Sie verwenden, um eine Vorschau optimierter Bilder in verschiedenen Dateiformaten und mit unterschiedlichen Dateiattributen anzuzeigen. Sie können mehrere Versionen eines Bildes gleichzeitig anzeigen und Optimierungseinstellungen während der Vorschau ändern, um die für Ihre Anforderungen am besten geeignete Einstellungskombination zu finden. Außerdem haben Sie die Möglichkeit, Transparenz und Basisfarbe sowie das Dithering einzustellen und das Bild auf bestimmte Pixelmaße oder einen bestimmten Prozentwert der Originalgröße zu skalieren.

Wenn Sie eine optimierte Datei mit dem Befehl „Bild exportieren“ speichern, haben Sie die Möglichkeit, eine HTML-Datei für das Bild zu generieren. Diese Datei enthält alle erforderlichen Informationen zum Anzeigen des Bildes in einem Webbrowser.

In Animate können Sie ein Bild mit dem Befehl „Speichern unter“ in einer GIF-, JPEG- oder PNG-Datei speichern. Je nach Dateiformat können Sie Bildqualität, Hintergrund, Transparenz, Farbanzeige und Lademethode angeben. Webfunktionen wie etwa Verknüpfungen und Animationen, die Sie einer Datei hinzugefügt haben, bleiben dabei jedoch nicht erhalten.

Mit dem Animate-Bildprozessor können Sie auch Kopien eines Ordners mit Bildern im JPEG-Format speichern. Der Bildprozessor kann die Größe der Bilder ändern und deren Farbprofil in den Webstandard sRGB konvertieren.

Exportieren von Bildern

Verwenden Sie das Dialogfeld „Bild exportieren“ („Datei“ > „Exportieren“ > „Bild exportieren“ und „Datei“ > „Exportieren“ > „Animiertes GIF exportieren“), um Optimierungsoptionen auszuwählen und optimiertes Bildmaterial in der Vorschau anzuzeigen.

A. Anzeigeoptionen B. Popup-Menü „Optimieren“ C. Voreinstellungsoptionen D. Optionen für die Bildgröße E. Animationsoptionen F. Vorschau G. Symbolleisten 

Vorschau von Bildern im Dialogfeld

Zum Wählen einer Anzeigeoption klicken Sie auf die entsprechende Registerkarte am oberen Bildrand:

Original

Zeigt das Bild ohne Optimierung an.

Optimiert

Zeigt das Bild mit den aktuellen Optimierungseinstellungen an.

2fach

Zeigt zwei Versionen des Bildes nebeneinander an.

Wenn Bildmaterial im Dialogfeld „Bild exportieren“ nicht komplett angezeigt wird, können Sie das Handwerkzeug verwenden, um andere Stellen in den sichtbaren Bereich zu ziehen. Vergrößern bzw. verkleinern Sie die Darstellung mit dem Zoomwerkzeug.

  • Wählen Sie das Hand-Werkzeug aus (bzw. halten Sie die Leertaste gedrückt) und ziehen Sie, um das Bild zu verschieben.
  • Wählen Sie das Zoom-Werkzeug und klicken Sie zum Vergrößern auf die gewünschte Ansicht. Klicken Sie zum Verkleinern mit gedrückter Alt-Taste (Windows) bzw. Wahltaste (Mac OS) auf eine Ansicht.

    Sie können auch unten im Dialogfeld einen Prozentwert für die Vergrößerung eingeben bzw. auswählen.

Anzeigen optimierter Bilddaten sowie der Downloadzeit

Im Anmerkungsbereich unter jedem Bild im Dialogfeld „Bild exportieren“ werden Informationen zur Optimierung angezeigt. Die Anmerkung zum Originalbild enthält den Dateinamen und die Dateigröße. Die Anmerkung zum optimierten Bild enthält die aktuellen Optimierungseinstellungen, die Größe der optimierten Datei und die geschätzte Ladezeit auf der Grundlage der jeweiligen Modemgeschwindigkeit. Die Modemgeschwindigkeit können Sie im Popup-Menü „Vorschau“ festlegen.

Anzeigen der Vorschau eines Bildes mit verschiedenen Gamma-Werten

Der Gamma-Wert eines Computermonitors beeinflusst, wie hell oder dunkel ein Bild in einem Webbrowser dargestellt wird. Sie können vorab anzeigen, wie Ihre Bilder auf Systemen mit verschiedenen Gamma-Werten aussehen werden, und gegebenenfalls Gamma-Änderungen an den Bildern vornehmen. Die Aktivierung einer Vorschauoption hat keinen Einfluss auf die endgültige Ausgabe des Bildes.

  • Wählen Sie eine der folgenden Optionen im Popup-Menü „Vorschau“ des Dialogfelds „Bild exportieren“ aus:

Bildschirmfarbe

Nimmt keine Änderungen an den Gamma-Werten vor. „Bildschirmfarbe“ ist die Standardeinstellung.

Macintosh-Vorgängerversion (ohne Farbmanagement)

Simuliert den unter Mac OS 10.5 und früher verwendeten Gamma-Standardwert von 1,8.

Windows (ohne Farbmanagement)

Simuliert den unter Windows und Mac OS 10.6 und später verwendeten Gamma-Standardwert von 2,2.

Dokumentprofil verwenden

Passt bei Dokumenten mit Farbverwaltung die Gamma-Werte an das angehängte Dokument-Farbprofil an.

Optimieren eines Bildes für das Web

  1. Wählen Sie „Datei“ > „Bild exportieren“ oder „Datei“ > „Animiertes GIF exportieren“ aus.

  2. Klicken Sie oben im Dialogfeld auf eine Registerkarte, um eine Anzeigeoption auszuwählen: „Optimiert“ oder „2fach“.

  3. (Optional) Wenn das Bild mehrere Slices enthält, wählen Sie ein oder mehrere zu optimierende Slices aus.

  4. Wählen Sie im Menü „Vorgabe“ eine Optimierungseinstellung aus oder legen Sie individuelle Optimierungsoptionen fest. Je nach Dateiformat stehen unterschiedliche Optionen zur Verfügung.

  5. Passen Sie die Optimierungseinstellungen weiter an, bis Sie den gewünschten Kompromiss zwischen Bildqualität und Dateigröße gefunden haben. Wenn das Bild mehrere Slices enthält, optimieren Sie unbedingt alle Slices.

    Hinweis:

    Um die Originalversion einer optimierten Vorschau wiederherzustellen, wählen Sie diese aus und wählen dann die Option „Original“ im Menü „Vorgabe“.

  6. Um sicherzustellen, dass die im optimierten Bild angezeigten Farben in verschiedenen Browsern identisch aussehen, konvertieren Sie die Bildfarben in den Farbraum „sRGB“.

    Hinweis:

    Die Ausgabe-Metadaten entsprechen den Standards der Metadata Working Group; daher werden einige JPEG-Metadaten in den Formaten EXIF und IIM statt in XMP gespeichert.

  7. Wählen Sie eine der folgenden Optionen aus:

    Keine

    Es werden keine Metadaten gespeichert (mit Ausnahme des EXIF-Copyright-Vermerks in JPEG-Daten). Die erstellten Dateien sind äußerst kompakt.

    Copyright

    Speichert Copyright-Vermerk, Verwendungsbedingungen, Copyright-Status sowie die URL für Copyright-Informationen.

    Copyright und Kontaktinformationen

    Speichert sämtliche Copyright-Informationen und die folgenden Angaben: Urheber sowie dessen Titel, E-Mail-Adresse(n), Anschrift mit Ort, Bundesland/Kanton, Postleitzahl, Land, Telefonnummer(n) und Website(s).

    Alle außer Kamera-Info

    Speichert sämtliche Metadaten außer EXIF-Daten zu Kameraeinstellungen, wie Verschlussgeschwindigkeit, Datum und Uhrzeit, Brennweite, Belichtungskorrektur, Messungsmuster und Blitzverwendung.

    Alle

    Speichert alle Metadaten in der Datei.

  8. Klicken Sie auf „Speichern“.

  9. Führen Sie im Dialogfeld „Optimierte Version speichern unter“ Folgendes durch und klicken Sie auf „Speichern“:

    1. Geben Sie einen Dateinamen ein und wählen Sie einen Speicherort für die Ausgabedatei(en).

    2. Wählen Sie eine Formatoption, um anzugeben, welche Art von Dateien gespeichert werden soll: „HTML und Bilder“, „Nur Bilder“ oder „Nur HTML“.

    3. (Optional) Legen Sie die Ausgabeeinstellungen für HTML- und Bilddateien fest.

    4. Wenn Ihr Bild mehrere Slices enthält, wählen Sie im Menü „Slices“ die Option „Alle Slices“ oder „Ausgewählte Slices“.

      Hinweis:

      Um die Optimierungseinstellungen wieder auf die letzte gespeicherte Version zurückzusetzen, drücken Sie die Alt-Taste (Windows) bzw. die Wahltaste (Mac OS) und klicken Sie auf „Zurück“. Um dieselben Einstellungen beim nächsten Öffnen des Dialogfelds Um das Dialogfeld „Web“ anzuzeigen, drücken Sie die Alt-Taste bzw. Wahltaste und klicken anschließend auf „Merken“.

    5. Ein Video über das Speichern von Dateien für das Web in Illustrator finden Sie unter www.adobe.com/go/vid0063_de.

Speichern oder Löschen von Optimierungsvorgaben

Sie können Ihre Optimierungseinstellungen unter einem Namen speichern und für andere Bilder verwenden. Gespeicherte Einstellungen werden im Popup-Menü „Vorgabe“ zusammen mit den vordefinierten Einstellungen gespeichert. Wenn Sie einen von Ihnen gespeicherten bzw. vordefinierten Einstellungssatz bearbeiten, wird im Menü „Vorgabe“ der Eintrag „Unbenannt“ angezeigt.

  1. Legen Sie die gewünschten Optimierungsoptionen fest und wählen Sie im Palettenmenü „Optimieren“ den Befehl „Einstellungen speichern“ aus.

  2. Benennen Sie die Einstellungen und speichern Sie sie im entsprechenden Ordner:

    Photoshop

    (Windows XP) Dokumente und Einstellungen\[Benutzername]\Anwendungsdaten\Adobe\AdobePhotoshop CS5\Optimized Settings

    (Windows Vista) Benutzer\[Benutzername]\AppData\Roaming\Adobe\AdobePhotoshop CS5\Optimized Settings

    (Mac OS) Benutzer/[Benutzername]/Library/Preferences/Adobe/Photoshop CS5Settings/Optimized Settings

    Illustrator

    (Windows XP) Dokumente und Einstellungen\[Benutzername]\Anwendungsdaten\Adobe\AdobeIllustrator CS5 Settings\[Sprache]\Save for Web Settings\Optimize

    (Windows Vista) Benutzer\[Benutzername]\AppData\Roaming\Adobe\AdobeIllustrator CS5 Settings\[Sprache]\Save for Web Settings\Optimize

    (Mac OS) Benutzer/[Benutzername]/Library/ApplicationSupport/Adobe/Adobe Illustrator CS5/[Sprache]/Save for Web Settings/Optimize

    Hinweis:

    Wenn Sie die Einstellungen in einem anderen Ordner speichern, sind sie im Popupmenü „Vorgabe“ nicht verfügbar.

  3. Um eine Vorgabe zu löschen, wählen Sie diese im Menü „Vorgabe“ aus und klicken im Menü „Optimieren“ auf „Einstellungen löschen“.

Komprimieren einer Webgrafik auf eine bestimmte Dateigröße

  1. Wählen Sie „Datei“ > „Exportieren“ > „Bild exportieren“ oder „Datei“ > „Exportieren“ > „Animiertes GIF exportieren“ aus.

  2. Klicken Sie auf eine Registerkarte oben im Dialogfeld „Bild exportieren“ oder „Animiertes GIF exportieren“, um eine Anzeigeoption auszuwählen: „Optimiert“ oder „2fach“. 

  3. (Optional) Wählen Sie die zu optimierenden Slices und das gewünschte Dateiformat aus.

  4. Wählen Sie aus dem Menü „Optimieren“ (rechts neben dem Menü „Vorgaben“) die Option „Auf Dateigröße optimieren“ aus.

  5. Geben Sie die gewünschte Dateigröße ein.

  6. Wählen Sie unter „Beginnen mit“ eine Option aus:

    Aktuelle Einstellungen

    Verwendet das aktuelle Dateiformat.

    GIF/JPEG automatisch wählen

    Wählt in Abhängigkeit vom Bildinhalt automatisch das optimale Format.

  7. Wählen Sie unter „Verwenden“ eine Option aus, um festzulegen, ob die angegebene Dateigröße nur auf das aktuelle Slice, auf jedes Slice im Bild oder auf alle Slices angewendet werden soll. Klicken Sie auf „OK“.

Ändern der Größe von Grafiken im Rahmen der Optimierung

Im Dialogfeld „Bild exportieren“ können Sie die Größe eines Bildes auf bestimmte Pixelmaße oder einen bestimmten Prozentsatz der Originalgröße skalieren.

  1. Klicken Sie auf die Registerkarte „Bildgröße“ im Dialogfeld „Bild exportieren“.

  2. Legen Sie nach Bedarf weitere Optionen fest:

    Proportionen beibehalten

    Das derzeitige Verhältnis von Höhe und Breite in Pixel wird beibehalten.

    Hinweis:

    Für das SWF- und das SVG-Dateiformat stehen außer der Option „Ganze Zeichenfläche exportieren“ keine der anderen Funktionen aus der Palette „Bildgröße“ zur Verfügung.

  3. Geben Sie neue Pixelwerte für die Dimension ein oder legen Sie einen Prozentsatz für die Größenänderung des Bildes fest und klicken Sie auf „Anwenden“.

Anzeigen einer Vorschau optimierter Bilder in einem Webbrowser

Über das Dialogfeld „Bild exportieren“ („Datei“ > „Exportieren“ > „Bild exportieren“ oder „Datei“ > „Exportieren“ > „Animiertes GIF exportieren“) können Sie die Vorschau eines optimierten Bildes in jedem Webbrowser anzeigen, der auf Ihrem System installiert ist. Der Browser zeigt das Bild mit einer Bildunterschrift an, in der Dateityp, Pixelmaße und Dateigröße des Bildes, Komprimierungsangaben und weitere HTML-Informationen aufgeführt werden.

  • Wenn Sie eine Vorschau eines Bildes in Ihrem standardmäßigen Webbrowser anzeigen möchten, klicken Sie auf das Browsersymbol unten im Dialogfeld „Bild exportieren“.
  • Im Dialogfeld „Browser“ finden Sie alle im Computer verfügbaren Browser. Sie können angeben, welcher Browser standardmäßig zur Vorschau der Bilder verwendet werden soll.

Weitere Hilfethemen

Adobe-Logo

Bei Ihrem Konto anmelden