Download Source Files
In this tutorial we will create a stereoscopic image for cross eye viewing, which means you will be able to view the final image in 3D and full color without the use of any special glasses.
I will be creating a simple piece from scratch for the sake of this tutorial but the final technique learned can be applied to existing artwork very easily, granted you are the creator and have the PSD file.
Final Image Preview
Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $19/month. You can view the final image preview below.
Tutorial Details
- Program: Adobe Photoshop CS2 (any version will work)
- Difficulty: Beginner
- Estimated Completion Time: Less than 1 hour
Step 1
We are going to start with a 900 pixel by 900 pixel image with a black background.
Step 2
Add some white text in the center on a 45 degree angle, I went with “Psdtuts+” in Century Gothic Bold at 200 pixels tall. Let’s add some color to the text, on a new layer I added a 45 degree gradient to a selection of the text in pure green. Let’s also add a black Inner Glow using a layer style just to soften the edges.
Add a 2 pixel white stroke of the text on its own layer. Move it up 5 pixels and to the right 5 pixels. Then let’s add a red Outer Glow layer style to it. We are done with the text so let’s clean up our layers a bit. Put all of the text layers in their own group and call it “text.”
Step 3
Now let’s start adding some elements around the text that we can move around later that will give us our 3D effects. On a new layer use a 65 pixel soft edge brush and create some random white dots around the text with it (a single click of the mouse). Do the same thing on another layer but with a 21 pixel size brush.
On another new layer, using the same 65 and 21 pixel sized brushes, draw a bunch of random dots all around the text, use both black and white colors.
Then apply a 45 degree motion blur of 500 pixels.
Duplicate the blurred dots layer twice and set their modes to Color Dodge. Let’s continue to keep our PSD clean and put all of these layers in their own group and call it “Dots.”
Let’s add one more line of text before we start modifying the layers to create our 3D stereoscopic effect. I went with “Stereoscopic Imagery” in white and placed it slightly on top of our “Psdtuts+” text. I added a Drop Shadow, black Inner Glow and 1 pixel red Stroke using layer styles.
Step 4
Now that we have our basic artwork created we are going to begin modifying all of these elements so that they appear 3D once we view them using the crossed eye method (more on that in the next step). To keep things organized let’s put all of our layers in a group and name it “Left Eye.”
Increase your canvas size from the center left so that it is double the width (1800 pixels).
Duplicate the “Left Eye” group and name it “Right Eye.” Then move it all to the right portion of the canvas.
We are going to slightly move some layers around on the canvas in the “Right Eye” group, use the arrow keys on your keyboard for this part. Select the “Small Dots Copy” layer and move it up 7 pixels, then to the right 7 pixels. Select the “Big Dots Copy” layer and move it up 10 pixels, then to the right 10 pixels.
Now select the “Stereoscopic Imagery Copy” text layer and move it up 7 pixels, then to the right 7 pixels. Select the “Stroke Copy” layer and move it up 7 pixels, then to the right 7 pixels. Select the “Color Copy” layer and “Psdtuts+ Copy” text layer and move them up 4 pixels, then to the right 4 pixels.
Step 5
Now that we have our stereoscopic image complete, it’s time to view it in 3D! This might be easy for some, and tricky for others to do, but once you get the hang of it you will have no problems doing it in a matter of seconds. I have added a red circle to the center of both images to help you train your eyes on how to do this.
Look at the following steps and images, then when you are ready, use the image above to try it out.
Sit a comfortable distance away from your monitor and hold you index finger out in front of your monitor. Position the tip of your finger in the middle of the two images. Focus your vision on the tip of your finger and in your peripheral vision just above your finger you should be able to see the two images slightly merging.
While still focusing on your index finger, move your finger closer or farther from your monitor until you see the two images merge together. Once you have them merged, slightly move your focus off of your finger and up to your monitor. The merged image should appear cleanly focused and in a nice layered 3D fashion, if it doesn’t just clear your focus and try again. You can also try getting closer to your monitor.
Conclusion
Once you get the hang of viewing the above image you can try it on the final image below without the red dot.
Then you can try it on my first stereoscopic image I created titled “Pinion.”
Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By George Smith
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Um ok. That’s really cool!!!
thank you Shimansky Pavel,your psd is very good!!
I come form china,haha
I just know this.
I dont get it. another useless tutorial. Thanks..
we pay for crap here now.
you can’t see it ha?
poor guy
um….pay?
lol just cuz you dont have the skill to see it, doesnt mean its crap. this helped me so much its a lot of fun to make an image and then make it pop off you’re screen. just search stereoscopic images on google and look for a tut how to do it.
its stupid because, the result is not good =/
why would u bother.
You kidding? its really awesome… just blur your vision and get those two red dots to line up, hold it there, and the image becomes clearer, and its like a 3D effect. you can do it with videos too…
Pretty Lame Milhouse. Pretty Lame.
I don’t typically comment, though I read many of the things other people say and I really hate to jump on the critical bandwagon here, but seriously? This is just plain useless.
Plus+ my mom says if I go cross-eyed too long my eyes will stick like that.
Oh no, actually there’s a series of exercises to relax the eyes and crossing them is one of them, too long would be like two hours or so, but to look and artwork, won’t hurt you at all
what is stereoscopic image for cross eye viewing ? i didn’t see any effect ? useless tutorial
http://en.wikipedia.org/wiki/Stereoscopy
Blur your vision, you can get the two images to line up, hold it there, and the image becomes clear, giving you a movie theatre 3D effect
I actually think it’s pretty cool, stereoscopy is pretty fun!
simple and easy for a beginner, good stuff.
Well it doesn’t work, thanks for that :/
actually it does work
lol, all this criticism!!! and just so everyone knows your criticism is more useless than the tut. which isnt useless at all.
Like I said in the tutorial, some people will be able to view it right away while others might have trouble crossing their eyes and seeing the end result, it’s just the nature of the effect.
Wow, it even works ^^
Cool tutorial :D
OMG! That Pinion one = beautiful!
I was going to say the same. Beautiful.
Thanks! Check out my other work on my site if you enjoyed Pinion!
It does work.
too bad the outcome itself doesn’t look very good..
agree..but the pinion one is awesome :)
Hah my eyes hurt :))
yeah, so do i. anyway, great tuts.
Oooh, interesting! I’m going to try this out for myself.
At least this an example of good marketing, the title of the post is catchy and makes you want to read it..but the result is only so so…
Nice work! People are playing this tut down because they probably don’t understand what you’re trying to do and/or they’re not able to work their eyes to see the image
I’m glad you understand!
Those images are so far apart from each other that I think I’ve given myself actual CANCER trying to make them go together. What’s worse is that they don’t even make a 3D image when they meet…
lol..c’mon, really?
NOT EYE CANCER! WATCH OUT ALL THAT TYPING CAN GIVE YOU AIDS!!!!
It’s not a completely true 3D effect, more like a layered 3D effect, if you are into doing stuff in a 3D program like Cinema4D or 3dsmax you could achieve a better effect by rendering two copies of the same image where the camera view is slightly to the right on one of them, then putting them side by side like in my tutorial and viewing them the same way.
I have no idea how I would implement this into anything that I’ve ever designed or will design, but it is cool nonetheless, even if my eyes hurt after looking at the end result.
I guess the point of the tutorial is show us the technique to create a stereoscopic image, not how to create a stereoscopic amazing outstanding ftw image. I think beauty wasn’t the focus, just the technique.
Hahaha +1
I agree with that statement!!!Its all ’bout the technique
At least now i know how to do it
+1
im bored. -2 +1 woot
wait.. other way around!!! -1 +2. i knew i shouldn’t of dropped math
Yes the point was to show the technique, which is why I explained in the opening paragraph that I was going to create something simple for the sake of the tutorial, the point was to get the 3D part across so that people could implement it into their existing or future work.
I had seen this effect before and now I know how it works. Thanks
George, Great.
It is so funny how quick some people are to criticize. The effect actually works extremely well on both examples. The original for the TUT is basic effect but works great and that is the point. The effect in Pinion is much more dramatic and if you look closely at the composited 3D image there is actually quite a few different depths in the image and extremely enjoyable to view. I would love to see this in high res flooding my monitor.
Very true… the pinion example is quite excellent (even if it killed my eyes)
Thanks so much for the comments, glad you apprecaite it!
A lot of hate going on, but I thought it was pretty cool! I think most of these people can’t get it to work.
Thanks, that was precisely my thought.
I need to stop doing this. This is giving me a headache! %$*@#&!!!
Thanks for getting me hooked on this stuff, George :)
Yeah headaches will come on if you do it for too long. haha.
My eyes now face the back of my skull. That’s just great.
hahahha lol XD
ROTFL!!
wow. ok. so, obviously none of you have seen the trend in cinema going 3D in the past few months with likely many more films in the future. I think grasping this simple but surprisingly difficult for some concept is primordial for any designer, within the cinematic industry or otherwise, just so you can keep ahead with today’s trends and are able to offer intelligent insight to clients or peers…
thanks for the great TUT.
Thanks for the comment, I hope to sometime in the future understand how they achieve the 3D effect now being used in cinema and be able to create images that can be viewed with those glasses. I only do still imagery but I imagine this could cross over into the motion graphics side of things very seamlessly in the near future.
I get where this is going and all and I could get it to work but I think it’s a bit pretentious to say that cross-eyed 3D is the future of design. If you are putting the burden of the audience to “get it” or to even be able to do it, it will not work. When was the last time you saw a Magic Eye 3d picture?
Cool effect, well written tutorial but, ultimately, useless…
That’s awesome! Great job!
Cool technique, now I have to find some cross-eyed friends to show them how good a designer I am. ;)
i agree with merineo,
its good start for any beginner.
we shouldn’t complain since we all
agree that we love this site!
a little different(or too easy or useless) is not gonna hurt
anyone.
Good tutorial. 3D effect works well, but i’m a bit confused regarding the actual 3D image, Does the 7px up and to the left thing work universally across? Or do you have to eyeball it whenever?
if your image is level, then when you move things to the right from the original they come further off the screen, and the opposite for the left. and to be honest i cant really tell what up and down do.
The 7 pixels aren’t a magic number or anything, when I was creating the image I would literally cross my eyes while I was moving the pieces around to see what looked best, that just happened to be it.
It will all depend on your image, how you want it to look, and what resolution you create it in.
The Pinion one is very nice, the one made from the tut is meh, but make a tut about the other one.
Good for beginners
I can’t get my eyes to stay crossed long enough for me to remove my finger, LOL…
And when I do finally manage to look at it with crossed eyes, all I see is bluuuur.
Besides the fact that I can’t make it work, I don’t really see where this would be useful. :/
But good try.
Just cross your eyes without the finger so that you can see both images (blurred) meeting in the middle, the focus on a spot of the image and try to see it clearer, when you see the images going back to the position make them blur again and control the focus until it stays. If you do it right you can even blink and you still see the result in 3D.
It is a little far apart and hurt more than I remember -_^
I think this was a great idea to show people. I learned how this was made a LOOONG time ago. It’s nice to see it again, I used to love these books; it’s great fun showing images with this technique to kids.
Great work George, I think it’s a winner!
7px up. where’s that come from. i hope to find more explanation on this.
Like I said to Mikhail above:
“The 7 pixels aren’t a magic number or anything, when I was creating the image I would literally cross my eyes while I was moving the pieces around to see what looked best, that just happened to be it.
It will all depend on your image, how you want it to look, and what resolution you create it in.”
argh!!! this is frustrating!!!
you did eye catching tutorial and these kind of effects most useful in print media.
You just gave me a bunch of ideas with the word “print”. Cheers :P
I couldn’t get it to work.
WOW!!!!
OK, I honestly misread the title and thought is was about creating those ‘stereogram’ or magic eye images … http://www.magiceye.com
I always loved looking at those images, and especially watching someone get their first AHA moment when viewing them.
I see that the stereoscopic images are different.
Just to confirm what I’m seeing … the only way I was able to get it to work was to literally look at it cross eyed … once the image came in I was able to relax my eyes (although still cross eyed) and they didn’t hurt as much … the thing that puzzles me …
Am I supposed to see three images? Once the image comes in, I see the 3d image in the middle, but the images are also on the right and left … is that normal. I though the image was supposed to come together to form one image, not three with the center one focused in 3d.
Anyway … loved the tut … thanks … Scott
Just cross your eyes without the finger so that you can see both images (blurred) meeting in the middle, the focus on a spot of the image and try to see it clearer, when you see the images going back to the position make them blur again and control the focus until it stays. If you do it right you can even blink and you still see the result in 3D.
You see a main image in 3D in the middle made up by the other two and you can see the original images just as you can see some of your hardware when looking at the monitor.
Try looking at the one with the red dot, cross your eyes until both red dots become one, the keep looking and that dot trying to make the whole image clear and don’t let the red dot become two.
Good luck
Oh wow I’ve been looking for something like this, seeing as I just found out about cross-eyed 3d images a few days ago
Great tut, thanks!
For anyone having trouble, you have to cross your eyes and line the images up, I find using your index finger doesnt help
got PSD file? help me, i don’t understand it
WOW!!!
I couldn’t get it to work.
Awesome tutorial, Pinion looks awesome, I like the text going back the main title. Cheers :P
Sorry, neither the end result or the tutorial is fullworthy Tuts+ quality, BUT I think this would have been a great “quick-tip” of the week or something, whitch I btw think you should start doing! :)
hmm i have a lot of experience doing stuff like this and i must say the one in the tut is hard to focus on, but your abstract one i got instantly. when doing stuff like this i wouldn’t suggest fuzziness
Technique – 8/10 – Very good explainations of steps, and I learned how to do something I didn’t know about.
Practicality – 3/10 – What ad is going to use something that takes time and effort from the reader/viewer to view properly.
I think that this is a great tutorial for an obscure and not often used idea. Note I did not say BAD idea, because it’s not a BAD concept, it’s just a little out of the norm.
I have to say, reading the title I thought this was gonna be those images where the whole image looks like a texture, but then when you focus and/or go cross-eyed you’ll see the shape of an animal or whatever. Well it was clearly not that… BUT this is really awesome!!!
I could see the tutorial image and the pinion one perfectly. The images are not too far apart, you just go cross-eyed which will unite the two images, once you see the 3D image and focus on it, you can relax your eyes. While you’ll actually still be looking cross-eyed, it will look and feel like your looking at your screen normally. No eye stress at all. And I look at the whole image then, I don’t even have to stay looking at one point. And THAT is awesome because I noticed pinion has many many different depth levels!!
Putting aside how freakin cool this is, I can’t help but to think about the fact that I would never put up a wallpaper on my desktop that looks TILED (the 2 images next to each other). I want ONE image on my desktop. This made me think about something I’ve wanted to know for quite some time now… How can I make those 3D images where it’s ONE image, but parts of red and green slightly out of place. Those are the ones where you use the glasses to see it in 3D, same kind of result as the concept in this tutorial, except it’s ONE image.
Can anyone help with that??? George??
I dont get step 2 how do i stroke and image and with what tool?
ty
omar dont be a punk if u dont like it dont do it u can just stick to ur world warcraft
i don’t really understand what is this
i can’t see it :-( but will keep trying… (after I get over this headache)
thankx 4 the tut. love the idea. don’t understand all the negativity.