kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI â€¦

Screencast: Kunstfaser-Struktur mit Photoshop erzeugen

Im App- und Web-Design erfreut sich die Kunstfaser-Struktur aktuell allergrößter Beliebtheit. Seit Apple die dezente Struktur im iOS-Betriebssystem verwendet hat, taucht sie auch bei vielen anderen prominenten Websites und Apps auf. So nutzen beispielsweise Twitter oder Reeder die Struktur für das Interface-Design der iPad-App.
Ich möchte euch in diesem Screencast zeigen, wie ihr die Struktur in sehr kurzer Zeit und mit nur einem Filter in Photoshop umsetzt.

Workshops und Seminare von kulturbanause

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

Jetzt Frühbucher-Rabatte sichern!

Zeichenfilter anwenden

Der Kunstfaser-Effekt ist sehr einfach hergestellt. Eine schwarz eingefärbte Arbeitsfläche wird mit dem Zeichenfilter "Feuchtes Papier" bearbeitet. Anschließend kann die Struktur noch verfeinert und farblich angepasst werden.

Die HD-Version findet ihr hier.

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!

8 Kommentare

  1. Peter

    Verfasst am 31. Mai 2011 um 19:37 Uhr.

    Gewusst wie – mal wieder besten Dank für den schnellen Tipp!

  2. Marco

    Verfasst am 7. Juni 2011 um 8:16 Uhr.

    Womit nimmst du deine Videos auf, damit sie solch gute Qualität besitzen?

  3. Walter Jahn

    Verfasst am 19. Oktober 2011 um 8:43 Uhr.

    Hallo Jonas,

    ich habe das alles sehr gut in Photo-Shop nachvollziehen können. Weil ich aber Anfägner bin, hier meine Frage:

    als was speichere ich die Struktur ab, und vor allem, wohin damit in WP, damit das als Hintergrund erscheint? Danke.

    Walter

    • Jonas Hellwig

      Verfasst am 19. Oktober 2011 um 8:50 Uhr.

      @Walter Jahn: Du kannst frei entscheiden wo, bzw. in welchem Format du die Datei abspeichern möchtest und wie du sie im CSS-Code ansprichst.

  4. Walter Jahn

    Verfasst am 19. Oktober 2011 um 9:25 Uhr.

    Hallo Jonas,

    Danke. Aber ich habe von php keine Ahnung, wie du bestimmt schon gemerkt hast….

    Wenn du mir freundlicherweise die entsprechende Zeile „vorschreiben“ könntest, dann würde ich sie einfügen. Bei kopieren und einfügen bin ist stark :-))

    Tausend Dank.
    Walter

  5. Walter Jahn

    Verfasst am 19. Oktober 2011 um 10:50 Uhr.

    Hallo Jonas,

    danke, aber das hilft mir nicht weiter, weil ich Angst habe, da was falsch zu machen. Ich kenne mich bei php nicht aus und mein „EDV-Englisch“ ist auch nicht besonders, dass ich das alles verstehe.

    Trotzdem Danke und schönen Tag.

    Walter

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.