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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

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

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas 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 (Autor)
      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 (Autor)
      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 →