multiple media

apropos Mediendesign

Nerdromantik - Sag´s mit SASS

Jul 232016

Grundproblematik

Zugegeben, Grußkarten werden in 95% aller Fälle von meiner Frau verfasst. Die Gründe dafür kann ich (zumindestens bei mir) eindeutig identifizieren!

  1. Weil Mann oft einfach nicht viel zu sagen pflegt, die Karten in durchschnittlicher Schreibschriftgröße aber verlangen, mit etwa 5-8 Zeilen gefüllt zu werden.
  2. Weil Mann sich vielleicht oft auch nicht adäquat auszudrücken vermag?
  3. Weil für Mann in den meisten Fällen ein starker Händedruck, eine freundschaftliche Umarmung, ein lockerer Spruch oder ein Insider-Gangsterfäustchen mehr rüberbringt als ein Stück DinA6-Karton mit Hochglanzmotiv und rückseitigem Text.

Ausgangssituation

Die Tage saß ich genau vor jener Herausforderung. Meine Frau konnte nicht helfen, da sie den "Akzeptant" kaum kennt.

Thema: Geburt
Was schreibt man da als mittlerweile pragmatisch entzauberter Vater von drei wundervollen Kindern?
"Herzlichen Glückwunsch. Euer Kind ist da! Wahnsinn, das habt ihr toll gemacht. Wir wünschen Euch ein gesundes und glückliches Baby ..." IM ERNST?
Ja, nee, weiß nicht.

Lösung

Da kam mir die Idee, diesen eigentlich total generischen Text in eine Zielgruppen gerechte Form zu bringen.
Zielgruppe: Designer, Frontendentwickler, UX-Designer
Ich entschied mich für SASS. Nicht ganz so trivial wie CSS aber doch einfach zu lesen (sogar für Zielgruppenferne dechiffrierbar).

Der generische Text sah am Ende dann so aus:

#baby {
	content: 'Hooray!';
	.wishes {
		face-family: smile, 'Laughter', sans crying;
		health: 100%;
		problems: 0%;
		sleep-mode: deep;
	}
	.parents {
		content: 'You did it!';
		&--wishes {
			endurance: 100%;
			nerves: strong;
			program-mode: love 100%;
		}
	}
	.diaper--full {
		contents: scentless;
	}
}

Zugegeben: Es sind viele Schummler dabei, aber zu kryptisch soll es ja auch nicht sein.

Ergebnis

Was soll ich sagen. Kam super an!

Abwandlung

Das Medium kann für verschiedene Zwecke eingesetzt werden.

Liebesbrief zum 13. Hochzeitstag

$darling: 'Maike';

#loveLetter {
	&--recipient {
		content: $darling;
	}
	&--purpose {
		overflow-x: love;
		overflow-y: gratitude;
	}
	.year:nth-child(-13) {
		date: '2016-07-19';
		boots-style: shaking;
		eye-align: $darling;
		eye-style: beautiful;
	}
	.question {
		date: '2016-07-18';
		future-collapse: true;
		&--result {
			happiness: 100%;
		}
	}
	&--hope {
		duration: everlast;
	}
	.greetings {
		heart-style: 100% love $darling;	
	}
	&--author {
		content: 'Christoph';
	}
}

Immerhin hat sich meine zielgruppenferne Frau darüber gefreut und auch das meiste verstanden.

Anschiss für Schlechtparker

#parkingYourCar {
	parking-space-offset: 100%;
	&--nextTime {
		align-self:center;
		vertivcal-align: middle;
	}
}

Viel Spaß beim Coden!

Greenscreen Workflow

Jun 212016

Ausgangssituation

Mit Studiolicht zu fotografieren will gelernt sein. Ein aktuelles Projekt erforderte zudem den Einsatz eines Greenscreens, um später den Hintergrund austauschen zu können. Also Freunde einladen, Studio aufbauen und kräftig üben.

Aufnahmen im Kasten, was nun?

Wie komme ich von der gelungenen Aufnahme zum fertigen Ergebnis? Tutorials zum Thema gibt es viele. Allerdings beschränken sich dies häufig auf den reinen Prozess "Farbbereich..." in Photoshop. Durch den Greenscreen ergeben sich aber durchaus Probleme, die feineres Eingreifen erfordern.

Hier mein Greenscreen Workflow:

Schritt 1 - Optimierung in Lightroom

In einem ersten Schritt importiere ich alle Aufnahmen in Lightroom, vergesse zunächst den Hintergrund und arbeite am Motiv. Dezente Optimierungen (Licht/Schatten) und ein paar leichte Korrekturen (Haut/Augen/).

 

Schritt 2 - Freistellen in Photoshop

Dieser Schritt ist klar.
Über "Auswahl" -> "Farbbereich..." wird der grüne Bereich des Bildes ausgewählt.

  • Auswahl: Aufgenommene Farben
  • Toleranz: ~20-50
  • Pipette mit Plus anwählen
  • Grüne Bereiche des Bildes markieren, bis das Motiv freigestellt ist
  • OK klicken
  • Über Strg+Shift+i die Auswahl umkehren
Farbbereich auswählenFarbbereich auswählen
Kante verbessernKante verbessern
 

Diese Auswahl ist noch recht grob.
Ich selektiere ein belibiges Auswahlwerkzeug (Rechteck, Lasso, ...) und klicke auf die Werkzeugoption "Kante verbessern ..." in der Leiste oben. Mit einem mittelgroßen Pinsel fahre ich einmal um die Haarlinie. Danach kann ich über die Einstellungen die Verbesserung der Kante steuern.

Schritt 3 - Greenscreen-Glow ausmerzen

Mein freigestelltes Resultat, eine neue Ebene mit Maske, hat immer noch einen deutlichen grünen Glow.
Ich erzeuge eine neue leere Ebene und stelle diese auf den Modus "Farbton". Nun wähle ich den Pinsel, selektiere jeweils mit Alt+linke Maustaste die Farbe, die ein Bereich statt Grün haben sollte und übermale das Grün an dieser Stelle. So überarbeite ich das ganze Bild, bis kein grüner Glow mehr zu sehen ist.
Am besten gelingt das mit einem schwarzen Hintergrund.

undefined undefined

 

Schritt 4 - Hintergrund tauschen

Bei diesem Motiv habe ich mich für eine aristokratisch anmutende Vintagetapete entschieden. Diese lege ich hinter das Motiv und verpasse ihr einen Blur (Gaußscher Weichzeichner ~8-12 Pixel). Danach gestalte ich den Hintergrund mit einer Einstellungsebene und einem Verlauf. Zusätzlich erzeuge ich ein Duplikat des Modells (Ebenenmaske reduziert) mit einer schwarzen Farbüberlagerung (Ebeneneffekt) um einen Schlagschatten anzudeuten. Diese Ebene blurre ich ebenfalls mit dem gaußschen Weichzeichner (~300 Pixel) und verschiebe sie nach rechts hinten.

undefined undefined

 

Am Ende sieht mein Photoshop-Ebenenstapel dann in etwa so aus:

Ebenen in PhotoshopEbenen in Photoshop
 

Schritt 5 - Zurück zu Lightroom

Einige letzte Helligkeitsanpassungen erfolgen und mein Bild ist fertig.

undefined undefined

 

Atom

Ein Blog von schuetz mediendesign