Animated gifs seem to be everywhere these days, but some animated gifs are more than what they seem. At this stage your probably thinking to yourself “What is this magic?”. Well let me start by explaining how it works. Our brains are trained, right from the time when we first start focusing to see depth and put things into three dimensions. When the foreground part of image breaks the white lines – blocking them by moving out in front – it looks like it’s hurling straight at us. While our brains can discern the 3D qualities of a 2D photo or video, this simple trick just enhances it by telling the brain to see things slightly differently.
So you want to make your own!
By carefully adding a couple of solid-coloured (typically white), vertical lines to the moving images, an incredible three-dimensional effect is created. As characters and objects move into the foreground, they seemingly extend beyond the barrier of the image. The solid, dividing strips serve as visual markers for the foreground. Once anything breaks out in font of them, blocking the view of the white dividers, the viewer’s brain immediately translates this as a three-dimensional scene. The best 3D gif creators take note of this effect and tend to choose scenes from movies and clips from videos in which something is initially in the background and makes its way into the foreground, whether it be a person, animal, monster, or projectile object. Ok so lets get into it… There are many different ways to make these 3d gif’s, and there may be easier version somewhere around here, but here’s how I do it.
WHAT YOU WILL NEED:
- Basic understanding of Photoshop (I use CS6)
- How to use Eraser and brush sizes in Photoshop
- How to make GIFs from a video (you can read about making GIFs here if you don’t know how)
- This download bars.psd (I have made a template for photoshop for your gif)
You will need to import your video into Photoshop. But we’re not going to make a gif quite yet. Go to File > Import > Video Frames to Layers DON’T JUST HIT OK Find the tick box that says “Make Frame Animation” and untick that box. We only want layers at this stage not animations. So now you have a lot of layers on the side like this:
At this stage we should not see any animation. If you have any animation in the timeline at the bottom of your screen you did not untick the box that said “Make Frame Animation” and you need to redo the last step.
With the bars.psd file we downloaded earlier, you need to open and drag this file to a new layer above your first layer, like this:
I prefer to make a few copies of the bars layer so you don’t have to keep dragging a new bars file every time you switch to a new frame.
Now, go to Opacity for your first bars layer and change the Opacity to 50% so that you can see the layers through your bars. Like this: In the Toolbar and grab the Eraser, I prefer round brushes for this. You want to stay in the first group of Brushes, with hard edges (hardness 100%), unless you want to use soft edges. It is up to you and the detail of your gif, hard brushes tend to give a sharper more high definition kind of look. Making sure you have the bars layer or one of your copies selected and carefully start erasing the bars away from where your image is. Like this. The more time you spend here being as precise as possible the better the end result will be. Once you have finished, change bars layer Opacity back to 100% and and hit Ctrl + E or go to Layers > Merge Down to join your first bars layer with your first layer. Now drag your second copy of the bars layer over the second layer. It should look like this. Repeat this process of Erase > Merge for all your layers. This can be quite a tedious process but the pay off is worth the pain. Keep in mind that the less frames you have, the less time it will take. Make sure that when ever a object is crossing a bar that you erase that section paying close attention to the sharp edges and corners that might trip you up along the way.
Once you have all your layers merged with the bars over the top your ready for the final step. Start by making all your layers visible by clicking the Eye next to each one. Now that all you layers are visible click on your first layer then open your timeline if it isn’t already open. You can open it by going to Window > Timeline.
You should now notice a timeline at the bottom of your screen with one frame in it.
You will have now all your layers as frames in your timeline.
Finally go to File > Save for Web & Devices and you are done!
The Final Product
It’s best not to exceed around 15-20 frames as this example is a pretty large gif, and not three separate gifs like most people believe, as such you need to keep the layers low. Using less layers and dark colours will help your file size decrease.
The whole process like most forms of animation takes patience, so don’t give frustration too quickly. Take your time as much as you need.
As always, if you have a great method or have any questions please leave your remarks in the comments section below I am happy to help if you need.