Une image avec effet survolé dans WebAcappella

Créer une image avec effet survolé peut donner un effet dynamique et tendance à votre site internet réalisé avec WebAcappella. Aujourd’hui, pour ceux qui ne savent pas comment procéder, la team WebAcappella vous propose deux façons de réaliser cet effet.
Faites chauffer vos souris !

Avant : une image et un élément bouton ! Mais ça, c’était avant…

Si vous vouliez avoir un effet survolé sur vos images sans avoir recours à un éditeur comme Photoshop ou Paint ou Gimp ou même Pixlr Editor, vous aviez besoin de deux éléments dans WebAcappella : une image et un élément « bouton ».

Le principe est le suivant. Vous insérez une image sur votre page et dessus, vous disposez un élément « bouton » paramétré ainsi :

  • Donnez les mêmes dimensions à votre bouton qu’à votre image de sorte que le bouton recouvre totalement l’image.

  • Style du bouton : uniforme.

  • Coins : pas d’arrondi.

  • Pour l’aspect graphique « Normal », vous mettez de la transparence. N’oubliez pas de le faire aussi pour les bordures.

  • Pour l’aspect « Survolé », choisissez une couleur avec une opacité inférieure à 50 % ou moins selon l’effet désiré.

Vous n’avez plus qu’à définir un lien vers une page de votre site, une adresse email, un site internet, etc et le tour est joué. Bien évidemment, le bouton doit être placé au-dessus de l’image.

Maintenant, voyons la version « avancée ».

Après : une image avec survol avec Pixlr Editor

Même si vous n’êtes pas un pro du graphisme et que vous ne maîtrisez pas la suite de logiciels Adobe Creative, vous pouvez vous aussi créer une image avec effet survolé grâce à l’application gratuite en ligne « Pixlr Editor ». Voici un petit exemple de création autour d’une image « Demande de devis » que vous pouvez reproduire pas à pas.

ouvrirÉtape 1, sélectionnez votre photo et ouvrez-la dans Pixlr Editor en cliquant sur « Ouvrir une image à partir de l’ordinateur ». L’image s’affiche à l’écran, nous pouvons maintenant ajouter les effets qui donneront un effet survolé.

Dans « l’explorateur de calques » disposé à droite de votre écran, créez un nouveau calque grâce à l’icône située juste à côté de l’icône « Corbeille ».

Ensuite, à l’aide de la « boîte à outils » à gauche de votre écran, insérez une forme rectangulaire qui couvrira toute l’image. Avant de créer le rectangle, changez les paramètres visuels suivants grâce au « menu d’options » situé en haut :

image effet survol WebAcappella

  • Opacité : à votre goût.
  • Taille de la bordure : 0.

  • Couleur : mettez la couleur de votre choix.

Maintenant, glissez la souris pour créer une forme. Si vous n’êtes pas satisfait par exemple par le niveau d’opacité, créez un nouveau rectangle.

La deuxième étape va consister à mettre un petit texte court et une icône loupe sur l’image. Insérez d’abord une icône « loupe » que vous pouvez trouver par exemple sur un site comme iconfinder.com. Pour insérer l’image, allez dans le menu « Calque » puis faites « Ouvrir l’image en tant que calque ». Sélectionnez votre image puis cliquez sur « Ouvrir ».

Si vous souhaitez déplacer l’icône pour la mettre au centre par exemple, sélectionnez l’outil « déplacement » représenté par une flèche avec une petite croix. outil-deplacementSi vous souhaitez réduire la taille de l’icône, allez dans le menu « Editer » puis « Transformation libre ». Maintenez bien la touche « Shift » enfoncée pour faire une transformation homothétique, c’est à dire sans risquer d’écraser l’image dans un sens ou dans l’autre.

Désormais, nous pouvons mettre un texte comme par exemple « Demande de devis ». Prenez l’outil « Texte » dans la boîte à outils de Pixlr Editor puis cliquez sur l’image à l’endroit où vous souhaitez avoir votre texte. Tapez votre texte dans la fenêtre de configuration et choisissez une taille, une couleur et une police.

Attention, si vous rentrez toute une phrase dans cet élément « texte », l’aspect visuel s’appliquera à toute la phrase.

Une fois le texte écrit, nous allons déplacer le texte pour le positionner en alignement avec l’icône « loupe ». Reprenez pour cela l’outil « Déplacement ».

enregistrement

Si vous êtes satisfait du résultat, vous pouvez maintenant enregistrer l’image en allant dans le menu « Fichier » puis « Enregistrer ». Donnez un nom à l’image puis vérifiez que vous êtes sur un format JPEG et une qualité à 100 % pour une meilleure définition. La taille définitive de l’image s’affiche en bas de la fenêtre de propriétés.

Il ne vous reste plus qu’à aller dans WebAcappella pour insérer un élément « Image » avec les deux effets puis d’indiquer un lien hypertexte : lien vers une page, un email, etc.

Voici le résultat :

–  L’image « état normal » s’affichera comme suit sur le site :

etat normal image WebAcappella

– L’image « état survolé » (en passant la souris dessus) changera et s’affichera ainsi :

image effet survolé WebAcappella

Nous espérons que ce petit tuto vous aura aidé. Maintenant, faites chauffer vos souris et votre imagination pour reproduire cet effet sur votre site. À bientôt !

5 Comments

  1. benoit

    Très sympa mais en même temps des exemple pourrait montrer le résultat !!

  2. Andrée Robert

    Ça semble intéressant, mais j’aimerais avoir un exemple de ce que ça donne… un lien avec une page où l’effet est visible et utilisable. Je comprendrais mieux l’utilisation que je pourrais en faire.

    • Team WebAcappella

      Bonjour Andrée et Benoît ! Vous pouvez découvrir cet effet sur le site site d’une utilisatrice de WebAcappella, Valériane Leblond : http://www.valeriane-leblond.eu/ Sur sa page d’accueil en passant la souris sur les bulles vous verrez l’image changer ! 🙂

      • Andrée Robert

        Merci, c’est très réussi. J’aime.

      • Team WebAcappella

        Merci Andrée, ravis que ça vous plaise ! 🙂

Commentaires fermés