[Etape 1]

Commencez par ouvrir un nouveau document sous PhotoShop, avec les paramètres suivants :
- Largeur : 800 pixels
- Hauteur : 600 pixels
- Résolution : 72 pixels/pouce
- Fond blanc
- Mode RVB

Un design métallique rend mieux sur fond noir, notamment pour les reflets.
Nous allons colorer le fond en noir : sélectionnez le noir standard (#000000), puis faites "Edition> Remplir> Remplir avec couleur de premier plan".

Créez un nouveau calque, que vous nommerez "Support". C'est sur celui-ci que nous allons tracer le gabarit général du design.

Les choses sérieuses commencent : assouplissez-vous les doigts (sans faire craquer les jointures, j'ai horreur de ça :p !), prenez un café et go !



[Etape 2]

Restaurez les couleurs standards (touche D), puis appliquez le filtre Nuages "Effets> Rendus> Nuages" une première fois, puis de 2 à 4 fois de plus (Ctrl + F pour répéter l'effet).

Ensuite, faites "Bruit> Ajout de bruit", avec les paramètres :
- quantité : 20
- Répartition Gaussienne
- Monochromatique.

Enfin, appliquez un flou directionnel à 0 degré et 15 à 20 pixels de distance.

A l'aide de l'outil Plume (pour des précision sur la Plume, référez-vous à ce tutorial), tracez la forme de votre choix, simple ou complexe, à vous de voir, mais méfiez-vous des épaisseurs trop faibles, qui risquent de nuire au rendu final.

Une fois le tracé terminé, convertissez-le en sélection, puis faites un copié-collé sur un nouveau calque (Ctrl+ +C et Ctrl + V), que vous nommerez "Gabarit".

A titre d'exemple, vous devriez avoir un truc dans le genre :
Passons à l'étape suivante : mettre cette forme en relief.



[Etape 3]

Récupérez la sélection du calque Gabarit "Sélection> Récupérer la sélection", créez un nouveau calque "Reflets", et remplissez la sélection de blanc "Edition> Remplir> Remplir avec Blanc", puis sélectionnez l'outil Lasso, et déplacez légèrement la sélection dans le sens d'où viendra la lumière.

Ok, c'est un peu obscur, là.
Si la source de lumière est en haut à gauche, les reflets seront eux aussi en haut à gauche. Il nous faut donc déplacer le calque Reflets dans le sens inverse, vers le bas à droite... de quelques pixels.

Faites ensuite Ctrl + X (couper), puis "Effet> Atténuation> Flou Gaussien" à 2 pixels.

Répétez la manipulation avec un calque "Ombres", rempli, donc, de noir, mais veillez à décaler la sélection vers la source de lumière, donc, en haut à gauche. Une fois ces opérations terminées, vous devriez avoir ceci :



[Etape 4]

Passons maintenant au menu.
Nous allons créer quelques boutons reliés entre eux par des "tuyaux".
Commencez par créer un calque "Bouton", sur lequel vous allez tracer, toujours avec la plume, la forme de votre choix.

Ici, nous sommes restés sur une forme classique. Pour une forme assez petite, la méthode employée pour le gabarit ne donne pas forcément les meilleurs résultats.
Nous utilisons donc les effets de calques : "Calque> Effets> Biseautage et estampage", avec les réglages de base.

Dupliquez ensuite ce bouton en autant de boutons que vous désirez, chacun sur un calque séparé. Pour dupliquer un calque, faites un clic droit dans le Panneau de calques "Fenêtre> Afficher Calques" pour afficher le panneau, puis choisissez "Dupliquer le calque".
Vous remarquez que les effets sont copiés en même temps que les calques.

Ici, nous avons choisi d'afficher 5 boutons. Notre design ressemble donc à ceci :

Nous allons ajouter un peu de couleurs et de décoration à notre design qui est un peu monochrome pour le moment.

Il s'agit là encore de choix personnels.
A vous de voir ce que vous souhaitez rajouter.

Nous avons essayé de regrouper un peu de tout, donc, forcément, ça manque de cohésion ! Par contre, c'est plus varié ;-)

Donc, nous allons successivement rajouter une sphère, un écran, une incrustation, du texte... et les tuyaux qui vont relier nos boutons entre eux.



[Etape 5] Ajouter une sphère

Commençons par créer la sphère. Créez un nouveau calque, nommé " Sphère", puis tracez une sélection ronde, avec l'outil de sélection Ellipse, en laissant la touche "Shift" appuyée durant la sélection, de façon à obtenir un rond parfait.

Sélectionnez l'outil Dégradé radial, puis le dégradé de votre choix, et appliquez-le à la sphère. Ici, nous utilisons un dégradé du Blanc (#FFFFFF) vers le Violet (#663399), puis vers le Noir (#000000).

Il s'agit maintenant d'intégrer cette sphère au gabarit. Sélectionnez à nouveau un rond, plus grand que la sphère, à l'emplacement où vous souhaitez la placer.
Placez-vous sur le calque Gabarit, faites Ctrl + C, puis Ctrl + V, et renommez ce nouveau calque Support.
Appliquez-lui ensuite un effet de calque "Biseautage / Estampage" de votre choix, puis dupliquez le calque, et faites Ctrl + T pour le redimensionner.
A l'aide des poignées de redimensionnement, choisissez la taille souhaitée, en sachant qu'elle doit être intermédiaire entre la sphère et le support, puis appuyez sur "Entrée".

Double-cliquez sur ce calque, renommez-le en Support 2, puis double cliquez sur le rond noir "Effets", et cochez le bouton radio "Bas" (normalement, c'est "Haut", qui est coché par défaut). Et voilà le résultat >>



[Etape 6] Ajouter un écran

A l'aide de la plume, tracez la forme de votre choix, de préférence avec des coins arrondis, par souci de réalisme.
Convertissez le tracé en sélection, créez un nouveau calque Ecran, puis sélectionnez la couleur de votre choix (ici, un vert-gris #7C9E7E), et remplissez la sélection.

Appliquez un effet de calque "Biseautage / estampage", avec l'estampage Oreiller et les paramètres de base, (sauf Atténuation : 3).

Votre écran est créé. bon, ok, c'est un peu simpliste, à vous de rajouter une grille, des reflets, du texte, un screening... enfin, bref, ce que vous voulez !



[Etape 7] Ajouter un motif incrusté

Choisissez un motif ou dessinez-le, au choix.
Ici, nous avons choisi l'emblème de la marque Dodge ;-)

Récupérez la sélection de votre motif "Sélection> Récupérer la sélection", puis procédez comme pour le support de la sphère.

Dupliquez ensuite 2 fois votre calque, et renommez-en un Blanc et l'autre Noir.

Placez votre calque Logo au-dessus des calques Blanc et Noir, puis décalez le Blanc de 1 ou 2 pixels vers le haut à gauche pour obtenir un effet de relief et le Noir à l'opposée.

Pour un effet d'incrustation, faites exactement l'inverse.

Vous devriez obtenir quelque chose de ce genre >>



[Etape 8 et fin]

Il vous reste à mettre le texte sur les boutons, le nom du site, un éventuel logo... Mais vous êtes maintenant au courant de quelques "trucs" de graphistes !

N'imaginez pas que c'est facile, il vous faudra probablement plusieurs essais et de l'entraînement pour arriver au résultat ci-dessous.

Néanmoins, nous vous conseillons de faire des tests avec les filtres de PhotoShop, les modes de calque (Produit, Incrustation...), les Brushes, et beaucoup d'autres choses, pour créer vos propres interfaces.

Bon courage ;)



[Annexe]

Les sites où l'on trouve des tutoriaux :


En Français :

www.falkenzone.com

www.laurentz-design.com

www.lmdk.com

www.piregwan.com


En Anglais :

www.wastedyouth.org

www.eyeball-design.com

www.eyesondesign.net