kulturbanause Blog

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

Photoshop-Tutorial: Organic Webdesign Typografie

In folgendem Tutorial zeige ich Euch wie man aus einer gewöhnlichen Schrift ein organisches, individuelles Artwork erstellt. Meine persönliche Vorliebe für organische Designs dürfte bekannt sein, ein Grund mehr für mich diese häufig vernachlässigte Design-Richtung in Erinnerung zu rufen. In Zeiten in denen es "in" ist mit Bio und Umweltfreundlichkeit zu werben kann das folgende Tutorial helfen einem Print- oder Screendesign den letzten Kick in die richtige Richtung zu geben.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

1. Grundform erstellen

Erstellt zunächst eine neue Datei [Cmd/Strg] + [N] und färbt mit dem Füllwerkzeug [G] die Hintergrundebene einfarbig braun (#4d2100) ein. Wählt nun das Textwerkzeug [T] und schreibt in mittlerem Grün (#43820b) einen beliebigen Text. Achtet bei der Wahl des Fonts auf ein nicht zu modernes Schriftbild, Serifenfonts eignen sich besonders gut, da sie bereits von Haus aus häufig einen leicht organischen Charakter besitzen.

Organic Webdesign Typografie Tutorial

2. Schrift modifizieren

Als nächstes wollen wir die Schrift verstümmeln um in nachfolgenden Schritt die Ranken anzubringen. Wählt nun "Ebene > Rastern > Text" um eine Pixelebene zu erhalten. Diese können wir jetzt mit dem Lassowerkzeug [L] bearbeiten. Im oberen Bereich des Schriftzugs erstellt Ihr nun mit dem Lasso einige Auswahlen und löscht anschließend den Inhalt [Backspace/Entf.]. Achtet darauf, dass der Text lesbar bleibt und Ihr gleichzeitig gute Vorraussetzungen für anschließende Ranken schafft.

Organic Webdesign Typografie Tutorial

3. Ranken zeichnen

Wählt nun das Pfadwerkzeug [P] und stellt sicher, dass in der Optionsleiste der Button "Formebenen" aktiviert ist. Nur so erstellt Ihr eine gefüllte Form anstelle eines leeren Pfades. Wählt den selben Grünton wie für die Schrift und zeichnet an passenden Stellen kleine Ranken an Eure Schrift. Solltet Ihr die Arbeit mit einen kleinen harten Pinsel bevorzugen, so erstellt zuvor eine neue Ebene um nicht die Pixel der Schrift zu zerstören.

Besonders effektvoll wird es wenn sich Ranken durch die Schrift hindurchschlängeln. Diese Stellen müsst Ihr im Kopf behalten da ohne Licht und Schatten noch keine Perspektive zu erkennen ist.

Organic Webdesign Typografie Tutorial

4. Farbe

Markiert zunächst in der Ebenenpalette sowohl die Ebene mit der Schrift als auch die mit den Ranken. Nun fasst Ihr über "Ebene > auf eine Ebene reduzieren" [Cmd/Strg] + [E] beide Ebene zu einer zusammen.
Erstellt nun eine neue Ebene [Cmd/Strg] + [Shift] + [N] und wählt einen weichen mittelgroßen Pinsel sowie ein kräftiges Hellgrün (#b7f049). Nun malt Ihr auf dieser Ebene über die Bereiche der Schrift die hellgrün werden sollen. Das trifft natürlich auf alle oberen Bereiche der Ranken zu, da diese jünger sind und folglich noch nicht so dunkel.

Organic Webdesign Typografie Tutorial

Wählt nun "Ebene > Schnittmaske erstellen" um die obere Ebene auf die Pixel der darunterlegenden Ebene zu begrenzen. Nun könnt Ihr mit einer Auswahl oder einem Radiergummi unerwünschte Lichter noch korrigieren.

Organic Webdesign Typografie Tutorial

Auf die selbe Weise dunkelt Ihr den unteren Teil der Schrift ab. Wählt hierfür ein etwas brauneres Grün (#4d5d02).

Organic Webdesign Typografie Tutorial

5. Licht und Schatten

Erstellt an oberster Position eine neue Ebene und erstellt auch von dieser Ebene sofort eine Schnittmaske. Nun wählt ihr einen kleinen weichen Pinsel und Schwarz als Vordergrundfarbe. Reduziert die Deckkraft des Pinsels auf ca. 50%, damit der Schatten nicht zu dunkel wird. Nun malt Ihr an den Kanten der Schrift passende Schatten. Achtet hierbei auf einen realistischen Lichteinfall - Das Licht muss immer von der gleichen Seiten kommen, ergo fallen die Schatten auf der gegenüberliegenden Seite stärker. Jetzt ist es auch an der Zeit die Stellen auszuarbeiten an denen eine Ranke die Schrift durchwachsen soll.

Organic Webdesign Typografie Tutorial

Auf einer neuen Ebene die Ihr ebenfalls zur Schnittmaske umwandelt, erstellt Ihr nun mit einem hellgelb und einem noch dünneren Pinsel auf die gleiche Art die Highlights.

Organic Webdesign Typografie Tutorial

6. Struktur

Markiert in der Ebenenpalette alle Ebenen bis auf die Hintergrundeben und fasst diese über [Cmd/Strg] + [E] zu einer Ebene zusammen. Anschließend wählt Ihr über "Filter > Rauschfilter > Rauschen hinzufügen" die gaußsche Normalverteilung, setzt den Haken bei monochromatisch und vergebt eine Stärke von 1,5%.

Organic Webdesign Typografie Tutorial

7. Blätter

Um die Schrift ein wenig aufzuwerten werden wir nun noch einige Blättchen erstellen die wir an unseren Ranken platzieren. Wählt das Pfadwerkzeug [P] sowie ein helles Grün (#97cd35). Stellt sicher, dass in der Optionsleiste die Formebenen aktiviert sind. Nun erstellt Ihr eine simple Blattform.

Organic Webdesign Typografie Tutorial

Da es sich um einen Pfad handelt, können wir das Blatt beliebig oft kopieren [Cmd/Strg] + [J] und transformieren [Cmd/Strg] + [T]. Erstellt nun beliebig viele Kopien des Blattes und lasst sie dort wachsen wo es gut aussieht. Ihr solltet die Größe und Ausrichtung der Blätter über das Transformationswerkzeug [Cmd/Strg] + [T] individuell anpassen.

Organic Webdesign Typografie Tutorial

Markiert erneut alle Ebenen außer der Hintergrundebene und fasst diese wieder zu einer Ebene zusammen. Sollten Euch die Blättchen zu einheitlich sein, so könnt Ihr nun erneut mit einer Schnittmaske Licht und Schatten hinzufügen und anschließend alles auf eine Ebene reduzieren. Das könnte das z.B. so aussehen (Achtet auf die Blätter).

Organic Webdesign Typografie Tutorial

8. Schatten

Doppelklickt nun auf die Ebene mit unserem Artwork um die Fülloptionen zu öffnen. Im Abschnitt "Schlagschatten" vergeben wir folgende Werte: Deckkraft: 25%; Winkel: 90°; Abstand: 3px; Überfüllen: 0; Größe 3px.
Bestätigt die Fülloptionen mit "OK".

Organic Webdesign Typografie Tutorial

9. Atmosphäre

Die Atmosphäre lässt sich allein über die Hintergrundgestaltung massiv beeinflussen. Dunkelt den Hintergrund deutlich ab und erstellt von Zentrum der Arbeitsfläche aus einen radialen Farbverlauf von Grün/Braun zu Transparent um die Schrift leuchten zu lassen. Ein auf den Hintergrund angewandter Störfilter sowie einige mit winziger Pinselspitze hinzugefügte Lichtpunkte erzielen zusammen mit einem dem Farbschema angepassten Subtitel folgendes Endergebnis.

Organic Webdesign Typografie Tutorial

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

10 Kommentare

  1. Patrick H.

    Verfasst am 25. September 2009 um 21:13 Uhr.

    Toller Einstieg ins Grüne – ein besseres Tutorial hättest Du zum organischen Webdesign nicht schreiben können – das trifft den Nagel auf den Kopf. Mir gefällt dieser Web-Trend sehr, zumal in Designs, wo Typographie natürlich auch eine große Rolle spielt, die Schriftart eher selten individuell abgeändert wird. Man sollte sich also das nächste Mal nicht scheuen diese Techniken einzusetzen, denn es wertet umgemein auf. Daumen hoch! Simple but effective organic web design with typography for the win! :)

  2. Chimera Studios web design

    Verfasst am 27. September 2009 um 1:11 Uhr.

    Superb example!

  3. Slain

    Verfasst am 28. September 2009 um 3:09 Uhr.

    Hi,
    zu dem Tutorial, das ist echt super.
    Verfolge deinen Blog auch schon seit längerem weil er mir wirklich gefällt, doch was mir aufgefallen ist, du hast einen kleinen Anpassungsfehler auf deiner Seite ^^

    http://img14.imageshack.us/img14/8398/fehlerr.png

    Ich nutze Opera, bin mir nicht sicher ob es bei den anderen Browsern auch so ist…

    Mit freundlichen Grüßen

    • Jonas

      Verfasst am 28. September 2009 um 9:27 Uhr.

      @Slain: Danke für den Hinweis, ich werde das die Tage mal korrigieren. Ich hätte es so schnell auch nicht gemerkt, da die Formularfelder nur angezeigt werden wenn man nicht eingelogged ist. Was auf mich nur selten zutrifft :)

  4. diseño de volantes

    Verfasst am 30. September 2009 um 21:51 Uhr.

    Muy buen blog de diseño! great blog! thanks from Argentina.

  5. Oliver

    Verfasst am 1. Oktober 2009 um 11:03 Uhr.

    Sehr nett.
    Klasse.

    Jonas ist eben der Beste. :)

  6. Marjeta

    Verfasst am 3. Oktober 2009 um 15:37 Uhr.

    Hi, super Anleitung und eine Inspiration für einmal ein „anderes“ Webdesign.

    VIELEN DANK! und viele Grüße aus München

  7. erdem

    Verfasst am 18. Juli 2010 um 17:51 Uhr.

    einfach nur stark!!
    1000 dank und viele grüße :-)

  8. Meilo

    Verfasst am 14. Juni 2011 um 17:39 Uhr.

    Wirklich gut gelungener Beitrag. Manche Dinge sogar mehr als hilfsreich.
    Danke.

  9. Ben

    Verfasst am 8. Januar 2012 um 13:16 Uhr.

    Ich bekomme die Ranken leider nicht hin. Bitte auch mal als Video.

    THX Ben

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.