Vidéo: Créer un site de A à Z - HTML5, CSS3 & Bootstrap - TP [FR] 2025
Presque tous les sites commerciaux HTML5 et CSS3 ont un graphique de bannière - un graphique spécial, généralement avec une taille d'ensemble (900 × 100 est commun), qui apparaît sur chaque page. Normalement, si vous modifiez un modèle CSS, vous disposez d'un graphique de bannière par défaut. Vous aurez envie de copier ce graphique afin de commencer avec la bonne taille et la bonne forme.
Vous pouvez créer une bannière de plusieurs façons, mais voici une technique simple que vous pouvez modifier:
-
Charger ou créer la forme de base.
Si vous avez un graphique de départ à utiliser, chargez-le dans Gimp. Sinon, créez une nouvelle image de la taille dont vous avez besoin. Le mien fait 100 pixels de haut sur 900 pixels de large.
-
Créer un fond de plasma.
Utilisez le filtre Plasma (Filtres → Rendu → Nuages → Plasma) pour créer un motif semi-aléatoire. Utilisez les boutons New Seed et Turbulence pour modifier la sensation générale. Ne vous inquiétez pas pour les couleurs. vous les supprimez à l'étape suivante.
-
Une fois l'arrière-plan plasma en place, utilisez le filtre Coloriser pour appliquer une couleur à l'arrière-plan.
Choisissez une couleur compatible avec votre thème. Pour cet exemple, optez pour une couleur plus claire car vous utilisez des ombres qui nécessitent un arrière-plan clair. Utilisez le curseur Luminosité pour obtenir une couleur relativement claire.
-
Créez un calque de texte à l'aide de l'outil Texte.
Le texte d'un graphique doit être grand et gras. L'outil Texte crée automatiquement un nouveau calque. Après avoir tapé votre texte, spécifiez la police et la taille.
-
Dupliquer le calque de texte.
Dans le panneau Calques, faites une copie du calque de texte. Sélectionnez la plus basse des deux couches de texte (qui deviendra une ombre).
-
Flouter l'ombre.
Avec la couche d'ombre sélectionnée, appliquez le flou gaussien (Filtres → Flou → Flou gaussien).
-
Déplacez l'ombre.
Utilisez l'outil Déplacer pour déplacer les positions relatives du texte et de l'ombre. Généralement, les utilisateurs s'attendent à ce qu'une ombre soit légèrement plus basse et à droite du texte (en simulant la lumière venant du coin supérieur gauche). Plus l'ombre est éloignée du texte, plus le texte semble flotter.
-
Rend l'ombre semi-transparente.
Avec la couche d'ombre toujours sélectionnée, réglez le curseur Opacité sur environ 50%. Cela rendra les ombres moins prononcées et permettra à une partie de l'arrière-plan d'apparaître à travers le calque de l'ombre.
-
Assaisonner au goût; faire des ajouts en fonction de vos besoins.
-
Enregistrer dans un format réutilisable.
Le format natif pour les images dans Gimp est XCF. XCF stocke tout: les calques, les paramètres et tout. Si vous avez besoin de modifier la bannière plus tard (et vous le ferez), vous aurez une bonne version à utiliser.
Choisissez Fichier → Enregistrer sous pour enregistrer le fichier. Si vous spécifiez le. extension xcf, Gimp enregistre automatiquement dans le format complet.
-
Exporter vers un format Web convivial.
En règle générale, vous devez enregistrer les graphiques de la bannière en tant que fichiers PNG ou GIF. (Gimp prend en charge les deux formats.) Considérez le format PNG sauf si la couche inférieure est transparente (car certains navigateurs ne prennent pas encore en charge les fonctions de transparence avancées du format PNG). Ne sauvegardez pas les images contenant du texte au format JPG. Le schéma de compression JPG est connu pour ajouter des artefacts au texte.
Normalement, lorsque vous enregistrez dans un autre format, une boîte de dialogue d'options apparaît. En cas de doute, utilisez les valeurs par défaut.
