Comment créer un arrière-plan en mosaïque pour votre site HTML5 et CSS3 - Para Dummies

Souvent, vous voulez une image de fond pour couvrir toute la page sur votre site Web HTML5 et CSS3. Cela peut être plus difficile qu'il n'y paraît parce que vous ne savez pas quelle sera la taille de la page dans le navigateur de l'utilisateur.

Pire encore, les grandes images peuvent prendre énormément d'espace et ralentir l'expérience de l'utilisateur. La solution courante consiste à utiliser une image en mosaïque conçue pour se répéter en arrière-plan. Gimp a quelques outils très utiles pour construire des images en mosaïque.

Rappelez-vous que la propriété CSS background-repeat vous permet de spécifier comment un arrière-plan se répète. Le paramètre par défaut répète l'arrière-plan à l'infini dans les axes X et Y. Vous pouvez également définir l'arrière-plan pour répéter horizontalement (repeat-x), verticalement (repeat-y), ou pas du tout (no-repeat).

Le but d'un arrière-plan en mosaïque est de créer un graphique relativement petit qui remplisse toute la page et ressemble à une image plus grande. Le secret est de créer l'image de sorte qu'il est difficile de voir où l'image se répète. Voici une façon de faire un fond en mosaïque dans Gimp. Bien sûr, vous pouvez adapter cette technique à vos propres fins.

1. Créer une nouvelle image.

   La taille de votre image est importante. Les petites images sont beaucoup plus efficaces à télécharger, mais le motif est beaucoup plus évident. Commencez avec 256 par 256 pixels.

2. Créez un motif aléatoire.

   Vous pouvez utiliser la technique du filtre Plasma ou essayer une technique similaire en sélectionnant Filtres → Rendu → Nuages ​​→ Nuages ​​de différences. Le filtre Difference Clouds crée une image en niveaux de gris mais avec un certain nombre d'options intéressantes. L'option Mosaïque crée un motif prêt à être mosaïqué. Jouez avec ces options jusqu'à ce que vous obteniez quelque chose d'intéressant.

3. Réglez le contraste.

   Pour un effet optimal, vous souhaitez une répartition relativement égale des valeurs de la lumière à l'obscurité. Le moyen le plus simple de le faire est de passer par l'outil de normalisation automatique (Couleurs → Auto → Normaliser).

4. Choisissez un dégradé.

   Vous allez ajouter des couleurs à votre motif en utilisant une technique appelée dégradé . Utilisez la boîte de dialogue Dégradé (Windows → Dockable Dialogs → Dégradés) pour choisir un dégradé. Couleurs plus sombres sur votre carte d'image pour les couleurs à gauche du dégradé, et les couleurs plus claires à gauche. Vous pouvez ajuster les couleurs, donc ne vous inquiétez pas si les couleurs ne sont pas exactement ce que vous voulez.

5. Utilisez l'outil Carte de dégradé (Couleurs ➪ Carte ➪ ​​Carte de dégradé) pour mapper les couleurs du dégradé à votre motif de nuages.

6. Décale l'image pour vérifier la mosaïque.

   Le moyen le plus simple de voir si l'image est bonne est de décaler l'image.Cela place les bords au centre pour que vous puissiez voir à quoi ressemblera l'image lorsque plusieurs copies sont côte à côte. Ouvrez la boîte de dialogue Décalage en choisissant Couche → Transformation → Décalage. La boîte de dialogue Décalage comporte un bouton pratique x / 2, y / 2. Cliquez sur le bouton pour voir à quoi ressemble votre image.

7. Nettoyez l'image si nécessaire.

   Si vous avez choisi l'option Mosaïque lorsque vous avez construit l'image dans le nuage, la nouvelle image aura l'air bien. Sinon, vous pouvez avoir des coutures visibles. Utilisez les outils Smudge et Clone pour nettoyer ces coutures si nécessaire. Appliquez l'outil Décalage une seconde fois pour vérifier si vos coutures sont bonnes.

8. Appliquez des filtres pour obtenir l'effet souhaité.

   Vous pouvez coloriser votre image ou la rendre floue pour couvrir les artefacts de votre nettoyage. Rappelez-vous que les images d'arrière-plan doivent être extrêmement sombres ou extrêmement claires avec un contraste très faible si vous voulez un texte lisible.

9. Testez l'image en enregistrant l'image au format XCF et un format Web (comme le format PNG), créez une page simple en utilisant l'image comme arrière-plan et chargez la page dans votre navigateur pour vous assurer qu'elle correspond à vos attentes..