Bestpreis-GarantieKauf auf RechnungOnline-Designer
0351 20 44 444Mo - Fr: 8 - 18 Uhr
Saxoprint
Kundenbereich
Anmelden Hallo ##Anrede## ##Nachname##

Neukunde? Registrieren.

AuftragsübersichtGespeicherte DesignsAdressbuchKundendatenNewsletterAbmelden
Warenkorb
  • Saxoprint
  • Druckprodukte
    Werbebedarf
    • Aufkleber
    • Broschüren & Kataloge 
    • Bücher
    • Etiketten
    • Flyer 
    • Folder 
    • Grußkarten
    • Haftnotizen
    • Kalender & Werbekalender
    • Karten
    • Lesezeichen
    • Multimedia
    • Plakate & Poster 
    • Postkarten
    • Prospekte
    • Schreibblöcke
    • Tragetaschen
    Geschäftsausstattung
    • Briefpapier 
    • Briefumschläge
    • Durchschreibesätze 
    • Haftnotizen
    • Kalender
    • Loseblattsammlung
    • Notizbücher
    • Ordner
    • Präsentationsmappen
    • Schreibblöcke
    • Schreibtischunterlagen
    • Stempel
    • Versandtaschen
    • Visitenkarten 
    Gastro & Event
    • Beachflags
    • Eintrittskarten
    • Faltzelte
    • Kellnerblöcke
    • Klatschpappen
    • Liegestühle
    • Pappbecher
    • Plakate & Poster 
    • Speisekarten (gebunden)
    • Speisekarten (gefalzt)
    • Tischaufsteller
    • Tischsets
    • Tragetaschen
    Overnight
    • Bonuskarten
    • Briefpapier
    • CD- & DVD-Booklets
    • CD-Cover
    • Flyer
    • Folder
    • Grußkarten
    • Speisekarten
    • Taschenkalender
    • Terminkarten
    • Tischsets
    • Visitenkarten
    Alle Produkte anzeigen Produktmuster bestellen 
  • Bestpreis-Garantie
    Briefpapier
    Broschüren
    Flyer
    Folder
    Grußkarten
    Kalender
    Plakate & Poster
    Postkarten
    Schreibblöcke
    Schreibtischunterlagen
    Gefalzte Speisekarten
    Visitenkarten
    Mehr Informationen Papiermuster bestellen 
  • Verpackungen
    Faltschachteln
    Verpackungen mit Deckel
    Geschenkverpackungen
    Schuber
    Kissen- und Taschenverpackungen
    Offene Verpackungen
    Lebensmittelechte Verpackungen
    Transport- und Versandkarton
    Alle Produkte anzeigen Verpackungsmuster bestellen 
  • Werbetechnik
    Fahnen & Flaggen
    Faltzelte
    Klebefolien
    Leuchtreklame
    Messetheken
    Messewände
    Planen
    Roll Ups
    Schilder
    Stoffbanner
    Textilspannrahmen
    X- / L- Banner
    Alle Produkte anzeigen Produktmuster bestellen 
  • Corona-Produkte
    Fußbodenfolien
    Roll Ups Transparent
    Gesichtsmasken
    Gesichtsvisiere
    Gastronomie Produkte
    Home Office Produkte
    Alle Produkte anzeigen 
  • Service und Hilfe
    Bestellinformationen
    • Bestellprozess
    • Logosponsoring
    • Reseller
    • Sicherheit
    • Vorteile
    Druckdaten
    • Datencheck
    • Druckdatenanleitung
    • Druckvorlagen
    • Online-Designer
    • SAXOPRINT® pro design
    Produktoptionen
    • Druckveredelungen
    • Papierformate
    • Produktmuster
    • Sonderfarben
    FAQÜber unsBlog
    Persönlicher KontaktPersönliche Fachberatung
    • 0351 20 44 444
    • Mo - Fr:8 - 18 Uhr
    •  
    • service@saxoprint.de
    • Kontaktformular
  • Anmelden Hallo ##Anrede## ##Nachname##

    Neukunde? Registrieren.

    AuftragsübersichtGespeicherte DesignsAdressbuchKundendatenNewsletterAbmelden
    2
  • Druckprodukte
  • Bestpreis-Garantie
  • Verpackungen
  • Werbetechnik
  • Service & Hilfe
  • Blog

Cinemagraphs – Das Comeback der GIF-Datei

Cinemagraphs – Das Comeback der GIF-Datei
von Thomas Trummer | 7. Februar 2014
2 Kommentare
Tags: Bildbearbeitung, Photoshop-Tutorials, Tutorial

Ihr alle habt sicherlich schon mal ein Cinemagraph auf einer Webseite gesehen, also ein Standbild welches oft kleine, sich wiederholende Bewegung enthält. Nachdem es lange Zeit ruhig um die flippigen GIF-Dateien aus den Neunzigern geworden war, erleben die auf Deutsch „Cinemagramm“ genannten Animationen seit geraumer Zeit eine Renaissance. Ich zeige euch im folgenden Tutorial, wie ihr euch mit Hilfe von Photoshop solch ein kleines Endlosfilmchen erstellen könnt. Dieses könnt ihr euren Freunden anschließend auf einer Webseite oder in den sozialen Netzwerken präsentieren.

Damit ihr euch in etwa vorstellen könnt, was mit einem Cinemagraph überhaupt gemeint ist, schaut euch doch dieses hübsche Kätzchen mal ganz genau an und achtet dabei auf die Ohren.

Cinemagraph von Kirk Wang © Kirk Wang

Wenn ihr ein gutes Cinemagraph aus einer Video-Sequenz erstellen wollt, solltet ihr auf ein paar wichtige Grundvoraussetzungen bei eurem Ausgangsmaterial achten. Die folgenden 5 Tipps habe ich für euch.

  • Ganz wichtig ist, dass euer Film frei von Verwackelungen ist. Er sollte also möglichst mit Hilfe eines Stativs aufgenommen werden, denn ein aus der Hand gedrehtes und somit meist verwackeltes Video eignet sich demnach nicht so gut.
  • Ihr solltet auch darauf achtgeben, dass in der Sequenz aus welcher ihr später das GIF erstellen wollt, nicht zu schnell und zu stark gezoomt wurde.
  • Der Hintergrund in eurem Videomaterial sollte zudem nicht zu diffus sein und sich nicht schnell bewegen. Aufnahmen vor vielen Bäumen die sich schnell im Wind bewegen sind genauso ungeeignet, wie eine Szene die vor schnell vorbeiziehenden Wolken gedreht wurde.
  • Ihr solltet auch am besten schon vor der Aufnahme wissen, welcher Teil des Bildes (im oberen GIF zum Beispiel die Ohren der Katze) sich anschließend im GIF bewegen soll. Ideal ist es, wenn sich der restliche Teil des Motives nicht weiter bewegt.
  • Achtet auf eine gute Ausgangsauflösung des Videos. Idealerweise nehmt ihr eure Filmsequenz in FullHD, also 1080p auf, so wie es ja heutzutage bei vielen Kameras bereits Standard ist.

Step 1

Bevor ihr mit dem Erstellen des Cinemagraphs beginnt, müsst ihr noch checken, ob eure Version von Adobe Photoshop auch Videos bearbeiten kann. Möglich ist dies ab der Version CS5. In den vorherigen Versionen war es nur möglich, ein GIF aus vielen verschiedenen, einzeln aufgenommenen Bildern zu erstellen. Nun aber ab zum Video. Ich habe hier iStocks Video des Monats von Yongyuan Dai als MOV-Datei in „HD 1080“ heruntergeladen. Über den Menüpunkt Datei / Öffnen ruft ihr die gespeicherte Datei vom Speicherort auf. Um das Video nun optimal bearbeiten zu können, solltet ihr euren Arbeitsbereich auf „Bewegung“ umstellen. Ihr könnt optional aber auch nur das Fenster Animation (Fenster / Animation) aufrufen.

Tutorial Cinemagraph GIF (1)

Step 2

Da ihr natürlich nicht den ganzen Film, sondern nur eine bestimmte Sequenz in ein GIF umwandeln wollt, müsst ihr nun zunächst mit Hilfe des Schiebereglers den Anfangspunkt eures Filmausschnitts festlegen. Um genauer arbeiten zu können, solltet ihr den Zoomfaktor der Leiste verändern. Das macht ihr, indem ihr den Regler, den ich für euch unten im Screenshot markiert habe, verschiebt. Wenn ihr den Anfang eurer Sequenz gefunden habt, lasst ihr den Schieberegler oben in der Zeitleiste los und geht im Bedienfeldmenü des Animations-Fensters auf „Anfang des Arbeitsbereiches festlegen“. Es wird sofort automatisch ein Anfangsmarker auf die Stelle gesetzt, an der euer Schieberegler steht.

Tutorial Cinemagraph GIF (2)

Step 3

Genauso verfahrt ihr jetzt mit dem Endpunkt. Schieberegler solange verschieben, bis ihr das gewünschte Ende eurer Sequenz erreicht habt und dann den Schieberegler loslassen. Im Bedienfeldmenü geht ihr nun auf „Ende des Arbeitsbereiches festlegen“.

Tutorial Cinemagraph GIF (3)

Step 4

Um eure Dateigröße jetzt gleich etwas zu verringern, könnt ihr wenn ihr euch ganz sicher seid, dass ihr euren Arbeitsbereich nun exakt festgelegt habt, im Bedienfeldmenü auf „Dauer des Dokumentes auf Arbeitsbereich zuschneiden“ gehen. Somit bleibt dann nur noch der von euch definierte Arbeitsbereich übrig und ihr müsst nicht mehr den kompletten Film abspeichern.

Tutorial Cinemagraph GIF (4)

Step 5

Jetzt kommt auch schon der „Magic Step“ bei der Erstellung eures Cinemagraphs. Ihr fügt euch ganz normal eine neue Ebene über der Filmebene ein (Ebene / Neu / Ebene oder optional Shortcut Umschalt + Strg + Alt + N). Danach kopiert ihr mit Umschalt + Strg + Alt + E alle sichtbaren Ebenen (in diesem Fall natürlich nur die Eine) in die neue Ebene. Dieser neuen Ebene fügt ihr nun eine Ebenenmaske hinzu. In dieser Maske wendet ihr dann einen harten, schwarzen Pinsel an. Den Bereich, in dem der Kaffee auf die Oberfläche des schon in der Tasse enthaltenen Kaffees trifft, könnt ihr dann aber zu einem etwas weicheren Pinsel greifen, damit ihr den Übergang etwas weicher freistellen könnt. Dabei ist es wichtig, dass ihr für jeden einzelnen Bildframe überprüft, ob ihr auch alle Bildbereiche, die sich später in eurem GIF bewegen sollen, mit dem Pinsel maskiert habt. Damit ihr noch einmal genau seht, welche Bildbereiche ich maskiert habe, sind diese hier ausgewählt.

Tutorial Cinemagraph GIF (5)

Step 6

Ihr könnt eure Ergebnisse immer durch Klick auf die Play-Taste (oder durch Drücken der Leertaste) überprüfen. Wenn ihr einmal zu viel mit der Maske freigestellt haben solltet, so könnt ihr euren Fehler ganz einfach beheben, in dem ihr die betreffende Stelle wieder mit einem weißen Pinsel übermalt. Zwischen Schwarz und Weiß als Vordergrundfarbe könnt ihr ganz einfach mit dem Shortcut X hin- und herwechseln.

Tutorial Cinemagraph GIF (6)

Step 7

Auch wenn es sich hier um ein Video handelt, könnt ihr euer GIF ganz normal wie jedes andere Foto in Photoshop auch mithilfe der Korrekturebenen bearbeiten. Ihr könnt also auch hier die Tonwerte korrigieren, Farbton/Sättigung anpassen oder auch aus dem Farbbild ein Schwarzweißbild machen. Ihr könnt natürlich genauso auch die Bildgröße ändern.

Tutorial Cinemagraph GIF (7)

Step 8

Um euer Cinemagraph nun für die Verwendung im Webbrowser abzuspeichern, müsst ihr auf Datei / Für Web und Geräte speichern gehen. Dort wählt ihr oben als Vorgabe GIF aus und stellt die hier zu sehenden Einstellungen ein. Ich habe diese auf mein hier verwendetes Ausgangsvideo optimiert. Eure Einstellungen können ganz andere sein, je nachdem wie euer Ursprungsfilm aussieht. Genaue Infos zu den Einstellmöglichkeiten findet ihr bei Adobe. Um das Ausgangs- und das Endergebnis vergleichen zu können, geht ihr oben links in diesem Fenster auf „2-fach“. Unten links könnt ihr die Zoomstufe wählen, um die Qualität noch besser beurteilen zu können.

Tutorial Cinemagraph GIF (8)

Fertig!

Das fertige Ergebnis könnt ihr euch hier ansehen und natürlich wie immer auch kostenlos herunterladen. Ich würde mich freuen, wenn ihr eure erstellten Cinemagraphs unten in den Kommentaren verlinkt!

Tutorial Cinemagraph GIF (Fertig)

Weitere Beispiele für tolle Cinemagraphs

An dieser Stelle habe ich nun für euch noch einige Beispiele für besonders gelungene Cinemagraphs herausgesucht. Lasst euch auch hier etwas für eure eigenen Arbeiten inspirieren.

Tutorial Cinemagraph GIF (11) © Kevin Burg and Jamie Beck

Tutorial Cinemagraph GIF (12) © imgur.com

Tutorial Cinemagraph GIF (13) © cinemagraphical.com

Hinter den folgenden Links warten noch weitere großartige Cinemagraphs.

Ignant.de

Nonsensebility.com

Tripwiremagazine.com

Petapixel.com

Dieser Blogbeitrag wurde von Thomas Trummer verfasst

Hallo, mein Name ist Thomas Trummer und bereits seit 2009 veröffentliche ich in regelmäßigen Abständen innovative Grafik-Tutorials. In diesen erkläre ich Step by Step die Gestaltung von Printmedien, das Erstellen von Effekten oder das Bearbeiten von Fotos. Einsteiger, aber auch Professionals, können mit Hilfe dieser Anleitung Flyer, Visitenkarten oder Poster von Anfang bis Ende optimal gestalten und diese im Anschluss bei SAXOPRINT bestellen.

Durch die Nutzung bekannter Grafikanwendungen wie Photoshop, Illustrator oder auch GIMP möchte ich auf die individuellen Bedürfnisse unserer Leser eingehen und die unterschiedlichen Handhabungen aufzeigen. Selbstverständlich freue ich mich an dieser Stelle über Feedback jeglicher Art.

Das könnte dich auch interessieren



QuickTipp: Kaleidoskop-Effekt mit Photoshop erstellen

Freitagstutorial: Farben ersetzen im Corporate Design

Freitagstutorial: Fotocollage in Photoshop erstellen

2 Kommentare


Achim Schnick
2016-11-19 14:33:45

(Reply)



allo, wollt mich für das tolle Tutorial Bedanken.
Gruß aus Hamburg
Achim

    Thomas Trummer
    2016-11-21 11:24:32

    (Reply)



    Hallo Achim,
    aber gerne doch. Schön, wenn dir unsere Beiträge so gut gefallen.
    Viele Grüße,
    Thomas


Kommentar hinterlassen

Mit dem Absenden des Kommentars bestätigst Du, dass Du unsere Datenschutzerklärung zur Kenntnis genommen hast.

  Abbrechen


  • THEMEN AUF DEM SAXOPRINT BLOG

    • Druck & Gestaltung
    • Tutorials
    • Gut zu wissen
    • Die Drucklotsin
    • Aus der Fertigung
    • Presse & Sponsoring
    • Gewinnspiele
    • Unsere Blogredaktion
  • Nichts mehr verpassen

    • 68231likes
    • 1819followers
    • 1346followers
    • 1340subscribers
  • Neueste Artikel

    • Perfekt vorbereitet auf das neue Schuljahr mit einem Stundenplan zum Ausdrucken
    • Video-Tutorial: Ein Buch mit Hardcover gestalten (inkl. Unboxing)
    • Die Verwendung des Pantone Matching Systems im Offsetdruck
    • Sonderfarben im HKS-Farbfächer (HKS-Farbtabelle)
    • Wahlwerbung drucken: So gelingt der nächste Wahlkampf
  • Neueste Kommentare

    • Ilse bei Freitagstutorial: Mosaikfoto in Photoshop
    • Brigitte Gareus bei Freitagstutorial: Mosaikfoto in Photoshop
    • Gitti bei Freitagstutorial: Mosaikfoto in Photoshop
    • Anne bei Freitagstutorial: Mosaikfoto in Photoshop
    • Mike Schmidt bei 66 Beispiele für Werbeanzeigen aus Printkampagnen
  • Wonach suchst Du?



© SAXOPRINT 2019 Impressum & Datenschutz & Cookie-Einstellungen

Produkte
  • Flyer drucken
  • Aufkleber drucken
  • Broschüren drucken
  • Kalender & Werbekalender drucken
  • Visitenkarten drucken
Informationen
  • Über uns
  • Karriere
  • Druckdatenanleitung
  • Druckvorlagen
  • FAQ
Newsletter

Jetzt zum Newsletter anmelden und 5 Euro Willkommensgutschein für die nächste Bestellung sichern.

Kontakt

Persönliche Fachberatung

0351 20 44 444
Mo - Fr:
9 - 18 Uhr


Kontaktformular
service@saxoprint.de
700
engagierte Druckexperten
20
Jahre Druckerfahrung
3,3
Fussballfelder große Produktionsfläche
Kauf auf Rechnung
Vorkasse
Deutschland
  • Österreich
  • Schweiz
  • Großbritannien
  • Frankreich
  • Spanien
  • Italien
  • Niederlande
  • Belgien
AGB |  Datenschutz |  Impressum |  Karriere |  Kontakt |  Cookie-Einstellungen