Creare Immagini Interattive per l'E-Learning

Ecco un modo semplice per trasformare una singola immagine in una immagine interattiva con

. Questo suggerimento è utile se utilizzate le immagini

interattive o se avete una grande illustrazione ma non c'è modo di romperla in pezzi separati. Questo è quello in cui mi sono imbattuto con questo recente demo che ho costruito per il post sul blog

.

Ho avuto una grande immagine di caratteri multipli, ma tutto quello che avevo era un singolo file .png. Avevo bisogno di un'immagine separata per ogni personaggio per creare la mia interazione. Nel mio esempio, ho voluto che le singole persone avessero un effetto hover. Dal momento che non sono riuscito a separarle in singole immagini, ho usato lo strumento di ritaglio per isolare i personaggi e creare un'interazione semplice.

Clicca qui per vedere il demo.

Per saperne di più seguite i passi del tutorial e-learning sotto e poi guardate il video per maggiori dettagli.

• Inserire l'immagine e duplicarla. Assicurarsi che il duplicato sia in cima all’originale e perfettamente allineato. Consiglio anche di nominare tutte le risorse che posizionate nella diapositiva. Mi piace bloccare l'immagine originale in modo che non la sposti accidentalmente fuori luogo.

• Creare uno stato per ogni personaggio. Aggiungete un nuovo stato per ogni personaggio sull'immagine duplicata. Poi ritagliate ogni stato per isolare il personaggio. Avrete voglia di fare lo stato visivamente diverso, in modo che quando si passa allo stato di un personaggio ci sia una sorta di contrasto con l'originale. Ad alcune persone piace aggiungere bagliori o ridimensionare il nuovo stato.

• Inserire un punto attivo su ogni personaggio. Dal momento che avete solo una singola immagine avrete bisogno di più punti attivi su di essa per simulare l'interazione e cambiare l'immagine di grandi dimensioni negli stati del personaggio isolato.

• Aggiungere un trigger per l'hotspot. Ogni hotspot innesca un cambiamento di stato verso un personaggio specifico. Aggiungete il primo, e quindi duplicatelo per velocizzare la produzione. Per questa demo, sto usando il passaggio del mouse, ma è possibile utilizzare qualsiasi azione appropriata per l'interazione.

Ora avete un immagine interattiva costruita da una singola immagine. Non c’è bisogno di rompere l'immagine in pezzi più piccoli o manipolare un vettore illustrato.

Ecco un video che mostra le fasi un po' più in dettaglio.

target="_blank" rel="noopener noreferrer">Clicca qui per vedere il tutorial e-learning

Questa è una grande tecnica quando siete bloccati utilizzando un'immagine che non è possibile modificare. E come si può vedere, non ci vuole molto per convertire l'immagine statica in qualcosa di un po' più interattivo.