Tutoriel1: Bouton

Salut,

Je suis John-boly Seya, Webdesigner, ergonome web et Infographiste. Le webdesign est une discipline très ouverte et déjà bien évolué. Il est indissociable à l’évolution du web. Et c’est pour quoi vous permettons de faire vos premiers pas dans cette discipline qui demande beaucoup d’imagination mais ainsi que la connaissance des notions associées au domaine de la communication (Edition multimédia) en particulier et de l’Internet en général.

Voici pour commencer un tutoriel très simple à comprendre. Ce tutoriel explique et démontre comment crée un bouton avec effet de relief (3D) en quelques minutes et en toute facilité avec Adobe Fireworks   CS4.

     BOUTON 

Bienvenu dans notre premier tutoriel qui vous montre comment créer un bouton, beau, simple et à un temps recors sur Fireworks CS4: 

      1. Lancer votre Fireworks :

  

      2. Créer un nouveau document vierge en cliquant sur « Fireworks Document (PNG) » de l’option Créer un  nouveau document de la fenêtre Fireworks au centre de l’espace du travail. Ou faire :   Fichier>Nouveau ou encore faire un raccourci clavier Ctrl+N.

    

      Entrez les valeurs  400 pour 400pixels de largeur et 300 pour 300 pixels de la hauteur ; 72 pour  la résolution et cochez l’option « Blanche » pour la couleur de la zone de travail, puis OK.

       Sélectionnez l’Outil dans le type vecteur, « Rectangle arrondi » ; et choisissant la couleur bleu (#0000FF) dans l’onglet « PROPRIÉTÉS» dans la zone des couleurs. 
 

     3. Allez au centre du document, et faite en glissant la sourie,  tout en maintenant son bouton gauche enfoncé, de l’extrémité gauche vers l’extrémité droite du document.

 

    

     4.Redimensionnez le rectangle arrondi nouvellement créé à  357px : largeur et  68px : la hauteur.

      Positionne le rectangle à : X=22 et  Y=116.

 

5. Veillez que l’outil sélectionné soit l’outil de sélection  « Outil Pointeur (V,à). Une fois que cela est  fait, cliquer sur le rectangle créé pour faire apparaitre les petits points jaunes de sélection. 

     Avec la sourie, toute en maintenant  le bouton gauche enfoncé, faite glissé le petit losange avec votre sourie vers le milieu du rectangle.

      Ainsi, l’extrémité devient totalement arrondie.

            6. Dans l’onglet « Propriété », choisissez en cliquant sur le menu déroulant :
       « catégorie de remplissage », Dégradé>Linéaire, pour le mode de remplissage à deux couleurs.

      Cela nous permet de donné à notre bouton l’effet de relief.

    

      Pour le choix des couleurs,  #7487BB pour la première plage de remplissage et #052885 pour la seconde plage.

 

      7. Créer un autre rectangle arrondi de dimension : 330px de largeur et 31px de hauteur avec la couleur de remplissage : #ffffff ; dans position : X= 36 et Y=119. 

       Pour celui-ci aussi, tirer les arrondies  jusqu’à la limite comme le premier rectangle.

       

     Veillez sur l’espace haut qui sépare le haut externe du rectangle blanc et   le haut interne du rectangle bleu ; au moins 4pixels.

      8. Sur la barre de menu faite : Commande>Création>Masque Vectoriel Auto et choisissez le dégradé Linéaire du haut en bas :

                                  Ajustez-les à volonté.

      9. Sur l’onglet Bibliothèque Commune choisissez  Objets 2D>Styles2D_09 et glissez-les au milieu du rectangle bleu et dans l’onglet Calques, placez-les entre le rectangle blanc et bleu.

      10. Sélectionner sur la fenêtre des calques le rectangle arrondi bleu pour ajouter les effets plus  illustratifs d’un bouton.

Sur la fenêtre de Propriétés,  sur l’onglet Filtres choisissez :

              a. Biseau et estampage>Biseau interne pour un réglage :

-          Forme bord biseauté : Lissé

-          Largeur : 34

-          Contraste : 40%

-          Angle : 137

                                       -     Paramètre prédéfini du bouton : En relief

 

                b. Ombre et  Lueur > Lueur interne pour un réglage : 

-          Largeur : 3

-          Opacité : 55%

-          Adoucissement : 4

-          Décalage : 0

-          Couleur : #000000

 
  

           c. Ombre et  Lueur >Ombre portée pour un réglage :  

-          Distance : 5

-          Opacité : 50%

-          Adoucissement : 4

-          Angle : 315

                                       -     Couleur : #000000 

 


Résultat 

 

   
11. Sélectionner sur la fenêtre des calques le Triangle de l’Objets 2D du Styles2D_09 situé, par ordre de calques, entre le calque du rectangle arrondi bleu et celui du blanc dégradé qui lui, est  toujours par ordre de calques, au premier plan.

Ensuite faite double-clique sur le triangle pour activer la possibilité de le modifié.

      NB : vous remarquerez un effet de surbrillance d’autres éléments de l’espace du travail mais pas sur   le triangle qui est plus claire que les deux rectangles. Donc, seul le calque du triangle qui est actif et prêt à être modifier. 

   

 

 

      Ensuite, attribuer l’effet dégradé avec les couleurs : #000033 et  #0033FF, faisant dans la  fenêtre PROPRIETES : Dans l’option  Catégorie de remplissage>Dégradé>Linéaire.

     

       Et enfin, remplissez les couleurs pour chaque extrémité des points de dégradation.

     

        Pour terminer, ajoutez de l’effet ombre portée:

-          Distance : 0

-          Opacité : 65%

-          Adoucissement : 4

-          Angle : 315

-          Couleur : #000000

          Pour valider, double-cliqué en dehors de la zone de travail. Et voilà votre bouton :)

          Relooker votre page facebook avec un style personnalisé :