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, Web Animationen, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …
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.
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
Kommentar verfassen
Peter
Verfasst am 31. Mai 2011 um 19:37 Uhr.
Gewusst wie – mal wieder besten Dank für den schnellen Tipp!
Marco
Verfasst am 7. Juni 2011 um 8:16 Uhr.
Womit nimmst du deine Videos auf, damit sie solch gute Qualität besitzen?
Jonas Hellwig
Verfasst am 7. Juni 2011 um 9:00 Uhr.
@Marco: Ich nehme meine Videos mit Screenflow auf (http://www.apple.com/downloads/macosx/video/screenflow.html) und schicke das Video am Ende noch einmal durch Adobe Premiere. Hier komprimiere ich allerdings nur und versuche ein wenig den Sound zu verbessern.
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.
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
Jonas Hellwig
Verfasst am 19. Oktober 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
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