Comment construire une bannière graphique pour votre site de HTML5 et CSS3

Presque chaque site commercial HTML5 et CSS3 a une Banner Graphic - un graphique particulier, généralement avec une taille de jeu (900x100 est commun), qui apparaît sur chaque page. Normalement, si vous modifiez un modèle de CSS, vous avez une bannière graphique par défaut. Vous aurez envie de copier ce graphique afin de commencer avec la bonne taille et la forme.

Vous pouvez construire une bannière de nombreuses façons, mais voici une technique simple vous pouvez modifier:

1. Charger ou de créer la forme de base.

   Si vous avez un graphique de commencer à utiliser, charger dans Gimp. Si non, créer une nouvelle image de la taille dont vous avez besoin. Le mien est de 100 pixels de haut par 900 pixels de large.

2. Créer un fond d'écran plasma.

   Utilisez le filtre Plasma (Filtres-render-Nuages-plasma) afin de créer un modèle semi-aléatoire. Utilisez les nouveaux boutons de semences et de la turbulence de changer l'ambiance générale. Ne vous inquiétez pas au sujet de la couleurs- vous les supprimiez à l'étape suivante.

3. Après l'arrière-plan de plasma est en place, utilisez le filtre Colorier à appliquer une couleur à l'arrière-plan.

   Choisissez une couleur compatible avec votre thème. Pour cet exemple, optez pour une couleur plus claire parce que vous utilisez des ombres, qui nécessitent un fond clair. Utilisez le curseur Luminosité pour rendre une couleur relativement léger.

4. 
   
   
   
   

   Créer un calque de texte à l'aide de l'outil Texte.

   Texte dans un graphique doit être grande et audacieuse. L'outil Texte crée automatiquement une nouvelle couche. Après vous tapez votre texte, spécifiez la police et la taille.

5. Dupliquer le calque de texte.

   Dans le panneau Calques, faites une copie de la couche de texte. Sélectionnez le plus faible des deux couches de texte (qui deviendront une ombre).

6. Brouiller l'ombre.

   Avec la couche d'ombre sélectionné, appliquer le flou gaussien (Filtres-Blur-Flou gaussien).

7. Déplacer l'ombre.

   Utilisez l'outil Déplacer pour déplacer les positions relatives du texte et l'ombre. Généralement, les utilisateurs attendent une ombre à être légèrement plus bas et à droite du texte (simulant la lumière venant du haut à gauche). Plus l'ombre est du texte, plus le texte semble flotter.

8. Faire de la semi-ombre.

   Avec la couche d'ombre toujours sélectionné, réglez le curseur Opacité pour environ 50 pour cent. Cela rendra les ombres moins prononcée et permettre à une partie de l'arrière-plan apparaisse à travers la couche d'ombre.

9. Assaisonner au gustatifs et faire des ajouts en fonction de vos besoins.

10. Enregistrer dans un format réutilisable.

    Le format natif pour les images dans Gimp est XCF. XCF magasins tout - couches, les paramètres et tous. Si vous avez besoin de modifier la bannière plus tard (et vous), vous aurez une bonne version de travailler à partir.

    Choisissez Fichier-Enregistrer sous pour enregistrer le fichier. Si vous spécifiez le .xcf extension, Gimp enregistre automatiquement dans le format plein.

11. Exporter vers un format Web convivial.

    Généralement, vous devez enregistrer bannières graphiques sous forme de fichiers PNG ou GIF. (Gimp supporte les deux formats.) Considérez PNG moins la couche inférieure a la transparence (parce que certains navigateurs ne prennent pas en charge les encore les fonctions de transparence avancées du format PNG). Ne pas enregistrer les images contenant du texte en format JPG. Le schéma de compression JPG est notoire pour ajouter des objets à texte.

    

Normalement, lorsque vous enregistrez dans un autre format, une boîte de dialogue d'options apparaît. En cas de doute, aller avec les valeurs par défaut.