Alors que les heureux possesseurs de sites webs se rassurent : il est tout à fait possible de créer son propre icone de flux avec The Gimp

Nous n’allons pas travailler en vectoriel mais qu’importe finalement pour un usage sur internet ? J’ai choisi de le créer dans sa couleurs originale mais rien ne vous interdit d’en faire à vos couleurs.

Allez, hop ! Au boulot !.

Préparons le fond

Commencer par créer une image de forme plus ou moins carrée. A l’image de base ajouter un calque en transparence. Validez la création de ce nouveau calque et positionnez-vous dessus.

Nous allons maintenant créer la forme générique de l’icone. Pour cela, sélectionnez l’outil de sélection rectangulaire (R)

Cochez la case « Coins arrondis » et entrez un rayon de 20 pixels (comme déjà vu ici):

Sélectionnez l’outil de sélection rectangulaire (R) et tracez une forme carrée aux bords arrondis

Le choix des couleurs

Les couleurs originales sont dans les tons orangés.
Choisissez celle qui vous convient. Remplissez la forme avec un dégradé de la couleur de premier plan vers celle du second plan.

Créez un second calque sans rien désélectionner.
Faites un clic-droit dans la sélection et choisissez > Sélection > Réduire
Appliquer un rayon de 20 pixels

Remplissez cette nouvelle sélection uniquement avec de légers dégradés sur les 4 bords :

Un reflet web 2.0

Créez un nouveau calque.
Comme vous avez gardé la sélection précédente, remplissez cette dernière d’un dégradé de blanc vers transparent.

Vous pouvez désélectionner. Maintenant, prennez l’outil Courbes de Bézier (ou l’outil chemon (B)) et tracez une forme comme suit :

Transformez le chemin en sélection et supprimez ce qui se trouve à l’intérieur :

Les symboles RSS

Attaquons-nous maintenant aux symboles du RSS. Créez un nouveau calque. Tracez une forme ronde et remplissez-la de blanc. Toujours sans désélectionner, faites un clic droit > Sélection > Réduire et laissez un rayon de 20 pixels.

Supprimez ce qui se trouve dans la sélection. Votre premier arc est créé.
Opérez à l’identique pour le second arc.

Le point final

Pour tracer le rond du bas du logo, rien de plus simple. Prennez l’outil Sélection Elliptique, tracez un rond parfait et remplissez-le de blanc. Positionnez-le correctement si besoin.

L’image finale

Le fichier source

Télécharger le fichier source (format .xcf)

Vous souhaitez diffuser ce didacticiel ?

Ce didacticiel est sous licence Creativ Commons
Vous êtes libres de reproduire, distribuer et communiquer cette création au public, de modifier et d’utiliser cette création à des fins commerciales en citant le nom de l’auteur original (kloobik.org).

Si vous modifiez, transformez ou adaptez cette création, vous n’avez le droit de distribuer la création qui en résulte que sous un contrat identique à celui-ci. Pour toute question concernant la diffusion de ce didacticiel : info@kloobik.com

Ils apparaissent aussi dans les favoris, dans les onglets des navigateurs ainsi qu’en icone de raccourci sur le bureau. Les favison sont petits et quand je dis petit c’est très petit : 16 pixels par 16 pixels.

La seule chose dont vous avez besoin pour ajouter un favicon à votre site est … un favicon format windows (.ico) qui souvent se nomme favicon.ico. Il s’agit simplement de l’uploader sur votre FTP, à la racine. De nos jours, la plupart des navigateurs supportent le format .ico.

Voici donc comment en créer un rapidement sous Gimp.

Créer une image carrée

Commencer par créer une image de forme carrée disons de 250 pixels par 250 pixels. Il sera toujours temps de la redimensionner plus tard.

Nous allons changer la couleurs de fond de l’image. Ouvrez pour ce faire la palette de couleurs, choisissez une couleurs assez sombre et remplissez le calque d’arrière plan avec cette couleurs.

Créons notre symbole

Sachant qu’au final l’image fera 16 pixels par 16 pixels, n’hésitez pas à utiliser un symbole ou une police de grande taille.

Redimensionner la police

Ouvrez les options de l’outil police et augmentez la taille de la police ainsi que sa forme pour obtenir un résultat honorable :

Réduisez l’image

Pour que le favicon soit accepté par les navigateurs, il faut lui donner une taille adéquate. Redimensionnez votre image originale en 16px par 16px :

Enregistrons notre favicon

Pas besoin d’aller chercher bien loin : le menu d’enregistrement de Gimp propose un format Windows Icon (alors que Photoshop ne le propose que via un plugin …. ). Choisissez de ce fait le format .ico (windows icon).

Nommez le fichier favicon.ico.

Laissez les options de compression par défaut et finalisez l’enregistrement.
Votre favicon est créé !

Vous souhaitez diffuser ce didacticiel ?

Ce didacticiel est sous licence Creativ Commons
Vous êtes libres de reproduire, distribuer et communiquer cette création au public, de modifier et d’utiliser cette création à des fins commerciales en citant le nom de l’auteur original (kloobik.org).

Si vous modifiez, transformez ou adaptez cette création, vous n’avez le droit de distribuer la création qui en résulte que sous un contrat identique à celui-ci. Pour toute question concernant la diffusion de ce didacticiel : info@kloobik.com