Réaliser une interface avec l'outil plume

Une interface de site web, entièrement créée avec la plume !

[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" ( ou directement Alt + Suppr ).

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 !), 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 :

[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.



Pour un rendu final :



Par 1 , Le 30 Juillet 2005 à 11h49
Ce tutoriel est la propriété d'Aidoweb et ne peut en aucun cas être copié.

Retour à Photoshop

Commentaires sur cet article

Coucou, merci de faire ta demande sur le forum, c'est plus pratique

salut les mec , mon brobleme c'est que je dois faire ce devoir pour l'ecole et j'arrive pas à faire cet interface car je maitrise pas photoshop vous pouvez me donner des etapes plus detailéq avec photo ? je vous remerciez bcp

Merci pour les images
Tout de suite c'est 100 fois mieux

Demandes sur le forum c'est plus pratique

J'ai un ptit probleme au niveau de l'etape 2, les couleurs sont inversees cad que le fond est en nuage et que le design fait a la plume est en noir.

Non .. pas recu de MP de ta part ni de mail, je crois ... Envoie moi un MP avec les images

PS : c'est Pouzy la
EDIT : Ha, t'as du me les envoyer sur le compte admin ! Je les aurais a mon retour, le 24 aout donc

les images tu les as pouzy?

Ouaip .. J'ai demandé à hellboy, j'attends une réponse

Ce serait pas mieux d'avoir des images ??
On saurait plus si on est dans le vrai