Faire une icône « Dossier » avec photoshop

Difficulté :moyenne

Nous allons apprendre a créer une icône dossier en pseudo 3D,qui dit 3D signifies bien connaître le principe des lignes de fuite,étant conscient que tout le monde n'est pas très a l'aise avec ce principe,un patron est donc inclus.
Comme vous pouvez le voir ce patron est composé de partie de différentes couleurs afin de bien différencier les dites parties.

Ce tutorial seras composer de 2 parties :
-La première seras réservé a la construction des différentes parties de l'icône
-La deuxième a la mise en forme (couleur,reflet,ombres)

A-Construction des différentes parties de l'icône :

1-Créez un nouveau calque nommé « partie1 temp »
2-Cliquez sur l'outils « lasso polygonal » et tracez une sélection en débordant un peu de la partie verte (zoomez si nécessaire) comme sur l'image ci dessous:

3-Remplissez cette sélection de jaune (par exemple)
4- Créez un nouveau calque nommé « partie2 temp »
5- Cliquez sur l'outils « lasso polygonal » et tracez une sélection en débordant un peu de la partie rose (zoomez si nécessaire) comme sur l'image ci dessous:

6- Remplissez cette sélection avec un bleu ciel (par exemple)
7- Créez un nouveau calque nommé « partie3 temp »
8-Cliquez sur le petit 'il des calques « partie1 temp » et « partie2 temp » pour les rendre invisible
9- Cliquez sur l'outils « lasso polygonal » et tracez une sélection de la partie bleue (zoomez si nécessaire) comme sur l'image ci dessous:

10- Remplissez cette sélection avec un mauve (par exemple)
11- Nous allons maintenant créer la dernière partie,créez un nouveau calque nommé « partie4 temp»
12-Cliquez sur l'outils « lasso polygonal » et tracez une sélection de la partie rouge (zoomez si nécessaire) comme sur l'image ci dessous:

13- Remplissez cette sélection avec du noir (par exemple)
14-rendez a nouveau visible les calques « partie1 temp » et « partie2 temp »
Voilà nous en avons finis avec la première partie de ce tutorial si vous avez bien réalisé chaques étapes vous devriez obtenir ceci :

B-Mise en forme (couleur,reflet,ombres)

Comme vous avez pu le remarquer l'icône a des angle vif,ce qui n'est pas très jolis,nous allons donc les arrondir
15-Faites un  « CTRL+click » sur le calque « partie1 temp » pour en faire une sélection
16-Dans la palette des calques vous remarquerez trois onglets nommés : « Calque »,  « Historique » et « Canaux »,cliquez sur l'onglet « Canaux »
17-Tout en bas de la palette vous verrez quatre petits icônes,cliquez sur celui représentant un rectangle gris avec un cercle blanc a l'intérieur (  sauvegarder une sélection comme cannal),ce qui auras pour effet de créer un nouveau canal alpha1 ,cliquez sur ce nouveau canal et faites « CTRL+D »
18-Dans le menu cliquez sur « Filtre/flou/flou gaussien » et entrez « 4,1 » comme valeur
19-Dans le menu cliquez sur « Image/ajustement/niveaux » et entrez : 95-1,00-120 comme valeur pour les niveaux d'entrée,vous devriez obtenir ceci :

20-Cliquez sur l'onglet calque,puis sur le calque « partie1 temp »
21-Créez un nouveau calque nommé « Partie1 » puis double-cliquez sur la couleur du premier plan et entrez « R :59,G :129,B : 202 » comme valeur et remplissez la sélection
22-Rendez invisible le calque « partie1 temp »
23-Cliquez sur le calque « partie 2 temp » et créez un nouveau calque nommé « partie 2 »
24-Faites « CTRL+click » sur le calque « partie 2 temp » et répétez les étapes 16 a 19
25-Cliquez sur l'onglet calque,puis sur le calque « partie 2 »
26-Cliquez sur la couleur du premier plan et entrez « R :71,G :155,B :243 »,cliquez maintenant sur la couleur du deuxième plan et entrez « R :59,G :129,B :202 »
27-Cliquez sur l'outils dégradé et tracez le comme ci-dessous :

28-Rendez invisible le calque « partie2 temp »
29-Cliquez sur le calque « partie 3 temp » et créez un nouveau calque nommé « partie 3 »
30-Faites « CTRL+click » sur le calque « partie 3 temp » et répétez les étapes 16 a 19
31-Cliquez sur l'onglet calque,puis sur le calque « partie 3 »
32-Cliquez sur l'outils dégradé et tracez le comme ci-dessous :

33-Rendez invisible le calque « partie 3 temp »
Si vous avez bien suivis les différentes étapes vous devriez obtenir ceci :

Comme vous pouvez le remarquer il y'a quelques problèmes de raccords :

34-Cliquez sur le calque « Partie1 » et dans le menu cliquez sur « Editer/transformer/distordre »
Attention étapes délicates
35-Un rectangle avec 8 points apparaît autour de la forme,cliquez sur le point supérieur droit et déplacez le légèrement vers le haut pour rétablir le raccord (zoomez pour vous aider)comme sur l'image ci dessous :

36-faites de même avec le point supérieur gauche comme sur l'image ci dessous :

37-Cliquez sur le calque « partie 3 » et créez un nouveau calque nommé « Partie sombre »
38-Cliquez sur l'outils « lasso polygonal » et tracez une sélection comme ci-dessous :

38-Cliquez sur la couleur du premier plan et entrez : « R :43,G :95,B :149 »,remplissez la sélection et faite « CTRL+D »
39-Dans le menu cliquez sur « Filtre/flou/flou gaussien » et entrez « 2,5 » comme valeur
40-Faites « CTRL+click » sur le calque « Partie 1 » puis cliquez dans le menu sur « Sélection/inverser » et appuyez sur « Suppr »

41-Reduisez l'opacité du calque « Partie sombre » a 71%
Vous devriez obtenir ceci :

Nous allons maintenant créer les différents reflets
41-Cliquez sur le calque « Partie sombre » et créez un nouveau calque nommé « Reflet 1 »
42- Cliquez sur l'outils « lasso polygonal » et tracez une sélection comme ci-dessous :

43- Cliquez sur la couleur du premier plan et choisissez du blanc,remplissez la sélection et faites « CTRL+D »
44-Dans le menu cliquez sur « Filtre/flou/flou gaussien » et entrez « 2,5 » comme valeur
45- Cliquez sur l'outils « lasso polygonal » et tracez une sélection comme ci-dessous :

46-Faites « SHIFT+CTRL+i » pour inverser la sélection et appuyez sur « Suppr »
47- Réduisez l'opacité du calque « reflet 1 » a 62%
48- Créez un nouveau calque nommé « Reflet 2 »,puis faites « CTRL+click » sur le calque « Partie 3 »
49-Dans le menu cliquez sur « Sélection/modifier/contracter » et entrez « 2 » comme valeur
50- Cliquez sur l'outils dégradé et tracez le comme ci-dessous (assurez vous que la couleur du premier plan soit « blanc » et que le type de dégradé soit « couleur de premier plan vers transparent ») :

51- Cliquez sur l'outils « lasso polygonal » et tracez une sélection comme ci-dessous et appuyer sur « Suppr »:

52-Réduisez l'opacité du calque « Reflet 2 » a 76%
53-Cliquez sur l'outils « Sélection elliptique » et tracez une sélection comme ci dessous :

54-Dans le menu cliquez sur « Sélection/transformer la sélection » puis faites une légère rotation et placez la sélection comme sur l'image ci-dessous :

55-Appuyez sur « Suppr » puis faîtes « CTRL+D »
56-Cliquez sur le calque « Partie 2 »,Faites « CTRL+Click » sur ce même calque et créez un nouveau calque nommé « Reflet 3 »
57-Dans le menu cliquez sur « Sélection/modifier/contracter » et entrez « 2 » comme valeur
58- Cliquez sur l'outils dégradé et tracez le comme ci-dessous :

59- Réduisez l'opacité du calque « Reflet 3 » a 58%
60- Cliquez sur le calque « Partie 4 »,Faites « CTRL+Click » sur ce même calque et créez un nouveau calque nommé « Reflet 4 »
61-Remplissez la sélection de blanc puis « CTRL+D » et enfin déplacez légèrement la forme vers le bas comme ci dessous :

62- Réduisez l'opacité du calque « Reflet 4 » a 55%
Voilà ç'est pratiquement finis il nous restes plus qu'a créer l'ombre
64-Créez un nouveau calque sous le calque « Partie 1 » et nommez le « Ombre »
65-Cliquez sur l'outils « lasso polygonal » et tracez une sélection comme ci-dessous :
 
66-Remplissez la de noir,faites « CTRL+D » et dans le menu cliquez sur « Filtre/flou/flou gaussien » puis entrez 3,2 comme valeur
67- Réduisez l'opacité du calque « Ombre » a 65%
Ouf !C'est terminé si vous avez bien respecté chaque étapes vous devriez obtenir ceci :

Un tuto de plus, un ...

Je vais bien m'amuser ce soir  ...

Tres bon tuto!
Tres bien expliqué et illustré , encore merci monsieur overlord je vais m'aventurer sous photoshop et m'y essayer !

Je viens de finir ton tuto; et je le trouve super. Donc bravo et merci

Merci messieurs

C'était mérité

Superbe tuto bravo  

Trop bien ce tuto..Après on peut improviser dessus pour fare des autres choses..

j'ai photoshop 7.0.1 et il n'y a pas "canaux" , il n'y a que : calque, couche et tracés

que dois-je faire

merci

Normalement yannthebigboss ç'est l'onglet couche,lorsque tu cliques sur cette onglet tu dois voir les 3 couches R,G et B

ha oui ! tu as parfaitement raison  

mercdi beaucoup overlord !

ouf ! j'ai fini ! ça donne ça :

laissez vos impréssions

[quote=yannthebigboss,Mar 28 2005, 05:45 PM]
ouf ! j'ai fini ! sa donne sa :
laissez vos impréssions

Bravo c'est très bien réussi

Trés bien yannthebigboss bravo

merci ^^ mais moi j'ai l'impréssiont que enfaite a chaque fois que je le regarde il ma l'air 30x trop épais ^^ ont dirait qu'il a 3 tonnes de papier dedans ^^

Ovderlord propose son tuto et tu comprends qu'il sera différent pour tout le monde

(par exemple, tu viens de faire le dossier des Tux alors qu'Overlord vient de faire le dossier des retours de bug )

le but est d'apprendre à maîtriser Photoshop, pas de savoir créer nickel un seul dossier.

en tout cas, il est très beau!

merci ^^ je crois que je vais y ajouter une petite touche d'ailleur ^^

le tuto comme l'a dit didas est une base,a vous de l'enrichir de votre créativité

et que dites vous de ca  ! le dossier facon....... métal !

made in yannthebigboss  

Très bon tuto, merci Overlord

ça me fait penser que je vais devoir en faire plusieurs moi aussi, à la sortie de mon pack

Trés chouette bravo yannthebigboss

Merci TPDKcasimir,bon courage pour la fin de ton pack et pour les futurs tutorials

Oui le pack il est pas encore fini, c'est long  

bon je vous ferais un tutoriel sur comment réaliser ces dossiers-ci : (icones dossier de mon pack en prépa)

ils ont l'air très beaux je les attent avec appacience