Forums GAMERGEN

[TUTO] Quelques astuces pour réaliser des icônes originales!

Règles du forum
Avant de poser votre question, commencez par faire une recherche sur le forum.
Nous mettons également à votre disposition un lexique et une FAQ.
Pour éviter toute censure ou fermeture de votre topic, veuillez lire les règles en vigueur.

CXMB pour tout custom firmware : téléchargez CXMB.

[TUTO] Quelques astuces pour réaliser des icônes originales!

Message non lupar GuiGeeK64 » 07 Mai 2010, 16:01

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! :D ).

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:
Image
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 Image 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:
Image
Voici la forme que l'on va dessiner.
Une fois ceci fait, jetez un coup d'oeil à droite de l'écran:
Image
Cliquez sur chemins (flèche rouge) pour voir ceci:
Image
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):
Image
Ceci étant fait cliquez, dans la fenêtre des chemins, sur: Image (peint le long du chemin)
Vous verrez un fenêtre, remplissez-la comme suit (4px):
Image
Cliquez sur Tracer.
Vous obtenez ceci:
Image
Allez dans vos calques et dupliquez le seul calque présent:
Image
Image
Cliquez sur le calque d'en dessous (donc derrière l'autre) et allez dans Filtres > Flou > Flou gaussien et remplissez avec 10px:
Image
Pour obtenir:
Image
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:
Image
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):
Image
Voilà pour cette partie!

III- Les icônes AVATAR

Créez un nouveau fichier comme tout à l'heure:
Image
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%:
Image
Enfin faîtes Sélection > Réduire et remplissez 2px:
Image
Résultat:
Image
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:
Image
Maintenant cliquez à gauche de votre nouveau chemin (qui s'appelle sélection...^^) pour qu'il soit visible:
Image
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:
Image
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):
Image
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:
Image
Ensuite un petit coup de Sélection > Réduire (2px) et il ne reste plus qu'à remplir avec du bleu par exemple:
Image
Je préfère une opacité moins importante pour ce fond bleu (50%):
Image
Résultat avec un fond noir et un zoom de 100%:
Image
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!
Dernière édition par d0riian le 07 Mai 2010, 20:10, édité 1 fois.
Visitez mon dev-blog --> http://guigeek-dev.blogspot.com ;)
Avatar de l’utilisateur GuiGeeK64 Gamer du Dimanche
Gamer du Dimanche
Messages: 34
Inscription: 13 Juin 2009, 21:51
Localisation: France Pyrénées Atlantiques 64

Re: [TUTO] Quelques astuces pour réaliser des icônes originales!

Message non lupar final_cloud » 07 Mai 2010, 18:20

Yep ,

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

A plus .

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

Image

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

Merci .
final_cloud Gamer Bronze
Gamer Bronze
Messages: 1298
Inscription: 26 Mai 2010, 21:29
Pays: France

Re: [TUTO] Quelques astuces pour réaliser des icônes originales!

Message non lupar GuiGeeK64 » 07 Mai 2010, 20:08

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?
Visitez mon dev-blog --> http://guigeek-dev.blogspot.com ;)
Avatar de l’utilisateur GuiGeeK64 Gamer du Dimanche
Gamer du Dimanche
Messages: 34
Inscription: 13 Juin 2009, 21:51
Localisation: France Pyrénées Atlantiques 64

Re: [TUTO] Quelques astuces pour réaliser des icônes originales!

Message non lupar sebastien_59 » 07 Mai 2010, 20:09

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)
sebastien_59 Gamer Bronze
Gamer Bronze
Messages: 1876
Inscription: 26 Juil 2008, 11:09
Pays: France

Re: [TUTO] Quelques astuces pour réaliser des icônes originales!

Message non lupar final_cloud » 07 Mai 2010, 20:19

C'est le même logiciel que Guigeek .

Guigeek : je vaais essay , je te tiens au courant .
final_cloud Gamer Bronze
Gamer Bronze
Messages: 1298
Inscription: 26 Mai 2010, 21:29
Pays: France

Re: [TUTO] Quelques astuces pour réaliser des icônes originales!

Message non lupar ti-pi » 01 Juin 2010, 12:47

sebastien_59 a écrit: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 :wink:
ti-pi Gamer Hardcore
Gamer Hardcore
Messages: 941
Inscription: 25 Juin 2010, 02:57
Pays: France

Re: [TUTO] Quelques astuces pour réaliser des icônes originale

Message non lupar The_Paradize » 20 Aoû 2010, 08:22

Super tuto sa va drolement m'aidé
Cordialement, The_Paradize :D(PSPGen, DSGen)

[+__o]DS lite + R4i+ kernel 1.09c
(/__\)PSP 1004 CFW 5.00 M33 7
(/__\)PSP 1004 CFW 5.50 GEN D2
The_Paradize Gamer Pro
Gamer Pro
Messages: 206
Inscription: 09 Aoû 2010, 09:52
Localisation: Dans le lit de tes parents...
Pays: France

Re: [TUTO] Quelques astuces pour réaliser des icônes originales!

Message non lupar MCnour » 30 Jan 2011, 13:36

MERCi pour ce tuto ^^
MCnour Gamer Pro
Gamer Pro
Messages: 147
Inscription: 25 Mar 2012, 19:52
Pays: France
Sexe: Homme

Re: [TUTO] Quelques astuces pour réaliser des icônes originales!

Message non lupar Elies951 » 19 Mar 2011, 10:57

Joli ton TUTO ! Ça rend original les themes. Rien que de voir la structure de ton TUTO, ca me donne envie de l'essayer !
Elies951 Gamer Pro
Gamer Pro
Messages: 237
Inscription: 18 Déc 2010, 21:49
Pays: France


 

Retourner vers Regroupement des thèmes, gameboots, coldboots et wallpapers