Top Promos Apple Test Apple Antivirus Mac Dock Thunderbolt Sunology Comparatif iPhone Nettoyeur Mac

Articles

Mac

Une photo interactive avec Image Ready !

Par iDav - Mis à jour le

D'abord, la photo...



Chose primordiale, pour commencer, vous devez choisir le photo que vous allez utiliser. Il vaut mieux quelle ne soit pas trop grande, pour alléger votre site, mais pensez tout de même à ce que la qualité soit correcte pour une lecture plus agréable.

Une photo interactive avec Image Ready !


Petite préparation avec Photoshop :



Nous allons commencer par préparer l'image avec Photoshop. Avec mon exemple, il sera possible "d'allumer" l'ecran de l'ordinateur, que nous allons donc commencer par éteindre, "d'éclairer" l'affiche de Warcraft III sur le mur, et enfin, de voir clignoter du texte, sur la barre métallique derrière l'iMac.

Tout d'abord, créez un nouveau calque, et peignez l'écran au pinceau noir sur ce calque. Puis sélectionnez l'intégralité des pixels de ce calque (Pomme + Clic sur le calque) et réalisez un petit dégradé du noir au gris pour rendre le tout plus réaliste.

En ce qui concerne "l'éclairage" de l'affiche, commencez par sélectionner grossièrement avec le rectangle de sélection (mais en plusieurs fois) le poster de Warcraft III. Puis copiez votre sélection. Créer un nouveau calque, et collez (le tout sans déselectionner, pour que l a copie sois bien au bon endroit). Puis faites un "contour progressif" (dans le menu "Sélection") d'environ 10 pixels, faites "intervertir la sélection" (Pomme + I), et enfin, supprimer plusieurs fois la sélection afin d'obtenir sur votre calque juste l'affiche avec les bords qui s'estompent progressivement.
Ensuite, appliquer un éclairage, centré sur l'affiche (Filtres > Rendu > Eclairages).

Passons à Image Ready !



Nous pouvons donc maintenant passer à Image Ready...
Au préalable, nous allons créer une bande blanche à droite de l'image pour y faire apparaitre des infos lors du survol de la souris. Pour cela, commencer par agrandir la zone de travail, puis créez cette bande blanche sur un nouveau calque.

Ensuite, utilisez le "cuteur" pour délimiter les 2 zones actives : l'écran, et l'affiche... (Comme ci-dessous)

Une photo interactive avec Image Ready !


Puis sélectionner la zone de l'écran (avec l'outil de sélection des tranches, au même endroit que le cutteur), et rendez vous dans l'onglet "Rollover" du menu du bas, et créez un nouvel état de Rollover en cliquant sur le petit icone en forme de page cornée juste en dessous. L'état "Over" est crée. Après avoir cliqué sur l'état pour le sélectionner, désactivez le claque où vous avez peint l'écran en noir, en cliquant sur le petit oeil à côté de celui-ci. Vous pouvez également insérer du texte sur la bande blanche de manière à décrir ce que survole la souris.

Faites de même, avec le poster, mais cette fois, le calque de lumière doit être inactif, puis activé quand l'état est "Over", donc au survol de la souris.

Et on ajoute une petite annimation à tout ca ?



Il ne reste plus qu'à ajouter la petite annimation dont je vous ai parlé au début. Commencez par taper le texte, puis placez le sur la barre métallique. Cliquez sur l'onglet "Annimation" du menu du bas. Descendez l'opactité du calque texte aux environ de 30%. Puis cliquez sur l'icone "feuille cornée" en dessous, et remontez l'opacité à 100%. Enfin, créez une troisième étape, et redescendez l'opacité à 30%. Il ne vous reste plus qu'a réaliser un motion tween pour adoucir l'annimation.

Pour cela, sélectionnez d'abord la première étape, puis cliquez sur la petite icone avec les cercles qui s'estompent. Choisissez le "tween" avec l'image suivante, en choisissant 5 étapes. puis faites de même entre l'étape 100%, et la 2ème étape 30%. Enfin, supprimer la dernière étape, pour obtenir un bon enchainement. Il ne vous reste plus qu'a vérifier que l'annimation est réglée en boucle (avec le petit menu déroulant en dessous.

On enregistre, et c'est terminé !



Une dernière chose à faire : enregistrer ! Choisissez enregistrer "Optimized" (je suis vraiment désolé, mais je ne connais pas l'appelation en Francais pour cette fonction, puisque j'utilise la version américaine d'Image Ready. Le premier lecteur qui me trouve ca à son nom dans l'article ;-)), et choisissez "Images + HTML".

Voilà, vous avez fait du bon travail, si vous voulez voir mon resultat, cliquez ici...

Comme vous l'aurez compris, ceci n'était qu'un exemple, et vous pouvez laissez libre cour à votre imagination afin de créer vos propres images interactives. Si vous rencontrez un problème, n'hésitez pas à me poser la question (par mail, où simplement en réagissant à l'article).

En ce qui concerne le nom en français pour "Save optimized", je suis désolé, mais Parano a été trop rapide, et je vous propose donc de s'incliner devant ce magnifique génie... (Qu'est-ce qui faut pas dire :-)) !

La Fonction s'appelle donc : "Enregistrer une copie optimisée"

Un peu de fun sur le bureau ? Le clavier Pop Keys de Logitech en vente flash à -48% !

Un peu de fun sur le bureau ? Le clavier Pop Keys de Logitech en vente flash à -48% !

Marre des claviers ternes de papys ? Envie d'un peu de fun sur le bureau ? Une vente flash permet aujourd'hui de s'offrir le clavier Pop Keys de...

UPDF AI: le meilleur assistant PDF IA ! Discutez avec n'importe quel PDF !

UPDF AI: le meilleur assistant PDF IA ! Discutez avec n'importe quel PDF !

Le PDF s'est imposé au fil du temps comme un moyen de partager facilement des contenus textes, imagés, tout en conservant une mise en page...

Le MacBook Air M1 de retour à 799€ ! Son prix le plus bas !

Le MacBook Air M1 de retour à 799€ ! Son prix le plus bas !

Si vous cherchez un Mac neuf, compact, capable de supporter sans sourciller les tâches du quotidien et offrant une bonne autonomie, le tout en...

Le dernier Pixelmator joue avec les masques !

Le dernier Pixelmator joue avec les masques !

La Pixelmator Team ne fait pas que se concentrer sur Photomator et ne lâche pas ses applications historiques comme Pixelmator Pro. Cette dernière...

Le MacBook Air M3 en promo ! Jusqu'à -210€ sur la version 16/512Go !

Le MacBook Air M3 en promo ! Jusqu'à -210€ sur la version 16/512Go !

Les MacBook Air M3 15 pouces ont été lancés en mars dernier et profitent désormais de premières promotions...

Quelles nouveautés pour macOS 15 ?

Quelles nouveautés pour macOS 15 ?

Alors que la WWDC approche à grands pas (il ne reste que deux bonnes semaines), les fuites comme les espoirs se multiplient concernant les prochains...

Affinity 2.5 permet de générer des QR Codes !

Affinity 2.5 permet de générer des QR Codes !

Ce soir, Affinity arrive en version 2.5 avec quelques nouveaux outils, y compris un générateur de code QR, des améliorations au niiveau de...

Apple veut vraiment plier les Mac M5 !

Apple veut vraiment plier les Mac M5 !

Parmi les grands marronniers de ses dernières années, beaucoup se demandent si Apple sortira un produit pliable : iPhone, iPad ou Mac ?...

Commentaires

Connectez-vous/créez un compte pour réagir à cet article !
Oops, vous n'êtes pas connecté

Pour évaluer un commentaire sur Mac4Ever, vous devez être connecté avec votre compte utilisateur.

8 commentaires
Connectez-vous/créez un compte pour réagir à cet article !
Oops, vous n'êtes pas connecté

Pour évaluer un commentaire sur Mac4Ever, vous devez être connecté avec votre compte utilisateur.