Follow us:

 

Skip Navigation LinksGimpGifxray

New Tutorials >> Gimp Tutorials >> Gimp GIF Animation

Gimp Animated GIF Tutorial – X-ray Scanner

This tutorial is a Gimp version of the Photoshop X-ray Animation. It just shows you anything you can do in Photoshop, you can do in good old free Gimp.

Create an animation in the Animation Playback window. Turn it into an animated GIF file. Watch a video of a cooler GIF animation with Gimp.

You will use the same face and skull images for this project. You will use the Rescale tool, Iwarp, Blur, and Layer Masking.

The Animation Playback window will preview the animation. Then I show how to make an animated GIF for a web page like the one I have on this page using just a few lines of HTML code.

 

Watch the video:
 

 

Download the files:

GimpXrayStart

GimpXrayAnimation_1

GimpXrayAnimation_2

coolgif

 

Contents:

Start the Project

Resize the Skull

Add a Layer Mask

Create an Animation of the X-Ray in Gimp

Create an animated GIF for HTML Web Page

Comments

 

Start the project

Open the GimpXrayStart.xcf project.

  

 

Bring the Opacity of the skull layer to about 50%. You can see the skull is not matching the contours of the face. The skull image can be vertically and horizontally resized, then with IWarp the edges can be stretched until they match the edges of the face.

    

 

Resize the Skull

Go to the Scale  tool and click anywhere on the skull image.

     

 

Vertically resize and move  the skull layer. Do this as many times as necessary to match the height of the face (In Scale mode the skull layer hides the face).

When done, go to Layer / Layer to Image Size on the menu. Then Bucket fill   the empty space with black. This is all on the skull layer remember.

   

 

Now to horizontally resize the lower skull to match the bottom face. While still on the skull layer, make a selection of the lower skull. Then Scale to the right and left. Use a  fuzzy brush with a black foreground to erase the marks on the cheekbones. Go to Filters / Blur to blend any marks.

  

 

From the menu go to Filters / Distorts / IWarp. Click and drag, to pull or push, the inner and outer edges. After one edit, click Save, then check the result in the image. Go back and keep making edits like this until all edges match the face background.

   


 

Add a Layer Mask

Continue from above. On the skull layer, put Opacity back to 100%.

 

 

Add a layer mask by going to Layer / Mask / Add Layer Mask on the menu. Choose Black. Click the skull layer and change the layer mode to Multiply.

  

 

Click the Layer mask to edit it. Make a rectangular selection over the face. Change the foreground color to white. Use the Bucket Fill tool to fill the selection with white. This makes the white area on the mask fully transparent so you can see through to the skull.

 

 

In the Toolbox, click the Move tool. Move = Layer. Choose Pick a layer or guide. In the Layers box, click the Mask for the skull layer.

  

 

In the image click the transparent area. Then you can use the up / down arrows on your keyboard to move the transparent area vertically. Hold Shift to move faster.

 

 

Create an Animation of the X-Ray in Gimp

Continue from above. We will use the two layers while moving the transparent mask down to create each frame of the animation.

  

 

Open a new Gimp project file. This will contain just the copied frames for the animation.

In your current project, start the transparent area at the top of the head. Right click and Flatten Image. On the menu, go to Edit / Copy. Then Undo (Ctrl+Z) to get back to the skull and face layers.

     

 

Go to your animation project  and Paste as New Layer, the first frame. The first frame will be called Clipboard.

 

 

Go back to the skull x-ray project. In the Toolbox, click the Move tool. In the Layers box, click the Mask for the skull layer. In the image click the transparent area. Then hold Shift / down arrow key on your keyboard to move the transparent down. Then Flatten, Copy, Paste As New Layer in the animation project  and so on, going back and forth until all frames are completed.

    

 

 

Below is the final stack of frames in your animation project. To run the animation, on the menu go to Filters / Animation / Playback. The Animation Playback window opens. Click Play to run. Or click Step to advance one frame at a time.

 

 

 

Create an Animated GIF for an HTML Web Page

This will show you how to make an animated GIF for a web page like the one I have on this page.

Stay with your animation project. On the menu, go to Image / Mode / Indexed. You need to Index the images for 256 colors (0-255). When you save to GIF, it only saves in 256 colors. So Index to 256 before saving as a GIF file for better results.

 

 

On the menu go to Filters / Animation / Optimize for Gif. This will open a new project for your Gif. It significantly reduces the size of the Gif file by cutting out pieces of frames that repeat in other frames.

 

 

When you save to a gif file, it defaults to 256 colors, so you would want the picture to be much smaller so it is not so fuzzy. Go to Image / Scale Image, and reduce size to 128x146.

 

 

On the menu go to File / Save As. Save as a GIF file. In the pop up box choose Save as Animation.

  

 

In the next box check Loop forever, and frame delay at 200 milliseconds, then Save.

 

 

To preview the animated GIF, go to Filters / Animation / Playback. Or right click the GIF file and choose Open With and choose your browser.

 

 

Below is some html code to run a gif on a website. Use your website editor to type it in. If you don’t have a website, download a free html editor like CoffeeCup or PageBreeze. Type the html code below in a blank page. Use your real path  in yellow. You will see what it will look like on a website.

<html>

<body>

<img border="0" hspace =0 alt="Xray" src="C:\GIFxray.gif" width=128 height=146 >

</body>

</html>

 

 

If you liked this tutorial, please share with your friends:


You might also be interested in more Gimp tutorials:



 

 

comments