Generatoren

Schluss mit einfarbig: Fünf Pattern-Generatoren für Hintergrundgrafiken

17. März 2013
von

Wenn der Hintergrund einer Website mehr als nur einfarbig sein soll, muss eine Hintergrundgrafik her. Will man sich bildlich nicht direkt festlegen, und auf etablierte Weise unterschiedliche Auflösungen bedienen, etscheidet man sich oft für Texturen oder Muster, die sich wiederholen. Gerade sich wiederholende Muster sind je nach Komplexität nicht im Handumdrehen gestaltet. Pattern-Generatoren helfen dabei, Hintergrundgrafiken so zu erstellen, dass ein stimmiges Muster entsteht. Wir haben uns fünf dieser Tools für Sie angesehen.

Pattern Cooler

patterngeneratoren_patterncooler

Wer dezent nicht mag, wird bei Pattern Cooler sicher fündig. 225 unterschiedliche Muster stehen zur Auswahl. Jedes Pattern kann individuell angepasst werden. So gibt es die Möglichkeit, alle enthaltenen Farben frei zu definieren. Außerdem kann aus vier verschiedenen Größen ausgewählt werden.

Wem das nicht reicht, der kann seinem Muster noch eine Textur verleihen. Möglich sind Textil- sowie Rauschtexturen. Das fertige Muster wird als PNG-Datei zum Download angeboten. Wer eine hochauflösende Grafik oder ein Vektorformat haben will, muss allerdings 10 Dollar bezahlen.

Patternify

patterngeneratoren_patternify

Patternify ist etwas für Pixelschubser. Auf einer definierten Fläche, die zwischen einem und zehn Pixel Kantenlänge hat, werden einzelne Pixel platziert. Dabei sind Farbe und Transparenz frei wählbar. Auch mehrere einfache Muster stehen zur Vorauswahl bereit. Eine Live-Vorschau zeigt das künftige Ergebnis im Einsatz. So sieht man unmittelbar, wie die Grafik als Muster dargestellt wird.

Neben dem Download der Grafik als PNG-Datei, stellt der Dienst sie auch als Data-URL inklusive dazugehörigem CSS-Quelltext zur Verfügung.

Patternizer

patterngeneratoren_patternizer

Patternizer ist kein klassischer Generator. Denn er erzeugt keine Grafik, die als Hintergrund eingebunden wird. Vielmehr werden die mit Patternizer generierten Muster per JavaScript und Canvas-Element in ein HTML-Dokument platziert.

Zur Erstellung von Mustern gibt es eine grafische Oberfläche, mit der man Streifen in unterschiedlicher Farbe, Breite und Drehung übereinander legen kann. Das fertige Pattern wird in ein JSON-Objekt gespeichert, welches zusammen mit der Patternizer-Library in ein HTML-Dokument eingebunden werden muss.

Stripemania

patterngeneratoren_stripemania

Wer ein gestreiftes Muster lieber in klassischer Form möchte, wird bei Stripemania fündig. Zwar sind die Gestaltungsmöglichkeiten eingeschränkter als etwa bei Patternizer, dafür gibt es die Hintergründe als PNG- oder GIF-Grafiken. Außerdem ist es möglich, mehrere Farben und Farbverläufe in die Streifen aufzunehmen.

ZenBG

patterngeneratoren_zenbg

Der letzte im Bunde ist ZenBG. Der Generator stellt verschiedene Texturen zur Auswahl, die anschließend nach Belieben eingefärbt werden können. Dazu gehören unter anderem Holz-, Stein- und Papiervarianten. Ist die passende Textur ausgewählt, lässt sich diese mit einer beliebigen Farbe kolorieren.

Wer es lieber bunt hat, kann mehrere Farben angeben, die in Form eines Verlaufes über die Textur gelegt werden. Anschließend erhält man eine fertige ZIP-Datei zum Download, welche die Grafik einschließlich CSS-Quelltext beinhaltet.

Links zum Beitrag

Übrigens: Wenn Sie weitere Generatoren kennen. Nennen Sie sie uns bitte, in den Kommentaren, gleich hier drunter…

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Tags: , ,

2 Kommentare zu „Schluss mit einfarbig: Fünf Pattern-Generatoren für Hintergrundgrafiken
  1. [...] The article was written by Denis Potschien and first published in our German sister publication Dr. Web Magazin. [...]

  2. [...] The article was written by Denis Potschien and first published in our German sister publication Dr. Web Magazin. [...]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!