Dossiers

Une photo interactive avec Image Ready !

Par iDav, 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"

Thermostat Intelligent V3+ (filaire ou sans fil)

Thermostat Intelligent V3+ (filaire ou sans fil)

Les Thermostats Intelligents de tado° sont là pour vous faire économiser de l'argent et de l'énergie. Peu importe le fabricant de votre système de chauffage. Si vous n'êtes pas convaincu dans les 12 premiers mois, vous pouvez vous faire rembourser. C'est garanti.

Dernières publications

Une nouvelle Tesla Model 3 pour fin 2023 "Project Highland"

Une nouvelle Tesla Model 3 pour fin 2023 "Project Highland"

Présentée en 2016 et en vente depuis 2017 aux USA (2019 en France), la Tesla Model 3 affiche déjà une carrière bien entamée, et son design aurait presque un peu vieilli.
1
Elon Musk interpelle Tim Cook sur la liberté d'expression, Disney nie tout rachat par Apple

Elon Musk interpelle Tim Cook sur la liberté d'expression, Disney nie tout rachat par Apple

12
 Apple teste à nouveau  les mises à jour de sécurité importantes sur la bêta d'iOS 16.2

Apple teste à nouveau les mises à jour de sécurité importantes sur la bêta d'iOS 16.2

1
Il retrouve son véhicule volé grâce à ses AirPods

Il retrouve son véhicule volé grâce à ses AirPods

8
 La dernière mise à jour de Chrome comble une importante faille de sécurité

La dernière mise à jour de Chrome comble une importante faille de sécurité

3
Cyber Monday : le MacBook Air M1 à 949€, son prix le plus bas !

Cyber Monday : le MacBook Air M1 à 949€, son prix le plus bas !

Une promotion du Cyber Monday permet aujourd'hui de s'offrir le MacBook Air M1 à son tarif le plus bas.

Apple Watch Ultra : l'app Oceanic+ (ordinateur de plongée) est disponible !

Apple Watch Ultra : l'app Oceanic+ (ordinateur de plongée) est disponible !

En ce dernier lundi de novembre, Apple déploie -comme prévu- son app Oceanic+ dédiée à l'Apple Watch Ultra .
4
Comment bloquer un numéro ou un contact sur iPhone

Comment bloquer un numéro ou un contact sur iPhone

7
Le casque VR Meta Quest 2 + 2 jeux (Beat Saber et Resident Evil 4) à 399€ (-11%)

Le casque VR Meta Quest 2 + 2 jeux (Beat Saber et Resident Evil 4) à 399€ (-11%)

Twitter pourrait utiliser le même protocole que Signal pour chiffrer ses messages privés

Twitter pourrait utiliser le même protocole que Signal pour chiffrer ses messages privés

iPhone 14 : Apple censure ses pubs pour éviter des accusations discriminatoires

iPhone 14 : Apple censure ses pubs pour éviter des accusations discriminatoires

15
Cyber Monday : le casque Bose QC 45 à 267€ (-82€), version SE à 199€, son meilleur prix

Cyber Monday : le casque Bose QC 45 à 267€ (-82€), version SE à 199€, son meilleur prix

Verra-t-on un jour des MacBook Pro M2 Pro/M2 Max (3nm en approche) ?

Verra-t-on un jour des MacBook Pro M2 Pro/M2 Max (3nm en approche) ?

Avec une puce M2 chauffant plus et une gravure en 3 nm qui approche à grands pas, les puces qui équiperont les futurs MacBook Pro ne sont peut-être pas celles que l'on croit.
6
iPhone / iPad  : comment avoir une meilleure batterie ?

iPhone / iPad  : comment avoir une meilleure batterie ?

Quelques sont les options à activer (ou au contraire à désactiver) afin de gagner quelques précieuses minutes d'autonomie ?
7
Cyber Monday : les offres Apple encore disponible, MacBook Air dès 998€,  MacBook Pro dès 1999€

Cyber Monday : les offres Apple encore disponible, MacBook Air dès 998€, MacBook Pro dès 1999€

Le Cyber Monday marque la fin des promotions du Black Friday mais permet tout de même de profiter de certaines offres intéressantes, particulièrement sur plusieurs produits de la gamme Apple.
Intel lance les puces avec achats intégrés pour activer des fonctionnalités (bientôt chez Apple ?)

Intel lance les puces avec achats intégrés pour activer des fonctionnalités (bientôt chez Apple ?)

Intel va proposer de débloquer certaines fonctionnalités de sa prochaine gamme de Xeon en passant à la caisse, et cela pourrait donner des idées à Cupertino.
8

iPhone : Foxconn verse jusqu'à 1800€ de bonus supplémentaires pour sauver la production

iPhone : Foxconn verse jusqu'à 1800€ de bonus supplémentaires pour sauver la production

6
Gran Turismo pourrait débarquer sur PC (et pourquoi pas sur Mac ?)

Gran Turismo pourrait débarquer sur PC (et pourquoi pas sur Mac ?)

Le créateur de la franchise Gran Turismo a récemment évoqué la possibilité d'un portage de la série sur PC.
9
Apple TV 4K dès 139€, Mac Studio dès 2069€, MacBook Air M1 dès 959€

Apple TV 4K dès 139€, Mac Studio dès 2069€, MacBook Air M1 dès 959€

EcoTech : notre série vidéos dédiées à l'auto-consommation, panneaux solaires, et batteries !

EcoTech : notre série vidéos dédiées à l'auto-consommation, panneaux solaires, et batteries !

Dans un contexte anxiogène autour de l'énergie, c'est logiquement que l'on va également s'intéresser à l'auto-consommation, aux panneaux solaires, aux batteries nomades, à la gestion d'électricité
31

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.

Suivez-nous !