les outils

Faire un bouton

On va imaginer qu’un célèbre industriel lance un site web et qu’il fait appel à tes services pour créer un bouton de type sphère.

Fichier, nouveau, 400x400 pixels, résolution 72, contenu de l’ar plan : fond transparent.
Tu vas afficher les règles, affichage règles
Tu vas afficher les guides, pour cela tu clic sur la règle vertical et tu glisses vers la droite. Tu surveilles le déplacement et tu relâches quand tu te trouves au milieu. Tu te repères  aux règles.

Tu choisis la couleur que tu veux, moi j’ai choisis rouge r198 v50 b50 ou #c63232
Tu clic sur calque1 et tu le renommes fond
Outil ellipse de sélection, tu te positionnes sur le milieu, tu appuies sur Alt et sur Shift puis tu déplaces la souris.

Attention : si la commande Shift + Alt (ça arrive) passe le clavier en Qwerty. Pour revenir par la suite en Azerty, ré appuyez sur Shift+Alt.

Outil pot de peinture et tu remplis le cercle, tu enlèves la sélection Ctrl D 
Tu clic sur créer un nouveau calque, tu le nommes reflets.
Outil ellipse et tu fais comme l’exemple ci-dessous, une petite sphère

Tu peux déplacer la sphère avec les flèches du clavier
Outil dégradé, couleur blanc en premier plan, tu clic sur le rectangle et tu choisis le carré  deux : blanc vers transparent, Ok

Tu vas faire le dégradé de haut en bas et pour qu’il soit parfaitement droit tu vas appuyer sur la touche Shift en même temps. Ctrl D

Tu crées un nouveau calque et tu le nommes lueur
Tu choisis l’option radial et tu gardes blanc vers transparent
Tu clic à 1mm sous la sphère et tu remontes droit jusqu’à un tiers du trait de construction.

Fatalement ça déborde, peu importe, on va effacer mais très proprement en suivant l’arrondi.
Tu te places sur le calque fond, sélection, récupérer la sélection, couche fond OK
Sélection, modifié, contracté, 3pixels
Sélection, intervertir
Tu te places sur le calque lueur, tu appuis sur Suppr puis Ctrl D

Tu crées un nouveau calque, tu le nommes ombre
Tu resélectiones le calque fond
Tu clic sur l’outil ellipse et tu choisis l’option soustraire

Et tu dessines une sélection pour arriver à ceci.

Pour cela tu dois cliquer au milieu et appuies sur Alt, puis tu déplaces la souris en débordant vers le haut.

Tu crées un nouveau calque, tu le nommes ombre
Sélection modifier contracter 3pixels
et remplis en noir, Ctrl D

Tu te places sur fond, tu le resélectionnes
Tu te places sur ombre
Filtre, atténuation, flou gaussien 10px

Tu crées un nouveau calque, tu nommes bordure
Tu resélectionnes le calque fond,

Tu en as peut-être marre de faire tout le trajet pour resélectionner
Alors en fonction des versions de Photoshop, il y a un raccourci clavier, Ctrl et clique sur le calque fond, pour moi CS5 ça marche pas et j’ai donc programmé mon propre raccourci clavier Ctrl 1 on fait ça dans édition préférence

Tu te places sur le calque bordure
Sélection, modifier dilater 10pix, pot de peinture en blanc, c’est tout blanc, pas de panique
Tu te places sur le calque fond, tu resélectionnes, tu te places sur le calque bordure et tu appuies sur Suppr, ainsi tu as une bordure.

Tu te places sur le calque bordure
Effet FX biseautage et extrusion

Maintenant, il faut mettre un motif sur le bouton
On va en profiter pour étudier les formes personnalisées de Photoshop

Outil forme personnalisée
et tu vas à forme  

puis tu vas cliquer sur une petite flèche vers le bas et tu clic sur une petite flèche vers la droite et tu clic sur toutes.
Et donc quand tu clic par exemple pour l’exo sur l’os
tu dois avoir des formes et tu peux agrandir la fenêtre en tirant sur le coin à droite, comme ça tu peux voir formes toutes les formes.
Tu en choisis une, et couleur blanche.
Moi j’ai choisi enveloppe

Tu clic au milieu, tu appuies sur Alt et Shift et tu déplaces la souris

Regardes bien la palette des calques, il y a deux icones, ce qui veut dire que tu as fait un tracé vectoriel et nous on veut une image.
Calque, pixellisation de forme. Maintenant tu as un dessin.
Terminé.

 

Pour aller plus loin, car il s’agit d’un futur bouton
Quand tu clic sur un bouton l’image change.
Tu sélectionnes les trois calques ombre, lueur et reflets

Tu les dupliques, puis tu clic  sur la flèche 

tu choisis fusionner les calques
Edition transformation symétrie axe vertical et tu enlèves l’œil de ton calque

Tu le nommes bas

Il faut enregistrer deux images le haut et le bas
La en ce moment on a le haut
Fichier enregistrer sous png car fond transparent et on va dire que le bouton sera plus tard sur un fond en couleur : nommer haut
Tu enlèves œil pour ombre lueur et reflets, tu mets œil pour bas
Tu enregistres : nommer bas.
Tu dois avoir dans ton dossier 2 miniatures

Pour l’animation je vais la faire avec adobe flash

clic sur le lien ci dessous

file:///G:/site%20patrick/a.patrick.denot.eu.site/site%20patrick/image/tuto%20photoshop%20web/images%20tuto%20photoshop/tuto%2012/animation1.swf