Michael H True stereoscopic images can look great. The image can look more interesting than the real thing. I took a photo of my coffee mug and it became one of my most popular photos. It is interesting because the handle appears to come out of the screen. The problem is that most people can not see the effect. Some people can not see in stereo and most people do not have the special glasses. Another problem is that they do not look good when viewed without 3D glasses.
3D Without Glasses
Split depth GIFs are animated GIFs with bars. Images appear to be contained within your flat screen. Placing bars onto a picture can make it look like the bars are in front of everything else. Removing part of a bar can make it look like the bars are behind something. When the subject is no longer obstructed by the bars it appears to be in front of them. The bars were at the very front. Then an image moved past it. So it appears to be in front of the screen. It is a three-dimensional break out effect. A high quality pair of 3D glasses costs around $8. Wiggle stereoscopy is created by quickly alternating between similar images. Take two pictures of the same subject from two different perspectives. Then make an animated GIF or video. Quickly switching from one perspective to another can add the appearance of depth. Both eyes see both images so it is not true stereoscopy. The main advantage of split depth animations and wiggle stereoscopy over stereoscopic images is that they can provide a three-dimensional effect without glasses. You can get some interesting pictures and it is easy to share them. The main disadvantages are that the effect is limited and they can be harder to make. Real 3D images can provide more depth and they can be made in 30 seconds.
My First Stop Motion Animation
How to Make Animated GIFs
Animated GIFs are created using a series of pictures. Take 2 or more photos or a short video. Then save the images as an animated GIF. They are usually small and short. Most keep repeating. For a smooth transition, the beginning and end pictures should be similar or the same. In the above animation, I added the images in order. Then I added the same images in reverse order. It ends at the beginning. Michael H Michael H They are popular online but viewing and working with them offline can be difficult. Often you only get the first picture. I could only view the GIFs on web pages, in e-mails or by opening the images with a browser. Right-click and select “Open with” your preferred browser. Animations that look good on your computer or website may be blocked on social media sites if the dimensions are too big. To save a video or series of images as an animated GIF you will need to find a program or make your own. Online GIF makers are easy to find. You could also use a paint program like Photoshop. All of my animations were made using a 3D GIF Maker I made while I was learning how to make three-dimensional images that did not require special glasses. GIFs have fewer colors. So it reduces the quality of the images. You may want to do the animations as videos, WebP files or APNGs. An APNG uses PNG images for the animation instead of GIFs. With these alternatives, you get better quality and a smaller file size. The downside is that it is less likely to play. When attached to an email I had to save the PNG file and open it in a web browser to view the animation. I used TinyPNG to reduce the size of my Star Wars animation by 70%. For the smallest size possible, I recommend WebP or video. It is easy to make a short video behave like an animated GIF on a web page. The video element in the code below plays the first video that works with the user’s browser. The picture element displays the first picture that works.
Breaking Out
The breaking out of the screen effect works better when objects are getting closer to the camera. As it gets closer it becomes a little bigger. Adding bars is not the only way to make an image look 3D-ish. You are creating an optical illusion. Try to trick the viewer into making wrong assumptions by making fake borders. Michael H Make barriers and borders. Then break through them. For the tank animation, I was able to use a filter to erase the background color. The hardest part is not accidentally erasing the moving object while you are removing the background colors. In the second animation, I used a transparent public domain ghost image. All I needed to do was to change the size of the ghost 50 times and I got my program to do that for me.
Reducing the White Space
The photo above appears to have a lot of white space below it. Since the photo is supposed to appear to be smaller than it is the distance between it and the other content on the page should be minimized. White space can be reduced by adding text or images to the picture’s background or by putting them under the picture. I added some text to the picture but I could have done more. If the image above had a transparent background I would be able to put it on a web page with text underneath it below the background image. The animation would be on top of other content but the text would be visible until the ghost was over it. The break out effect works best when the page background matches the image. I made the images on this page for a white background. Transparent backgrounds always match the background. Instead of having white around the background image, it could be the same color as the area around it. See if the GIF maker or paint program you are using allows you to create a transparent background. File types that support transparency include PNG, WebP, WebM, Mov and GIF. Images and videos can be see-through. To see an example check out my Star Wars animation. Open it in a new tab to see it with a black background. I do not recommend making GIFs with transparent backgrounds. Smooth edges can become jagged.
Positioning Content on a Web Page
The code below changes the position of the text on the page so it is under the image. GetBoundingClientRect gets the location and dimensions of the image. Position tells it that the position is being set using the code on the page. Setting the left and top values tells it where the text should appear. You can copy the code and save it in a text editor like NotePad in a directory with a picture. The filename “transparent.gif” should be changed to the file you want to use. For best results use a transparent GIF. The file will open in your default web browser. Changing the position of the content on a web page can be very useful for special effects, games and online image editors.
Position.htm
Wiggle 3D Stereograms
Stereograms are images that combine a left and right perspective. The different angles allow them to be seen in 3D. Wiggle images are supposed to be able to provide a real 3D effect without glasses. They can add depth but they only appear to go into or behind the screen. To make them you just need two or three images. A left, right and an optional transition photo taken between the left and right. The middle photo would be used twice. Split depth GIFs are almost 3D. Making wiggle GIFs is really easy but it can be hard to make ones that people like to look at. Limit the amount of shaking. Usually you want both pictures focused on the main subject so the subject of the picture barely moves. It should not look like you are recording an earthquake.
With or Without Glasses
Wiggle stereoscopy is like a cheap knock off of true stereoscopic images. The images are shaky and they do not pop out of the screen far enough. Real 3D images tend to look much better but they require special glasses. Use wiggle stereoscopy if you want more people to see the effect. Use real 3D for better results. You could use the same pictures to do both. Wiggle stereograms are seen by both eyes so you don’t get the full effect. Split depth animated GIFs do not provide a real 3D effect and they require more time and effort to make. They do tend to be more interesting to look at than wiggle stereoscopic images. So I think they are worth the extra effort. I liked the results I got when I added bars but my favorite ones appear to leave the picture. If you are interested in making three-dimensional pictures then I recommend getting a pair of three-dimensional glasses so you can do real 3D, wiggle 3D and split depth animations. Make images that look good with the glasses and ones that look good without them. The images on this page are some of the first animations I made. I was still learning how to make them and I did not have a lot of practice. Use them as examples but try to do better.
Some More Helpful Links
How to Create 3D Images and Videos Without a Three-D…Learn how to convert 2D to 3D. Making three-dimensional photos can be easy and quick. I can make a good three dimensional image in 30 seconds. Why settle for flat pictures when you can add the illusion of depth. It requires special glasses but they aHow to Become Invisible on Camera Using Invisibility Video Effects—Expert ResultsWould you like to become invisible? I experimented to see if I could see through objects on my webcam by making colors transparent. Learn how invisibility works and how to easily become invisible using an invisibility effect.
This content is accurate and true to the best of the author’s knowledge and is not meant to substitute for formal and individualized advice from a qualified professional. Michael H © 2020 Michael H
