contact

Réalisation d'un bouton
Making a button



1) Faire le fond - make the background

Lancer le logiciel Pixia - launch the Pixia's freeware.

Créer une nouvelle image en cliquant sur "Fichier" puis, sur "nouveau". Create a new picture by clicking  on "File" the on "new".

Choisissez la taille de votre bouton (vous pourrez encore modifier la taille en inserrant sur votre site)
Par exemple : bouton de gauche au niveau du titre = 150 x 30 pixels; bouton de droite = 80 x 40 pixels
Choose the size of your button (you will still be able to modify it when inserting in on your web site)
For example : button on the left of the title = 150 x 30 pixels; button on the right = 80 x 40 pixels

Faites le coloriage que vous voulez. Color as you want.

Ensuite, vous pouvez ajouter des filtres :
Pour les 2, j'ai mis un filtre dit "bouton" qui fait des contours en relief sur les boutons. Pour cela :
Cliquer sur "Affichage" sur la barre d'outils du haut de l'écran. Cliquer ensuite sur "Filtres". Une fenêtre s'ouvre, dans la colonne de gauche, cliquer sur 'Effets" puis sur "bouton" dans la colonne de droite. Vous pourrez régler les paramètres du bouton (profondeur de l'effet relief) en tapant sur "paramères".
Une fois cela fait, valider en appuyant sur "Appliquer".
Then, you can add filters :
For both of them, I add a filter called "button" which makes the outlines in relief on the buttons. For that :
Click on "Display" on the tool barre at the top of the screen. Then click on "Filters". A window will open, in the left culum, click on "Effects" then "Button" in the right culum. You can adjust the parameters of the button (depth of the relief effect) by clicking on "parameters".
Once it is done, validate by clicking on "Apply"

Enregistrer votre bouton pour ne pas perdre votre travail (personnellement, je me suis créé un fichier "Formes" sous lequel je stock toutes les petites images ou smiley et ensuite je copie,  à partir de cette base, ce qui m'intéresse dans les fichiers où je veux les utiliser).
Record the button in order not to loose it (I created a file named "formes" under which I stock all the small (in term of space) pictures or smiley and after I make a copy, from this base, of the element I want, in the file where I want to use it).

2) Insérer du texte sur le Bouton - Insert a text on the button

2-1) Avoir une image  à l'écran - to obtain a picture on the screen
Si vous aviez fermé Pixia : relancer Pixia, ouvrir l'image que vous aviez faite. Ici, par exemple, nom de l'image = "bouton-perso-1" = 
If you have closed Pixia, open the picture that you have done. Here, for example, name of the picture = "bouton-perso-1" =

Si vous aviez garder votre bouton à l'écran, passer à la ligne ci-dessous - If you have kept your button on the screen go to the next line :
2-2) Accéder à l'outil pour mettre un texte et taper son texte - Go to the tool for insering text on your button :

Ouvrir la boite de dialogue pour le texte en appuyant sur - Open the dialogue box by clicking on  :

 
  1. Insérer votre texte dans la case supérieure : exemple "Cliquer ici - Click here" - Insert your text in the upper square : for example : "Cliquer ici - Click here" 
  2. Choisissez la police, la taille, etc. (faites plusieurs essais si nécessaire) - Choose the typeface, the size, etc. (make several tryings if necessary)
    => la police va avoir une importance sur la lisiblité de votre bouton. N'hésitez pas à faire des essais (dans les exemples, je suis en Arial)
    3. => the typeface will have an impact on the legibility of your button. Do not hesitate to make tryings (in the example, I chose : Arial typeface)
  3. Validez par OK - Validate by Ok
Nota :
- On ne peut pas aller à la ligne.
- La fonction "adouci" offre des contours plus agréables au texte.

2-3) Dimensionner, placer son texte et choisir la couleur des lettres - Put the text where you want - chose the size and the color of the text :
Le texte apparait dans une sélection rectangulaire - the text appears in a square selection :

Rien n'est encore appliqué à l'image. Nothing is applied yet to the picture.
A ce moment vous pouvez encore - at this moment you can still :
- redimensionner le texte en tirant sur les poignées du rectangle, re-size the text by pulling on the handles of the square,
- déplacer le texte en cliquant directement dans la sélection, move the text by clicking directly on the selection
- changer les paramêtres du texte en réactivant le bouton "texte", change the parameters of the text by reactivating the text's button
- annuler l'opération en sélectionnant un autre outil, - to cancel the work by selectionning an other tool
- appliquer un masque filtrant - apply a filtering mask

Attention : faites bien attention à la couleur active (ou au dégradé) dans les palettes. Elle s'appliquera au texte lorsque vous déciderez de l'intégrer à votre image.
Careful : pay attention to the ativated color (or at the shaded off) on the palette. It will be applied to the text when you will decide to integrate to your picture

2-4) Coller votre texte sur l'image du bouton. - attache your text to the button : 

Pour l'instant votre texte n'est pas encore fixer sur votre image. Si vous cliquer sur un autre outil : votre texte disparaît. Up to now, your text is not attached on your button. If you click on an other tool, you text disapear.

Une fois que vous êtes prêt à "coller" le texte :  Cliquez-droit dans l'image. - Once  you are ready to fix the text : make a right click on the picture

Le menu de "collage" - gluing menu :

Lorsque vous cliquez-droit vous obtenez l'ouverture de ce menu - when you do a right click you open this menu :
- 4 modes de transformation du texte (étirer, rotation, transformation...)
- l'activation d'un masque filtrant
- la fermeture du menu (annuler)
- les options de collage - gluing options ...

Une fois l'image prête - once the picture ready :

  1. Coller comme nouveau calque (ou Coller). Dans Pixia, il ne faut jamais hésiter à travailler sur plusieurs calques. Ce qui permet d'annuler ou de transformer encore aisément le nouvel élément que vous venez d'inclure à l'image. Stick on as a new tracing (or stick). In Pixia, do no hesitate to work on several tracings. This allow to cancel ou modify the new element that you have just insert on the picture.

Quelques exemples d'effets de couleur au niveau des lettres :
- Texte normal avec lettres Blanches : La couleur blanche était la couleur active dans la palette de couleurs.
- Dégradé rectangulaire : Dans la palette de nuanciers (P), un dégradé rectangulaire est activé.
- Masque filtrant : Couleur bleue active. Sélection d'un masque filtrant de droite à gauche.
- Bord : Sélection de "bord" dans la boite de dialogue du texte au début de l'opération. Couleur blanche active.
- Couleur bitmap : Couleur bitmap activée dans la palette de nuanciers (P).
- Carrelage bleu : Texte normal avec couleur bleue active + filtre "Carreaux" - Le filtre "carreaux" est appliqué sur le calque où figure le texte.

Après, c'est à vous de jouer pour aller plus loin.