kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Webdesign-Basics: Farbflächen, Blickführung, Pinselspitzen und der Einsatz von Licht

Die »Photoshop-Profis« haben einen Screencast von mir veröffentlicht. In dieser Folge erkläre ich die Grundlagen des Webdesign anhand von Farbflächen und Übergängen. Ich zeige warum es wichtig ist Flächen mit leichten Verläufen oder Strukturen zu versehen und wie man mit einfachen Mitteln - zum Beispiel einer eigenen Pinselspitze - die Übergänge zwischen Farbflächen aufwerten kann.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Galileo Press beschreibt den Inhalt von Folge 75 so:

Jeder Webdesigner benötigt Hintergründe für seine Webseiten. In dieser neuen Folge der »Photoshop-Profis« gibt Ihnen der Webprofi Jonas Hellwig einige Tipps an die Hand, mit denen Sie Ihre Hintergründe aufwerten können. Das beginnt bei dezenten Lichteffekten und Zackenmustern und endet mit einem 60er-Jahre-Farbrastereffekt.

 

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

2 Kommentare

  1. Makai

    Verfasst am 12. Januar 2015 um 12:53 Uhr.

    „Grundlagen des Webdesign anhand von Farbflächen“ – das ist ein sehr ambitionierter Titel, wie ich finde.

    Außerdem kann ich mich nicht genug für non-destruktive Bearbeitung aussprechen. Flächen sollte man keinesfalls mit Rasterebenen erstellen, ebensowenig wie Verläufe mit dem Abwedler. Vektorebenen und Ebeneneffekte sind hier die erste Wahl. Nicht nur ist der Effekt viel besser kontrollierbar, man kann später auch Änderungen verlustfrei umsetzen.

    Als Beispiel:
    Was, wenn die blaue Fläche im Header einen anderen Farbton bekommen soll? Das würde bedeuten, man nutzt „Farbe ersetzen“ schätzt grob mit Augenmaß den Farbton ab und als Ergebnis bekommt man einen Verlauf mit Tonwertabrissen.

    Besser:
    Ebeneneffekt -> radialer Verlauf -> skalieren und positionieren -> exakte Farbwerte angeben -> sauberes Ergebnis.

    Und über die Skalierung von gerasteren Ebenen will ich gar nicht sprechen.
    Wenn man schon in Photoshop Weblayouts gestaltet, dann bitte keinesfalls rasterbasiert!

    • Jonas Hellwig

      Verfasst am 12. Januar 2015 um 13:04 Uhr.

      Hallo Makai,

      vielen Dank für deinen Kommentar. In der heutigen Version von Photoshop würde ich auch für einige Effekte Vektoren bevorzugen, damals (2011) waren die Möglichkeiten aber noch deutlich eingeschränkter. Was die Verläufe etc. angeht: In diesem Video geht es darum Verläufe oder Übergänge zu gestalten, die sich nicht gut mit Ebenenstilen umsetzen lassen. Denn Effekte die mit Ebenenstilen erzeugt werden, sehen immer sehr technisch aus. Ein Verlauf ist beispielsweise linear oder radial – beides ist praktisch (auch im Hinblick auf die Umsetzung mit CSS) – aber unnatürlich und oft charakterlos.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.