Comprendre le bitcoin, l'intelligence artificielle, faire un site web... En 3 minutes en vidéo!

Réaliser une interface avec l'outil plume

Tutoriaux > Photoshop > Réaliser une interface avec l'outil plume

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:-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 :



[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éClin d'oeil

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

Ajouter un commentaire

Suite a un fort volume de spam, les commentaires d'invités sont pour le moment désactivés. Vous devez vous inscrire ou vous identifier pour pouvoir commenter cet article, ou demander du support.

Lectures recommandées

Commentaires sur cet article

Pouzy - Le 28 Novembre 2005 à 16h41

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

sara3210 - Le 28 Novembre 2005 à 00h52

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

Kavel - Le 28 Août 2005 à 22h24

Merci pour les imagesClin d'oeil
Tout de suite c'est 100 fois mieuxClin d'oeil

Pouzy - Le 27 Août 2005 à 12h30

Demandes sur le forum c'est plus pratiqueClin d'oeil

djtony - Le 26 Août 2005 à 20h01

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.

Skwizer - Le 10 Août 2005 à 04h21

Non .. pas recu de MP de ta part ni de mail, je crois ... Envoie moi un MP avec les imagesClin d'oeil

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

hellboy972 - Le 09 Août 2005 à 18h26

les images tu les as pouzy?

Pouzy - Le 01 Août 2005 à 20h34

Ouaip .. J'ai demandé à hellboy, j'attends une réponseClin d'oeil

Kavel - Le 01 Août 2005 à 14h50

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

Tutoriaux > Photoshop > Réaliser une interface avec l'outil plume