Formations web et création graphique - Bouton Web en 5 mn!

Fermer



Connexion

Bouton Web en 5 mn!

un bouton Web2.0 en 5 mn avec PhotoshopMensonge éhonté, il vous faudra au moins 7 mn!

Remarquez qu'il y a trois trucs intéressants :

  • Le reflet du bas (on l'a déjà traité ailleurs)
  • Les contours
  • Le reflet du haut

Au boulot. Commencez par créer une forme à coins arrondis. Utilisez le rectangle en appuyant sur la touche Maj pour le contraindre à un carré.

un bouton Web2.0 en 5 mn avec Photoshop

Vous obtiendrez un calque de forme.

un bouton Web2.0 en 5 mn avec Photoshop

Cliquez sur la vignette de la forme en appuyant sur la touche Commande (Mac) ou Ctrl (PC). Vous récupérerez ainsi la sélection correspondant à la forme.

bouton Web2.0 en 5 mn avec Photoshop

Menu Sélection > Transformer la sélection

Retournez la carrément. Quand c'est OK double cliquez dedans ou cliquez sur l'icône de validation dans la barre d'options en haut.

bouton Web2.0 en 5 mn avec Photoshop

Vous obtenez aini une sélection pour le reflet. Créez un nouveau calque en appuyant sur la touche Commande (Mac) ou Ctrl (PC) pour qu'il soit en dessous. Si vous n'y arrivez pas, tant pis, positionnez-le dessous manuellement.

bouton Web2.0 en 5 mn avec Photoshop

Remplissez la sélection avec du gris pour commencer. (Édtion > Remplir)

bouton Web2.0 en 5 mn avec Photoshop

Réduisez l'opacité.

bouton Web2.0 en 5 mn avec Photoshop

Créez un masque de fusion et remplissez-le avec un dégradé du noir au blanc.

bouton Web2.0 en 5 mn avec Photoshop

Quand c'est noir ça masque, quand c'est blanc ça passe.

Une fois le reflet mis en place, il ne reste qu'à ajouter les effets au claque de forme.

bouton Web2.0 en 5 mn avec Photoshop

Pour chaque effet voici la visualisation (ajout de l'effet suivant à chaque étape) et les réglages.

Dans l'ordre :

1 - Biseautage et estampage (qui sont les deux mamelles du photoshopeur)

bouton Web2.0 en 5 mn avec Photoshop

bouton Web2.0 en 5 mn avec Photoshop

2 -  Contour

bouton Web2.0 en 5 mn avec Photoshop

bouton Web2.0 en 5 mn avec Photoshop

3 - Incrustation en dégradé

bouton Web2.0 en 5 mn avec Photoshop

bouton Web2.0 en 5 mn avec Photoshop

bouton Web2.0 en 5 mn avec Photoshop

4 - Ombre interne

bouton Web2.0 en 5 mn avec Photoshop

bouton Web2.0 en 5 mn avec Photoshop

Bien entendu vous pouvez tout faire d'un seul coup, une fois ouverte la boîte dialogue Style de calque.

Il manque encore le reflet sur la partie haute.

Il suffit de tracer un rectangle :

  • à coins arrondis
  • Blanc
  • Mode Superposition
  • Opacité autour des 15%

bouton Web2.0 en 5 mn avec Photoshop

Pour finir, vous pouvez ajouter un contour un peu plus prononcé.

  • Récupérez la sélection de la Forme 1.
  • Placez la sur un calque au dessus.
  • Remplissez-la de blanc et appliquez un contour identique à celui du calque de la Forme 1.

bouton Web2.0 en 5 mn avec Photoshop

Changez le mode de fusion pour Produit (le blanc s'effacera et les contours ressortiront).

bouton Web2.0 en 5 mn avec Photoshop

Un petit texte là dessus et le tour est joué.

bouton Web2.0 en 5 mn avec Photoshop

Si vous enregistrez ce bouton au format PNG (sans l'Arrière-plan, bien sûr) vous aurez une vraie transparence sur le dégradé.

Vous pourrez ainsi le placer sur une page avec un fond de couleur sans problème.

Bises.