Bouton style iMac

Tutoriels Photoshop

Pour créer le plus simplement possible des boutons inspirés du style iMac, à utiliser préfèrablement sur un fond blanc.

Publié il y a déjà trop longtemps…

Creez un nouveau Calque et dessinez un cercle à gauche avec l’outil de sélection en maintenant la touche Shift appuyée.
Remplissez le cercle de Bleu (ici: #6699CC)
Dupliquez le calque et faites glisser le calque dupliqué à droite avec les flèches de votre clavier afin qu’il n’y ai pas de décalage vertical. Puis Fusionnez les 2 calques.

Faîtes apparaître les Règles (Ctrl+R).
Placez 2 lignes au sommet et au pied des cercles.
Avec l’outil de sélection rectangle sélectionnez l’espace vide entre les 2 cercles et remplissez de la même couleur que précedement. Puis retirez les lignes.

Faites un Ctrl+Clic sur le calque et Contractez la sélection de 5px.
Supprimez un bout de sélection au milieu avec l’outil de sélection rectangle (Touche Alt maintenue).
Créez un nouveau calque et remplissez la sélection de Blanc.

Toujours avec l’outil de sélection rectangle entourez la bande blanche du haut, cliquez droit et choisissez Calque par Couper. Vos 2 bandes sont alors séparées.
Sur la bande du haut appliquez un Flou Gaussien de 4px et sur la bande du bas un même Flou de 6px.
Passez le calque de la bande du bas en mode Incrustation et décalez-le légèrement avec les flèches du clavier vers le bas.

Revenez au 1er calque (le bleu).
Appliquez une Ombre Portée à 90° de Distance 5 et Longueur 10 avec la couleur #80C6E9.
Puis une Ombre Interne de -90° (décochez Angle Global) en Lumière Tamisée de Distance 3 et Longueur 5.

Placez votre texte au-dessus de tout les autres calques.
Et appliquez lui l’effet Biseau Externe de Longueur 5 avec les couleurs Noir et Blanc en mode Lumière Tamisée.

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

JC

C’est vraiment magnifique! Merci pour ce tutorial et plus généralement merci pour ce site vraiment génial!
Aoe2taok

J’ai trouvé une solution à votre problème!

"Faites un Ctrl+Clic sur le calque et Contractez la sélection de 5px."

=> Remplacez " Faites un Ctrl+Clic sur le calque" par : sélectionnez la forme en utilisant la baguette magique, ceci sélectionnera la forme bleue.

"Supprimez un bout de sélection au milieu avec l’outil de sélection rectangle (Touche Alt maintenue)."

=> Une fois que vous avez contracté la sélection, ne déselctionner pas cette sélection et prenez l’outil "Rectangle de sélection". Appuyez sur la touche Alt et tracez un rectangle qui traverse cette sélection. Pendant cette dernière manip, vous devez garder la touche Alt enfoncée pour que la sélection (celle qui a été contractée) reste en place.

Voila j’espère avoir été assez clair et que vous pourrez finir ce tutorial ;)
ludo

bonjour,
personellement, je suis peut être un peu con mais alors j’ai rien compris du début à la fin…
dommage, surtout que sur d’autres sites il y a moyen de trouver beaucoup plus simple. Par exemple, on dois dans un premier temps faire 2 cercles et ensuite faire un rectangle. Pourquoi ne pas faire un rectangle arrondi dès le départ ?
peut être que si déjà on m’explique cela je pourrais poursuivre l’excercice :)
Shemu

Ce tuto date de Août 2002, à l’époque les rectangles arrondis n’existaient pas dans ma version 5.5 de Photoshop !
alex

pour un effet de texte noyé dans la masse,
placer le calque de texte juste au dessus de celui du bouton bleu, cad sous les deux reflets blancs, et mettre le calque du reflet blanc du haut à 80% d’opacité
elou

Euh moi juste un petit probleme voila j’a finit tous c’est bien passé mais a la fin je narrive pas a selectioner que le bouton se qui fait que quand je l’insere dans mon site y’a le bouton et le contour blanc ^^"
zaco

bravo se tuto est génial!
Clem

Bravo pour ce tuto !
ramallo

Pour l’étape "Faites un Ctrl+Clic sur le calque et Contractez la sélection de 5px", peut-être serait il utile de préciser aux néophites comment obtenir cette "contraction".
Donc : "Faites un Ctrl+clic sur le calque pour le sélectionner. Puis faites un clic droit sur ce même calque et choisissez Contracter. Mettez 5 px de contraction et cliquez sur OK."
Voilà, j’espère que ça aidera les prochains ;)

Les commentaires sont clos.