Textures de béton doux, d’enduit, de toile et de feutre sans couture (8 textures)

Ces textures s’adressent aux designers UI et aux développeurs front-end qui veulent donner une surface d’enduit, de béton, de toile ou de feutre à un fond, une carte, un en-tête ou une illustration, sans fabriquer un bruit à la main. Chaque texture se répète sans joint visible : vous la posez en mosaïque sur une surface de n’importe quelle taille. Elle existe en deux versions. La tuile opaque sert de fond telle quelle ; le calque transparent se pose sur votre design, garde vos couleurs et n’ajoute que le relief de la matière.

• 8 textures : 4 matières, chacune en deux échelles.
  • Béton doux : smooth-plaster (enduit lisse) et soft-concrete (béton doux).
  • Toile : raw-linen (lin brut) et wool-felt (feutre de laine).
  • Le suffixe -large garde la matière à l’échelle de son image source ; le suffixe -small la montre plus fine, pour un fond plus discret.
• 8 tuiles opaques (opaque/<nom>.jpg) : la matière en couleur, en JPEG de 2 048 px de côté.
• 8 calques transparents (layer/<nom>.png), en PNG de 2 048 px de côté : blanc là où la matière est plus claire, noir là où elle est plus sombre, la force portée par la transparence. La palette est fixe : du noir et du blanc seulement, 0 % de gris, sur 32 niveaux de transparence. Tous les calques de la série ont la même force à opacité égale.
• 16 tuiles web (web/), en WebP de 1 024 px : pour chaque texture, une version opaque (<nom>.webp) et une version en niveaux de gris (<nom>-overlay.webp), faite pour les modes de fusion du CSS.
• 1 feuille CSS (css/textures.css) : une variable et deux classes par texture.
• 1 page de démonstration (demo/index.html, en anglais), qui s’ouvre hors ligne : les 8 textures en tuiles nommées, puis un en-tête en dégradé et une carte, sans et avec texture.

Organisation de l’archive :

opaque/<nom>.jpg
layer/<nom>.png
web/<nom>.webp
web/<nom>-overlay.webp
css/textures.css
demo/index.html

Le zip contient aussi une note d’usage pour les outils de design, le texte de la licence, un fichier LISEZMOI et les crédits.

Comment l’utiliser

• Dans un outil de design : placez le calque layer/<nom>.png au-dessus de votre maquette, en remplissage d’image répété en mosaïque, en mode normal et à faible opacité. Il fonctionne sur n’importe quelle couleur de fond. Pour un effet plus marqué, passez-le en mode incrustation ou lumière douce. La tuile opaque/<nom>.jpg sert de fond plein, pour une carte ou un arrière-plan.
• Sur le web : chargez css/textures.css, puis posez une classe sur l’élément. .tx-<nom> ajoute un voile de matière par-dessus le contenu existant, et la variable --tx-opacity en règle la force. .tx-bg-<nom> pose un fond complet, matière comprise, dont la couleur se règle par la variable --tx-fill.

<link rel="stylesheet" href="css/textures.css">
<section class="tx-soft-concrete-large">…</section>

Fabrication et IA

Chaque texture part d’une image source générée par Krea, avec le modèle krea-2 : 4 images sources de 1 024 px, une par matière. Ces sources ont ensuite été rendues raccordables et traitées en local : synthèse sans couture à 2 048 px, aplanissement de l’éclairage, étalonnage des couleurs, calques et tuiles web. Les images sources ne sont pas livrées dans l’archive. Le raccord a été contrôlé sur une mosaïque 3 × 3 de chaque texture, sans joint visible.

Les scripts de traitement, la feuille CSS et la démonstration ont été produits avec un assistant d’IA, puis relus et contrôlés : dimensions, profil de couleur, poids des fichiers, absence de texte dans les images et raccord de chaque tuile.

• JPEG 2 048 px, sRGB : les tuiles opaques, avec un profil de couleur sRGB et sans autres métadonnées. Elles s’ouvrent dans la plupart des outils de design et de retouche.
• PNG 2 048 px transparent : les calques, utilisables dans la plupart des outils de design qui acceptent un remplissage d’image en mosaïque.
• WebP 1 024 px : les tuiles pour le web, lisibles par tout navigateur récent.
• CSS : la feuille de classes, sans script, sans dépendance et sans adresse externe.
• HTML : la page de démonstration, à ouvrir dans un navigateur, sans connexion.

À savoir

• Ce sont des textures à plat, pour l’interface et l’illustration. Aucune carte de relief ni de rugosité pour la 3D n’est livrée.
• Les textures ne contiennent ni texte ni marque.

Les textures sont livrées sous licence commerciale : vous pouvez les utiliser dans vos projets personnels et professionnels, y compris pour vos clients et dans les produits que vous vendez, mais pas revendre ni redistribuer les fichiers, même gratuitement.

• Grainy gradient : des dégradés texturés et élégants
• Le dégradé maillé pour illustrer vos maquettes
• Le pack voisin de la même série : textures de papier et de carton sans couture, livrées dans les mêmes formats. Le pack de textures de grain sans couture complète la série.

1.0.0 (11 novembre 2026) : première version.