DOSSIER -Créer une interface/Elements graphiques 03-

11 On peut aussi créer des formes en partant d'un ovale et gommer une partie qui accueillera un bouton...

12 Il suffit ensuite de positionner le bouton et de l'adapter à la taille de l'espace que l'on a fait pour lui. Toujours dans le syle de calque on donne les effets souhaités.

13 On crée par dessus d'autres boutons bulles. On peut aussi se servir des formes personnalisés pour ajouter des éléments de décoration, comme la flèche etc... ainsi que quelques "vis"...

Dessiner des vis cruciformes
14 Ouvrez un nouveau document, puis créez un nouveau calque nommez-le "Forme vis". Tracez un cercle . Double cliquez sur ce calque et dans les styles de calque, incrustez un dégradé radial.

15 On crée un autre calque "Croisillon vis", puis on positionne des repères que l'on fait glisser depuis les règles autour du document. Avec l'outil Trait que l'on règle à 15 pixels on trace une croix en se servant des repères pour bien la centrer.

16 On double clique sur le calque "Croisillons vis" et on suit les réglages ci-dessus pour donner une impression de profondeur à la croix. On fusionne pour finir les deux calques Croisillons vis et Formes vis.

17 On dépose la vis sur l'interface et avec la transformation manuelle (Edition/Transformation manuelle) on la met à la bonne taille, sans oublier de maintenir la touche Maj du clavier et le pointeur dans un angle pour avoir une forme parfaite !


18 Lorsque la vis est à la bonne taille et au bon endroit, on met un bisautage externe et une ombre portée. Enfin, on duplique ce calque et on positionne la deuxième vis à l'opposé sur l'interface.

Ci-dessous, l'interface terminée. Dans l'éditeur de page html, on positionne des zones réactives sur les boutons afin de mettre les liens qui correspondent aux noms... faites un essai ! Et puis si vous souhaitez voir comment créer des "câbles" et une interface un peu plus sophistiquée, rendez vous ici pour la suite...



Tutos photos Tutos dessins Liens
suite ...
1 ... 2... 3 ... / retour dossier boutons bulles ou la suite : cable/ forme d'interface

Accueil