Créer un motif de fond personnalisé pour votre site internet

Il y a encore quelques jours, lorsque je souhaitais mettre en place un fond répétitif sur un site internet, je me débrouillais pour en bricoler un avec mon éditeur d’images gratuit favori : GIMP. C’était long et fastidieux, mais au moins, il n’y avait aucun problème de droits sur les images.

Hier, alors que je retapais un site internet sur le bricolage, j’ai eu l’envie de faire un fond répétitif, de type mosaïque donc, avec plein d’icônes sur le thème du bricolage. Déjà lassé à l’idée de tout fabriquer, j’ai appliqué une règle fondamentale chez les bons fainéants : utiliser  5 minutes de recherche pour trouver un outil qui nous en fera gagner 30. 😉

Plain pattern + Flaticon

Utiliser Plain pattern

Pour générer notre motif personnalisé, nous allons donc utiliser 2 sites internet : le premier est Plain Pattern, un éditeur visuel de motif en mosaïque. Pour commencer, il suffit de se rendre sur http://www.kennethcachia.com/plain-pattern et de cliquer sur le bouton « Create a Pattern ». Une fois sur l’interface de création, le bouton « + » vous permettra d’ajouter des images sur votre motif, et de les modifier comme bon vous semble. L’interface vous montrera aussi ce que donne la répétition de votre motif.

Le site en lui-même est excellent, mais manque cruellement d’icônes ! En effet, les quelques images exemples ne suffiront probablement pas à fabriquer votre motif dans la thématique que vous avez choisie. C’est là que nous allons nous rendre sur un autre site.

Récupérer des SVG sur Flaticon

Plain pattern nous donne la possibilité d’ajouter nous-mêmes des images supplémentaires dans l’éditeur, au format SVG (dessin vectoriel). Oubliez les éditeurs d’image comme Inkscape, le site Flaticon regorge déjà d’images vectorielles libres de droits. Rendons-nous donc sur https://www.flaticon.com/.

Veillez bien à télécharger les images au format SVG, car le site propose divers formats (qui ne sont pas utiles ici).

Importer des SVG et créer un motif

Pour notre exemple, je vais télécharger 3 images sur le thème du travail en équipe (Teamwork) :

Je vais les insérer dans Plain pattern, et créer mon motif :

 

Il ne me reste plus qu’à les placer comme bon me semble et voilà !