Submodule 12.1: Gimp for the WEB

Image map

Image map is a process by which we can create clickable areas in an image and link them to different destinations.

Creation of an image map

Using Gimp we will create a separate .map file.

Creation of an HTML file

We will take the .map file and use it to create an HTML file.

Pay attention to whether Gimp has automatically exported the correct hyperlinks to the .map file!!

If not, correct them in the HTML file.

Let's preview the HTML file:

You can find the files of the video at: courseGimp>imagemap

Animated Gifs

Animated gif (Graphics Interchange Format), is a set of images that have the same dimensions and appear in a specific order.

Some important steps when creating animated gif are:

1. Images should be opened as Layers.
2. Images should be exported as .gif
3. When exporting an image, from the options we should check the "As animation" box, set the time and chose the "One frame per layer". The reason for the latest one is that by that we allow only one layer to be visible each time.

Let's create an animated gif

Let's preview the file:

This file format can also be used to create small animations.

You can find the file of the video at: courseGimp>animated.gif

Exercise

Exercise

Now it is time to do your own creation! You can use any of the available images or download something of your choice. 

The goal of this exercise is to create an animated gif or an image map. 

Save the file as exersice12.1.xcf in the folder "courseGimp>exercises"

You will use this in submodule 12.3!