Do you want to create cool animated 3D images that anyone can view with only a web browser? Using graphics software, you can create animated GIFs (i.e., "Graphics Interchange Format," a type of image file) that have a 3D effect without viewers having to wear special 3D glasses. You can use commercial packages like Adobe Photoshop to create these, but if you don't own such software, a free alternative is a product called GIMP (the "GNU Image Manipulation Program") available for PCs. This instructable walks through the creation of a 3D image with GIMP, which should be useful to the many readers who don't own Photoshop.

Other 3D effects are available with animated GIFs as seen in these instructables I've found:

https://www.instructables.com/id/make-a-3d-looking-...

https://www.instructables.com/id/Create-A-Wiggle-GI...

The techniques described in the instructables above are great for static scenes, and my instructable is great for when your have an object moving closer to the viewer.

To get started, first download GIMP from http://www.gimp.org/downloads and install it.

I'm entering this instructable in the Mind for Design Contest, so is you like it, please vote for me before May 28, 2015. Thanks.

Step 1: Get Suitable Images to Create the 3D Effect

First you need a series of images that sequentially shows an object moving toward or away from the viewer. For this tutorial, I'm going to use a very basic set of images that show Lightning McQueen (the star of the animated movie, Cars) approaching the viewer. This simple example should give you enough to imagine more sophisticated animations.

Note that as an alternative, you can use a digital movie as a starting point for this animation. There are a few ways to create a set of images from a digital movie including with GAP (the GIMP Animation Package). But I'll leave it to you to investigate the other ways of capturing suitable images for this instructable.

For this step, simply take a picture of the main object in your image when it is relatively far away. Keep the camera in the same position, and move the object slightly closer and take another picture. Repeat as many times as you'd like until the object is very close to the camera, while still allowing you to take a focused picture. Obviously the more small steps/pictures you take, the smoother the animation will be, but you can probably get away with as few as 3. I use 8 in my example.

Step 2: Get Acquainted With the GIMP Interface

When you start GIMP, first make sure you have the following 4 windows open:

The main image window -- this always opens up, and will be blank. This has the menu items that will be used for several features in this instructable.
The Toolbox window -- in the main image window, click on Windows->Toolbox to open this.
The Tool Options window -- in the main image window, click on Windows->Dockable Dialogs->Tool Options to open this.
The Layers window -- in the main image window, click on Windows->Dockable Dialogs->Layers to open this. Layers are separate images that are stacked together to form a single image.

The most important feature you'll need in the main image window is the ability to zoom in and zoom out of the image. Type the plus sign ("+") on your keyboard to zoom in, and the minus sign ("-") to zoom out.

There are 3 tools you need in the Toolbox window:

Rectangle Select Tool
Fuzzy Select Tool
Eraser Tool

See the attached Toolbox image to see where these tools are in the Toolbox window.

The main feature in the Tool Options window you'll need it resizing the brush size when using the Eraser Tool. See the attached Tool Options image for how to change the brush size.

There are 4 features you should know about the Layers window:

Click on a layer to make it the selected layer. The background of the selected layer will turn blue.
Click on the eye icon to make the layer non-viewable.
Double click on the layer name to change it.
You can drag and drop each layer into a different location in the stack.

See the attached Layers image to see how to handle these features.

Step 3: Separate the Object From the Background

Now let's get to work on the images. Click File->Open as Layers. Select all your images and then click the Open button. If your images are large, then working on all images at once is going to slow down your computer. You very likely will want to resize your project with Image->Scale Image... and specify a width of about 720 (GIMP will calculate the proportional height for you). Then click the Scale button.

Save your work at this point (and be sure to save regularly along the way) with File->Save As... Your filename should have ".xcf" as an extension, which is the extension for GIMP files.

All the images you just opened will appear in the Layers window. Make sure they are stacked in the proper order, with the first image in the sequence at the bottom of the stack. To make the animation creation process easier to track, double click each layer and rename the layer with a sequential number, starting with "1" at the lowest layer.

Now we want to separate the object from the background so we can add some changes to the object that emphasize its movement. The easiest way to do this is to create a duplicate layer that has the object erased from it, and stack that on top of the original layer. First do 2 things:

Click on all the eye icons in the Layers window to turn off all layers.
Add a new layer by right clicking on any layer, and selecting New Layer... Select Background color as the Layer Fill Type then click OK. Double click on this layer and name it "blank."

Now repeat the steps below for each layer (except for the blank layer you just created), one at a time starting with the lowest.

Click on the layer (the background of that layer in the Layers window will turn blue).
Click on the area in that layer where the eye icon used to be so that the layer is visible again in the main image window.
Right click on the layer and select Add Alpha Channel. If this option is grayed out, then you already have an alpha channel in your image. The alpha channel lets you create transparent areas in your image.
Right click on the layer and select Duplicate Layer. Now you'll have 2 layers of the same image. The duplicated layer will have "copy" added to the name, and should be directly on top.
Move the blank layer (created earlier) in between these 2 layers.
Click on the copy layer.
Click on the Eraser Tool in the Toolbox window.
Now erase the moving object in the layer. Carefully draw over the whole object. You don't have to be exact. If you erase too much, hit Control-Z on your keyboard to undo. Note that you can change the size of the brush in the Tool Options window to adjust to erasing small and big areas. Notice that the blank layer in between helps you to see what you've erased. It will look like you're painting the screen with black, when in fact you're erasing the upper layer to show the black layer below it. Also zoom into the image with the plus sign on your keyboard to get more accurate erases.
Finally, click on the eye icons to hide the layers again.
Repeat for all other layers (except the blank one).

After all the above is done, you can delete the blank layer by right clicking on it and selecting Delete Layer.

Step 4: Blur Parts of the Image to Indicate Distance

Now you should have a stack of layer pairs, in which the upper layer of each pair has a hole cut out in it, and the lower layer of each pair is the original image intact.

In this step we want to create the illusion of depth/distance and put emphasis on the object. There are a few ways to do this, and the results will differ depending on the images that you use. One thing you can do is slightly blur the upper layers, as well as the lower layers where the object is far away.

Be sure not to blur too much or you can ruin the overall effect. This step can potentially be too subtle in the end animation, so if you'd like you can skip all the blurring steps below. But if you want to add this touch, do the following:

Click on the upper layer of the lowest/first layer pair and click on the eye icon to make the layer visible.
Select the Fuzzy Select Tool from the Toolbox window, and click in the hole you created in the previous step. This makes the hole your active drawable area.
Now select Select->Invert, which makes everything other than the hole your drawable area.
Then click on Filters->Blur->Gaussian Blur... The Gaussian Blur window will appear, and you should set the Blur Radius for both Horizontal and Vertical values to something low, like 4. You might want to experiment with this, making sure not to blur too much.
Turn off the layer by clicking on the eye icon, and repeat the steps above for all upper layers in each layer pair.

Now blur about half of the lower layers in the stack with the Gaussian Blur feature described above. The half should be the layers for which the object is farthest away. The blur values should be small. Start by selecting Select->All to remove any selected outlines from the previous steps above.

One other thing you might want to do is emphasize the moving object by increasing the contrast and brightness. Do the following for each lower layer in each layer pair:

Click on the eye icon to make the layer visible, and click on the layer.
Select Colors->Brightness-Contrast... and in the Adjust Brightness and Contrast window, change the Brightness and Contrast values to 15 then click OK.

Step 5: Add Vertical White Lines (and Optionally Trim the Edges)

Now you will add white vertical lines that create a reference point for distance. At some point, your moving object will be "in front" of these lines to add to the 3D effect.

Create a new layer by right clicking on any layer in the Layers window, and select New Layers... In the New Layers window, click on Transparency and then the OK button. Click on that new layer, and using the Rectangle Tool in the Toolbox window, create the outline of a thin rectangle one-third of the way from the left of the image window. Right click over that rectangle window, and select Edit->Fill with FG Color (the FG Color is the "foreground color" which should be white). This will create a vertical line. Repeat for a vertical line one-third of the way from the right of the image window.

Now you can optionally trim an edge of the image to give the impression that the object jumped out of the image. For my example, I'm going to trim the bottom edge. Create another white box at the bottom of this new layer using the technique above.

Now right click on this layer and select Duplicate Layer so that you have a copy for every layer pair. Move one copy of this layer above each of the layer pairs. Now you'll no longer have layer pairs, but rather, layer triplets. So your stack of layers should look like:

white lines/box layer -- this is the new upper layer for each layer triplet
middle layer -- this represents the background and was formerly the top layer
lower layer -- this was always the lower layer
... (the above repeats)

Now you want to remove parts of the upper layer so that the object appears to be in front of it. Start at the top layer triplet and do the following for all the layer triplets for which the object is within one-third of the distance of the farthest position. In my example, I do it for the top 2 layer triplets.

Click on the areas for the eye icons to make the layer triplet visible.
Click on the middle layer.
Choose the Fuzzy Select Tool in the Toolbox window. Click anywhere in the area in the main image window where the object is. You'll see an outline appear.
Click on the upper layer in the Layers window, and hit the Delete key on your keyboard. The overlapping portion of the white lines will be erased, giving the impression that the object appears in front of the white lines.
Click on the eye icons to hide the layer triplet again.

Step 6: The Final Touches

Turn on all the layers by clicking on the eye icon area and make sure all eyes appear. Now collapse each layer triplet into a single layer. Do this for each layer triplet starting at the top:

Right click on the upper layer and select Merge Down.
Right click on that merged layer, and select Merge Down again. Now your original 3 layers in the layer triplet should be one layer.
Click on the area for the eye icon to make the combined layer visible.

Now you should decided how long each layer is shown as part of the animation. You'll have to experiment with this, but using 200 milliseconds is a good start. To specify 200 milliseconds for each layer, simply click on the layer name and add " (200 ms)" to the end of the name. This is the mechanism that tells GIMP how long to display the layer in the animation. In my animation, my top/last layer should appear the longest, so I set it to 1000 milliseconds.

You can test your work by clicking Filters->Animation->Playback... In the Animation Playback window that opens, click on the Play button to watch your animation. Adjust the timing for each layer as you desire.

Step 7: Save Your Work As an Animated GIF

If you're happy with the animation, then save it in the GIF format so anyone can view it. Click on File->Export As... and give it a filename that ends with ".gif" to tell GIMP this is a GIF file. An Export Image as GIF window appears, and click on the As animation checkbox. Keep Loop forever checked, and change Frame disposal where unspecified to One frame per layer (replace). Click the Export button.

Open your .gif file with any modern browser, and you'll see your 3D animation in action. Note that there is some color blurring in the final GIF due to limitations in the GIF format, but it doesn't hurt the overall effect.

Clearly there's a lot of work to get one of these animations done, but I hope you'll find it worth the effort!