Création de boutons souples en utilisant des formes et des styles Photoshop, le blog de Veerle

Création de boutons souples en utilisant des formes et des styles Photoshop

Dessin sur le bouton en utilisant la forme de rectangle

Sélectionnez l'outil Rectangle Arrondi, entrez 4 ou 5 px comme rayon pour le coin arrondi et dessiner la forme de votre bouton rectangle. Double-cliquez sur le nom du calque, entrez un nom et puis double-cliquez à droite de la couche d'actifs de la couche Styles options.

Ajout de styles

Ajout d'un effet d'ombre

Vérifiez le style et entrez Ombre 8% d'opacité, 90 degrés pour l'angle, 5 distance px et 0 taille px (dans le cas où vous ne voulez pas une ombre floue). Ne hésitez pas à entrer dans ce que vous pensez est agréable.

L'ajout d'une incrustation en dégradé

Cochez l'option Gradient Overlay et cliquez sur l'image gradient. Cela apportera l'éditeur de dégradé. Cliquez sur la première couleur d'arrêt et cliquez dans la couleur ci-dessous pour le changer. Je # a4cee6. Faites la même chose pour l'arrêt de couleur à droite. Je l'ai utilisé # 56add6. Maintenant, ajoutez un arrêt de couleur au milieu en cliquant juste en dessous du gradient au milieu. Si ce n'est pas 100% au milieu, vous pouvez corriger en entrant 50% dans le domaine de l'emplacement. Je l'ai utilisé # 468bcc pour cette couleur Stop. Maintenant, ajoutez une autre couleur d'arrêt à ce même endroit. Pour ce faire un lien juste à droite de celui-ci (en dessous du gradient). Je l'ai utilisé # 81b3e2 pour cette nouvelle couleur Stop. Maintenant, changer son emplacement à 50%. Vous devriez maintenant obtenir l'effet indiqué dans l'image ci-dessus.

Ajout d'une bordure

Vérifiez le style de course au bas et sélectionnez 1 px pour la taille et le blanc comme couleur (ou la couleur de fond que vous utilisez).

Ajout d'un éclat supplémentaire

Pour terminer le bouton off j'ai ajouté un éclat supplémentaire sur le dessus en traçant un chemin à l'aide de l'outil Plume. J'ai rempli ce chemin avec le blanc et ajouté un petit masque pour le rendre un peu fondu et moins dur. Je mets la transparence à 50%.

Si nécessaire, changer le ton de la couleur

Parfois, vous arrivez à la conclusion que la couleur du bouton est pas exactement ce que vous aviez à l'esprit. Vous pouvez expérimenter en utilisant la couche teinte et la saturation de réglage. I de saturé sur le bouton pour faire le bouton moins bleu et plus gris. Si vous commande / Ctrl + clic sur l'icône de calque dans la palette Calques de la couche de bouton, le bouton sera sélectionné. Si vous sélectionnez ensuite la couche de réglage et cliquez sur l'option Ajouter le masque vectoriel au bas de la palette Calques, seul votre bouton s'effectue et non le reste de votre mise en page.

Ceci est juste une façon de faire les choses, il est une façon d'ajouter certains effets, mais il y a des possibilités zillion et des choses que vous pouvez essayer.

PS: Si vous avez plusieurs documents Photoshop ouverts, essayez ceci. maintenez la touche Maj + commande / contrôle + espace et cliquez dans le document actif. Vous verrez que vous effectuez un zoom sur tous les documents. Si vous maintenez la touche Maj + option / alt + commande / contrôle + espace et cliquez sur vous effectuez un zoom arrière sur tous. Ceci est une astuce que je suis arrivé de Roger Johansson qui a accidentellement frappé la touche Maj enfoncée quand il a été effectuant un zoom avant.

Vous voulez en savoir plus?

Articles Liés