Formations web et création graphique - Franciser un Bouton Web

Fermer



Connexion

Franciser un Bouton Web

Les composants de Joomla (CMS) sont presque tous en anglais.Les fichiers de langues fr_FR sont souvent dispos sur le Net, en tous cas faciles à traduire. Mais ce n'est pas la même histoire pour les images. Pour les templates, on a parfois accès aux fichiers sources. Mais quand ce n'est pas le cas voici comment procéder avec Photoshop.

tuto gratuit photoshop: franciser un bouton web

 

Le bouton ci-dessus a été pécho au fin fond du dossier httpdocs>components>com_community>templates>default vous voyez le truc… ce n'est pas toujours facile de le trouver. Firebug (extension de FireFox) est bien utile pour ça.

Pourquoi y-a-t-il les deux états sur le même fichier? SImple : Il se trouve dans le Background d'une Div et en a:hover il y a un décalage vers le haut du background. Cela évite d'avoir deux images… c'est ça le Web 2.

Quand vous ouvre le .gif il est en couleurs indexées, ce qui veut dire que vous ne pourrez rien en faire avant de l'avoir converti en RVB.

tuto gratuit photoshop : franciser un bouton xeb

Si les couleurs sont Websafe il vaut mieux cocher la case Couleurs Web en bas à gauche. Choisissez avec la pipette dans la partie basse du premier état du bouton.

tuto gratuit photoshop : franciser un bouton xeb

Tracez une forme avec la couleur du bas puis tracez avec la couleur du haut en allant le plus près possible du bord droit et gauche.

Avec les Repères commentés activés il y a des aimantations qui vous facilitent les alignements.

tuto gratuit photoshop : franciser un bouton xeb

Faites la même chose pour le deuxième état.

tuto gratuit photoshop : franciser un bouton xeb

Ensuite passez au texte.

Trois points :

  1. Travaillez à 200% pour mieux voir ce que vous faites, mais pas plus.
  2. N'essayez pas de traduire mot à mot. Le français est trop long, il faudrait un bouton plus gros ou un texte plus petit. Trouvez une traduction qui respecte le sens et qui soit courte.
  3. Activez Nette dans la barre d'option du texte. Même si vous voyez les effets d'escalier, ils disparaîtront quand vous afficherez le bouton à 1000% et aussi avec la conversion en couleurs Indexées.

tuto gratuit photoshop : franciser un bouton xeb

Je n'ai pas ajouté l'effet de creux. Mais si vous voulez utilisez Biseautage et Estampage (les deux mamelles de Photoshop).

Dupliquez le calque de texte et déplacez-le dans l'axe (facile grâce aux repères commentés).

tuto gratuit photoshop : franciser un bouton xeb

Et voilà le bouton est prêt à être exporté.

tuto gratuit photoshop : franciser un bouton xeb

Choisissez Gif et exportez.

tuto gratuit photoshop : franciser un bouton xeb

Remplacez l'image English via FTP par celle que vous venez de franciser et voila le résultat.

tuto gratuit photoshop : franciser un bouton xeb

Vous pouvez voir le résultat en vrai sur notre site de Test pour Joomla.

Nous y avons mis les meilleurs composanst pour les principales fonctionnalités requises.

Bises