Dynamische Text-Farbe, abhängig vom Hintergrund mit SASS.

Ein Beispiel:

Über CSS sollen Statusmeldungen oder Buttons auf Ihrer Website in vier unterschiedliche Layouts erstellt werden. Diese erhalten jeweils eine unterschiedliche Hintergrund-Farbe:

  • Success: #CBFC90 (Grün)
  • Info: #2EB9CC (Blau)
  • Warning: #FCFA90 (Gelb)
  • Danger: #CC532E (Rot)

Nun stellt sich nur noch die Frage nach der Text-Farbe innerhalb der Box: Hell oder Dunkel? Schwarz oder Weiß?

Mit Hilfe von SASS können Sie diese Entscheidung getrost der lightness()-Funktion überlassen. Diese berechnet über den RGB-Durchschnittswert die Helligkeit in einem Wert zwischen 0 – 100. Je höher die Zahl, desto heller die Farbe.

Um einen guten Kontrast zu gewährleisten wird dank einer kleinen Funktion in SASS der Text dunkel, wenn die Hintergrund-Farbe heller ist als 50%. Bei dunkleren Farben wie zum Beispiel Blau, wird der Text weiß gefärbt.

Die Hintergrund-Farben der Statusmeldungen oder Buttons können nun jeder Zeit angepasst werden. Ihre kleine und smarte Lösung kümmert sich um den Rest:

SASS

// FUNKTION ZUR BERECHNUNG DER TEXT-FARBE
@function setColorByBackground($backgroundColor) {
    @if (lightness($backgroundColor) > 50) {
      @return #000000;
    }
    @else {
      @return #FFFFFF;
    }
}

$success-color: #CBFC90;
$info-color: #2EB9CC;
$warning-color: #FCFA90;
$danger-color: #CC532E;

.infobox-success {
	padding: 20px;
	margin: 20px;
	font-size: 1em;
	background: $success-color;
	color: setColorByBackground($success-color);
}
.infobox-info {
	@extend .infobox-success;
	background: $info-color;
	color: setColorByBackground($info-color);
}
.infobox-warning {
	@extend .infobox-success;
	background: $warning-color;
	color: setColorByBackground($warning-color);
}
.infobox-danger {
	@extend .infobox-success;
	background: $danger-color;
	color: setColorByBackground($danger-color);
}

HTML

<div class="infobox-success">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="infobox-info">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="infobox-warning">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="infobox-danger">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>

HTML kann ganz schön schräg sein.

Wie bekommt man schräge Flächen in HTML und CSS?

Beinahe alle Websites haben eines gemeinsam: Klare, rechteckige Formen.
Allerdings gibt es tolle Möglichkeiten sich mit schrägen Flächen und Kanten und Trapez- oder Skew-Effekten und Dreiecken abzuheben.

Dazu sind keine Bildgrafiken nötig, sondern man kann mit den richtigen Methoden das Ganze direkt über CSS und HTML lösen. Der Vorteil: Größen und Farben lassen sich leicht und schnell verändern, Unterstützung von Retina-Displays und geringere Ladezeiten.

HTML kann ganz schön schräg sein. weiterlesen

Neues von der CeBIT 2013

Vergangenen Samstag ging wieder einmal die CeBIT in Hannover zu Ende. Ich hatte das Glück, dass ich dieses Jahr selbst dabei sein durfte.
Neben vielen neuen Technologien und Produkten wie z.B. der Vorstellung des neuen Microsoft Surface oder der De-Mail der Deutschen Post ging es bei der CeBIT dieses Jahr um das Leitthema „Shareconomy“. Neues von der CeBIT 2013 weiterlesen

Abstract Space Background

Da Sebastian keine Zeit hat, erkläre ich euch in diesem Tutorial  wie man den Background-Effekt aus dem Tutorial Creative Path Objects erstellt. Dieses wurde ja schon längst erwartet.

Schritt 1

1. Zuerst erstellt Ihr eine Ebene mit der Farbe #000000, darauf wendet Ihr ein Rauschen über „Filter > Rauschfilter > Rauschen hinzufügen“ an und stellt dies wie folgt ein.

bild-12

2. Ändert nun durch (Apfel + U) die Farbe, und stellt die Helligkeit auf -10, danach verändert Ihr die Struktur noch über „Filter > Malfilter > Kreuzstraffur“ und stellt dort wieder alles wie unten auf dem Bild dargestellt ein.

bild-13

Schritt 2

1. Jetzt erstellt Ihr eine neue Ebene mit der Farbe #000000 und fügt dieser Fläche den Filter Blendenflecke „Filter > Renderfilter > Blendenflecke“ hinzu. Und ändert die Ausrichtung wie unten auf der Vorschau.

bild-14

2. Verschiebt nun die Blendenflecke etwa so wie oben in der Vorschau der Einstellungen.

3. Radiert nun die Kanten weg. Wählt hierfür einen unscharfen Kreis, 150px Durchmesser und setzt die Deckkraft auf 65% und den Fluss auf 58%. Der  Ebene müsst Ihr nun  als Effekt „Hellere Farben“ geben, und die Deckkraft auf 100% stellen.

schritt2

Schritt 3

1. Erstellt jetzt eine neue Ebene mit der Farbe #FFFFFF, und gebt dieser einen Filter „Filter > Renderfilter > Beleuchtungseffekte“ und wählt als Art (Dreifach-Spot) und gebt dieser den Effekt Ineinanderkopieren.

bild-15

2. Fügt jetzt noch einen Ebenenstil hinzu und macht eine Verlaufsüberlagerung. Bei 0% die Farbe #FF00EA, bei 50% #FFFFFF und bei 100% die Farbe #00FF1E. Jetzt übernehmt noch folgende Einstellungen.

bild-8

 

schritt3

Schritt 4

1. Erstellt wieder eine neue Ebene mit #000000, fügt erneut einen Filter hinzu „Filter > Renderfilter > Beleuchtungseffekte“ und übernehmt nun diese Einstellungen.

bild-9

2. Wendet darauf den Filter Gauscher Weichzeichner „Filter > Weichzeichnungsfilter > Gauscher Weichzeichner“ an, gebt der Ebene den Effekte Ineinanderkopierenund stellt die Deckkraft auf 48%.

schritt4

Schritt 5

1. Erstellt Wolken über „Filter > Renderfilter > Wolken“ und gebt dieser Ebene, wie der zuvor, den Effekt Ineinanderkopieren.

schritt5

2. Fügt nun eine Tonwertkorrektur (Apfel + L) hinzu und übernehmt folgende Einstellungen.

bild-16

Ergebnis

Ihr könnt dann natürlich noch wie hier eine Verlaufsleiste hinzufügen. Wie Ihr hier am Endergebnis sehen könnt.

schritt7

Abstrakte Vexel (Vektor & Pixel) Grafik designen

In diesem Tutorial zeige ich euch wie Ihr eine Surrealistisch anmutendes Picture-Composing designen könnt. Ich werde euch dabei Abschnittsweise zum fertigen Bild führen. Vorkenntsnisse in Photoshop sind in diesem Tutorial nötig. Falls Ihr Fragen zu einzelnen Schritten habt, einfach posten, ich schreibe euch dann so schnell ich kann zurück.

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: mittel – fortgeschrittene

Bildquelle: stock.xchnge

 

 

Finished Vexel Art

Hier noch das fertige Bild in voller Größe zum anschauen. Ich hoffe das Tutorial konnte euch einen Einblick in ein paar Gestaltungstechniken geben. Übrigens: Sorry wegen der wackligen Aufnahme (neue Software zum Screenfilmen). Wird nächstes mal besser.

Advanced Glow Effects

Ihr wollt Glow-Effects für ein Homepagedesign oder eine Icon-Serie verwenden? Dann versucht mal einen Schritt weiter zu gehen und macht ein bisschen mehr als einen Verlauf der in der Mitte abgeschnitten wird. In diesem Tutorial zeige ich euch wie Ihr mehr aus einem Glow-Effect herausholen könnt.

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: leicht – mittel

 

Das von mir ausgearbeitete Beispiel zum anschauen, Arbeitszeit: nicht mal 10 min. 😉 Auch auf YouTube: Photoshop Tutorial deutsch

Create an Abstract Wallpaper

In diesem Tutorial zeige ich euch wie man anhand des Tutorials Creative Path Objects ein Wallpaper oder eine kleinere Grafik erstellt. Ihr benötigt hierfür Illustrator, um Gridgrafiken zu erstellen und für den Rest Photoshop.

Schritt 1:

Öffnet Adobe Photoshop, und erstellt ein neues Dokument mit einem weißen Hintergrund. Die Größe beträgt bei mir 800×600 Pixel, welche jedoch keine Rolle spielt. Nun sucht euch ein Wolken Foto heraus, und legt es auf die Ebene. (Vorschlag.: sxc.hu)

schritt1

Schritt 2:

1. Nun wählt ihr das Auswahlrechteck-Werkzeug (M) aus, und markiert etwa die Hälfte eurer Fläche. Geht danach auf das Verlaufswerkzeug (G) und zieht einen Verlauf von Weiß #FFFFFF zu Transparenz. Danach dreht ihr den Verlauf um etwa 45°, so dass dieser von der linken Kante oben zu der rechten Kante unten verläuft.

schritt2_1

2. Dies könnt ihr sooft wie ihr wollt wiederholen, und evtl. auch einen Verlauf von Schwarz #000000 zu Transparenz hinzufügen. Auf dem unten angehängten Bild seht ihr mein derzeitigen Stand.

schritt2_3

Schritt 3:

1. Öffnet nun Adobe Illustrator, und erstellt ein neues Dokument. Zieht nun mit dem Zeichenstfit Werkzeug (P) eine solche Form nach. Dann gebt der Linie eine Kontur von 20px, und rundet die Endungen ab.

2. Wählt nun die Linie aus, und geht auf Objekt > Umwandeln und bestätigt mit OK.

schritt3_2

TIPP: Ihr könnt die Schwingung etwas geringer machen, um einen besseren Effekt zu erzielen.

Schritt 4:

Dupliziert nun die Linie welche ihr umgewandelt habt, und gebt den Linien helle Farbtöne. Bei mir sind dies in der Reihenfolge von oben nach unten.

#979b9e, #0b88e5, #b40be5, #e57c0b, #e6097b

Speichert nun diese Grafik als Adobe Illustrator Format (.ai) ab.

schritt4

Schritt 5:

Platziert nun über Datei > Platzieren als PDF in euer Dokument, und in etwa so wie auf dem Bild unten.

schritt5

Schritt 6:

Gebt nun dieser Grafik folgende Effekte.

schritt6_1schritt6_2

Hier ein Preview vom aktuellen Status

schritt6_3

Schritt 7:

Ihr legt nun über die halbe Grafik eine weiße Fläche, welcher ihr eine 66% Deckkraft gebt.

schritt7

Schritt 8:

1. Öffnet wieder Adobe Illustrator und erstellt ein weiteres Dokument. Erstellt nun anhand des Tutorials „Eigene Grid-Grafiken erstellen“ eine Gridgrafik, welche wie folgt ausschaut.

schritt8_1

2. Anschließend gebt ihr der Grid-Grafik eine Deckkraft von 50% und stellt den Effekt auf „Aufhellen“.

schritt8_2

Schritt 9:

Zu guter letzt könnt ihr noch etwas mit den Farben herumexperimentieren und fertig ist das Tutorial.
Dann wünsche ich noch viel Spaß beim experimentieren.

schritt9

Hier ein Beispiel wie es als Wallpaper aussehen könnte:

wallpaper

Adobe AIR Tour Munich

2 Mitglieder der ZeroSeven Crew sind live dabei. Adobe onAIR tour mit stop in München.

Um punkt 10.00 Uhr startet Serje mit seinem Vortrag, es geht um die Benefits vom neuen Adobe Flash Player 10, Jürgen und Sebastian sind dabei. Die neuen Möglichkeiten des Flash Players sprechen für sich. Filter die direkt auf Videos angewendet werden können, neue Möglichkeiten in Bezug auf den Einsatz von 3D (Alternativa) und live music rendering. Eine Fülle an neuen Möglichkeiten für den Entwickler und den Designer zu gleichen Teilen.

Es wurde auch über eine neue Voice over IP referiert die bald auf Basis des neuen Flash Players erscheinen soll, Codename Pacifica! Über den Link erhaltet Ihr weitere informationen hierzu.

Ein Vortrag auf den ich gerne noch ein wenig näher eingehen will ist der von Lee Brimelow! Ich muss erstmal vorweg schicken dass er die undankbare Aufgabe hatte den letzten der Vorträge zu halten. 11 Vorträge lagen schon hinter uns, es wurde kurz davor Bier ausgeschenkt und keiner hatte mehr so richtig Lust sich noch einen Votrag anzuhören. Doch Lee Brimelows Vortrag war phänomenal und jede weitere sekunde Wert. Hauptsächlich ging es bei seinem Vortrag um die Möglichkeiten die einem mit AIR Anwendungen offen stehen, z.B. durch den Look der Anwendung. Wenn man das Custom Chrome verwendet kann man mit einem .png die Form der Anwendung völlig frei gestalten. Dies hat er mit einer Beispielapplikation mit Namen „David Hasselhoffs Head App“ vorgestellt. Die natürlich für viele Lacher gesorgt hat. Generell waren die Anwendungsbeispiele von Lee mit viel Humor gesegnet.

Ich habe zusätzlich noch einige weitere Links zusammengetragen die von den „Platform Evangelists“ der Adobe onAIR tour stammen. Hier findet Ihr eine vielzahl an nützlichen Inhalten und Beispielen.

www.webkitchen.be

onair.adobe.com

www.mikechambers.com

blog.kevinhoyt.org

www.danieldura.com

www.gotoandlearn.com

www.leebrimelow.com

www.theflashblog.com

3D Abstract Art | Photoshop

Wie angekündigt, zeige ich euch in diesem Tutorial wie man aus seiner 3D Szene noch deutlich mehr rausholen kann. Mit Hilfe von Photoshop kann man sehr schöne Akzente setzen die in 3D entweder sehr viel mehr Aufwand bedeuten würden, oder schlicht gar nicht machbar wären. Wie immer gilt: Versucht meine Arbeit nicht 1 zu 1 nachzubauen sondern eigene Ideen einfließen zu lassen. Ich würde mich auch darüber freuen arbeiten von euch zu sehen die anhand meiner Tutorials entstanden sind.

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: mittel – Fortgeschrittene

 

 

Finale Version meiner Überarbeitung. Ich hab dabei großen wert auf den Einsatz von dezenten Lichteffekten gelegt. Manchmal ist weniger einfach mehr.

Zweite Version meiner Überarbeitung.

3D Schriftzug mit Illustrator & Blender

In diesem Tutorial zeige ich euch wie Ihr einen modernen 3D Schriftzug in Blender erstellen könnt, optional zeige ich zum Schluss noch wie man in Illustrator einen 3D Schriftzug faken kann. Zusätzlich werde ich euch noch zeigen wie Ihr in Blender eine einfach Szene erstellen könnt. Das zuweisen eines Materials wird ebenfalls noch erläutert, in unserem Beispiel mit einem Glas-Effekt. Falls Ihr Fragen zu einzelnen Schritten habt, einfach posten, ich schreibe euch dann so schnell ich kann zurück.

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: mittel

3D Software: blender Renderer: Yafray

 

 

 

Hier noch das Bild das von mir als Beispiel aus Blender herausgespeichert wurde. Für das Rendern hab ich das Blender internal rendering genutzt (aus Zeitgründen im Tutorial).