Paint.NET

Stereogram Autostereogram Tutorial – by Ego Eram Reputo 29 March 2009

Warning, this tutorial assumes:
1. You know how to MOVE an entire layer by a number of pixels left or right
2. You have installed & can use WEAVE and DENTS (not absolutely essential if you can create some other nice pattern for the background)
3. You can DUPLICATE , RENAME and MERGE layers
4. You know how to view a stereogram image


What is a stereogram/autostereogram?
An (auto)stereogram is an image which contains a hidden 3D image within it. Viewing the image in a certain way tricks the eyes into seeing the 3D image which appears to “pop out” of the orginal image. For more information: Stereogram (Wiki this) and/or Autostereogram (Wiki this)


How do I view an (auto)stereogram?
There are several ways to view the image in order to see the 3D image within. For more information: http://en.wikipedia.org/wiki/Autostereogram#Mechanisms_for_viewing


The Background



Here’s the background we’ll be using in this tutorial, (530 x 142 pixels)

1.Weave @ size 10 & 25 degrees

2.Dents @ Scale:156, Amount:16 & Quality:2




Now we make the background repeat across the horizontal width. To do this we are going to tile a strip 128 pixels wide across the width of the image. Here’s how:

3. Duplicate the layer

4. Select the top layer and move it to the right by 128 pixels (128 is our Phase = P).

5. Duplicate the top layer

6. Select the new top layer and move it right by 128 pixels

7. Repeat the duplication & moving steps (5 & 6) until the whole image has been tiled left to right in 128 pixel wide strips.

8. Merge all the layers from the top down into a single layer

9. Name this layer “Background”





The Foreground

Now we need something to “float” over our background (“They all float down here” – Pennywise ). For this simple example I’m going to use the characters ABC.

10. Add a new layer & rename it “Text”.

11. Select the text tool and a fairly large font and type the characters in black onto this new layer. Pick a font that is fairly thick and also a reasonable size. I’m using a font named Plump MT @ about 90px. Position the text slightly left of centre. Remember, the width of a letter should not exceed the image phase.




12. Select the letter C with the wand (Shift+S selects the wand tool then click on the letter C).

13. Invert the selection with Ctrl+I.

14. Duplicate the background layer and select the top of these two identical layers.

15. Rename this layer “Right-C”

16. Press delete to remove the previously defined selection.



17. Select the Move tool and move the Right-C layer to the right by 6 pixels. 6 pixels is an amount that can be varied later when you get familiar with this technique. Smaller shifts (say 3 or 4 pixels) will make your floating foreground elements appear nearer the background. 10 pixels would make the foreground appear further away from the background. Stick with 6 pixels for the duration of this tutorial.

Testing, testing









Backfilling

18. Duplicate the Right-C layer.

19. Rename the lower of the two identical layers “Left-C x 1”






20. Select the Left-C x 1 layer

21. Move this layer left by the same number of pixels as the phase. In this case 128 pixels to the left.

All done? Good, try viewing the image again.




There still may be an artifact visible to the left, but further left that it was before. We need to backfill again, by another 128 pixels. So….,

22. Duplicate the Left-C x1 layer.

23. Select the bottom of these two identical layers.

24. Rename this layer “Left-C x 2”.




25. Move this layer to the left by 128 pixels (one phase).

That should take care of the last artifact. View your image to make sure all the sunken in artifacts are really gone.




That’s just so cool isn’t it?

You can now merge the Right-C layer and all the Left-C layers together.

26. Select the Right-C layer and keep merging down until you have only the Text and Background layers remaining.





Time for a B

Now you need to repeat the right shift for the character B.

27. Make the text layer visible, and select that layer.

28. Select the letter B with the wand (Shift+S selects the wand tool then click on the letter B).

29. Invert the selection with Ctrl+I.

30. Duplicate the background layer and select the top of these two identical layers.

31. Rename this layer “Right-B”

32. Press delete to remove the previously defined selection.

33. Select the Move tool and move the Right-B layer to the right by 6 pixels

34. Backfill the artifact B that appears in the image by first duplicating the Right-B layer

35. Rename the lower of the two identical layers “Left-B x 1”

36. Select the Left-B x 1 layer

37. Move this layer left by the same number of pixels as the phase (128 for this tutorial image).

38. If you’re really unlucky, you may have to backfill once more (creating and moving a layer called “Left-B x 2” in exactly the same way you did for the “Left-C x 2” layer [steps 22 to 25]).

39. Select the Right-B layer and keep merging down until you have only the Text and Background layers remaining.

Now you should have a floating stereogram image of a B and C.




Lastly, A Time

40. Make the text layer visible

41. Select the letter A with the wand (Shift+S selects the wand tool then click on the letter A).

42. Invert the selection with Ctrl+I.

43. Duplicate the background layer

44. Select the top of these two identical layers.

45. Rename this layer “Right-A”

46. Press delete to remove the previously defined selection.

47. Select the Move tool and move the Right-A layer to the right by 6 pixels

48. Backfill the artifact A that appears in the image by first duplicating the Right-A layer

49. Next rename the lower of the two identical layers “Left-A x 1”

50. Select the Left-A x 1 layer

51. Move this layer left by the same number of pixels as the phase. In this case 128 pixels to the left. As A is the left most letter, you shouldn’t need to backfill it. But check by viewing the stereo image just to be sure. If you do have an artifact, repeat the backfilling technique [steps 22 to 25 but for the letter A this time ]

52. Select the Right-A layer and keep merging down until you have only the Text and Background layers remaining.

53. Deselect the Text layer visibility.

54. Save the finished image!




How uber-cool is that?

Notes for the Wicked:

1. You can vary the depth of the letters by one or two pixels to make them appear at different depths from each other.

2. Don’t feel that your background has to be colorless either:





Wicked or what?

Excellent work for high skills 3Ds , PDN on your sig
EDIT/Well I meant the colored image- not your sig- and it is in 3 levels, P on top and then D then N, isn't it?

I dont get how your supposed to see the image

I can never see these. Looks like a good tutorial, though.

This. Is. AWESOME.

No, seriously. Tutorial of the year - so far.

Look past the image. Focus on something about a foot behind the front of the monitor, then keep your eyes crossed the way they were and look at the image. It should lock into focus.

You, my friend, have just fullfilled a want of mine to create an autustereogram. Thank you for one of the best tutorials on these forums

Thank you all for your kind words. It is very humbling to receive such wonderful comments. I have to admit to being quite stoked with the reactions thus far, especially David’s “tutorial of the year” comment!

@Yellowman: Yes you’re absolutely right about the colored image, the letters and the depth. Re Sig: Yes I had considered this: viewtopic.php?p=251582#p251582

@ Mike: Glad this tutorial gave you some insights. It took a fair bit to work all this out & I’m pleased it has introduced something new for PDN users to play with. "One of the best tutorials?" Really? Wow! Thanks.

@ Sharp & Pyrochild: Try these two viewing techniques:

1. Print out the image
2. Sit somewhere quiet & put the image up to your nose. Don’t attempt to focus on the image.
3. Slowly draw the image away from your face, again without trying to focus on the image itself.
4. If you get the image to arms length – you’ve missed it. Repeat the process.

Alternatively:

1. Print out the image
2. Stand in front of your bathroom mirror. Focus your attention on your reflected eyes.
3. Slide the image up the mirror surface until it is in line with your eyes, try not to change the focus of your eyes from when you were looking at your reflection.

this is the coolest thing EVER!! I love these things.. I am gonna try once i have more time. Great tut

Oh ..I don't know how I missed this before, I didn't see it,I can see EER in the image:



I remember that I created and posted a 3D image before using a different technique called (cross-eyed)but looks like was not easy for some to view it even with the explanation details,it was more complicated on 13 levels(called 3D flowers)
http://paintdotnet.forumer.com/viewtopic.php?f=26&t=22626&start=780

this looks like fun. but with my eyes I'm sure I will never see the thing. going to try those printing and mirror tricks latter tonight.

maybe I can use something like this to hide my name in my pictures.
ciao
OMA

I've always found the cross-eyed method a real strain on the eyes, but loved your images!

Usually these dual image types are created by taking two photos of the same subject with the camera moving 100mm between frames. How did you manage that effect in PDN? Lots of math & spacing the different elements?

Trust me, I've tried everything. I simply cannot view these images. It may have something to do with the fact that I can control my eyes independently (e.g. I can focus on two objects at once).

I love autostereograms! I've always wanted to make one, and now i can.

*is happy*

*goes and makes some*