Hallo liebe interessierte Leser,

im Laufe des vergangenen Wintersemesters an der Hochschule Darmstadt realisierte ich einen Kurzfilm zum Thema “Städtevision” im Entwurfskurs bei Prof. Marquardt. Die Vorgabe war einen Kurzfilm über das Leben in der Großstadt zu erstellen. Ich entschied mich für eine düstere Dystopie, in der sich unser Leben dank eines Virtual-Reality Chips fast nur noch virtuell abspielt und wir uns im richtigen Leben kaum noch begegnen. Die Hauptfigur des Kurzfilms wird auf Grund von Geldmangels aus dieser virtuellen Welt rausgeworfen und sieht sich mit der wirklichen Welt konfrontiert – aus der sie sofort wieder flüchten will.

Zu Beginn des Projekts entstanden sehr schnell Bilder in meinem Kopf. Mir wurde schnell klar, wie der Film aussehen musste – also entschied ich mich, alles vor einem Bluescreen zu drehen. Das hatte auf der einen Seite einen großen logistischen Vorteil – wir konnten zwei Tage an genau einem Ort drehen – auf der anderen Seite wurde natürlich der Aufwand für die Postproduction erheblich erhöht.

In diesem Blogeintrag möchte ich einen Überblick über den Ablauf der gesamten, visuellen Produktion geben – angefangen mit dem Storyboard, Impressionen von den beiden Drehtagen und der eigentlichen Postproduction zum Schluß.

Storyboard

Beim Storyboard griff ich, wie auch schon bei der Animation “Entwicklung der Menschheit” (“Entwicklung der Menschheit”, Fachbereich Gestaltung, Hochschule Darmstadt), auf mein talentierte “Hofillustratorin” und Freundin Elena zurück. Sie erfasst immer ziemlich schnell, was mir im Kopf rumschwebt und bringt das sehr genau aufs Papier. Ohne sie wäre das ganze schon beim Storyboard gescheitert.

Wichtig war, dass ich am Computer mit den Farben spielen konnte. Die einzelnen Abschnitte des Filmes sollten sich visuell von den anderen Abschnitten unterscheiden – also war es auch wichtig, die Farbgebung früh mit ins Konzept zu übernehmen. Elena entwarf die Szenen in Schwarz/Weiß, ich scannte dann ein und spielte in Photoshop mit verschiedenen Farbgebungen.

Das finale Storyboard hatte am Ende etwa 60 Einzelbilder (alle von Elena gezeichnet) und war im Laufe der weiteren Produktion meiner ständiger Begleiter. Ich konnte damit die Idee meiner Professorin vorstellen und auch meine Hauptdarstellerin, Sandra Fleckenstein, konnte sich so ein erstes Bild machen.

Drehtage

Gedreht wurde an einem Wochenende im Dezember im Fotostudio des Fachbereichs Gestaltung an der Hochschule Darmstadt. Wir drehten mit einer Canon 5D Mark II, 12 Studioscheinwerfern und 2 Bluescreen-Stoffen von jeweils morgens um 10 bis Abends um 18/19 Uhr. Am ersten Tag wurden hauptsächlich die Einzel-Szenen mit Sandra gedreht, am frühen Abend folgten dann noch Alex und Pascal für die Überfall-Szene hinzu. Am Sonntag entstand dann sowohl die Partyszene als auch die Demo- und Obdachlosen Szene. Sowohl die Demo- als auch die Obdachlosen-Szene fielen der Schere zum Opfer, und auch die Partyszene wurde nur stark komprimiert im Film verwendet.

An dieser Stelle nochmal vielen vielen Dank an alle Helfer und Statisten. Ohne euch wäre das nicht möglich gewesen!

Post-Production

Die Postproduction begann direkt nach Weihnachten und zog sich bis in die erste Februar-Woche. Ich sichtete das Material, erstellte einen ersten Schnitt und legte dann den Ton an. Dann machte ich Fotos für die Hintergründe (S-Bahnstationen in Frankfurt und Offenbach und eine Straße im Industriegebiet in Mühlheim). Sebastian begann, die “Wohnung” der Hauptfigur mit Hilfe von Lightwave 3d zu erstellen.

Die Nachbearbeitung fand komplett in Adobe After Effects und Photoshop statt. Im folgenden zeige ich den Aufbau von vier verschiedenen Einstellungen.

Maras “Wohnung”

Das Quellmaterial wurde im Bild positioniert. Da der Film ein Cinemascope-Seitenverhältnis haben sollte, wurde das in 1080p-gefilmte Material verkleinert und auf 720p angepasst. Da wir den Raum komplett selbst erstellten, konnten wir auch den Bildaufbau in der Post stark beeinflussen.

Im nächsten Schritt wurde der Hintergrund entfernt.

Schatten, Reflektion, Farbkorrekturen

Hintergrund, erstellt in Lightwave 3d

Partikeleffekte

Andrew Kramers OpticalFlares, eine wertvolle Investition, angepasste Partikeleffekte

Finale Farbkorrekturen

Skyline

Die Skyline-Sequenz entstand fast komplett in Lightwave 3d. Die 3d-Modelle stammten von Turbosquid, die Werbeplattform ist selbst modelliert.

Hintergrund

Stadt-Hintergrund Ebene

Mittelgrund und Vordergrund

Werbetafel

Atmosphäreneffekte, Optical Flares

Finale Farbkorrekturen

Überfall

Der Überfall findet in einem S-Bahnhof statt. Vorlage war die Frankfurter Hauptwache wegen ihrer offenen, weiten Flächen. Da wir allerdings nicht vor Ort drehen konnten, machte ich nachts, um kurz vor 12 Fotos von der leeren Station.

Zwei unterschiedliche Aufnahmen, einmal Sandra, einmal Pascal.

Hintergrund

Grundlegende Farbkorrekturen, Schatten, Reflektionen

Finale Farbkorrektur

Projektion

Mara will aus der grauen, kalten Welt flüchten. Sie lädt den VR-Chip auf und aktiviert die höchste Stufe, die in einer unkontrollierten Umgebung zu einem totalen Realitätsverlust führt. Um das zu visualisieren, setzten wird auf Fotos und Photoshop. Die Pflanzen stammten aus einer Total Textures-Kollektion, der Rest ist Photoshop.

Original Material

Der Hintergrund wurde in der Frankfurter Hauptwache aufgenommen und dann in Photoshop nachbearbeitet.

VR-Automat, Farbkorrekturen, Partikeleffekte

Vordergrund, OpticalFlares

Finale Farbkorrektur, leichter Weichzeichner

Film

Viel Spaß beim Schauen!

Danksagung

Ich möchte diesen Blogeintrag noch mal nutzen, um allen Helfern, meiner Hauptdarstellerin und den Statisten zu danken. Ohne euch wäre dieser Film nicht möglich gewesen. Mir hat es großen Spaß gemacht, angefangen vom Konzept und dem Storyboard, über die beiden Drehtage bis hin zur Post-Production, den Soundeffekten und dem Soundtrack. Es lief zwar nicht alles ganz reibungslos, trotzdem haben wir alles hinbekommen und ich hab noch eine gehörige Portion dabei gelernt. Ich hoffe auch, das der ein oder andere Leser durch dieses kleine Making-Of ermutigt wird, selbst so etwas zu starten.

Vielen Dank fürs Lesen. Solltet ihr fragen haben, benutzt die Kommentare.

- Dave

beim Anpassen eines Templates kam ich heute auf die Idee, eben jenes Template direkt auch für das neue iPad (3) zu optimieren. Am Wochenende war ich auf Steve Streza’s CSS Media Query-Hinweis gestoßen (Link). Das Defizit dieser Technik ist aber nach wie vor, dass ich damit nur in CSS eingebundene Bilder austauschen kann. Was aber, wenn ich eine Slideshow habe? Oder einfach nur ein simples Logo, eingebaut mit einem IMG-Tag?

Also begab ich mich auf die Suche nach einer Lösung. Ich stieß auf einen Weg, wie ich das Retina-Display erkennen lasse (Link); die Lösung zum Austausch des Quellcodes empfand ich aber als ziemlich dürftig.

Also fehlte nun nur noch ein Weg, die Bild-Datei mit einer höher aufgelösten im Quellcode auszutauschen. Fündig wurde ich in einem Thread auf Stackoverflow (Link). Der Ersteller fragte nach einem Weg, ein Mouse-Over einzubauen – anstatt das aber mit einem CSS-Hover zu bewerkstelligen, wurden ihm verschiedene jQuery-Technik empfohlen. Die 3. Antwort ging dann in die Richtung, die ich brauchte, ich musste mich nur von dem jQuery-Hover trennen.

Um anderen Leuten aber das mühsame Zusammensuchen zu ersparen, habe ich mich nun entschlossen, meine Ergebnisse kompakt auf unserem Blog zu veröffentlichen.

Was wird benötigt?

jQuery in einer aktuellen Version (Link)
Bilder in 2 Auflösungen, dateiname.jpg und dateiname2x.jpg

Warum 2x?

Unter iOS werden Retina-Grafiken als dateiname@2x.jpg angegeben. Zwar sind wir hier nicht bei Objective-C und dem iOS Framework, aber ich denke man kann sich daran anlehnen. Theoretisch könnt ihr das beliebig ändern – in dateinameRETINA.jpg oder ähnliches.

Der HTML-Code

<div id="container">
<img src="noekoe.jpg" width="600" height="360" />
</div>

Der HTML-Code ist ziemlich simpel. Das normale, niedrige-aufgelöste Bild wird mit der Klasse “retina” eingebunden. Wichtig: Die Bildgröße muss angegeben werden

Der Javascript-Code

<script type="text/javascript">
$(document).ready(function(){

if (window.devicePixelRatio > 1) {
 $('img.retina').attr('src', function(i, src) {
 return src.replace(/(\.[a-zA-Z]+)$/, '2x$1');
 });
 }
});

</script>

Das Javascript im Head-Bereich prüft erst, ob ein Retina-Display vorliegt. Wenn dies der Fall ist, wird aus jedem img-Tag mit der Klasse “retina” das Attribut “src” ausgelesen, die Endung rausgefiltert und “2x” hinzugefügt. Das wars. Die Image-Tags mit der “retina”-Klasse zeigen auf dem neuen iPad oder auch auf dem iPhone 4/4S die hochaufgelöste Bilddatei an. (Danke an Dennis für den entschlackten Code)

CSS Media Queries

#container {
width:1024px;
height:768px;
background-image:url(bg.jpg);
left: 50%;
position: absolute;
margin-left: -512px;
}

@media only screen and (-webkit-device-pixel-ratio: 2) {
#container {
background-image:url(bg2x.jpg);
background-size: 1024px 768px;
}
}

Für Hintergrundbilder und andere, in CSS-angelegte Grafik-Elemente, verwenden wir die CSS Media Queries. Der Code oben führt zur Anzeige der Retina-Grafik auf einem iPad 3. Wichtig ist hier die Angabe der Background-Size.

Beispiel-Seite

Ich habe das ganze auf einer Beispiel-Seite eingebaut (Link). Diese Beispiel-Seite inkl. Code könnt ihr auch als ZIP herunterladen.

Download (.zip)

Ich hoffe, ihr könnt mit meinen Ergebnissen etwas anfangen. Falls jemand Anregungen oder eine noch einfachere Technik auf Lager hat, so bitte ich um Kommentare.

Update

Dennis, seines Zeichens Programmierer, hat in den Kommentaren den Javascript-Code entschlackt. Ich habe das mal übernommen. Danke Dennis!

viele Grüße,

Dave

Hallo liebe Leser,

ich hatte gestern die Idee eine Serie von Illustrationen zu beginnen. Thema ist Raum. Von einer richtigen “Serie” ist hier eigentlich noch nicht wirklich zu sprechen aber vorab gibt’s schon mal die erste Idee. Ich glaube das aktuelle Wetter passt dazu recht gut, oder was meint Ihr?

Beste Grüße,
Sebastian

Hallo liebe Leser,

hiermit möchten wir das erste offizielle Wallpaper Pack von uns präsentieren. Passend zu der aktuellen Wetterlage und den momentanen Temperaturen kommt dieses Paket als zip-Datei. Darin enthalten sind Versionen für Desktops, iPads und iPhones.

Hier die Direktlinks:

main-desktop
main-ipad
main-iphone

hazel-desktop
hazel-ipad
hazel-iphone

rain-desktop
rain-ipad
rain-iphone

cracks-desktop
cracks-ipad
cracks-iphone

root-desktop
root-ipad
root-iphone

sign-desktop
sign-ipad
sign-iphone

Viel Spaß damit!

Viele kennen uns unter “f2 CREATIVE”, dem Label unter dem wir die letzten vier Jahre gearbeitet haben – doch auch wir entwickeln uns weiter und möchten nun deutlicher präsentieren, wer wir sind.: Zwei junge Designer mit originellen Ideen und der nötigen Portion an Können und Selbstbewusstsein, um neue Wege zu beschreiten.

Auf unserer neuen Webpräsenz zeigen wir komplett unterschiedliche Arbeiten, von Corporate Designs für Steuerberater zu IT-Firmen bis hin zu Cover Artworks und Musikvideos für Musiker.

Zusützlich ist unsere Website mit den neusten Techniken ausgestattet – die Videos sind für Mobilgeräte eingebunden (html5-Video sowohl für Apple iPhones als auch für Google Android-Handys) und funktionieren unter allen gängigen Browsern.

In Zukunft wird es auch auf diesem Blog in regelmässigen Abständen neue Beiträge geben – von Projektvorstellung zu kleinen Photoshop-Tutorials oder neuen CSS-Tricks.

Wir freuen uns über Feedback und wünschen nun viel Spaß beim Erkunden unserer neuen Website.

- Sebastian Nöll & David Kötterheinrich