Submodule 11.3: Layers and export of image

Multiple Layers on a common background

To import multiple layers we start by opening an image that will be the background image.

We open an image (freeImages/desert-2340326_1920.jpg) of any file format.

Open as layer. Set Layer boundary size. 

We open as layer the image xsfFiles/girl_01.xcf.

Note that the base image has a height of 1080px whereas the layer is 1280px. So we start by adjusting the layer height to be the same with that of the base image. Next, we will change the width of the layer to make it smaller. This step is required if we want to use the Align tool.

We work on Layer> Layer Boundary Size

After completing the above, we are able to use the Align tool to align the layer on the base image. 

Adding a new layer

We will add a new layer (xsfFiles/birds.xcf) and we will see how we can duplicate it. We will see the Flip tool, which provides the ability to flip layers or selections both horizontally and vertically, and the Scale tool.

The third  layer

Rotate tool

Group-link the layers.

Here we will also see that the order of the images-layers defines how they will appear on the screen. This means that an image that is higher in order will appear forward an image which is in a lower position. In the video, we use this function to "hide" the birds behind the girl.

We will add a new layer (xsfFiles/cyclist.xcf).  The Perspective Tool is used to change the “perspective” of the selected area/ active layer content.

You can find the file of the video at: courseGimp>xcfFiles>image70.xcf

Multiple Layers side by side

We create a new file (640X320) and we open the images that we want to add in the new file as layers.

First layer (freeImages/chocolate-2202123_1920.jpg)

We add the transparency property and we make the image transparent. Also, we use the "scale layer" to change the width to 320px.

Second layer (freeImages/chocolate-567234_1920.jpg)

We repeat the same procedure that we did for "First layer".

Third layer (freeImages/ballon.png)

This layer is already transparent, so we change only the width.

Final settings on layers

Here we see an example of the usage of the "autocrop" property, and "align" and "move" tools on the layers. 

Final settings for the background image (transparency, crop).

You can find the file of the video at: courseGimp>xcfFiles>image80.xcf

Exporting images to WEB

In WEB we mainly use the .png, the .jpg and the .gif image formats.

The .jpg format

The usual extensions of JPEG files are .jpg, .JPG, or . JPEG. This image format is widely used because it has the advantage of compressing the images more effectively than any other format, while it achieves minimum loss of quality. However, it does not support transparency and multiple layers. This means that when using this format, we have to remove the alpha channel by flattening the image. 

A very good use of jpeg format is in the case of a photograph with multiple colors. It is important to find the proper balance between quality and compression.

The.png format

The .png format is ideal for images that do not contain many colors. Good examples are buttons, icons, screenshots etc. This type of format supports transparency. When using this type of format we also have to flatten the image, however, we do not lose the transparency. 

The .gif format

This type of image format is ideal to create animations, as we will see in the next chapter. However, it does not support some basic properties such as print resolution. Thus, if you need these properties you may choose a different format (e.g. png).

You can find the file of the video at: courseGimp>xcfFiles>image700.gif, image700.jpg, image700.png

Flattening function is to combine all layers into a single background layer. You should only use it after you are sure that you have your satisfied result since after using flattening you are no longer able to edit the layers.

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 and export an image that will replace the chocolatethings.jpg in the index.html of your site!

Save the file as exersice11.3.xcf in the folder "courseGimp>exercises"