[Tuto] Créer une icône 3D

IlluzMax · Schtroumpf Admin Messages: 1689

Salut à tous !

Suite à la demande de certains membres, voici ma technique de création de logos en 3D.
Le tutorial est un peu difficile à prendre en main, mais avec de l'entrainement on peut arriver à de belles choses

Difficultée : 7/10

Les formes du logo

J'ai choisi pour cet exemple de mettre en 3D le logo d'M6 que j'ai réalisé ici ----> Formes de base.psd
Le tutoriel ne reposant pas sur l'utilisation de la plume, je vous dispence de ça

Partie 1 : Mise en 3D

1) Allez, c'est parti, on commence

Ouvrez le .psd téléchargé précedement sous Photoshop.
J'ai regroupé 2 calques dans un dossier nommé "Formes de base". Le premier calque concerne le 6 et le second le M du logo d'M6 :

2) Comme le nom de la partie l'indique, on doit réussir à donner un effet de 3D à notre logo.
Pour celà, on va incliner dans un premier temps les 2 calques pour donner un effet de perspective, puis, on dupliquera le tout pour
donner cette fois-ci un effet de profondeur.

On séléctionne donc les 2 calques en cliquant sur le dossier "Formes de base" puis on fait un CTRL + T, qui équivaut à un Edition/Transformation Manuelle :

3) Faites alors un clic droit sur la zone de travail et séléctionnez "Perspective". On va transformer ces formes avec l'outil perspective, pas bête hein

:

4) L'astuce est la suivante : Tout en laissant le bouton ALT enfoncé, pour appliquer la modif de manière symétrique sur l'image, on va faire glisser la poignée d'en haut à droite de 2.5 carreaux par la gauche. Celà va perspectiver les formes :

5) De la même manière dont vous avez séléctionné "Perspective" dans le popup-menu de la zone de travail,
vous allez séléctionner cette fois "Homothétie". En glissant la poignée inférieure du milieu de 2 carreaux, vous allez applatir les formes :

Validez par

.Vous obtiennez normalement ceci :

6) Je ne vois pas grand chose pour le moment me direz vous ! Et bien attendez quelques instants le meilleur est à venir. Par un clic droit sur le dossier "Formes de base", vous allez séléctionner "Dupliquer le groupe". Vous appelerez le nouveau dossier "Profondeur". Vous en profiterez pour renomer le calque "Objet 6 copie" en "Objet 6 profondeur" et le calque "Objet M" en "Objet M profondeur".

Le nouveau dossier étant placé automatiquement au dessus l'ancien, vous déplacerez "Profondeur" dessous "Formes de base" :

7) Allez on a fait le plus dur

Séléctionnez le groupe "Profondeur", et l'outil de déplacement

.
Vous allez devoir déplacer le groupe de 15px vers le bas grâce au flèches directionnelles. 1 Appui = 1 Pixel. Combien d'appuis ?

:

8) A ce stade on commence a aperçevoir l'icone en 3D

. Mais tout n'est pas fini : on doit corriger quelques petits problèmes.
On voit que les bords de l'icone ne sont pas pleins, par exemple au niveau du bas des "pattes" du M :

Pour ce fait on va se placer sur le calque "Objet M profondeur" et on va retoucher, grâce à l'outil lasso polygonal

et le Zoom.

Vous zoomez donc, assez bien pour apercevoir les pixels du M et vous allez commencer par créer un point de départ avec l'outil lasso polygonal au niveau inférieur gauche de la patte droite du M. En gardant la même technique, vous allez créer un quadrilatère pour combler le vide :

Une fois que vous êtes revenus à votre point de départ, le quadrilatère se ferme, et la séléction est crée :

Il ne vous reste plus qu'a créer un nouveau calque "Rajout gauche M", placé au dessus du calque "Objet M profondeur" et de remplir la séléction de la couleur #1a171b : Attention, le M n'est pas totalement noir

. Vous obtiendrez ceci :

9) Par la même methode :
- créez le calque "Rajout droit M" pour combler le vide de la patte droite du M.
- créez le calque "Rajout haut 6" pour combler le vide du haut du 6.
Attention, utilisez la couleur #e2001a et placez vous sur le calque "Objet 6 profondeur"avant de rajouter le rouge du 6 !

Vous obtiendrez alors ceci :

9) On s'aperçoit maintenant que la 3D opère mais que le bas du 6 nous gêne :

Placez vous sur le calque "Objet 6 profondeur" et avec l'outil de sélection polygonal, vous allez créer une forme qui englobe tout ce qui dépasse. Vous finirez par rejoidre le 1er point pour créer la séléction : ( le zoom est conseillé

)

Finissez par appuyer sur SUPPR pour enlever ce qui nous gene

Vous obtiendrez ceci :

10) La dernière étape consiste à fusionner les calques de Rajouts :

Séléctionnez les calques "Rajout droit M", "Rajout gauche M" et "Objet M profondeur" et faites un CTRL + E pour les fusionner. Au besoin renommez le calque fusionné par "Objet M profondeur".

Par la même methode fusionnez les calques "Objet 6 profondeur" et "Rajout haut 6". Au besoin renommez le calque crée par "Objet 6". Votre liste de calque doit ressembler à :

Nous somme enfin prêts pour la crystalisation.

Partie 2 : La Crystalisation des formes

Je tiens personnellement à vous féliciter si vous arrivez déjà jusqu'ici.

C'est vraiment super

On à déjà fait le plus difficile. Il ne nous reste plus qu'a crystaliser

11) Allez on fonce vers la fin

On va double cliquer sur la miniature du calque "Objet 6" pour rentrer dans ses Styles de calques.

On va lui appliquer une lueur interne de couleur #960010 comme suivant :

Plutot que s'embeter à refaire la même procedure pour la calque "Objet 6 profondeur", vous allez faire un clic droit sur la calque "Objet 6" et vous allez séléctionner "Copier le style de calque".

Sur le calque "Objet 6 profondeur" faites un clic droit dessus et choisissez "Coller le style de calque" : le calque prend les mêmes styles de calque :

12) Passons au M. De la même manière, allez appliquer au calque "Objet M" et au calque "Objet M profondeur":

- Une incrustation de couleur :

- Une lueure interne :

Vous obtiendrez ceci :

13) Prêts pour des dégradés en folie ? Placez vous sur le calque "Objet M" et faites un CTRL + CLIC GAUCHE pour récupérer sa sélection :

Créer alors un nouveau calque "Dégradé bas" et effectuez un dégradé blanc vers transparent en partant du bas de la séléction pour arriver vers le milieu du 6 :

Baissez l'opacité de ce calque à 20%.

De la même manière effectuez un dégradé de haut en bas, en partant du haut de la séléction vers le milieu du M. Baisser l'opacité à 70%. N'oubliez pas de vous replacer sur le calque "Objet M" et de recréer un calque "Degradé haut" ! Vous obtiendrez ceci :

13) Recréez les mêmes étapes pour créer les 2 dégradés mais cette fois-ci pour le 6. Vous obtiendrez ceci :

14) Maintenant, placer vous sur le calque "Objet 6" puis faites un CTRL + CLIC sur sa miniature pour récupérer sa séléction. Créez un nouveau calque "Reflet bas coupé" puis un dégradé blanc vers tranparent de moitié a peu près, en partant du bas. Vous séléctionnerez l'outil séléction et vous décallerez votre séléction de 1px vers le haut. Appuyez sur SUPPR et baissez l'opacité à 50 % par la suite. Obtennez vous ceci ? :

Repetez l'opération pour le calque "Objet M" :

15) On viens de finir les reflets bas. On passe aux reflets hauts :
Encore de la même manière, vous allez créer les 2 calques "Reflet haut coupé" sur le 6 et le M : Décallez de 1 et coupez, mais ne baissez l'opacité ces 2 fois ! Pensez a créer à chaques fois un nouveau calque ! :

16) Les reflets supérieurs sont finis !

On passe à la couche inférieure, donc au dossier "Profondeur"

Ayant déjà détaillé les étapes 13 à 15, je vais vous demander de faire pareil pour les couches inférieures : Vous obtenez ceci :

17) Maintenant que les reflets principaux sont terminés, on va pouvoir passer aux reflets secondaires

Placez vous sur le calque "Objet M profondeur" et récupérez sa séléction. Créer un nouveau calque nommé "Reflet secondaire". Vous allez devoir créer 4 dégradés, en mode radial, toujours blanc vers transparent aux endroits précis suivants : (Placez votre 1er point juste un peu au dessous de la zone indiquée )

Baissez l'opacité a 50 %. Vous obtiendrez ceci :

17) On va s'occuper du petit reflet du 6 maintenant, courage

:

De la même manière, vous allez créer un nouveau calque dessus le calque "Objet 6 profondeur", en ayant récupéré sa séléction précédement.
Créer le même type de dégradé que précédent à ces points précis :

Vous obtiendrez ceci :

18) On viens de finir les reflets secondaires. La lumière venant du bas mais aussi du haut, il nous manque un gros reflet vers le haut.

Faites un CTRL + CLIC sur le calque "Objet M" puis un CTRL + MAJ GAUCHE + CLIC sur le calque "Objet 6" pour additionner la séléction du calque Objet 6 au calque Objet M.

Créez un nouveau calque nommé "Gros reflet" au dessus de tous les autres calques dans le dossier "Formes de base".

Faites un dégradé radial blanc vers transparent en partant du haut de la séléction vers le bas absolu :

Gràce à l'outil séléction vous allez créer une forme ronde comme suivant : (N'hesitez pas à dépasser)

Faites pour finir un CTRL + MAJ + I pour inverser la séléction. Appuyez sur SUPPR pour enlever le bas et baissez l'opacité a 10 % :

19) Petit détail : le séparateur du bas. Il manque un séparateur en bas du M :

Créez un nouveau calque "Separateur" au dessus du calque "Objet M profondeur". A l'aide de l'outil "Trait" allez tracer une petite ligne de 1px blanche comme suivant :

Baisser l'opacité à 50 % :

On a presque terminé !

Ombre et finalisation

Une petite ombre, c'est ce qu'il nous reste à faire

20) Refermez le dossier "Formes principales". Récupéréz la séléction du calque "Objet M profondeur" et additionnez a cette séléction celle du calque "Objet 6 profondeur". Créez un calque "Ombre" au dessous des 2 dossiers, completement au dessous.

Vous vous aperçevrez qu'il faut enlever un petit bout de cette séléction :

Pour ce faire, prennez l'outil séléction rectangulaire. Créer une sélection en maitenant ALT enfoncé pour soustraire le petit bout de trop à la séléction : (n'hesitez pas à zommer)

Vous obtiendrez ceci :

21) Remplissez cette séléction de Noir. Faites un CTRL + D pour tout désséléctionner. Allez dans Filtre/Atténuation/Flou Gaussien.
Appliquez un fou de 6. :

Baissez l'opacité à 50 % :

------------------------------------

Vous avez terminé !!

C'est fini

Enregistrez vite votre travail !

Merci de m'avoir suivi jusqu'au bout

Postez vos créations au dessous, je suis impatient de voir vos icônes

Merci à tous et @ la prochaine

punch · Schtroumpf paresseux Messages: 1867

Merci d'avoir pris du temps pour ce superbe tutorial !

IlluzMax · Schtroumpf Admin Messages: 1689

Et bien Punch, de rien

Ca me fait plaisir

gusta07 · Schtroumpf costaud Messages: 169

Voila donc enfin le fameux tutorial !

Ya rien à dire ça va aider plus d'un !

Bs1 · Schtroumpfissime Messages: 490

Superbe tuto, merci grand chef

IlluzMax · Schtroumpf Admin Messages: 1689

Merci vous 2

romain · Schtroumpf Messages: 87

Magnifique !!! Merci a lot !

IlluzMax · Schtroumpf Admin Messages: 1689

De rien, essayez de faire le tuto et montrez moi vos réalisations

benjigarner · Schtroumpfissime Messages: 413

Bravo pour ce tuto fallait avoir du courage merci à toi !!

Symon · Grand schtroumpf Messages: 896

Superbe Tuto Mr Illuzmax ! J'adore

AleXion · Schtroumpf costaud Messages: 159

Merci illuzmax ! C'est vraiment gentil d'avoir pris tout ce temps pour nous !

(Ça y est je suis ému...)

C'est vraiment bien expliqué ! Bravo !

IlluzMax · Schtroumpf Admin Messages: 1689

Merci merci

Je serais encore plus récompensé quand j'aurais vu vos créations : preuve que c'est compris et que ça plait

punch · Schtroumpf paresseux Messages: 1867

Voila :

Tchou !

IlluzMax · Schtroumpf Admin Messages: 1689

Super

Dommage qu'il y ai un peu de reflets flou

Merci à toi

headerguard · Schtroumpf Messages: 57

Super tuto

EDIT: Voici le mien:

IlluzMax · Schtroumpf Admin Messages: 1689

Superbe headerguard !

Rokkall · Schtroumpf costaud Messages: 217

Ho t'sais qu'j't'aime tôé...
Dommage que t'es marier sinon j't'épous'rais tiens !
MDR

Non sérieux, enfin LE tuto que j'attendais, depuis des lustres, merci à toi.
J'vais m'y mettre dans l'après-midi et le résultat sera choupignol !

IlluzMax · Schtroumpf Admin Messages: 1689

Content que ça te fasse plaisir Rokkall

J'attends ta créa comme les autres

headerguard · Schtroumpf Messages: 57

Juste une question Illuzmax, est-ce que ça te derangerais si je mettais se tuto sur mon forum, en indiquant bien sur d'où il vient, et qu'il vient de toi ??

Si tu veux pas, c'est pas grâve.

Arlekin · Schtroumpf Animateur Messages: 1205

Merci à toi Iluzmax, je vais essayer des que j aurais un moment, actuellement je test ma tablette graphik c'est chaud de prendre le pli