DOSSIER -Créer une interface/Boutons bulles 01-
Voici un dossier sur la création d'une interface pour un site web. Il ne s'agit pas d'un kit graphique, mais de la façon de créer divers éléments graphiques.
Si vous savez déja créer des boutons, vous pouvez passer à la 2è partie du dossier sur les "éléments" qui entourent les boutons un peu comme ce qui se trouve sur ce site.
Enfin, dans la 3è partie, vous apprendrez à dessiner des câbles et une interface un peu plus sophistiquée utilisant la découpe de forme vectorielle.
Dossier boutons
Dossier éléments
Dossier boutons bulles
Dossiers éléments
01 Commencez par ouvrir un nouveau document, créez un nouveau calque. Avec l'outil elipse tracez une rond blanc - maintenez la touche Maj de votre clavier en traçant le rond afin qu'il soit parfait.
02 Double cliquez dans le Calque 1 dans la palette Calques, afin d'ouvrir les Styles de calque et mettez une Incrustation de dégradé. Pour l'instant on en met pas plus au niveau des styles. - J'ai choisi de mettre un style de dégradé plutôt que de le faire avec l'outil Dégradé, je pourrais ainsi plus simplement changer la couleur du dégradé pour faire d'autres boutons. Comme nous le verrons à la fin du tutorial.
03 Nous allons crée un reflet pour donner cet aspect "bulle" au bouton. Créez un nouveau calque que vous nommez "reflet" et avec l'outil Elipse de séléction cette fois, tracez une élipse dans la partie supérieure du bouton. Comme sur l'image ci-dessus.
04 Mettez le blanc en couleur de premier plan (barre d'outil), puis séléctionnez l'outil Dégradé - Tracez un dégradé du blanc au transparent, dans la séléction du calque reflet. Désélectionnez : Ctrl+D puis ajustez le reflet avec l'outil Déplacement si besoin.

05 On revient sur le calque 1 et cette fois dans les Style de calque on rajoute une petite ombre interne comme ci-dessus. Cela augmente "l'arondi" du bouton !

06 Nous allons à présent créer un peu plus de "rondeur" et donner cet aspect verre au bouton en créant un autre reflet, vers le bas cette fois. Faites Ctrl+clique dans le Calque 1 pour le sélectionner en pointillé, puis créez au dessus un nouveau calque - le Calque 2. Dans le menu Sélection : Modifier/Contracter ...

07 et contractez la sélection de 10 pixels.
suite ...
1 ... 2
Accueil