Jump to content

Parasol Webseite Casefilm erstellen: Difference between revisions

From Parasol
No edit summary
Tag: visualeditor
Tag: visualeditor
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
=Ultimatives Website Casefilm Thumbnail Erstellung Rezept=
===Was ist ein Casefilm Thumbnail?===
===Was ist ein Casefilm Thumbnail?===




Auf unserer Parasol Website und auf der Film/Animation Website nutzen wir animierte Thumbnails, um auf unsere Detaillierten Cases zu kommen. Diese sind mit dem sogenannten “mouseover Effekt” etabliert. Heißt, was zu beginn ein Still stehendes Bild ist, wird zum animierten Thumbnail während man den Cursor drüber hält.


Auf unserer Parasol Website und auf der Film/Animation Webseite nutzen wir animierte Thumbnails, um so auf die einzelnen Cases zu kommen. Diese sind mit dem sogenannten “Mouseover Effekt” etabliert.


Folgende Parasoler sind zuständig für die Erstellung der Thumbnails:
Heißt, was zu Beginn ein still stehendes Bild ist, wird zum animierten Thumbnail, wenn man den Cursor drüber hält.


==== Folgende Parasoler*innen sind zuständig für die Erstellung der Thumbnails: ====
*Sebastian Krätzer
*Sebastian Krätzer
*Yasmine Abou El Seoud
*Kai Obenhaus
*Kai Obenhaus
*Benjamin Bleile
*Daniel Solbach
*Daniel Solbach


==== Technisches BlaBla: ====
* Parasol Webseite:
** Still: '''1280x720'''
** Film: '''640 x''' '''360; 25 FPS; .WEBM; .OGV; .mp4'''


<blockquote>"No multiple sequences, No lame rescaling, and completely Gluten-Free!!"</blockquote>
* Film/Animation Webseite:
** Still: '''1280x720'''
** Film: '''1280x720; 25 FPS; .WEBM; .mp4'''


=== Schritt 1 ===
=== '''Schritt 1:''' Im Anfang war der Film ===
Ein Mitarbeiter benötigt ein Animiertes Thumbnail für einen Case.


Dieser liefert euch den zu verschiedenen Film (bestmöglich eine cleane Version) und eventuell den Start Still, mit dem das Thumbnail anfangen soll.
* Ein*e Parasoler*in benötigt ein animiertes Thumbnail für einen Case.
* Diese*r liefert euch den zu verschneidenden Film '''(bestmöglich eine cleane Version)''' und eventuell den Start-Still, mit dem das Thumbnail anfangen soll.


=== Schritt 2 Vorbereitung der Server Ordner Struktur: ===
Hier bitte den Ordner Anlegen für INPUT und OUTPUT:


=== '''Schritt 2:''' Vorbereitung der Server-Ordner-Struktur© ===


X:\Projects\PSL_ANM_Showreels_Cases_Website_Pflege\PS16A10_Edits\PS16A10_Website_Casefilm\PS20A10_Website_Casefilm
* Hier bitte den Ordner Anlegen für INPUT und OUTPUT:


<blockquote>


Der zu verschneidende Clip muss unter INPUT abgelegt werden, damit beim Abschluss eines Projektes, die Bearbeitung der Thumbnails immer noch möglich ist.


''X:\Projects\PSL_ANM_Showreels_Cases_Website_Pflege\PS16A10_Edits\PS16A10_Website_Casefilm\PS20A10_Website_Casefilm''</blockquote>




<nowiki>--------------------------------------------------------------</nowiki>
Der zu verschneidende Clip '''muss''' unter INPUT abgelegt werden, damit beim Abschluss eines Projektes, die Bearbeitung der Thumbnails immer noch möglich ist.


=== Schritt 3 Vorbereitung des Premiere Projektes ===


=== '''Schritt 3:''' Vorbereitung des Premiere Projektes ===


Hier liegt das Premiere Projekt:
Hier liegt das Premiere Projekt:


<blockquote>
''X:\Projects\PSL_ANM_Showreels_Cases_Website_Pflege\PS16A10_Edits\PS16A10_Website_Casefilm\PS20A10_Website_Casefilm_CutFiles''</blockquote>


X:\Projects\PSL_ANM_Showreels_Cases_Website_Pflege\PS16A10_Edits\PS16A10_Website_Casefilm\PS20A10_Website_Casefilm_CutFiles
* Dupliziert das neueste Premiere Projekt, fügt euer Kürzel ein und öffnet das Projekt
 
Dupliziert das neueste Premiere Projekt, fügt euer Kürzel ein und öffnet das Projekt.
 
 
 --------------------------------------------------------------  
 
=== Schritt 4, Ablauf in Premiere: ===
 
 
Dupliziert einen Case Ordner aus dem -VORLAGEN Ordner und verschiebt ihn in den Cases Ordner
 
Benennt den Ordner und die Sequenz um
 
 
Fügt den Clip unter INPUT ein und zieht euch den Clip in die SEQUENZ
 
-es müssen keine weiteren Sequenzen erstellt werden!
 
 
Und schon könnt ihr mit dem Schneiden beginnen.
 
Der Clip soll zwischen 8 und 10 Sekunden lang sein
 
Bestmöglich auf Text Supers verzichten, außer es ist ein wichtiger bestandteil des Filmes
 
(s. hier) <nowiki>https://parasol-island.com/content/uploads/2020/08/Cobra_11_Website_Casefilm_v001_seK_Featured-Video_WebM.webm</nowiki>)
 
Letterboxen durch Crop-Ins umgehen
 
 
-Exportiert den ersten Frame: Kürzel_Name_Still.jpg
 
<nowiki>-------------------------------------------------------------</nowiki>
 
=== Schritt 5 Media Encoder Vorkehrungen ===
Ihr benötigt die OGV und WEBM Plugins zum ausspielen der Thumbnails.
 
Windows: <nowiki>https://drive.google.com/drive/folders/1D-SUUPVbGJfIfsXffTqZhtVzdRBUqSwW</nowiki>
 
#WebM_Premiere_v1.1.0.msi ausführen und die Schritte der Installation befolgen
#Theora Plug-In in den Media Encoder Plug-Ins Ordner verschieben (C:\Program Files\Adobe\Adobe Media Encoder CC 20XX\Plug-Ins\Common)
 
Export-Presets:
 
<nowiki>https://drive.google.com/drive/folders/1D-SUUPVbGJfIfsXffTqZhtVzdRBUqSwW</nowiki>
 
 
Speicherort der Presets:
 
C:\Users\Name\Documents\Adobe\Adobe Media Encoder\1X.0\Presets
 
 
 
-> Bevor man die Files in den Media Encoder lädt, aktiviert man "Vorgabenamen an Dateinamen anhängen" in den Mediaencoder Voreinstellungen:
 
 
 
<nowiki>-------------------------------------------------------------</nowiki>  
 
 
Schritt 6 Exportieren
 
Und fügt die Sequenz einzeln in den Media Encoder
 
Benennt die Media Encoder Presets um.
 
- Dein Kürzel
 
-Version
 
Und zieht alle Presets auf dem in der Queue befindenden Clip.
 
Schritt 7 Abspeichern
 
-Die 720p Files in den Animation_Film Ordner verschieben
 
 
-Die 360p Files in den Parasol Ordner verschieben
 
 
-Still in den Unterordner da die 720p Stills sowohl für Parasol als auch für Animation/Film genutzt werden
 
 
Diese Ordner Struktur zusätzlich in den Final_Projects/ProjektXY Folder laden
 
<nowiki>https://drive.google.com/drive/folders/0ABtS-CNPHAswUk9PVA</nowiki>
 
 
 
Und bei 180 Grad umluft muss das Thumbnail nur noch etwas schmoren, bis es letztendlich von dem Kollegen auf der Seite eingepflegt wird.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'''1. Vorbereitung'''
 
Um einen Loop für einen Case auf unserer Webseite zu erstellen, baucht man ein Video mit der Auflösung 500 x 350. Dazu am besten in Premiere eine neue Sequenz anlegen.
Es sollte zwischen 8 und 12 Sekunden lang und nicht größer als 1MB groß sein.
Für den besten Mouseover Effekt muss das Still (Featured Image) exakt der erste Frame aus dem featured Video sein in einer Auflösung von 1000x700 Pixel.
 
 
[[File:Bildschirmfoto 2017-10-16 um 11.11.15.png|1300px|link=Special:FilePath/Bildschirmfoto_2017-10-16_um_11.11.15.png]]
 
'''2. Plug-Ins Laden'''
 
'''Windows:''' https://drive.google.com/drive/folders/1D-SUUPVbGJfIfsXffTqZhtVzdRBUqSwW
 
#WebM_Premiere_v1.1.0.msi ausführen und die Schritte der Installation befolgen
#Theora Plug-In in den Plug-Ins Ordner verschieben (C:\Program Files\Adobe\Adobe Media Encoder CC 20XX\Plug-Ins\Common)
 
 
'''Mac:''' Installer für WebM und Theora ausführen
 
 
'''3. Presets'''
 
'''Mac:''' Jetzt müssen die Presets ( https://drive.google.com/drive/folders/0B9fVZbz6VHEdaFRqV1FsU2c3eTA?usp=sharing ) in den Media Encoder geladen werden.
Sie kommen in diesen Ordner: /Library/Application Support/Adobe/Common/Plug-ins/7.0/MediaCore
 
'''Windows:''' Jetzt müssen die Presets (https://drive.google.com/drive/folders/1D-SUUPVbGJfIfsXffTqZhtVzdRBUqSwW) in den Media Encoder geladen werden.
Sie kommen in diesen Ordner: C:\Users\Name\Documents\Adobe\Adobe Media Encoder\1X.0\Presets
 
 
[[File:Bildschirmfoto 2017-10-16 um 10.32.26.png|1300px|link=Special:FilePath/Bildschirmfoto_2017-10-16_um_10.32.26.png]]
 
 
'''4. Media Encoder'''
 
Jetzt den Media Encoder öffnen und die Presets in den Vorgabenbrowser laden:


=== '''Schritt 4:''' Ablauf in Premiere ===
<blockquote>''"No multiple sequences, no lame rescaling, and completely Gluten-Free!!"''</blockquote>
* Dupliziert einen Case Ordner aus dem -VORLAGEN Ordner und verschiebt ihn in den Cases Ordner
* Benennt den Ordner und die Sequenz um
* Fügt den Clip unter INPUT ein und zieht euch den Clip in die SEQUENZ


[[File:Bildzw3u4.png|1300px]]
''Es müssen keine weiteren Sequenzen erstellt werden!''


* Und schon könnt ihr mit dem Schneiden beginnen.
* Exportiert den ersten Frame aus der Sequenz:
** Name: Kürzel_Name_Still.jpg


'''5.''' Nun den eben aus Premiere Exportierten Film hochladen:
==== Gestaltung der Thumbnails ====


* Der Clip sollte zwischen 8 und 10 Sekunden lang sein
* bestmöglich auf Text Supers verzichten, außer es ist ein wichtiger Bestandteil des Filmes (z.B: [https://parasol-island.com/content/uploads/2020/08/Cobra_11_Website_Casefilm_v001_seK_Featured-Video_WebM.webm hier])
* Letterboxen durch Crop-in's umgehen


[[File:Bildschirmfoto 2017-10-16 um 10.36.18.png|1300px|link=Special:FilePath/Bildschirmfoto_2017-10-16_um_10.36.18.png]]


=== '''Schritt 5:''' Media Encoder Vorkehrungen ===
==== OGV und WEBM Plugins installieren ====
#[https://drive.google.com/drive/folders/1D-SUUPVbGJfIfsXffTqZhtVzdRBUqSwW Download]
#'''WebM_Premiere_v1.1.0.msi''' ausführen und die Schritte der Installation befolgen
#'''Theora Plug-In''' in den Media Encoder Plug-Ins Ordner verschieben:<blockquote>(C:\Program Files\Adobe\Adobe Media Encoder CC 20XX\Plug-Ins\Common)</blockquote>


'''6. Ausgaben'''
==== Export Presets: ====
Hier liegen sie:<blockquote>[https://drive.google.com/drive/folders/1D-SUUPVbGJfIfsXffTqZhtVzdRBUqSwW Download]</blockquote>...und hier speichert ihr sie hin:<blockquote>C:\Users\Name\Documents\Adobe\Adobe Media Encoder\1X.0\Presets</blockquote>
[[File:Casefilm Vorgabe Export.png|thumb|"Vorgabenamen an Dateinamen anhängen"]]


Da es sich um 3 Verschiedene Presets handelt, müssen 2 weitere Ausgaben hinzugefügt werden:
==== Automatische Namensnennung: ====


* Bennent das Preset um und füg dein Kürzel statt dem "SeK" ein


[[File:Bildschirmfoto 2017-10-16 um 11.18.50.png|1300px|link=Special:FilePath/Bildschirmfoto_2017-10-16_um_11.18.50.png]]
* Unter den Media Encoder Voreinstellungen: macht einen Haken neben: "Vorgabenamen an Dateinamen anhängen"




'''7. Abschluss'''


Auf dieser werden jetzt per Drag and Drop die Presets gezogen und der Vorgang kann gestartet werden:
=== '''Schritt 6:''' Exportieren ===


* Fügt die Sequenz einzeln in den Media Encoder
* Zieht alle Presets via Drag and Drop auf den in der Queue befindenden Clip.


[[File:asdfghjkl.png|1300px|link=Special:FilePath/Asdfghjkl.png]]
=== '''Schritt 7:''' Abspeichern und raus mit dem Ding ===


* Speichert eure Videos in die Unterordner im OUTPUT Ordner:
** Die 720p Files in den Animation_Film Ordner verschieben
** Die 360p Files in den Parasol Ordner verschieben
* Das Still legt ihr neben den Anm/Film btw. Parasol Ordner ab, da die 720p Stills sowohl für Parasol als auch für Animation/Film genutzt werden
* Ladet diese Ordner Struktur zusätzlich in den [https://drive.google.com/drive/folders/0ABtS-CNPHAswUk9PVA Final_Projects/ProjektXY Drive]


<blockquote></blockquote>'''Zum Schluss bei 180 Grad Umluft das Thumbnail nur noch etwas schmoren, bis es letztendlich auf der Seite eingepflegt wird.'''


'''8.''' Wenn die Kodierungen abgeschlossen sind, können diese an die Person geschickt werden, die den Case auf der Webseite einpflegt.
'''Voilà!'''

Latest revision as of 15:09, 6 March 2023

Was ist ein Casefilm Thumbnail?

[edit]

Auf unserer Parasol Website und auf der Film/Animation Webseite nutzen wir animierte Thumbnails, um so auf die einzelnen Cases zu kommen. Diese sind mit dem sogenannten “Mouseover Effekt” etabliert.

Heißt, was zu Beginn ein still stehendes Bild ist, wird zum animierten Thumbnail, wenn man den Cursor drüber hält.

Folgende Parasoler*innen sind zuständig für die Erstellung der Thumbnails:

[edit]
  • Sebastian Krätzer
  • Kai Obenhaus
  • Daniel Solbach

Technisches BlaBla:

[edit]
  • Parasol Webseite:
    • Still: 1280x720
    • Film: 640 x 360; 25 FPS; .WEBM; .OGV; .mp4
  • Film/Animation Webseite:
    • Still: 1280x720
    • Film: 1280x720; 25 FPS; .WEBM; .mp4

Schritt 1: Im Anfang war der Film

[edit]
  • Ein*e Parasoler*in benötigt ein animiertes Thumbnail für einen Case.
  • Diese*r liefert euch den zu verschneidenden Film (bestmöglich eine cleane Version) und eventuell den Start-Still, mit dem das Thumbnail anfangen soll.


Schritt 2: Vorbereitung der Server-Ordner-Struktur©

[edit]
  • Hier bitte den Ordner Anlegen für INPUT und OUTPUT:


X:\Projects\PSL_ANM_Showreels_Cases_Website_Pflege\PS16A10_Edits\PS16A10_Website_Casefilm\PS20A10_Website_Casefilm


Der zu verschneidende Clip muss unter INPUT abgelegt werden, damit beim Abschluss eines Projektes, die Bearbeitung der Thumbnails immer noch möglich ist.


Schritt 3: Vorbereitung des Premiere Projektes

[edit]

Hier liegt das Premiere Projekt:

X:\Projects\PSL_ANM_Showreels_Cases_Website_Pflege\PS16A10_Edits\PS16A10_Website_Casefilm\PS20A10_Website_Casefilm_CutFiles

  • Dupliziert das neueste Premiere Projekt, fügt euer Kürzel ein und öffnet das Projekt

Schritt 4: Ablauf in Premiere

[edit]

"No multiple sequences, no lame rescaling, and completely Gluten-Free!!"

  • Dupliziert einen Case Ordner aus dem -VORLAGEN Ordner und verschiebt ihn in den Cases Ordner
  • Benennt den Ordner und die Sequenz um
  • Fügt den Clip unter INPUT ein und zieht euch den Clip in die SEQUENZ

Es müssen keine weiteren Sequenzen erstellt werden!

  • Und schon könnt ihr mit dem Schneiden beginnen.
  • Exportiert den ersten Frame aus der Sequenz:
    • Name: Kürzel_Name_Still.jpg

Gestaltung der Thumbnails

[edit]
  • Der Clip sollte zwischen 8 und 10 Sekunden lang sein
  • bestmöglich auf Text Supers verzichten, außer es ist ein wichtiger Bestandteil des Filmes (z.B: hier)
  • Letterboxen durch Crop-in's umgehen


Schritt 5: Media Encoder Vorkehrungen

[edit]

OGV und WEBM Plugins installieren

[edit]
  1. Download
  2. WebM_Premiere_v1.1.0.msi ausführen und die Schritte der Installation befolgen
  3. Theora Plug-In in den Media Encoder Plug-Ins Ordner verschieben:

    (C:\Program Files\Adobe\Adobe Media Encoder CC 20XX\Plug-Ins\Common)

Export Presets:

[edit]

Hier liegen sie:

Download

...und hier speichert ihr sie hin:

C:\Users\Name\Documents\Adobe\Adobe Media Encoder\1X.0\Presets

Error creating thumbnail: File missing
"Vorgabenamen an Dateinamen anhängen"

Automatische Namensnennung:

[edit]
  • Bennent das Preset um und füg dein Kürzel statt dem "SeK" ein
  • Unter den Media Encoder Voreinstellungen: macht einen Haken neben: "Vorgabenamen an Dateinamen anhängen"


Schritt 6: Exportieren

[edit]
  • Fügt die Sequenz einzeln in den Media Encoder
  • Zieht alle Presets via Drag and Drop auf den in der Queue befindenden Clip.

Schritt 7: Abspeichern und raus mit dem Ding

[edit]
  • Speichert eure Videos in die Unterordner im OUTPUT Ordner:
    • Die 720p Files in den Animation_Film Ordner verschieben
    • Die 360p Files in den Parasol Ordner verschieben
  • Das Still legt ihr neben den Anm/Film btw. Parasol Ordner ab, da die 720p Stills sowohl für Parasol als auch für Animation/Film genutzt werden
  • Ladet diese Ordner Struktur zusätzlich in den Final_Projects/ProjektXY Drive

Zum Schluss bei 180 Grad Umluft das Thumbnail nur noch etwas schmoren, bis es letztendlich auf der Seite eingepflegt wird.

Voilà!