How to see through your computer monitor using Photoshop
How fun will it be to have a iSight camera incorporated behind your iMac? Photoshop makes everything possible. This tutorial will teach you guys how to see behind your iMac screen.
Step 1
First of all you need to take two photographs of your computer.
Move the monitor away and take a shot. Put the monitor back and position it as you want. A stand will be very useful for this.
Step 2
You need now to open both images and put the one were you moved the monitor away over the other image.
Step 3
Now make the image were you took off the monitor invisible by clicking the eye icon in her left and select the second image.
Here you need to make a path using the Pen Tool over the monitor screen.
Step 4
With that path made press Control + Enter (Command + Return on a MAC) to make a selection. Go to the image with the monitor moved and copy the piece you just selected by pressing Control + J (Command + J on a Mac).
Step 5
Use these settings in the blending mode for the screen layer:
Step 6
This should be the result:
Step 7
Next you can delete the image were you moved the monitor away. We don’t need to anymore. This is how the image should look.
Conclusion
You can also work more on it if you like but this was just a little example to show you how to achieve this effect.
Did you find this tutorial useful? I would love to see your transparent monitors 
fucking awesome man
Nice idea. I’ll do it
Sweet. Thanks for the tutorial.
I reckon there’s gotta be a way to do this live without user intervention with a carefully-placed webcam or something (and mirror tricks?), so it keeps updating.
Ok…
But you can do it for real.
Simply take a picture of whatever is behind your monitor, and make that picture your desktop background.
Youll need to do a little resizing a stuff, but the effect is worth it.
Is there a way to take a photo of behind the monitor, and properly adjust it as the desktop wallpaper?
Not sure what you mean Devin, if want to take a picture of the back of your monitor and put as your wallpaper that is quiet easy to accomplish.
Torley,, why would you want an updating webcam of crappy quality? How often does the scene behind your monitor change? Something going on back there?
And Devin… huh?! The tutorial explains that you take a picture behind your monitor….what the hell are you asking?
FYI I tried this and it’s quite the illusion. It works great if you purposely put some sort of prop behind it like a lamp or something that extends over the top.
Oh well, I guess I have to accept the fact that the majority of computer users are simpletons. Great tut.
and Mike… what are you on?
LOL
Devin, it should be pretty simple. Take the two pictures as described in the tutorial but instead of cutting out the whats behind the monitor and putting it on the other image, crop it so only that portion of the image remains. Set that as your desktop background and you should be good to go. Of course you may or may not need to make adjustments to the image to make the colors/brightness of the image match the actually scene behind your monitor.
I am happy you guys liked the tutorials. I will be posting tutorials for a while here so keep your eyes peeled.
You should really check out the flickr group devoted to this subject, actually more for what Devin was asking about… see it here:
http://www.flickr.com/groups/transparentscreens
Oh I see what Devin meant now. He was talking about NOT using Photoshop and properly aligning the “behind the monitor” picture when setting it as a wallpaper to achieve the same effect. Apparently it can be done, but this tutorial is supposed to teach Photoshop, and it makes it easier to align and adjust your image to make it look realistic.
Yes that technique is also useful but this tutorial is about Photoshop.
And you must agree with me that if you do this with photoshop you will get a better result and it will also look better.
Nice idea, great tutorial!
I’d like to post this tutorial on
http://www.designerbay.com
Great work
Jason
I just want to say, having seen this effect so many times since I first saw it years ago, I can’t believe so many people had no clue how it was done. Sure I may be a graphic artist, have done special effects, and am a photographer, but logic alone is all it took to figure out how this was done as soon as I saw the first one.
I couldn’t believe, over the years, how many people couldn’t figure out how it was done, thought the photos of the monitors were fake, etc…. and now there’s a TUTORIAL.
I understand tutorials for things that are actually difficult to figure out, but this has always been an incredibly simple trick, I just can’t believe sometimes that so many couldn’t figure this stuff out. Maybe people who are just a little too used to being spoon-fed info on the internet instead of trying to comprehend? Who knows.
Okay, maybe I can take it lightly on this tutorial, as it’s just the BEST way to achieve this effect, not necessarily created to inform people about how it’s done in the first place. So part of my reaction is knee-jerking, but my point about the history of this desktop gimmick still stands.
-JD
i can simply put in my desktop with the image without the monitor
@john d.,
shut the hell up. really.
The last time I saw something like this was like… 5 years ago.
I will have to co-sign with JD’s post.
It *is* a clever idea to take the second photo with the monitor still there and then use that to align and crop the first photo properly. When I’ve done this in the past I just cropped it by trial and error which was a little more fiddly.
And a camera behind the monitor wouldn’t show the correct angle. The photo needs to be taken from the users point of view or it won’t line up correctly. Probably best to set up your tripod so the camera is right where your head usually is when you’re working at the computer.
And regarding the not-so-positive comments: Most people are scared of trying to figure things out and they immediately ask for help so they don’t have to think. I’m sure they could have caught on without too much effort (well, not everyone
but people are just so used to being told what to do, you know?
I think this is cool, but you should probably redo the sheen. That might just be my hate of Web 2.0 graphic trash. :p Cool idea, though.
@John D. take the advice from the Geto Boys:
“Real gangsta ass niggas don’t flex nuts, cus real gangsta ass niggas know they got em’.”
Real graphic designers don’t show off their ’skills’ because real graphic designers know they got em’.
OMG It’s amazing result!
@ Phil
John wasn’t showing off… I don’t know where you saw that. But he is right, this tutorial is well made, but if you couldn’t figure this out yourself, go get an IQ test, you may surprise yourself.
Very nice tutorial. I learned something new - thank you
Fantastic.
Great tutorial! I have to try this at work
@ Pap3r
Yeah, actually, he was. Go read his post again, noticing how he not-so-subtly points out that, even though not everyone is a graphic designer like -he- is, he’s surprised they couldn’t figure it out. Even if they’re not a photographer like him, he’s surprised they didn’t know what was going on, even if they haven’t used special effects before. Like him.
hmm I wanna try this with my own picture and my room (maybe to give it a bit of ghost effect .. lol)
@Phil
@Tyley
I don’t get why you guys are getting offended by what some dude said on the internet. He’s a graphic designer, big whoop. Honestly, the concept of the ’see through computer’ using Photoshop is something anyone with a week of Photoshop experience could figure out. I personally am not a graphic designer, but it really is common sense. It’s a good tutorial for those not familiar with using Photoshop though.
Otherwise, grow some balls you kids.
Thank you for the tutorial. Very nice.
To “Are You People Awake”, “John D.”, and “Pap3r”:
Yeah some of us don’t sit around at our monitors all day and night, glued to our computer chairs by a mixture of semen, sweat, and Cheeto crumbs. And we think it is nice when someone shares some interesting trick. So stop being such immature dickheads - it is totally pointless and does not become you at all.
Again, thanks for the nifty tutorial.
JOHN D CAN SUCK IT FOR BEING OUTRAGEOUS
Lisa, you are so right!
and at least some people are nice enough to share their knowledge (no matter how tedious or how simple) with normal brainers like us, unlike some selfish human beings who ”already knew the trick 5 years ago”.
(: adios!
Lisa, you are a dumbass. “Are You People Awake” was extremely justified. Why was Devin asking how to take a picture behind the monitor? That is the entire tutorial. And what was Mike even talking about? Also, you are a woman.
It is cute that you keep posting under different names defending your childish and crude behavior. There are medicines and therapy available for that disorder though.
If you did something other than jerking off at your computer and eating cheetos in your basement, you mgiht end up with some social skills.
The moron above sure knows how to kill a site.
Look how heated he got, posting every 2 mins with a severe case of anxiety.
I can’t believe how much John D can’t believe!!
[quote John Douche]
I can’t believe so many people had no clue…
I couldn’t believe, over the years, how many people…
I just can’t believe sometimes that so many couldn’t…
[/quote]
I bet your “designs” lack variety just like your comment.
Can you believe that?
Go back to building your Angefire / Geocities Microsoft Front Page pet websites you joke.
I personally agree that the concept is very simple - taking a picture of your monitor and then taking another picture in the same exact place with no monitor and then simply mixing the two together. However, this is a tutorial that shows how to do it in photoshop, which I think is the easiest way to do it (in fact, trying to achieve that without using photoshop is not an easy task). Some people may learn layer techniques from it and I think it may be quite useful.
O so i get it. Its like a really expensive window.
it’s really awsome!
Great site but stop dissing on each other so much- everyone is entitled to their own opinions.
this is very good tutorial
I like it
Great technique.
I personally love tuts for these simple, yet amazing results.
I totally diversifies my own knowledge and teaches me new things about this amazing program.
So, everyone quit being so ignorant…. Take the tut as it is…
oh this how they did it!! I saw same see thru looking desktop wallpapers but didn’t knew how they managed to do it so accurately. Will try today
Man this is really cool
wow this is really interesting
It makes an amazing picture to look at, but there are a few problems with its practicality. Two main things. It only works if you are looking at it from your own computer chair at the same height. Anywhere else and the image is skewed. So someone wandering into the room would not be able to appreciate your hard work. The other problem is the room will always have a varying intensity of lighting. If the lights were dim at the point of capture (as is the case here). Then the only time the effect would work, would be with the lights dim at the same time of day. Great idea though and all the photo’s I have seen of this are great.
[...] How to see through your computer monitor using Photoshop [...]