+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Art, graphisme, audio (https://jeuweb.org/forumdisplay.php?fid=50)
+--- Sujet : Icones (/showthread.php?tid=842)
Icones - Psykose - 02-04-2008
Salut à tous,
Aujourd'hui je vais vous apprendre à créer des icônes de ce type :
![[Image: rouge.png]](http://psykose.olympe-network.com/tuto_icones/rouge.png)
![[Image: vert.png]](http://psykose.olympe-network.com/tuto_icones/vert.png)
LOGICIEL : Photoshop (version 7.0 ou sup.) Gimp(toutes versions)
CONNAISSANCES REQUISE : Les bases de votre logiciel
TEMPS REQUIS : - de 5 minutes.
1 - Création :
![[Image: rougeagrandi.png]](http://psykose.olympe-network.com/tuto_icones/rougeagrandi.png)
Voici une image qui illustre parfaitement la situation.
Cette icones est composée de deux "couronnes" : une sombre et une claire, et d'un coeur avec un symbole.
La base est donc un cercle rempli (ici vert), créer donc un nouveau calque que vous appellerez base et ensuite à l'aide de l'outil selection elliptique tracez un cercle et remplissez le avec le pot de peinture (ne défaites pas la selection). :
![[Image: step1.png]](http://psykose.olympe-network.com/tuto_icones/step1.png)
Créez ensuite un nouveau calque que vous appellerez "Couronne_Sombre" et avec la même selection que pour base faites un cercle noir. Ensuite retirez un pixel a votre selection (GIMP : Selection->Reduire, PHOTOSHOP : Selection->Contracter) et effacer le contenu dans la sélection. Passez ensuite ce calque en mode superposer pour Gimp ou lumière tamisée pour photoshop :
![[Image: step2.png]](http://psykose.olympe-network.com/tuto_icones/step2.png)
Créez un nouveau calque "Dégradé". Recupérez maintenant la sélection de "Base" (PHOTOSHOP : Ctrl+Click sur l'aperçu du calque, GIMP : click doit sur le calque->alpha vers sélection) et réduisez la de 1 pixel (voir pt précédent). Dans cette nouvelle selection faites un dégradé 'Blanc vers Transparent' puis duppliquez ce calque et réduisez la sélection a nouveau. Enfin supprimer le contenu de la selection (sur le calque copié) et nommez ce calque "CouronneClaire".
Mettez ces calques en mode superposer pour Gimp ou lumière tamisée pour photoshop :
![[Image: step3.png]](http://psykose.olympe-network.com/tuto_icones/step3.png)
--> ![[Image: step4.png]](http://psykose.olympe-network.com/tuto_icones/step4.png)
Créez un nouveau calque "Symbole" et, avec un crayon de 1 pixel blanc, faite le symbole voulu de votre icône (votre trait dois faire 2 pixels de large, ce sera nécessaires pour la step suivante).
![[Image: step5.png]](http://psykose.olympe-network.com/tuto_icones/step5.png)
Et pour terminer passez avec un crayon de 1 px gris clair (genre #CACACA [Mode Bouley]Haha ça fait Caca[/Mode Bouley]) sur le trait inférieur de votre forme sur un nouveau calque que vous appelerez ombre.
![[Image: step6.png]](http://psykose.olympe-network.com/tuto_icones/step6.png)
2 - Enregistrage :
(je sais on dit Enregistration ou enregistrement mais c'est sympa Enregistrage
)Il y a 2 manières d'enregistrer cette image : Qualité ou compatibilité.
Nous verrons les deux ^^
Pour la qualité, le mieux est de laisser un arrière plan transparent et de le sauver en .png (c'est le format d'image avec la meilleure qualitée et le meilleur support de transparence après le .tiff bien entendu). Seulement les utilisateurs d'IE (antérieur à la V7.0) ne verront pas bien cette image étant donné que ce navigateur ne supporte pas la transparence).
Pour la compatibilité il existe encore 2 méthodes :
1 - Vous savez quelle sera la couleur d'arrière plan du site pour lequelle l'icône est designée, dans ce cas mettez un calque d'AP de cette couleur sur votre image et que vous pourrez en .png sans problèmes de compatibilité.
2 - Vous ne savez pas la couleur d'AP ou vous avez un site comprenant plusieurs thèmes. Alors effacez l'arrière plan aux endroits ou la couleur ne le recouvre pas puis (ici notre arrière plan est blanc, effacez donc tout ce qui blanc) puis sauvez en .gif, cela aura un impact sur la qualité mais au moins votre icone sera accessible pour tout les sites.
Voila tout,
Bon Icônage
RE: Icones - Lanwin - 02-04-2008
J'en profite pour préciser que Photoshop permet, à l'enregistrement d'un .gif, de définir un "cache".
En effet, le format PNG a pour principal avantage de supporter le dégradé des transparence. A l'inverse du gif pour qui c'est "tout (visible complètement) ou rien (complètement invisible)".
Le cache a pour fonctionnalité de "garder" ce dégradé de transparence. En pratique, il suffit de choisir une couleur proche de la couleur générale de votre arrière-plan, et votre image s'en trouvera grandement améliorée, tout en gardant une certaine transparence...
Voilà un petit résumé "pratique" de la fonctionnalité de Photoshop (il se peut qu'une fonctionnalité semblable existe sous Gimp, je ne pourrai vous dire).
Voilà l'image de base :
![[Image: 1.jpg]](http://ww2db.free.fr/jeuphp/1.jpg)
L'idée est de rendre le blanc transparent.
En .png, pas de soucis (pour peu qu'on ait un navigateur "normal" ^^)
![[Image: 2.png]](http://ww2db.free.fr/jeuphp/2.png)
En .gif normal, aïe aïe, c'est la catastrophe!
![[Image: 3.gif]](http://ww2db.free.fr/jeuphp/3.gif)
Heureusement, la fonctionnalité "cache" de PS permet de palier à ce système. Il suffit de mettre la couleur souhaitée en couleur de premier ou d'arrière-plan. Puis d'activer le cache comme suit :
![[Image: 5.jpg]](http://ww2db.free.fr/jeuphp/5.jpg)
Et voilà le résultat (si si, je vous jure, c'est un gif!)
![[Image: 4.gif]](http://ww2db.free.fr/jeuphp/4.gif)
L'avantage : cela permet d'avoir des simulations de dégradés de transparence (simulations car vous l'avez compris, ces dégradés ne sont pas transparents... C'est juste que photoshop ajoute la couleur du cache en arrière-plan des pixels dont l'opacité n'est pas à 100%).
Cet avantage se transforme en inconvénient dès que l'image est amenée à être diffusée sur des arrière-plans de couleur très différentes.
Dans notre cas, cette fonctionnalité était utilisée à son maximum : une ombre distante de l'objet. Le cache peut aussi être utilisé sur les boutons ou icônes (d'où mon intrusion dans le sujet ^^), ce qui aura pour "simple" effet d'éviter l'effet "pixels du contour visibles", ou même cet effet désagréable d'aliasing. Dans ce cas-là, le cache pourra même être utilisé pour des images mises sur un arrière-plan en motif répété, tant que celui-çi restera dans la même ambiance de couleur. La couleur de cache devra alors être une couleur "médiane" entre toutes les couleurs de l'arrière-plan...
Amicalement,
RE: Icones - Psykose - 02-04-2008
A merci, je connaissais pas cette fonctionnalité ^^
RE: Icones - Lanwin - 02-04-2008
Voilà, compléments d'informations sur le cache rajoutés
Amicalement,
RE: Icones - keke - 03-04-2008
Sympa comme tutoriel ^^
Je rajoute un lien de mon jeu vers ici.
Kéké.
RE: Icones - Asther - 17-08-2008
juste un truc pour la transparence sous le misérable IE
c'est de faire 2 fichiers css un pour IE avec les images en gif et l'autre pour mozilla avec les images en png et mettre entre <head> et </head>
Code PHP :
<?php
<link rel="stylesheet" href="Mozilla.css" type="text/css" />
<!--[if lt IE 7.]>
<link rel="stylesheet" href="IE.css" type="text/css" />
<![endif]-->
et ca resoud le probleme :/
(vous pouvez aussi inclure une insulte dans le css pour IE)
RE: Icones - Eluox - 17-08-2008
C'est beaucoup de css pour pas grand chose.
Un .gif pour mozilla et IE c'est suffisant
RE: Icones - Asther - 17-08-2008
bah, ca depend si tu es illustrateur comme moi tu préféreras bosser sous photoshop et avoir de beaux effet de transparence que gif ne fait pas, pour avoir un joli jeu tout beau ^^ et puis copier/coller ca va vite.
RE: Icones - Asther - 17-08-2008
j l'avais dejas essayé et je ne sait plus pourquoi, mais je ne l avais pas trouvé convaincant.
RE: Icones - Asther - 17-08-2008
j essairais demain pour voir ^^