DOSSIER -Créer une interface/dessiner une forme d'interface 02-

09 A présent avec l'outil Elipse de sélection, tracez un cercle correspondant à la hauteur de la partie supérieure droite de la forme, puis sélectionnez l'outil Rectangle de sélection. La manipulation 1 : Cliquez en maintenant la touche Maj du clavier, sur le point de jointure entre le cercle et le départ du rectangle puis descendez pour englobez de droite à gauche la forme grise (comme indiqué par les flèches rouges) - Vous devez obtenir la sélection de l'image 2. Ensuite, faite un clique droit dans la sélection et Intervertir puis tapez Suppr sur le clavier.

- Cette manipulation : clique+touche Maj, permet d'ajouter les sélections les unes aux autres. Alors que le clique +Alt soustraira à la sélection.


10 Enfin, désélectionnez Ctrl+D - vous obtenez une forme aux contours arrondis et nets.


11 Nous allons passer à "l'habillage" de l'interface et lui donnez du style ! Sélectionnez la forme : Ctrl+clique dans le calque (palette Calque) puis, menu Sélection/Modifier/contracter/15 pixels (adaptez selon la forme que vous aurez tracé). Prenez l'outil Elipse de sélection, faites un clique droit dans le calque sur le document et choisissez Calque par couper.

12 Aussitôt, un autre calque se crée dans la palette nommez le découpe intérieure. Vous avez à présent 2 calques, un contour "Rectangle arrondi" et l'intérieur "découpe intérieure" qui forme la base de l'interface. A vous à présent d'adapter selon vos goûts les formes et les découpes que vous souhaitez !

13 Vous pouvez commencer l'habillage des formes, en mettant par exemple un biseautage sur le contour...

14 En passant sur le calque de la découpe intérieur, mettre d'autres effets, couleurs et reflets (voir la technique des boutons bulles) ...


15 Voici enfin, tous les calques qui composent l'interface, ce ne sont que des formes auxquels j'ai appliqué des effets de style, modifiés leur position, leur taille avec la Transformation manuelle. J'ai rajouté mon câble et mes vis puis quelque rivets qui sont tous simplement de toutes petites formes rondes. Le bouton orange est un petit rectangle arrondi avec un dégradé ainsi qu'un biseautage il en est de même pour les embouts de chaque côté du câble ! J'ai dupliqué le calque de la forme 'Recangle arrondi' en arrière du premier et je l'ai agrandi avant d'y ajouter un autre effet de style


16 L'interface est terminée. Il ne reste plus qu'à la mettre en page avec un éditeur html comme Dreamweaver par exemple. Vous pourrez faire soit des images réactives dessus, soit dans photoshop la découper avec l'outil tranches et l'enregistrer pour le web en format html - photoshop vous fera cela tout seul dans un dossier de votre choix et il fera même un dossier "images" contenant toutes les découpes de l'interface ! Il suffira ensuite de créer d'autres petits boutons et d'en faire des "Rollovers" ! si vous voulez voir ce que ça donne, cliquer sur l'image de l'interface !


suite ...
1 ... 2... Forme : 01 - 02

Accueil