Kategorien
Essentials Freebies, Tools und Templates Webdesign

The Pattern Library: Nahtlose Gratis-Hintergrundbilder für Ihre Designs

The Pattern Library ist ein recht neues Projekt der Designer Tim Holman aus New York und Claudio Guglieri aus San Francisco. Die beiden leben zwar auf entgegengesetzten Seiten des Kontinents, jedoch konnte sie das nicht davon abhalten, das gemeinsame Projekt "The Pattern Library" zu realisieren. Ich sag’s ja immer: Gravity sucks, wird aber immer unbedeutender. Das Konzept des Dienstes entspricht dem Inhalt. Die Sammlung nahtloser Hintergrundmuster als ungewöhnlich zu bezeichnen wird beiden Aspekten gerecht…

thepatternlibrary-homepage

The Pattern Library: Interessante, teils wilde Muster, alle kostenlos und nicht profan

Bei meinem ersten Besuch der The Pattern Library (TPL) kam es mir vor, als würde ich in ein exotisches Land einreisen, um nicht direkt von einem anderen Planeten zu sprechen. TPL verhält sich zwar voll responsiv und liegt insofern im Trend, hält sich aber ansonsten an keines der etablierten Design-Prinzipien. TPL ist einfach eine wilde Ansammlung unterschiedlichster Muster – und offenbar stolz darauf.

Aktuell warten 43 Pattern darauf, von Ihnen verwendet zu werden. Dabei sind alle Muster stark unterschiedlich, keines ähnelt einem anderen. Die Designs sind mindestens als interessant zu bezeichnen, auch einige echte Juwelen finden sich. Um eines der Muster auszuwählen, klicken Sie eine der Vorschauen auf der Homepage an. Dann sieht Ihr Browserfenster zum Beispiel so aus:

thepatternlibrary-expl01

In dieser Ansicht findet sich rechts oben im Browserfenster eine vertikale Toolbar, die bei der Navigation behilflich sein soll:

thepatternlibrary-navigate

Mit dem nach oben zeigenden Pfeil gelangen Sie zum vorhergehenden Pattern, der nach unten gerichtete navigiert ein Pattern weiter. Der Kreispfeil öffnet ein Muster nach dem Zufallsprinzip und ein Klick auf das – nennen wir es – Tastenfeld führt zurück zur Startseite. Der Link zum Download findet sich linksseitig oben unter der Bezeichnung des jeweiligen Patterns. Das war’s. Keine Suche, keine Kategorien, keine weitere systematische Verfügbarmachung des Fundus. Solange die Zahl der Muster überschaubar bleibt, reicht diese Informationsarchitektur erstmal aus. Wir werden sehen, was passiert, wenn die Zahl der Patterns die Hundertermarke knackt…

Alle Designs liegen entweder als JPG oder PNG vor. Dabei kann man den Erstellern keinen Vorwurf machen. Richtigerweise wählten sie für fotorealistische Muster das Format JPG und für flache, einfache Formen PNG. Empfehlenswert ist es, die JPGs nochmal durch einen Optimierer zu schicken. Ich konnte unter Einsatz von JPEGmini zwischen 20 und 30 Prozent weitere Größenreduzierung erreichen, was mir bei den PNGs nicht gelang. Diese waren stets gut optimiert.

thepatternlibrary-expl02

Alle Pattern stammen von verschiedenen Designern und sind kostenlos nutzbar für private und kommerzielle Projekte gleichermaßen. Eine bestimmte, nachlesbare Lizenz ist nicht genannt. Wenn Sie Ihre eigenen Muster der Sammlung hinzufügen wollen, freuen sich Holman und Guglieri über eine Mail mit Dateianhang, sowie Nennung Ihrer Netzadresse und Ihres Twitter-Accounts. Ist das Design interessant genug, stehen die Chancen für eine Aufnahme in die Sammlung einigermaßen gut..

The Pattern Library ist auf jeden Fall die nächste Ergänzung Ihres Werkzeugkastens. Folgen Sie Tim und Claudio auf Twitter um über Ergänzungen der Library auf dem Laufenden zu bleiben…

Links zum Beitrag

Kategorien
Design HTML/CSS

CSS und SVG: 2 neue, kostenlose Dienste für Hintergründe und Verläufe in HTML 5

Zum Jahresende hin stolpere ich über zwei Dienste, die sich auf die Erstellung von Website-Hintergründen mit HTML 5 konzentrieren. Dabei setzt das Tool CSS Color Gradient Generator von ScriptsConnect auf CSS 3 und das Tool SVGeneration auf SVG. Mit mehreren Farbmodellen und Unterstützung für mehr als nur CSS kann der CSS Generator punkten, während SVGeneration bei Verläufen noch nicht Halt macht, sondern mit etlichen realistisch wirkenden Texturen zu gefallen weiß. Beide erleichtern uns die Arbeit, schauen wir also mal genauer hin…

CSS3 Color Gradient Selector and Generator

css-color-gradient-generator

Der CSS Color Gradient Generator stellt über eine übersichtliche Formular-Umgebung alle erforderlichen Parameter bereit, die Sie benötigen, um einen Verlauf mittels CSS3 umfassend zu konfigurieren. Dabei arbeitet der Generator in unterstützten Browsern im WYSIWYG-Modus. Auf der rechten Seite des Browserfensters wird stets verzögerungsfrei dargestellt, was die Änderung der Parameter auf der linken Seite bewirkt. Oben rechts sehen Sie dabei die grafische Preview, darunter den generierten CSS-Code, der sich mit und ohne Kommentare darstellen lässt und sich ebenfalls dynamisch ändert.

Neben CSS kann die Ausgabe auch in SCSS und Less erfolgen. Als Farbformat ist man nicht auf das übliche Hex festgelegt. Zur Wahl stehen zusätzlich jeweils zwei RGB- und HSL-Varianten. Die ansehnlichen Presets eignen sich gut als Basis für eigene Verläufe. Sie orientieren sich durchgängig an aktuell gängigen, im Sinne von populären Farben.

Der CSS Color Gradient Generator kümmert sich ungefragt um das Browser-Prefixing und liefert sogar einen Fallback für ältere Internet Exploder mit. Das Tool kann frei verwendet werden. Ist der Verlauf fertig parametrisiert, kopieren Sie schlicht den Code aus dem Textfeld rechts unten aus und fügen ihn in Ihrem Projekt wieder ein.

Haben Sie bereits einen CSS-Verlauf, den Sie visuell bearbeiten wollen, so verwenden Sie die Funktion Import from CSS unterhalb des Ausgabefensters. Im sich nun öffnenden Textfeld kopieren Sie Ihren Code ein und klicken auf Submit. Jetzt können Sie ihn in gleicher Weise wie die mitgelieferten Presets bearbeiten.

SVGeneration: mehr als nur Verläufe

svgeneration

Das Tool SVGeneration ist wie der CSS Generator weiter oben eine Web-App, die kostenlos genutzt werden kann. Die fast 60 SVG-Vorlagen, die der Betreiber bereits zur Verfügung gestellt hat, können unter MIT-Lizenz, also ohne Attribution, frei Verwendung finden. Wenn Sie mögen, reichen Sie Ihre eigenen Kreationen ein. Bei entsprechender Qualität stehen die Chancen nicht schlecht, in den Bestand übernommen zu werden.

Alle Vorlagen auf SVGeneration sind über zwei Editoren frei anpassbar, dabei aufgrund des SVG-Formats nicht auf Verläufe beschränkt. So finden Sie auf der Site viele, interessante Hintergrund-Texturen, etwa in Metall- oder Stoffoptik. Auch viele Flat Designs warten darauf, von Ihnen entdeckt und bearbeitet zu werden.

Der Einstieg ist einfach. Suchen Sie über den Showcase ein Design aus, das Ihnen zusagt und klicken mittig auf Generate. Sie gelangen in einen sog. Easy Editor, mit dessen Hilfe Sie im WYSIWYG-Modus an den Texturen schrauben können. An dieser Stelle werden Sie auch über etwaige Einschränkungen des gewählten Patterns hinsichtlich der Browser-Kompatibilität informiert. Generell empfehlen die Betreiber den Einsatz von etwa Modernizr, um entsprechend unfähige Browser direkt anders behandeln zu können.

Im Easy Editor können Sie nun über Schieberegler und Farbwähler die Optik des vorgewählten Musters anpassen. Entspricht alles den Vorstellungen, downloaden Sie SVG und CSS und bauen beides auf Ihrer Website wieder ein. Der zweite Editor namens Code Edit erlaubt weitergehende Änderungen direkt am SVG-Code. Zu beachten ist dabei allerdings, dass man, soweit man hier tatsächlich Änderungen vornimmt, nicht mehr zum Easy Editor wechseln kann. Tut man es dennoch, sind die getätigten Änderungen verloren.

Zusätzlich zu den leicht anpassbaren Vorlagen finden Sie auf SVGeneration eine Sammlung von Ressourcen zum Thema, gut nicht nur für Einsteiger.

svgeneration-editor

Links zum Beitrag:

  • CSS Color Gradient Selector and Generator | Homepage
  • SVGeneration | Homepage
  • ScriptsConnect | Macher des CSS Generators
Kategorien
Inspiration Showcases

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

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)