Médiaforma

All posts tagged effet

Voici l’effet que nous cherchons à obtenir :

Photofiltre - Un effet néon 1

Cet effet utilise la police Neon, librement téléchargeable sur le site http://www.dafont.com/fr/. Si nécessaire, reportez-vous à la rubrique intitulée “Ajouter des polices à Windows” pour savoir comment l’installer sur votre ordinateur.

Commencez par créer une nouvelle image de 600 points sur 300 en utilisant un fond noir. Cliquez sur l’icône Texte. La boîte de dialogue Texte s’affiche. Choisissez la police Neon. Préférez un corps élevé (50 points par exemple). Tapez quelques mots dans la zone Saisie et cliquez sur Transformer en sélection.

Photofiltre - Un effet néon 2

Le texte est inséré dans l’image en tant que sélection. Déroulez le menu Filtre, pointez Esthétique et cliquez sur Contour progressif. La boîte de dialogue Contour progressif s’affiche. Poussez le curseur Opacité à 100%. Choisissez une couleur bleu électrique et une épaisseur égale à 6. Optez pour un style Flou et validez.

Photofiltre - Un effet néon 3

Pour terminer, cliquez du bouton droit sur la sélection et choisissez Contour et remplissage dans le menu. La boîte de dialogue Contour et remplissage s’affiche. Cochez la case Contour. Choisissez une couleur blanche dans la liste déroulante Couleur et une épaisseur égale à 1 dans la zone de texte Largeur.

Photofiltre - Un effet néon 4

Validez en cliquant sur OK, puis appuyez sur la touche Echap du clavier pour cacher la marque de sélection. Le résultat est bien conforme à ce qui était attendu :


Voici l’effet recherché :

Photofiltre - Dégradé de couleurs sur un texte 1

Pour arriver à ce résultat, vous appliquerez un filtre de couleur dégradé au texte défini en tant que sélection.

Créez une nouvelle image à fond blanc de 600 points sur 300. Cliquez sur l’icône Texte dans la barre d’outils. La boîte de dialogue Texte s’affiche. Choisissez une police épaisse, comme Arial Black par exemple et un corps de caractères élevé. Ici, nous choisissons un corps 50.

Photofiltre - Dégradé de couleurs sur un texte 2

Cliquez sur Transformer en sélection. Le texte est inséré sur l’image en tant que sélection.

Cliquez du bouton droit sur la sélection et choisissez Contour et remplissage dans le menu. Cochez la case Contour, choisissez une largeur égale à 1 et validez en cliquant sur OK.

Déroulez le menu Filtre, pointez l’entrée Couleur et cliquez sur Dégradé. La boîte de dialogue Dégradé s’affiche. Cochez la case Aperçu direct afin de voir l’impact de vos réglages sur l’image. Sélectionnez la couleur de départ, la couleur d’arrivée, l’opacité du dégradé et validez en cliquant sur OK.

Photofiltre - Dégradé de couleurs sur un texte 3

Appuyez sur la touche Echap du clavier pour cacher la marque de sélection. L’effet recherché est bien celui qui est obtenu.


Voici l’effet recherché :

Pour arriver à ce résultat, créez une nouvelle image avec fond blanc d’environ 600 pixels sur 300. Cliquez sur l’icône Texte dans la barre d’outils. La boîte de dialogue Texte s’affiche. Choisissez une police, une taille de caractères, et éventuellement un ou plusieurs attributs de texte. Tapez quelques lettres dans la zone Saisie et cliquez sur Transformer en sélection.

Le texte est inséré dans l’image sous la forme d’une sélection. Cliquez du bouton droit sur ce texte et choisissez Contour et remplissage dans le menu. La boîte de dialogue Contour et remplissage s’affiche. Cochez les cases Remplir et Aperçu direct. Choisissez une couleur claire dans la liste Couleur et validez en cliquant sur OK.

Lancez la commande Esthétique / Contour progressif dans le menu Filtre. La boîte de dialogue Contour progressif s’affiche.

Cochez la case Aperçu direct. Choisissez une épaisseur adaptée à votre texte. Ici, une épaisseur égale à 6 produit l’effet recherché. Choisissez une couleur dans la liste déroulante Couleur puis cliquez sur OK pour obtenir l’effet recherché.

Appuyez enfin sur la touche Echap du clavier pour désélectionner le texte. Le résultat est bien celui qui était annoncé au début de la rubrique.


Voici l’effet recherché :

Photofiltre - Un texte avec un contour coloré 1

Pour arriver à ce résultat, créez une nouvelle image avec fond blanc d’environ 600 pixels sur 300. Cliquez sur l’icône Texte dans la barre d’outils. La boîte de dialogue Texte s’affiche. Choisissez une police, une taille de caractères, et éventuellement un ou plusieurs attributs de texte. Tapez quelques lettres dans la zone Saisie et cliquez sur Transformer en sélection.

Photofiltre - Un texte avec un contour coloré 2

Le texte est inséré dans l’image sous la forme d’une sélection. Cliquez du bouton droit sur ce texte et choisissez Contour et remplissage dans le menu.

Photofiltre - Un texte avec un contour coloré 3

La boîte de dialogue Contour et remplissage s’affiche. Cochez les cases Contour et Aperçu direct. Choisissez la couleur et l’épaisseur du contour et validez en cliquant sur le bouton OK.

Photofiltre - Un texte avec un contour coloré 4

Appuyez enfin sur la touche Echap du clavier pour désélectionner le texte. Le résultat est bien celui qui était annoncé au début de la rubrique.

Photofiltre - Un texte avec un contour coloré 5


PhotoFiltre permet d’appliquer de nombreux effets sur du texte. Dans cette rubrique, vous allez découvrir comment ajouter un halo autour d’un texte en utilisant un collage spécial de masque.

Ouvrez l’image sur laquelle vous voulez insérer le texte et faites quelques essais pour choisir une police et une taille de caractères. Ici, nous allons utiliser la police Arial. Les caractères auront une taille 35 et seront affichés en gras.

Photofiltre - Afficher un halo sur un texte 1

Supprimez le calque de texte. Pour cela, cliquez du bouton droit sur la vignette de ce calque et sélectionnez Supprimer dans le menu contextuel.

Lancez la commande Taille de l’image dans le menu Image pour avoir une idée des dimensions de l’image. Définissez alors une nouvelle image de dimensions supérieure à celles du texte. Ici, l’image fait 578 pixels sur 382. Nous définissons une image de 560 pixels sur 100. L’arrière-plan sera de couleur blanche.

Photofiltre - Afficher un halo sur un texte 2

Insérez le texte désiré dans cette nouvelle image en lui donnant la couleur noire, puis fusionnez le calque 1 et l’arrière-plan. Pour cela, cliquez du bouton droit sur la vignette Calque 1 et sélectionnez Fusionner avec le calque inférieur dans le menu.

Lancez la commande Effet d’optique / Flou gaussien dans le menu Filtre et choisissez un rayon égal à 6.

Photofiltre - Afficher un halo sur un texte 3

Vous allez maintenant évider ce texte en y superposant le même texte de couleur blanche. Cliquez sur l’icône Texte. Le texte précédemment entré y est encore mémorisé. Choisissez une couleur blanche et validez en cliquant sur OK. L’effet de halo apparaît dans l’image. Comme auparavant, fusionnez le calque et l’arrière-plan. Pour cela, cliquez du bouton droit sur la vignette Calque 1 et sélectionnez Fusionner avec le calque inférieur dans le menu.

Photofiltre - Afficher un halo sur un texte 4

Pour que l’effet de halo soit un peu plus marqué, vous allez renforcer les tons noirs. Si la barre des filtres n’est pas affichée, lancez la commande Barre des filtres dans le menu Affichage. Cliquez alors à trois ou quatre reprises sur l’icône Correction gamma (-).

Vous allez maintenant insérer l’image qui contient le texte dans l’image cible en utilisant un collage spécial de masque. Lancez la commande Copier dans le menu Edition ou appuyez sur Ctrl + C.

Donnez le focus à l’image cible. Choisissez une couleur pour le halo. Pour cela, vous devez choisir une couleur d’avant-plan. Lancez la commande Collage spécial / Masque dans le menu Edition. Le halo est inséré dans un nouveau calque. Vous pouvez le déplacer comme bon vous semble par un simple glisser-déposer.

Photofiltre - Afficher un halo sur un texte 5


Utilisation de jQuery UI – Exercice

En consultant le code du fichier c:\jquery\jqueryUI\development-bundle\demos\effect\default.html, définissez un document qui contient une image et trois boutons nommés Explode, Pulsate et Shake.

Lorsque l’utilisateur clique sur un bouton, appliquez l’effet correspondant à l’image.

 

 

 

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery UI - Effets sur une image</title>
  </head>
  <body>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="jquery.js"></script>
    <script src="jquery.ui.effect.js"></script>
    <script src="jquery.ui.effect-explode.js"></script>
    <script src="jquery.ui.effect-pulsate.js"></script>
    <script src="jquery.ui.effect-shake.js"></script>
    <script>
        $(function() {
        $('#explode').on('click',function(){
          $('#cheval').effect('explode',{},500,function(){
            $( "#cheval" ).removeAttr( "style" ).hide().fadeIn();
          });
        });
        $('#pulsate').on('click',function(){
          $('#cheval').effect('pulsate',{},500,function(){
            $( "#cheval" ).removeAttr( "style" ).hide().fadeIn();
          });
        });
        $('#shake').on('click',function(){
          $('#cheval').effect('shake',{},500,function(){
            $( "#cheval" ).removeAttr( "style" ).hide().fadeIn();
          });
        });
      });
    </script>
    <h2>Choisissez un effet</h2>
    <button id="explode">Explode</button>
    <button id="pulsate">Pulsate</button>
    <button id="shake">Shake</button><br>
    <img src="cheval.jpg" id="cheval">
  </body>
</html>

 


Cliquez sur l’image pour la sélectionner. Si nécessaire, basculez sur l’onglet FORMAT dans le ruban, puis développez la galerie de styles d’images en cliquant sur l’icône Autres.

Pointez les effets proposés dans la galerie pour les prévisualiser dans le document, puis cliquez sur un effet pour l’appliquer à l’image.

Si nécessaire, vous pouvez appliquer des effets complémentaires en utilisant le groupe Ajuster. Consultez les sections suivantes pour savoir comment les utiliser.