Your Graphic Buddy
Nicholas Boonrug Schatzki!

GIF-image-slideshow Gimp tutorial

This tutorial has two parts. You are on page 1 of 2.


What does it take to turn your images into GIF slideshow? - This is a step-by-step guide to "DO-IT-YOURSELF" The tutorial will help you learn how to stack up your images as layers, optimize and convert them into one GIF file. -All through using GIMP - the free graphic editor software.

GIF-Image-Slideshow Gimp tutorial. No-javascript is needed. From Gif animation to picture slideshow. Do-it-yourself the easy way.

Help! My mom hijacked my page! Just kidding! Only a few months ago my mom still asked me to help with GIMP. Now she's become an expert, -alright, not quite, but she's getting closer every day.

This tutorial will bring you to another level of animation. Please try it out and let me know. I will still be the one answering your questions and requests, though. Don't be shy, just let me know! If you still don't feel confident, my service is available for your design needs. :-D

GIF- Slideshow-Tutorial-La CoffeeMelodie Suite

Do-It-Yourself GIF Image Slideshow

GIF-Tutorial 1-La CoffeeMelodie Suite
GIF-Tutorial Sample 1-La CoffeeMelodie Suite GIF-Tutorial Sample 2-La CoffeeMelodie Suite GIF-Tutorial Sample 3-La CoffeeMelodie Suite

1) We will take three sample pictures. When you get to yours, edit and clean up as you like. We will ask GIMP to optimize our GIF image at the end, so it is your choice whether you'd like to pre-optimize each picture before you stack them onto layers. What I did with these images was that I resized them -all JPG format- to smaller size, and, all three new sizes are the same. (Picture 1)

2) Open Menu: File > New. Designate the new frame to the size of your images, in the sample, I set the new size to width 250 X Length 188 pixels.

Now we will start stacking the images: Stack the last one first and the first one last - or, buttom-up.

But, First, let's get our Layers box open. Click Menu: Windows > Dockable Dialogs > Layers. -The "Layers, Channels, Paths,..etc." box will open.

Go to the image that you'd like to put on the bottom. In the sample, it is image #3.

GIF-Tutorial 2-La CoffeeMelodie Suite

GIF-Tutorial 3-La CoffeeMelodie Suite

Copy image #3 (Picture 2) and paste it on the new frame. (Picture 3) Look in the Layers Box, you will see two layers with the one on the bottom being the background, and the top one is the image that you just paste. -It will say "Floating Selection. Pasted Layer".. (Picture 4) Left click to highlight (blue), then right click and the pull-down menu will appear, select "New Layer" -where the white info box will say, "Create a new layer and add it to the image.". (Picture 4)

GIF-Tutorial 4-La CoffeeMelodie Suite

GIF-Tutorial 5-La CoffeeMelodie Suite

Right click on the same image -which is now called "Pasted Layer", and on the same pull-down menu, select "Merge down". This way, the pasted layer will join the blank background layer. (Picture 5)

Congratulations! You have successfuly created your first layer. (Your picture #3, which is referred to, here, as "background layer".)

3) Copy and paste image #2. Please never forget to turn floating selection into pasted layer by selecting "New Layer" on the pull-down menu. Go through the same process with image #1.

GIF-Tutorial 6-La CoffeeMelodie Suite
Now you will have three layers, with the top one being "Pasted Layer#1", the second one's called "Pasted Layer", and the one on the bottom is your "Background". (Picture 6) If you use more images, the layer numbers will start to grow. You can use as many images as you'd like, as long as you understand that the file will only get larger. My three images as one finished GIF image is 87.5 KB. It's a very nice size comparing the size of a video/slideshow, but, at the same time, a GIF file is larger than a regular JPG file.

GIF-Tutorial 7-La CoffeeMelodie Suite
(Picture 7)
**Please note the "eye" symbol on the left side of each layer. If all is selected, you will see the top image. If you de-select the "eye" on the top image, you will be able to view the next layer down. If two eye icons on the top two layers are de-selected, the bottom layer will show.**

We have our three images in layers. Now we are ready to make GIF slideshow!

Please click to continue to Gif Image Slideshow part 2

HTML Comment Box is loading comments...

Gif Image Slideshow Part 1
Gif Image Slideshow Part 2

Return to top
To the tutorial

GIMP Animation-Your Graphic Buddy-Nicholas Boonrug Schatzki at La CoffeeMelodie Suite

I will show you my tips and technique one topic at the time. If you like my tutorial, please bookmark my page and subscribe to the website's feed, this way you won't miss any update.

Nicholas Boonrug Schatzki Your Graphic Buddy at La CoffeeMelodie Suite

Also, ahem.. please keep me inspired, a burger and a milk shake would be nice. :-D

If you like
what we do
please treat us to
a cup of Joe!

Nicholas Schatzki's original design for La CoffeeMelodie Suite

You Are Secure!

I is really for other not-so-little monkeys who keep the Web site running.

This is why I would rather have a milk shake and a burger!

Thanks so much, everyone!

Now that you have learned GIMP Layers, GIMP Basics, and the Paths Tool, You are ready to explore and create GIF Animation. Please take your time to study the tutorial. It looks like a lot, but please don't feel intimidated before you give it a chance! A simple GIF slideshow can save you a lot of headache in writing or looking for a good Java Script code. -Not to mention that it will also save you storage and bandwidth!

Are you really very good at something?
Of course, you are!
Turn what you know into $$$.
Here's how we did it!

Site Build It!

Site Build It!