Wenn Ihr häufig eigene Hintergrund-Muster in Photoshop erstellt, diese anschließend als Grafik exportiert und im CSS-Dokument wieder einbettet, dann schaut euch unbedingt mal folgendes Online-Tool an.
Patternify ist ein Online-Generator zur Herstellung von Hintergrundmustern und erleichtert die Gestaltung und vor allem die Einbindung von CSS Pattern erheblich.

Wie funktioniert Patternify?

Patternify ist denkbar unkompliziert in der Handhabung. Auf einer stark vergrößerten Arbeitsfläche könnt Ihr beliebig eingefärbte Pixel platzieren um euer Muster zu gestalten. Ihr könnt sowohl auf einer weißen Arbeitsfläche starten, als auch ein vordefiniertes Muster laden und anschließend editieren. In einem Vorschaufenster auf der rechten Seite seht Ihr wie euer Muster in Originalgröße auf einer etwas größeren Fläche aussehen wird.
Wenn ihr mit der Arbeit fertig seid, so könnt Ihr eine PNG-Grafik des Musters herunterladen oder alternativ einen CSS-Code kopieren. In diesem Fall wird das Muster extern in Euer Stylesheet eingebunden.

css-pattern-patternify
Screenshot von Patternify

Ich finde dieses Tool nicht nur unglaublich praktisch was den Einsatz im alltäglichen Workflow angeht. Es visualisiert auch sehr schön wie CSS Pattern überhaupt funktionieren.

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 – 2 Kommentare

  1. Jürgen
    schrieb am 24.09.2013 um 21:53 Uhr:

    Danke für den Tipp, so schnell ging das wirklich noch nie von der Hand.

    Gruß
    Jürgen

    Antworten
  2. Grafiken mit Data URIs (Base 64) erzeugen | kulturbanause blog
    schrieb am 04.03.2013 um 10:56 Uhr:

    […] Patternify, einem Tool das ich schon vor langer Zeit vorgestellt habe, ist es möglich Endlosmuster online zu […]

    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 →