Forums GAMERGEN

Salut à tous!

Après la demande de certains d'entre vous de petites astuces pour réaliser des icones (notamment avec effet néon) pour thème j'ai décidé de faire un petit tuto rapido dans le but non pas de vous dire exactement comment faire des icônes néons mais plutôt de vous donner l'envie de créer VOS propres icônes!
En effet je trouve que de tout le temps revoir les icônes de Sony (même reprises) et ben c'est... barbant. Et surtout je pense (c'est mon avis hein?^^) que créer des icônes rend un thème beaucoup plus cohérent (si on s'y prend bien quand même! ).

Donc passons plutôt au tuto!
Je le décompose en trois parties: les outils et deux où je vous montre comment j'ai réalisé les icônes de mes thèmes Neon&Space et AVATAR.
Mais attention, je le répète: ce n'est pas pour que vous fassiez des icônes néons (même si je ne vous en empêche pas bien sûr) mais pour que vous ayez les outils pour être créatifs et nous concocter des beaux thèmes!
Here we gooooooo...

I- Les outils

Pour créer comme pour retoucher il nous faut un logiciel et il s'agit ici du plus important, celui que j'utilise et dont ce tuto est destiné est the GIMP que vous trouverez sur le site officiel ou ailleurs (c'est gratuit, servez-vous! - par contre je n'ai pas le droit de mettre de lien donc google est votre ami).
Pour la création de thème il vous faudra ces deux logiciels:
- PNG for PTF
Lien de téléchargement (troisième) et explication ici.
- Custom Theme Converter
Lien de téléchargement ici.
Je n'en dirais pas plus sur l'utilisation de ces deux derniers logiciels puisque ce n'est pas le but de ce tuto. Y'a de quoi s'en sortir partout sur le site (PSPGen)!

II- Les icônes néons

Lancez the GIMP et créez un nouveau fichier comme ceci:

Le fond transparent est important! Et les dimensions sont celles pour les icônes principales du menu.
Cliquez sur Valider.
Premièrement l'outil le plus important est l'outil chemin même s'il n'est pas obligatoire de l'utiliser pour toutes les icônes, tout dépend de ce que vous voulez faire.
Je ne peux que vous conseiller une chose: touchez à tout, c'est le meilleur moyen d'apprendre à utiliser un tel logiciel qui, je vous averti, ne se prend pas en main si rapidement... Internet est votre ami si vous voulez le maîtriser!
Revenons à nos moutons:

On part donc de rien (à part un calque transparent et je vous conseille de zoomer avec l'outil zoom (loupe)) et on trace notre "chemin" avec l'outil chemin. Pour ce faire il faut cliquer pour placer des points qui se relient tout seul, on peut aussi jouer sur les courbes en faisant glisser la souris etc. (touchez à tout pour commencer!)
Voyez vous même:

Voici la forme que l'on va dessiner.
Une fois ceci fait, jetez un coup d'oeil à droite de l'écran:

Cliquez sur chemins (flèche rouge) pour voir ceci:

Vous avez là votre chemin (cadre) et si vous cliquez là où il y a la flèche vous verrez un oeil qui signifie que votre chemin est visible sur le plan de travail (vous vous en rendrez compte en selectionnant un autre outil).
Maintenant, à gauche de l'écran, cliquez sur le noir pour choisir une couleur pour votre néon et sur le blanc pour choisir un blanc moins blanc (^^) parce que sinon ça beug avec PNG for PTF (par exemple #fdfdfd):

Ceci étant fait cliquez, dans la fenêtre des chemins, sur: (peint le long du chemin)
Vous verrez un fenêtre, remplissez-la comme suit (4px):

Cliquez sur Tracer.
Vous obtenez ceci:

Allez dans vos calques et dupliquez le seul calque présent:


Cliquez sur le calque d'en dessous (donc derrière l'autre) et allez dans Filtres > Flou > Flou gaussien et remplissez avec 10px:

Pour obtenir:

Ce qui donne un effet de brillance.
Petite astuce pour ajouter du "vivant" au thème, pour les sous catégories, enregistrez le calque de brillance à part (puisque c'est possibles pour ces icônes là).
Cliquez maintenant sur le calque du dessus et allez dans l'onglet chemins.
Décochez le chemin (enlevez l'oeil) si vous voulez voir le vrai résultat (sans le chemin donc).
Maintenant inversez les couleurs en cliquant sur la double flèche:

Faites à nouveau peindre le long d'un chemin (en blanc) avec 2px.
Enregistre en PNG puis utilisez PNG for PTF pour le réduire à 8 bits (sinon theme converter ne prendra pas le fichier!)
EDIT: IMPORTANT il faut à tout prix que l'opacité de chaque calque soit inférieure à 100% sinon le rendu ne sera pas correct après conversion: 99% fait l'affaire. Pour modifier l'opacité voir en fin de tuto.
Et vous avez votre icône (résultat final en zoom 2x avec un fond noir):

Voilà pour cette partie!

III- Les icônes AVATAR

Créez un nouveau fichier comme tout à l'heure:

Sélectionnez tout, pour cela soit Ctrl+A soit Sélection > Tout.
Vous devriez voir des pointillés bouger sur le bord du plan de travail.
Maintenant faîtes Sélection > Rectangle arrondi et remplissez 30%:

Enfin faîtes Sélection > Réduire et remplissez 2px:

Résultat:

On a là une sélection et on veut faire comme pour les icônes néon donc il faut transformer cette sélection en chemin et pour ça rien de plus simple: allez dans l'onglet chemins et cliquez sur sélection vers chemin:

Maintenant cliquez à gauche de votre nouveau chemin (qui s'appelle sélection...^^) pour qu'il soit visible:

Nous allons pouvoir peindre le long de ce chemin (2px) mais attention: il faut d'abord tout sélectionner (ctrl+A) sinon la couleur n'apparaîtra que dans la sélection actuelle. Faîtes aussi attention à ne pas peindre avec un blanc parfait sinon ça ne passera pas avec PNG for PTF... Donc voici le résultat:

Le cadre est fait. Pour le fond bleu il faut faire un autre calque (pas obligatoire mais si vous compter faire plusieurs icônes ça vous évitera de tout le temps recommencer):

Cliquez bien sur ce nouveau calque pour l'activer.
Pour remplir en bleu il faut d'abord récupérer l'ancienne sélection pour cela retournez dans l'onglet chemins, sélectionnez le chemin et faîtes chemin vers sélection:

Ensuite un petit coup de Sélection > Réduire (2px) et il ne reste plus qu'à remplir avec du bleu par exemple:

Je préfère une opacité moins importante pour ce fond bleu (50%):

Résultat avec un fond noir et un zoom de 100%:

Maintenant il ne vous reste plus qu'à faire (sur un nouveau calque (conseillé)) votre dessin de l'icône mais ça vous savez le faire sans moi!

Voilà qui conclue ce petit tuto et j'espère voir de belles icônes sur les prochains thèmes officiels!
A vous de jouer!

Yep ,

Rien que pour moi ? Merci , très utile et bien présenté

A plus .

EDIT : J'ai un problème Voici un screen :



Comme je fais pour relier les cotés gauche du rectangle ? Car sa ne veut pas ...

Merci .

En effet lorsque tu cliques sur le premier point en voulant les rejoindre le logiciel comprend que tu veux modifier le premier point. Donc pour y rémédier: tu cliques sur le dernier point et ensuite tu clique n'importe où, enfin tu déplace ce nouveau dernier point pour le faire coïncider avec le premier, tu me suis?

euh c'est quoi comme logiciel ?
mais normalement tu dois clique sur le 1er point que tu as fais après si sa va pas je peut pas t'aider :/

sinon sympa comme tuto ^^

EDIT: Guigeek est plus rapide x)

C'est le même logiciel que Guigeek .

Guigeek : je vaais essay , je te tiens au courant .

sebastien_59 Wrote:euh c'est quoi comme logiciel ?
mais normalement tu dois clique sur le 1er point que tu as fais après si sa va pas je peut pas t'aider :/

sinon sympa comme tuto ^^

EDIT: Guigeek est plus rapide x)

c est the gimp

Super tuto sa va drolement m'aidé

MERCi pour ce tuto ^^

Joli ton TUTO ! Ça rend original les themes. Rien que de voir la structure de ton TUTO, ca me donne envie de l'essayer !