Webdesign-Basics: Farbflächen, Blickführung, Pinselspitzen und der Einsatz von Licht
Von Jonas In diesem Screencast zeigen wir, wir mit Photoshop Farbflächen interessant verbunden werden können.
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.
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.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Geschrieben von Jonas
Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
„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!
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.