Helper9-teaser

Kleine Helfer No.9: Muster & Texturen

Kommentare 0
Blog

Heute eine Sammlung von kleinen Helfern zum Thema Muster und Texturen. Meiner Meinung nach spielen diese in der Webentwicklung seit jeher eine große Rolle. Warum? Weil sie bei geringer Datenmenge die Möglichkeit bieten das Browserfenster füllend mit einer Hintergrundoptik zu versehen!

Das klingt in Zeiten von Responsive Design und hohen Bandbreiten veraltet, ist aber noch heute ein einfaches und ansprechendes Gestaltungsmittel. Wer also neben Fullscreen-Images, Vollflächen oder Verläufen Lust hat eine andere Hintergrundgestaltung auszuprobieren, finden hier ein paar hilfreiche Werkzeuge.

Plain Pattern

Die Web-App Plain Pattern ist ein auf SVG basierender Pattern-Generator. Das Tool befindet sich in einer stetigen Weiterentwicklung und bietet aber schon heute viele Features die das Web-Design erleichtern. So kann beispielsweise aus einer bestehenden Shape-Bibliothek das passende Motiv ausgewählt und verändert werden. Darüber hinaus besteht die Möglichkeit, eigene SVG´s hochzuladen. Die Farben sind natürlich auch individuell anpassbar. Am Ende wird dann das erstellte Pattern als Image runtergeladen.

pattern-gui

Noise Texture Generator

Wem dies zu grafisch erscheint, ist der Noise Texture Generator empfohlen. Hier wird der Fokus auf subtile Hintergrundtexturen gelegt. Diese bieten eine gute Möglichkeit den Fokus auf den Content zu legen und lenken dabei nicht ab.

noisetexture

Patternify

Patternify kommt mit seiner Benutzeroberfläche ziemlich Oldscool daher. Kommt aber trotzdem ziemlich cool, weil man sich die Textur selbst Pixel für Pixel zeichnen kann. Da kommt dann wieder der Gestalter in einem hoch.

patternify

Codepen

Pattern die rein auf Code basieren gibt es natürlich auch. Hier ein paar Beispiele auf Codepen:

See the Pen Triangle pattern generator by Maksim Surguy (@msurguy) on CodePen.

See the Pen Random pixel pattern by Gabe Martin (@gabemartin) on CodePen.

See the Pen Japanese cube by Tankred (@tankred) on CodePen.

 

CSS3 Patterns Gallery

Die Pattern auf CSS3 Patterns Gallery basieren ebenfalls auf … ? Richtig! CSS!

css3gallery

Hero Patterns

Eine Sammlung von Background Pattern die auf SVG´s basiert, viele Gestaltungsmöglichkeiten bietet und das entsprechende CSS ausgiebt – Hero Patterns von Steve Schoger.

Hero Patterns Teaser

Schreibe einen Kommentar