Hintergrundmuster kostenlos für die eigene Homepage

Hintergrundbilder und Farbverläufe (sog. Pattern) werden auf Websites gerne als Gestaltungsmittel für die Homepage eingesetzt. Grundlage für diese Techniken ist die CSS-Eigenschaft background-image, mit der einem HTML-Element ein Hintergrundbild zugewiesen wird. Im Buch hatte ich u. a. die Anwendung in Verbindung mit background-repeat und background-color erläutert.

Hintergrundbilder werden gewöhnlich in Bildbearbeitungsprogrammen erstellt, deren Bedienung Anfängern oftmals Probleme bereitet. Alternativ bietet sich die Nutzung von Pattern-Generatoren an, die erstaunlich einfach zu bedienen sind. Wem selbst das zu aufwendig ist, kann schließlich auf einen riesigen Fundus an bereits fertigen Mustern zugreifen.

Pattern-Generatoren

Mit dem Onlinegenerator BgPatterns lassen sich in nur maximal vier Schritten Hintergrund-Pattern erstellen:

  1. Über die Registerkarte “Images” wählen Sie ein grundsätzliches Motiv inklusive Größe, Anordnung und Deckkraft aus.
  2. Über die Registerkarte “Canvas” fügen Sie ggf. eine Oberflächentextur hinzu.
  3. Über die Registerkarte “Colors” können Sie Vorder- und Hintergrundfarbe verändern.
  4. Über die Registerkarte “Rotate” können Sie das Motiv rotieren lassen.

Alle Veränderungen werden in dem rechten Vorschaufenster in Echtzeit berücksichtigt. Mit einem Klick auf “Apply background” wird das Bildmotiv auf den Hintergrund angewandt, wodurch ein konkreter Eindruck vermittelt wird. Über “Download image” lässt sich das Bild als JPEG-Bild herunterladen. Über “Save to My patterns” kann man seinen Entwurf auch online abspeichern, allerdings ist zunächst eine Registrierung notwendig.

Interessant ist ferner noch die Möglichkeit, dass im unteren Bereich der Website die von anderen Usern erstellten Kacheln als Inspirationsquelle angesehen und modifiziert werden können.

Getrübt wird der positive Gesamteindruck lediglich durch die fehlende Möglichkeit eigene Motive hochzuladen, und das Bilder lediglich als JPEG-File abgespeichert werden können, was je nach Motiv Qualitätseinbußen zur Folge haben kann.

Einen vollkommen anderen Ansatz verfolgt die hochinteressante Software Repper, mit der sich nahtlose Hintergrundmuster im Kaleidoskop-Stil erstellen lassen. Den zu spiegelnden Bereich können Sie auf einem Bild Ihrer Wahl beliebig verschieben und in der Größe verändern. Dadurch, dass Sie zusätzlich Einfluss auf den Modus der Spiegelungen nehmen können, erschließt sich ein schier unerschöpfliches Arsenal an Möglichkeiten. Zusätzlich lassen sich noch die Farbeinstellungen vielfältig verändern. Die Muster können nach Fertigstellung in den Formaten JPEG, PNG oder TIF heruntergeladen werden. Auch die Einstellungen lassen sich sichern, sodass Sie zu einem späteren Zeitpunkt an Ihrem Werk weiter arbeiten können. Repper ist prinzipiell eine kostenpflichtige Software, kann aber vollständig online getestet werden.

Wer hingegen lieber komplett ohne Bildvorlagen arbeiten möchte, sollte sich Patternify genauer anschauen. Das Online-Tool bietet eine Oberfläche im Stil eines Icon-Editors, mit dem man sich das Motiv freihändig zusammenklicken kann. Zur Gestaltung eines Muster stehen maximal 10×10 Pixelpunkte zur Verfügung, die nach Belieben gesetzt, entfernt oder auch farblich manipuliert werden können. Auf der rechten Seite findet sich zusätzlich ein Vorschaufenster, dass das Endergebnis im tatsächlichen Größenverhältnis anzeigt. Das Hintergrundmuster kann schließlich als PNG-Bilddatei abgespeichert werden. Als absolute Besonderheit bietet Patternify zusätzlich die Ausgabe der Grafik als base64-kodierten CSS-String an, wodurch das physische Vorhalten der Bilddatei auf dem Server entfällt.

Fertige Inspirationen

Wer gar nicht selbst Hand anlegen möchte, findet eine kleine aber feine Auswahl bei Pattern Wall (leider nur JPEG). Quantitativ punktet hingegen DinPatterns, bei der zusätzlich verschiedene Bildformate angeboten werden (neben JPEG auch GIF, und PNG.).

Einen anderen Ansatz verfolgt Tileables. Dort werden fertig geschnürte Muster-Pakete angeboten, die sich verschiedenen Mustern zu einem bestimmten Themenkomplex widmen.

Empfehlenswert ist ferner patterrific. Allerdings ist hier – im Gegensatz zu allen anderen bisher vorgestellten Diensten – die Nutzung der Vorlagen nur bei privaten Websites kostenfrei, bei kommerziellen Projekten fällt eine (geringe) Lizenzgebühr an.

Ebenfalls nur für den privaten Gebrauch freigegeben sind die nahtlosen Muster bei Seamless Colour Patterns. Interessant an dieser Sammlung ist insbesondere die Möglichkeit der farblichen Sortierung.

ava7patterns ist hingegen eine sinnvolle Anlaufstelle, wenn Sie nach bestimmten Musterformen und Farben Ausschau halten, da dementsprechende Einschränkungen bei der Suche möglich sind.

Quantitativ bietet wohl kein Online-Angebot mehr Auswahl als das von Patterncooler. Die Besonderheit bei diesem Angebot sind die Individualisierungsmöglichkeiten. So kann sowohl der Hintergrund als auch die grafischen Elemente des jeweiligen Musters farblich verändert werden. Zusätzlich lässt sich die Patterngröße in vorgegebene Prozentschritten (25, 50, 100, 150 und 200%) manipulieren. Die Bilder können kostenlos im PNG-Format heruntergeladen werden, allerdings wird bei kommerzieller Nutzung eine Spende erwartet. Um den Überblick zu erleichtern, können registrierte Nutzer sich auch ein eigenes Album mit bevorzugten Mustern anlegen.

Wenn Sie hingegen speziell gestreifte Hintergründe generieren möchten, sollten Sie sich unbedingt den (kostenlosen) Stripe Generator anschauen. Definieren Sie Variablen wie Größe, Abstand und Farben der Streifen und klicken Sie auf das Bild um die Vorschau zu aktualisieren. Die fertige Datei können Sie im PNG-Format herunterladen.

Wer anstelle von gestreiften Hintergründen eher gepunktete mag, sollte sich einmal Dotter von Pixelknete näher ansehen. Auch wenn die Einstellungsmöglichkeiten nicht ganz so vielfältig sind, können die recht unaufdringlichen Formen insbesondere für die eine oder andere Landing Page eine ansprechende Alternative darstellen.

Der Background Generator setzt sich von den bisherigen Lösungen durch seine Fähigkeit ab, die Hintergründe einer bereits publizierten Website in Echtzeit manipulieren zu können. Der große Vorteil dieser Variante ist natürlich, dass Sie bei der Auswahl der Farben die Auswirkungen auf das Gesamterscheinungsbild sofort kontrollieren können. Auch der Background Generator bietet zahlreiche Oberflächentexturen, bei denn sich die Farben und Verlaufsformen vielfältig anpassen lassen.

Abschließender Tipp: Im professionellen Kontext werden am häufigsten unaufdringliche Hintergründe eingesetzt, die sich dezent ins Gesamtbild einfügen. Spezialisiert auf solche eher unscheinbaren Hintergründe hat sich die Sammlung Subtle Patterns. So finden sich dort nahtlos gekachelte Papier-, Sand- oder Lederstrukturen, die extrem fein eingestellt wurden. Alle Texturen kann man zusammenhängend im Photoshop-Pattern-Format oder einzeln als PNG-Grafik gratis herunterladen und auch für kommerzielle Projekte frei verwenden.

Über Jens Kilgenstein

Ich bin seit über zehn Jahren im Bereich Webdesign tätig und betreue seitdem kleine und große Kunden bei der Konzeption und Umsetzung von Webprojekten. → Zum Profil

,

Ebenfalls Lesenswert:

2 Reaktionen zu Hintergrundmuster kostenlos für die eigene Homepage

  1. Wolfgang Hansl 20. Februar 2015 at 09:53 #

    Hi,

    die beste Zusammenstellung ever zu diesem Thema!
    Tolle Recherche, Danke!

    LG
    Wolfgang

Trackbacks/Pingbacks

  1. Die Link-Essenz 3: Die wichtigsten CSS3-Techniken | Webdesign lernen, Homepage erstellen | CSS einfach erklärt - 3. Dezember 2012

    [...] Die CSS3-Pattern-Gallery präsentiert ausschließlich mit Hilfe von CSS3-Gradients erzeugte Texturen und Muster. Da bei diese Technik keine Grafiken eingesetzt werden, lassen sich hierdurch HTTP-Requests und Übertragungsvolumen einsparen, was im Ergebnis zu geringeren Ladezeiten führen kann. Die CSS3-Techniken funktionieren natürlich nur in aktuellen Browsern, wobei die radialen Verläufe von der Gecko-Engine auch bei aktuellen Versionen nicht immer korrekt interpretiert werden, was den produktiven Einsatz zusätzlich erschwert. In einem anderen Beitrag von mir findet sich übrigens recht große Zusammenstellung für die Anwendung klassischer Hintergrundmuster. [...]

Hinterlasse eine Antwort