Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

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.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Geschrieben von Jonas

Benutzerbild

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.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 8 Kommentare

  1. Walter Jahn
    schrieb am 19.10.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

    Antworten
  2. Walter Jahn
    schrieb am 19.10.2011 um 09: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

    Antworten
    • Jonas Hellwig
      schrieb am 19.10.2011 um 10:19 Uhr:

      @Walter Jahn: Der Code ist ja abhängig von der Grafik, dem Layout, der Programmierung der Seite, der Struktur etc. – da musst du schon selbst ran. Vielleicht hilft dir diese Seite weiter: http://www.w3schools.com/css/css_background.asp

      Antworten
  3. Walter Jahn
    schrieb am 19.10.2011 um 08: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

    Antworten
    • Jonas Hellwig
      schrieb am 19.10.2011 um 08: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.

      Antworten
  4. Marco
    schrieb am 07.06.2011 um 08:16 Uhr:

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

    Antworten
  5. Peter
    schrieb am 31.05.2011 um 19:37 Uhr:

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

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →