How To Create Your Own Interactive Images

5 minutes
Written by: Aili
Share on whatsapp
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin
Share on whatsapp
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Index

Hi! It’s great to have you here, as always. Today we’re going to show you how to turn a simple picture into an interactive image without HTML.

We already know that an image is worth a thousand words, but sometimes we have to deal with pictures full of text or, on some occasions, with too little text. Here at Genially we’d like to suggest something in between: an image worth a thousand words along with some information that’s both interesting and attractive.

Static imagesInteractive images
They have one layer of info, the one you seeThey have multiple layers of info
They are flathey are enriched with other kinds of content like videos, maps, graphics, etc.
They’re illustrativeThey’re useful
You communicate a messageYou tell a story
Consumption goes in one-directionYou need to interact with the image to consume all the content
They are passiveThey encourage exploration and memorization

What do we need to create our interactive image

First, we need to insert an image in Genially.  One easy way is to upload an image as a background (select the “Background” tab, choose “Upload an image” and then after selecting your image from your computer, “Use this image as your background”).

Then, add as many pins as you want or need using the “Interactivity” tab where you can find to click and drag where you want.  There are pins for all sorts of styles and needs, so look through the different options to find the ones that go best with your image.  You can add all sorts of info to your pins, including: video, pictures, links to other web pages, GIFs, social media timelines, and almost anything else you can think of.  Finally, we can add some animation and interactivity effects to capture the attention and interest of our audience.

Imagen interactive examples

What we’re going to show you in a few seconds is a couple of examples that could be inspirational whenever you decide to create your own interactive image. These kinds of images where pins, windows, and tooltips allow users to discover information for themselves can be used for educationbusiness, communication, design, advertising or anything else that you want.  You’ll get results as amazing as these:

Informative Poster

Generate informative or explanatory contents with this option. Let the image tell the story, or highlight some curiosity or detail of it.

Educational Poster

This is one of the best ways to learn something, because you’re memorizing information while looking for it and creating the image. And once you’re done, it’s an amazing method to study because you’ll have to remember the graphic contents.

Interactive Advertisement

You can use it to draw attention to a product, and you can also link it to the actual site where it can be bought.

Publicity Poster

A single picture and one great sentence are enough to create a convincing advertising poster.

Eye-capturing Image

We can’t know everything, but we can always keep learning new things. So, why not creating a poster to learn something different?

Interactive Catalogue

And last but not least, you can also create your own interactive catalogue with a brief description in the tag as a plus.  You can include information about each article of clothing like where to buy it and the kind of fabric it’s made of.

Create your dynamic images with Genially

In this example we’ll show you how to turn a famous selfie into an awesome interactive image

  1. Once in Genially, click on “Create Genially” and choose “Interactive Image”.
  2. Next, click on “Create Interactive Image”. You can choose your image from your own computer or from a URL.
  3. Here comes the fun part!  Once in the editor, transforming a static image into an awesome interactive one is really simple.
  4. Let’s start adding interactive elements. To add them, we just go to the interactive elements menu on the left vertical toolbar and drag them over to the canvas.

The buttons are made up of icons and animated shapes that help signal an action.  You can modify their size and color, as you can see in this example where we’ve added a button, made it larger, and colored it yellow.

To do this, select the button and choose the color from the upper horizontal toolbar.

How To Create Your Own Interactive Images
  1. We’re going to add interactivity to our button.  Click on the hand icon that appears over the button or select the button and click on the interactivity menu on the right.
How To Create Your Own Interactive Images
  1. Let’s assign a tooltip to our interactive button.
  2. We like using tooltips with interactive buttons to add content with little text.  When you select “Tooltip”, the editor where we can insert our content will open. In the example, we’ve directly copied and pasted content from Wikipedia. You can add text, images, gifs and more to your interactive image.
  3. Next, we’ll add another button, this time with a window instead of a tooltip to insert the video of the moment in which the famous selfie was taken. Repeat the previous steps, drag the button you choose from the interactive elements menu.  Here we’ve made the button larger and changed its color to red.
How To Create Your Own Interactive Images
  1. In the interactivity menu of our new button, select “window.” Windows allow us to have more content and enrich our creations with PDFs, videos, text… anything we want to add. In this example, it’s the video of the selfie-taking moment.
  2. To add a video, we’ll just go to youtube, copy the url of the video that appears in the “share” option, and paste it in the window.  Almost magic! Click on “save” to make your window start working.
How To Create Your Own Interactive Images
  1. With the invisible area selected, access the interactivity menu and select “tooltip”. Here, we’ll add an image with three Oscars in a tooltip that will appear when the viewer puts the cursor over Ellen DeGeneres’s face. You can also load your own images in the editor to appear in the invisible area.
  2. Click on the “insert image” icon, and select the image from your device. 

Our interactive image is ready!

Tips

Share your creation

It’s the moment to share your creation using the share share icon button on the upper toolbar

Genially allows four main ways of sharing:

  • With a link
  • Inserted in your blog or web
  • Sent to email
  • Shared on social media

These options allow you to preserve your creation’s originality, animation and interactivity.

Types of Interactivity

You can make any resource (text, image, icon, photo, etc.) interactive. Just select an object and click on the icon that appears on the right.  There are 4 types of interactivity:

  • Tooltips: Tooltips are used to show small amounts of content and they appear when the cursor passes over the element; they are deactivated when the cursor is moved to another area. We recommend texts of less than 300 characters in the tooltips for optimal viewing.
  • Windows: Windows are appropriate for filling with more content than tooltips.  Even so, avoid large amounts of text in windows and tooltips.  They are activated when the viewer clicks on the element and are deactivated when the window is closed by clicking on the x.
  • Go to page: this feature allows you to navigate between pages through different elements. It’s a feature made especially for use in guides, microsites, games, etc.
  • Links. You also have the opportunity to link your creation with an external link.

Now you’re ready to create interactive images that leave your audience stunned.  Start bringing your content to life!

Aili
Aili
Edtech and music enthusiast
Recommended Posts

Do you want to stay up to date on what’s new in the Genially universe?

Leave a Reply

Your email address will not be published. Required fields are marked *