JPKCom DB

Trianglify UI — Anwendungsbeispiele

Praxisnahe Durchläufe mit Trianglify UI: Marken-Farben, Muster per Seed und Link teilen, CSS-Background, 4K-PNG, Drahtgitter und Social-Media-Grafik.

Zurück zur Übersicht: Trianglify UI · Tool live öffnen: www.jpkc.com/tools/trianglify/

Das Manual erklärt jede Einstellung und jeden Wertebereich im Detail. Diese Seite ergänzt das um konkrete Arbeitsabläufe — typische Aufgaben, Schritt für Schritt durchgespielt. Die Oberfläche des Tools ist auf Englisch; Regler- und Button-Namen stehen deshalb in ihrer englischen Original-Schreibweise, bei Bedarf mit deutscher Erläuterung.

Beispiel 1: Hintergrund in deinen Marken-Farben

Du brauchst einen Hero-Hintergrund, der zu deinem Corporate Design passt — nicht irgendeine bunte Palette.

  1. Öffne Trianglify UI und aktiviere den Schalter Own two-colour gradient. Die Menüs Colour palette und Vertical gradient werden dadurch deaktiviert.
  2. Klick in das Feld Start colour und trag deine erste Marken-Farbe als Hex-Wert ein (z. B. ein dunkles Markenblau, #264653; dreistellige Kurzformen gehen auch, wobei jede Ziffer verdoppelt wird — #246 steht also für #224466). Wiederhol das für End colour mit einer zweiten, harmonierenden Farbe. Vertippst du dich, färbt sich das Feld rot und die Vorschau bleibt beim letzten gültigen Stand.
  3. Stell die Cell size auf einen mittleren Wert (z. B. 75) und die Variance nach Geschmack — niedriger für ein ruhiges, höher für ein lebhaftes Muster.
  4. Optional: Unter Style gibt Shadows mit einer Effect strength um 0,3 dem Verlauf etwas Tiefe. Die Dreiecke werden dabei zufällig etwas dunkler als deine Marken-Farben — für exakte Farbtöne bleibst du bei Smooth gradient.
  5. Die Vorschau zeigt das Ergebnis sofort. Passt es, hast du einen Hintergrund exakt in deinen Farben.

Tipp: Wenn du die genauen Hex-Werte deiner Marke nicht zur Hand hast, findest du sie mit dem Colors-Tool (Farb-Wähler und Paletten-Extraktor).

Beispiel 2: Ein Muster per Seed reproduzieren

Du hast in der Vorschau ein Muster gefunden, das du behalten, später exakt wiederherstellen oder einer Kollegin schicken willst.

  1. Klick auf das Shuffle-Symbol (New random seed) neben dem Seed-Feld. Das Tool setzt einen zufälligen 8-stelligen Seed und rendert ein neues Muster. Würfle so lange, bis dir das Ergebnis gefällt.
  2. Klick in der Karte Size & export auf Copy link. Die kopierte Adresse enthält Seed, Palette, Stil, alle Regler und die Größe, etwa https://www.jpkc.com/tools/trianglify/#seed=k7m2xq9p&palette=Blues.
  3. Öffnest du den Link — auf einem anderen Rechner oder Wochen später —, stellt das Tool alle Werte wieder ein und du bekommst exakt dasselbe Muster zurück.

Ohne Link genügt auch der Seed allein, wenn du dir die übrigen Einstellungen notierst: Gleicher Seed plus gleiche Werte (einschließlich der Größe) ergeben dasselbe Muster. Einzig die Option für doppelte Pixeldichte steht nicht im Link — die setzt du beim Export bei Bedarf neu.

Beispiel 3: Als CSS-Background einbinden

Du willst das Muster ohne separate Bilddatei direkt im Stylesheet verwenden.

  1. Erzeuge in der Vorschau das gewünschte Muster und wähl unter Size ein Format, dessen Seitenverhältnis zu deinem Bereich passt (für einen breiten Hero etwa Full HD oder X header). Für einen Web-Hintergrund ist eine eher große Cell size sinnvoll, das hält die Zeichenkette kurz.
  2. Klick auf Copy CSS. In der Zwischenablage liegen jetzt zwei fertige Zeilen: background-image mit dem Muster als URL-kodierte SVG-Data-URI und background-size: cover.
  3. Setz sie in deinen Selektor ein und ergänz bei Bedarf die Position:
.hero {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1920 1080' …");
	background-size: cover;
	background-position: center;
}

Weil das SVG inline im CSS steht, spart das einen zusätzlichen HTTP-Request. Wie lang die Zeichenkette ist, siehst du in der aufklappbaren Karte Data URIs neben dem Titel SVG — dort kannst du die Data-URI auch einzeln kopieren. Dank viewBox skaliert das SVG mit background-size: cover verlustfrei auf jede Breite.

Beispiel 4: Als Hero-Bild in 4K als PNG exportieren

Für ein Präsentations-Hintergrundbild oder ein Wallpaper brauchst du eine hochauflösende Bitmap.

  1. Wähl in der Karte Size & export zuerst bei Size den Eintrag 4K (3840 × 2160) — oder Custom… und trag eine eigene Größe ein (bis 8192 px Kantenlänge).
  2. Stell danach das Muster ein. Weil das Tool direkt in 4K rechnet, zeigt die Vorschau schon das endgültige Bild; die Cell size gilt in 4K-Pixeln. Für einen ähnlich groben Look wie bei Full HD verdoppelst du sie ungefähr (etwa 150 statt 75).
  3. Klick auf PNG. Das Tool lädt genau das Muster aus der Vorschau als trianglify-<seed>-3840x2160.png herunter.

Wichtig ist die Reihenfolge: Wechselst du die Größe erst am Ende, berechnet das Tool ein neues Muster, weil die Dreiecks-Geometrie von Breite und Höhe abhängt. Für Retina-Wallpaper kreuzt du zusätzlich Raster images at 2× pixel density an — aus Full HD wird dann ein 3840 × 2160 px großes PNG mit dem unveränderten Muster, Dateiname mit @2x.

Beispiel 5: Eine ColorBrewer-Palette gezielt nutzen

Du brauchst kein eigenes Marken-Schema, sondern ein erprobtes, ausgewogenes Farbschema.

  1. Lass Own two-colour gradient aus und öffne das Menü Colour palette.
  2. Wähl aus der Gruppe Sequential eine einfarbige Steigerung (z. B. Blues oder Greens) für einen ruhigen, professionellen Look — oder aus Diverging eine kontrastreiche Palette (z. B. Spectral oder Red-Yellow-Blue) für ein lebendigeres Muster. Der Farbstreifen unter dem Menü zeigt die Farben der Palette.
  3. Für einen zweidimensionalen Verlauf wählst du unter Vertical gradient eine zweite Palette, etwa Blues horizontal und Oranges vertikal.
  4. Spiel mit Cell size und Variance, bis die Balance stimmt, und exportiere wie in Beispiel 3 (CSS) oder 4 (PNG).

Die 27 Paletten stammen aus ColorBrewer und sind auf gute Unterscheidbarkeit ausgelegt — eine schnelle Abkürzung zu einem stimmigen Ergebnis, ohne selbst Farben zu mischen.

Beispiel 6: Drahtgitter als transparentes Overlay

Du willst die Dreiecks-Struktur als dezente Linien-Ebene über eine Farbfläche oder ein Foto legen.

  1. Schalte Wireframe (outlines only, transparent) ein. Die Füllung entfällt, die Vorschau zeigt nur noch die Umrisse vor einem Schachbrettmuster, das die Transparenz anzeigt.
  2. Stell die Strichstärke mit Line width ein — steht der Regler auf 0, zeichnet das Tool automatisch 1 px. Die Linien tragen die Verlaufsfarben der Palette; für ein einheitlicheres Bild wählst du eine einfarbige Palette wie Greys oder einen eigenen Verlauf mit zwei ähnlichen Farben.
  3. Lade das Ergebnis als PNG oder WebP herunter — beide behalten den transparenten Hintergrund. JPEG dagegen setzt die Linien auf Weiß. Auch SVG und Copy CSS taugen hier nicht: Im Drahtgitter-Modus haben die Dreiecke im SVG kein fill-Attribut und werden schwarz gefüllt, das Overlay würde die Fläche darunter also komplett verdecken.

Im CSS legst du das Drahtgitter dann einfach über eine Hintergrundfarbe:

.section {
	background-color: #1d3557;
	background-image: url("trianglify-k7m2xq9p-1920x1080.webp");
	background-size: cover;
}

Beispiel 7: Open-Graph-Bild und Social-Media-Header

Du brauchst ein Vorschaubild für geteilte Links und einen passenden Profil-Banner im selben Look.

  1. Wähl unter Size den Eintrag Open Graph (1200 × 630), stell Palette oder eigenen Verlauf ein und lade das Bild als PNG oder JPEG herunter.
  2. Kopier mit Copy link die Einstellungen, damit du den Look später wiederfindest.
  3. Wechsle die Größe auf X header (1500 × 500) und lade erneut herunter. Weil sich mit der Größe die Geometrie ändert, bekommst du ein neues Muster — Farben, Stil und Dichte bleiben aber gleich, und genau darauf kommt es für einen einheitlichen Auftritt an.

Für ein Smartphone-Hintergrundbild gibt es analog Phone wallpaper (1080 × 1920), für quadratische Posts Square (1080 × 1080).

Noch tiefer: die Übersicht zum großen Bild, das Manual für jede Option im Detail und die Tipps & Tricks für Kniffe und Stolperfallen. Ausprobieren kannst du alles direkt im Tool.