32
Tout savoir sur la création d’icônes avec Photoshop
Voici toutes les astuces qui vous permettront de créer des icônes avec le logiciel Photoshop. Cohérence des formes et des tailles, harmonie des couleurs, symbolique claire etc. Lisez ce tutoriel pour comprendre et créer vous aussi de magnifiques packs d’icônes !
Bien qu’une icône soit à la base totalement basique de par sa fonction d’indication (comme un panneau de signalisation), toutes les productions de ce type sont aujourd’hui « designées » et deviennent de véritables illustrations à par entière. Le cas le plus frappant de cette évolution est sans conteste les icônes utilisées sur l’OS Windows (voir l’image ci-dessous) !
Vous remarquez bien la différence entre le style W95 et le style XP bien plus travaillé, presque en 3d, ces icônes deviennent belles et prennent une nouvelle dimension !
Ce nouveau style à ainsi été développé de plus en plus. C’est grâce à la vague du « Web 2.0 » que ce style s’est vraiment démocratisé sur Internet comme sur tous les softwares. Encore une fois, nous pouvons prendre le cas de Windows en observant les icônes de sa dernière version Vista :
Vous pouvez également observer le design très prononcé du logiciel AntiVirus McAfee qui représente totalement cette nouvelle tendance.
Aujourd’hui les icônes stagnent sur ce style Web2. Si vous observez les icônes du prochain Windows (version Seven) vous ne remarquerez pas de grandes différences ! Aujourd’hui les icônes évoluent non pas vers un nouveau style (illustration) mais vers une nouvelle utilisation (ergonomie), ces nouveautés sont mises en place pour faciliter l’expérience utilisateur.
LES CONSEILS POUR CREER LES ICÔNES
Très simplement il vous suffira de comprendre un concept pour assimiler tous les conseils décrits ci-dessous : le concept de l’unicité. Lorsque vous voyez une icône vous devriez pouvoir donner : sa symbolique avec l’action qui en découle, mais également sa provenance.
Par exemple quand vous voyez cette icône :
Vous pensez à Firefox puis à Internet.
Vous n’êtes pas convaincu ?
Essayez de reconnaitre les icônes ci-dessous :
Et oui encore Firefox et Internet. En observant simplement le style d’une icône vous pouvez reconnaitre un logiciel !
Ce petit jeu permet de mettre en lumière le concept suivant : Chaque icône d’un pack doit avoir une symbolique unique, mais toutes doivent suivre un design commun. Le design est composé : de sa taille, des tonalités de couleurs, des effets de style.
Voici maintenant quelques explications sur le concept de création des icônes.
La taille :
Chaque icône doit avoir la même taille, aussi bien en largeur qu’en hauteur, certaines pourront être plus petites ou plus grandes, elles devront avoir alors la même proportion. Vous pouvez vous aider des repères de Photosop (ou d’Illustrator pour créer des formes identiques).
Les tonalités des couleurs :
Très important, si vous avez commencé vos icônes avec des tons pastels pensez vous qu’il soit très logique d’utiliser un rouge vif pour une icône suppression ? Bien sûr que non, veillez toujours à respecter un panel de couleurs !
Les effets de style :
Les effets tels que les ombres, les reflets, les dégradés devront être listés et utilisés pour chaque nouvelle icône ! Attention à ne pas en oublier.
CREER SA PREMIERE ICÔNE
Voici maintenant un tutoriel pour créer une icône d’interdiction. Vous verrez dans la dernière étape comment mettre en évidence les styles graphiques utilisés.
Tous les fichiers Photoshop sont téléchargeables en bas de cette page. Si vous avez des questions merci d’utiliser le formulaire en bas de page.
Voici le résultat final de cette icône :
ETAPE 1
Je lance le logiciel Photoshop et je crée un nouveau document de 600 px de côtés, sur fond blanc.
Je sélectionne l’outil des formes personnalisées puis je crée le logo du panneau d’interdiction. Sélectionner la forme adéquate dans la fenêtre de configuration de l’outil :
ETAPE 2
Je vais ajouter deux styles de calques à ma forme, je commence par une incrustation de dégradé puis par un contour.
ETAPE 3
Je pixélise le calque de ma forme puis je récupère sa sélection en faisant ctrl + clic sur le calque. Je crée un nouveau calque. Avec un large pinceau diffus je crée une lueur sur la partie basse.
ETAPE 4
Je passe ce calque en mode de fusion incrustation.
ETAPE 5
Je crée un nouveau calque, normalement ma sélection est toujours active. Je la remplis de blanc en utilisant le pot de peinture. Je vérifie que l’outil sélection est actif. Je déplace la sélection de 5 px vers le haut. J’appuie sur la touche Suppr.
ETAPE 6
J’ajoute un masque de fusion et je cache le haut pour ne garder que la partie basse de mon contour. Je diminue l’opacité de ce calque à 50M d’opacité.
ETAPE 7
Je crée un nouveau calque, je récupère la sélection de ma forme. Je remplis grâce au pot de peinture cette sélection.
ETAPE 8
J’ajoute un masque de fusion pour cacher la partie basse de la forme blanche.
ETAPE 9
Je répète les étapes 7 et 8, seulement, avant d’ajouter le masque de fusion je décale de 10px vers le bas la sélection et j’appuie sur Suppr pour créer le contour.
ETAPE 10
Je crée un nouveau calque, puis avec l’ellipse de sélection je crée un ovale noir très aplati. J’applique ensuite un filtre, menu filtre > atténuation > flou gaussien : 5px. Je place ce calque au dessus de l’arrière plan.
Et voici mon icône est déjà terminée. La partie graphique est maintenant terminée.
Voici une image avec les explications concernant les différents styles graphiques utilisés sur cette icône :
CREER UN PACK
Le but maintenant est de pouvoir créer une icône de même type, pour cela veuillez suivre les conseils ci-dessous.
ETAPE 1
J’ajoute des repères qui me permettent de créer une seconde icône de la même taille.
ETAPE 2
Je crée une ellipse qui va me servir de forme de base pour ma seconde icône.
ETAPE 3
J’ajoute les styles de calques, je fais attention à utiliser la même configuration en modifiant simplement les couleurs.
ETAPE 4
Je fais un copier coller des reflets utilisés dans l’icône précédente.
ETAPE 5
Avec l’aide des repères je crée une zone centrale qui servira à accueillir les symboles. Le but étant de ne jamais dépasser la limite !
ETAPE 6
Je crée mon symbole, ici une flèche tournée vers la droite, qui invite l’utilisateur à cliquer pour se rendre sur une page suivante par exemple.
ETAPE 7
Comme précédemment j’ajoute les contours autour de ma forme !
ETAPE 8
Et c’est terminé.
Voici ma nouvelle icône, vous pouvez vérifier que toutes les spécificités graphiques sont à nouveau respectées.
En haut à droite vous avez une visualisation des icônes créées en taille « small ».
Si vous avez bien compris cet article, il sera facile pour vous de créer une suite d’icônes et de décliner ce style en un pack complet. Si vous y parvenez j’espère que vous posterez vos créations dans la galerie ci-dessous !
Merci à tous d’avoir lu ce nouveau tutoriel sur Wks.fr !
Téléchargement des fichiers sources liés à ce tutorial
Veuillez vous connecter pour télécharger les fichiers sources
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 25 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
16 juin 2009 12:10, par Clems
PREMS
Comme d’habitude vraiment très réussis ! Mais cette fois très complet et explications intéressantes, merci Wonka !
Répondre -
16 juin 2009 15:32, par Yama
C’est quoi cette manie de kikoo a vouloir toujours etre premier sur les commentaires -_-
Concernant le tuto, encore un très bon tuto et très utile en perspective
Répondre
-
16 juin 2009 15:53, par Boon
Impressionnant !!! les 2 icônes sont très belles, mais la technique ... enfin le mode d’organisation est encore mieux !
Merci je vais pouvoir faire mes icônes XD
Boon’
Répondre -
17 juin 2009 15:08, par SpaceR
slt
Répondre Je galère pour l’étape 2... (et oui ^^) c’est parce que moi j’arrive pas à avoir le même résultat que toi, il faudrait que tu donnes les réglages à effectuer pour les style de calque stp Wonka merci.-
18 juin 2009 10:55, par Wonka
J’avais prévus de les ajouter et puis j’ai oublié, tu fais donc bien de me le rappeler, je le fais dans la journée
Répondre
-
-
17 juin 2009 16:03, par Gouli
Merci pour le tuto, cependant il manque certaines infos importantes pour les débutants !
Répondre-
18 juin 2009 10:55, par Wonka
Quels genre d’information voudrais tu en plus pour comprendre mieux le tutorial ? J’essayerais de les ajouter au plus vite !
Répondre
-
-
17 juin 2009 21:50, par ouf
Genial, vraiment magnifique tuto ultra complet vraiment bravo !!!
Répondre -
18 juin 2009 18:28, par SpaceR
Wonka tu peux détailler au maximum toute les étapes stp ça serait plus simple pour les débutants comme moi
Répondre -
20 juin 2009 23:09, par Pouap
Je bloque à la première étape
Répondre
La forme que j’ai n’a aucun remplissage et lorsque je mets un dégradé au calque rien ne se passe. -
22 juin 2009 23:58, par Hitoshi58
Merci pour ce tutoriel mais sa serais vraiment super si tu pouvais détailler à partir de la parti 6 quand tu ajoute des masque de fusion car je n’y arrive pas pour le tuto du premier icone car j’ai pas encore essayer le deuxième.
Répondre -
2 juillet 2009 09:56, par TheFlyer
Salut ! Je voudrais te dire que je trouve la première forme, le symbole d’interdiction aliasé sur certaines parties du relief, par contre, c’est un excellent tuto, bien expliqué et détaillé, c’est génial !
Répondre-
2 juillet 2009 10:39, par Wonka
Je comprends pas bien, peux tu me donner plus de détail sur ce que tu trouves d’imparfait sur l’icone !
Répondre-
7 juillet 2009 13:11, par TheFlyer
Sur la première image du tutorial, il y a de l’aliasing sur des parties du relief
Répondre -
-
7 juillet 2009 13:47, par Wonka
Oui je viens de voir ! Bon c’est pas méchant, et c’est surtout dus à la taille de l’image, plus l’image sera réduite moins il sera visible
Répondre
-
-
-
-
19 août 2009 20:15, par Votre pseudonyme
je n’arrive pas a selectionner l’outil des formes personnalisées
Répondre -
2 octobre 2009 11:06, par myosotis
Bonjour, Merci pour ces tuto qui m’ont appris plein de choses. Juste une petite question : comment « copier coller des reflets utilisés dans l’icône précédente » ? Bonne journée.
Répondre-
2 octobre 2009 11:37, par Wonka
Il suffit de dupliquer les calques correspondant au reflet puis de les déplacer sur ton image
Répondre
-
-
27 novembre 2009 17:42, par Debutant designer
Bonjour ! On pourrait m’indiquer ou est l’outil des formes personnalisé merci !
(J’ai Adobe Photoshop Cs3
Répondre )-
27 novembre 2009 18:02, par Wonka
Tout simplement dans la barre d’outil, il se cache derrière l’outil rectangle, clique droit avec la souris pour découvrir l’outil rectangle arrondie, ellipse, et formes personnalisées
Répondre bonne chance !-
28 avril 2010 12:30, par gillou
Bonjour, je viens d’installer photoshop cs4 chez moi et je ne trouve pas les formes personnalisées
(à l’origine, j’utilisais GIMP, je suis un peu perdu sous photoshop)Et sinon, j’ai cherché, je n’ai pas trouvé de tutoriel pour faire ses propres formes personnalisées. En fait, je fais des themes pour iphone et j’aimerais créer toutes les formes personnalisées que je voudrais et ensuite les transformer en icone comme dans ce tutoriel.
exemple de forme personnalisées : http://imgs.imagup.com/member3/1226609087_screen.PNG
Merci !
Voir en ligne : Mon site de photos de voyage
Répondre
-
-
-
19 janvier 2011 17:55, par Votre pseudonyme
Bonjour. Ce tutoriel est très bien. Merci à la personne qui l’a conçu. Je voudrai savoir sous quel format enregistrer les icônes et où les ranger pour qu’ils soient utilisables. Merci.
Répondre
