Je ne suis pas vraiment un designer mais il m’arrive de m’amuser avec mon Gimp. J’avais hier soir besoin de me faire une petit header à la mode web 2.0 pour ma nouvelle page personnelle, j’ai donc fait quelques recherche sur le web mais je n’ai pas trouvé mon bonheur parmis les tutoriel pour Gimp.
J’ai donc décidé de transposer un tutoriel Photoshop, et quelques temps plus tard j’ai donc obtenu le résultat souhaité. Je profite donc de cette note pour vous faire partager ma découverte.
Créer le texte
- Ouvrir The Gimp et créez une nouvelle image, pour la taille c’est comme bon vous semble ici j’ai pris 800×200.
- Dans cette image créez deux calques de texte avec le nom que vous souhaitez, ici j’ai utilisé le nom de mon blog que j’ai scindé en deux couleurs.
- Une fois le texte mis en forme correctement fusionnez les deux calques et faite un clic droit dessus pour sélectionner alpha vers sélection.
Éclaircir le texte
- Tout en conservant la sélection créez un nouveau calque vide appelez le "eclaircir" et remplissez la sélection de blanc.
- Appliquer un masque de calque sur le calque "eclaircir" (option "blanc") et faite un dégradé du noir vers le blanc afin de ne conserver qu’un léger dégradé sur le haut du texte (vous pouvez ajuster la transparente du claque pour obtenir un l’effet voulu).
Créer une ombre interne
- Sélectionnez à nouveau le calque de texte et faite à nouveau alpha vers sélection.
- Nous allons réduire la taille de la sélection d’un pixel, pour ce faire il suffit d’aller dans le menu ‘Sélection > Réduire’ et entrer la valeur 1 pixel.
- Tout en conservant la sélection créez un nouveau calque vide appelez le "Ombre interne" et remplissez la sélection de blanc.
- Sélectionnez le calque "Ombre interne" et appliquez lui un flou gaussien, menu ‘Filtres > Flou > Flou gaussien (IIR)…’. J’ai utilisé une valeur de 3.0 pixels.
- Choisissez maintenant, dans la fenêtre des calques, pour "Mode" la valeur "Superposer". Changez si vous le désirez l’opacité du calque, moi j’ai gardé l’opacité à 100 %.
Créer un contour
- Allez, encore un fois, sélectionnez le calque de texte et faite une nouvelle fois alpha vers sélection.
- Nous allons cette fois agrandir la taille de la sélection de six pixels, pour ce faire il suffit d’aller dans le menu ‘Sélection > Agrandir’ et entrer la valeur 6 pixels.
- Tout en conservant la sélection créez un nouveau calque vide appelez le "contour" et remplissez la sélection de blanc, puis faites le passer sous le calque de texte.
Ombrer le logo
- Gardez sélectionné le calque contour puis appliquez une ombre portée grâce au menu ‘Script-Fu > Ombre > Ombre portée’, pour l’exemple j’ai choisi les réglages suivant:
- décalage X de 0 pixel
- décalage Y de 0 pixel
- rayon de flou de 40 pixels
- Couleur noir
- Opacité 90%
6 réponses sur « Créer un logo web 2.0 avec the Gimp »
Merci beaucoup, je ne comprends rien à Gimp et ton petit tuto risque de me servir !
Plus simple : tu écris ton texte et tu vas dans Script-fu -> Alpha vers logo, et là tu as le choix de tout pleins de traitements Web 2.0…
"Alors vous en pensez quoi de ce logo, mérite t’il de prendre la place du titre actuel de ce blog ?"
Non, essai avec d’autres couleurs :p
@ frenchbidog: c’est avec plaisir, n’hésites à poser des questions si tu as des problèmes.
@ Agnés: En effet il y a pas mal de traitement mais je n’ai pas trouvé mon bonheur dans la liste. De plus j’ai un soucis il y a plein de script qui ne produisent pas d’effet (j’avoue je n’ai pas poussé très loin l’investigation).
@ RomainF: Merci pour ton avis je ne suis pas convaincu non plus mais j’ai juste repris les couleur de ma feuille de style. Une proposition pour les couleurs ?
Moi j’aime bien. Sobre, simple
Comme bannière oui tu peux le mettre.
Pas mal mais il faudrait un peu plus de contraste entre le vert pomme et le contour blanc.
Ah, je viens d’aller voir sur la page et c’est bien mieux.