Make an image from the Matrix tutorial

NOTE: I have used Adobe Photoshop Elements to make this image. If you’re using a proper version of Photoshop, things will be slightly different.

In this tutorial I will teach you to make an image look as if it came from the matrix, with green code everywhere. I will cover such techniques as displacement mapping, layers and the free tranform tool.
Start off with the image you want to edit. I used this one of me.

Matris tut 1

Also, get an image of some matrix code. I did a Google search and found this (big file, 380 kB):

Matrix tut 2

Open your starting image. It should be the background layer. It is a good idea to keep this layer untouched so that you can refer back to it or copy bits from it etc.

Create a new layer. Paste the matrix code image so it fills the screen. Duplicate the background layer and put it on top of the other two layers – call it ‘Lines’ or something similar. Your layer palette should look like this:

Matrix tut 3

On the top layer – Lines – look for adjacent areas that have similar colours. An example would be my shoulder and the window behind it.

Matrix tut 4

I selected the black region of my jacket/window using the magic wand tool. I used the Polygon Lasso Tool to subtract from that selection my jacket. I filled the remaining selection with a lighter colour.

Matrix tut 5

Having done that, I copied the top layer and pasted it into a new .psd file. I found that in order to get the next step to work, I had to save this file into ‘My pictures’. This may well be a bug in Elements. Save the file as ‘Matrix image displace’ or something similar.

Back to your original image. On the layer ‘Code’, go Filter>Distort>Displace. Use these settings:

Matrix tut 6

You may want to use a smaller value than 30 for the scale. 20 or even 10 often works well.
Click OK and select the image ‘Matrix image displace’, or whatever image you saved in the last step. Click OK. The image of the code should distort slightly.

Go to the layer ‘Lines’. Go FIlter>Stylize>Glowing edges. Play around with the settings until you’re happy and click OK. Then, go Enhance>Adjustments>Hue/Saturation. I think this is different in a proper version of Photoshop, so have a look around. Check the box ‘Colorize’ and make it green and about the same saturation as the code. Like so:

Matrix tut 7

Set the layer blend mode to ‘Screen’ and admire the effect!

To make it look a bit more real, select (on the code layer) the bits of code corresponding to each wall and go Image>Transform>Perspective. Grab a corner handle and drag, then use the free transform tool to get this:

Matrix tut 8

I did the same with the other wall.

Now you’re basically done! I played around a bit to get a bit more detail on the jacket. This is my final product:

Matrix tut final

Feel free to comment.


Trackbacks & Pingbacks

  1. hannasmithdesignfutures pingbacked on 6 years, 9 months ago


  1. * V!r+ual D3a+h says:

    That was awsome, but can you make the code itself?
    Please send me an aswer if u can:->

    | Reply Posted 11 years, 6 months ago
  2. * Undead says:

    Thats Friggin Sweet I made my own version in Fireworks because I don’t have photoshop it was alot harder but it was still somewhat similar and it looks pretty cool thanks! here if you want to see it

    | Reply Posted 11 years, 4 months ago
  3. * steve says:

    Undead: Nice! I don’t have much experience with Fireworks, but your’s turned out okay. One thing I would say – the perspective on the left wall looks a little out.

    Glad to hear you liked it.

    | Reply Posted 11 years, 4 months ago
  4. * Undead says:

    Yea thanks I know its not nearly as good as yours and the reason the walls are probably a little out of whack is because there weren’t really any walls there

    | Reply Posted 11 years, 4 months ago
    • * Lanette says:

      it’s better for the defense than it is for the pr.cesutionoWFTV has learned that the medical examiner found two injuries on MartinÒ€ℒs body: The fatal gunshot wound and broken skin on his knuckles.I love how all of this evidence is playing out exactly how GZ described the attack minutes after the shooting. No_Limit_Nigga probably got what was coming to him.

      | Reply Posted 6 months, 4 weeks ago
  5. * jmejicano says:

    Very nice effect. I’m new photoshop user, I have Adobe Photoshop CS2, I try to make same effect, but I can’t do that. Can you tell me how I can do that with CS2 version?

    Thank you

    | Reply Posted 11 years, 3 months ago
  6. * steve says:

    jmejicano: The process will be almost exactly the same in CS2. Elements is just a stripped-down version. Some of the filters etc. might be in different places on the menus, but apart from that there’s very little difference.

    | Reply Posted 11 years, 3 months ago
  7. * mauri says:

    im a new photoshop user too. My problem is to fuse the layers. I have the thre layers:
    background, with the normal image.
    code, its still distort slightly
    and lines.
    every layer is edited.
    but the three layer dont work together.
    i hope you’ll understand my problem.

    greetz mauri

    PS: sorry for my bad english! πŸ™‚

    | Reply Posted 11 years, 2 months ago
  8. * xlifes says:

    Mauri, you have to merge the layers. You can do that by right clicking in the top layer and then choose the option “merge down” or “merge visible”.
    however do that only after you’re done with the effects and stuff because you cannot separate them again afterwards.

    | Reply Posted 11 years, 1 month ago
  9. * dibby says:

    Dude, that was a freakin sweet tutorial. You’re clearly a badass. I never use photoshop — I downloaded the TRIAL version just to draw a Matrix picture — and had no trouble at all coming up with a seriously K-A result! Thanks.

    | Reply Posted 11 years ago
  10. * Tyler says:

    Awesome tutorial…worked just like u said u little Genius. me and a friend are web designers and my last name is smith and his anderson…no lie. I will use this to make our logo. Good job man. Keep up the good work.

    | Reply Posted 10 years, 11 months ago
  11. * lewis says:

    hi, i’m not sure how to get the lines of the code to follow the edges of the walls n stuff?? can u help? thanks

    | Reply Posted 10 years, 9 months ago
    • * Amberly says:

      I’m so glad that the inrtneet allows free info like this!

      | Reply Posted 6 months, 4 weeks ago
    • I find that all communication boils down to “words” and “pictures”. Unfortunately, graphics take a back seat to the importance of the words when it comes to website rank and SEO.

      | Reply Posted 3 months, 2 weeks ago
  12. * steve says:

    Hi Lewis. I’m not sure whether you mean you’re talking about the bit with the displacement map or the bit with the perspective transform, so I can’t really help. I thought I said it all in the tutorial, so maybe you just skimread past it. Have another read, and if you still don’t get it, I’ll try and help.

    | Reply Posted 10 years, 9 months ago
  13. * Michael says:

    Brilliant mate. Thanks for the tut!

    | Reply Posted 10 years, 4 months ago
  14. * Scott says:

    great job! really good tutorial

    | Reply Posted 10 years, 3 months ago
  15. * rolly says:

    its so nice….i really like it….hope you’ll send me lot of photoshop tutorial to my email

    | Reply Posted 10 years, 2 months ago
  16. * very cool says:

    works great in pshop 6/7, very good explanation of steps.

    def need to choose the right starter image to work (eg good contrast)


    | Reply Posted 10 years, 2 months ago
  17. * Oscar says:

    thank you very muchhhh πŸ˜€ i love you man lol im not gay i just appreciate ur work πŸ˜€ lol

    make new things and holla back πŸ˜€

    | Reply Posted 10 years, 1 month ago
  18. * ZX says:

    Very easy to make and come out pretty awesome. Plz send me some more tutorial as well if you got something as cool as this one plz? ^^ Thanks a lot, you’re the man.

    | Reply Posted 10 years, 1 month ago
  19. * Hex Renson says:

    hi i’m pretty new to this photoshop thing…i’m kind of having a couple of problems. you know when u create a new layer? well how do you make that layer an image? Because mine turns out grey and white checks.
    This is pretty awesome though ^_^

    | Reply Posted 9 years, 12 months ago
  20. * steve says:

    Hex: Grey and whie checks indicate transparent parts of the picture. You’ll notice you can’t zoom in on the checks, or copy and paste them, or anything like that, because they aren’t actually there.
    To create a new layer which is an image, simply copy an image (usually by opening it seperately in photoshop, then pressing ctrl+A (to select all) then ctrl+C (to copy it)), then go to the file you want to add the image to and paste (ctrl+V). The image will be pasted as a new layer.

    | Reply Posted 9 years, 12 months ago
  21. * Hex Renson says:

    Thanks man,
    Thats really whack. Got any more tutorials?

    | Reply Posted 9 years, 12 months ago
  22. thanks for your inspiration, I was really mentally lock on a project, this opened my eyes for an after effect, I’ll post it if it works, thanks!

    | Reply Posted 9 years, 11 months ago
  23. * Essenz_a says:

    wow…awesome tutorial!
    I make this too! It’s very interesting!
    thx from Italy! πŸ˜‰

    | Reply Posted 9 years, 11 months ago
  24. * Leo says:

    thankyou so much its my id if u wan somthing mail me

    | Reply Posted 9 years, 9 months ago
  25. * BlablaX says:

    i’ve been searching for this kind of tutorial for a while… never… ever tought i will find it… and finally πŸ˜€ thanks, man πŸ˜€ you really helped me out πŸ™‚

    | Reply Posted 9 years, 3 months ago
  26. * Karim says:

    can u make a vid tut?

    | Reply Posted 9 years, 2 months ago
  27. * createmo says:

    Thank you for your website πŸ˜‰
    I made with photoshop backgrounds for youtube, myspace and whatever
    my backgrounds:
    take care and thank you again!

    | Reply Posted 9 years, 1 month ago
  28. * Classics says:

    Awesome. Thanks a lot !

    | Reply Posted 7 years, 1 month ago
  29. Thanks alot for the info dude. This is absolutely awesome!

    | Reply Posted 6 years, 4 months ago
  30. * forum48 says:

    i like the picture – is it ok for you if i use it for my blog? i took the lower part of it: — the blog is not yet ready, i think i take another design but your matrix picture – at least partly – would be nice to illustrate my referring to people who went out of the matrix.. . cheers, nada

    | Reply Posted 5 years, 5 months ago
  31. * Mr. Hax says:

    Can I use other softwares? I only have Gimp2 software..

    | Reply Posted 4 years, 1 month ago
  32. Complete a 12-hour, pre-licensing bail education course that is compliant with the
    Insurance Code Section 1810. Despite the effectiveness of this strategy
    it is one which is employed in practically every man hunt.
    In many cases this will be a parent of relative who are concerned with the wellbeing of their loved one.

    | Reply Posted 3 years, 12 months ago
  33. * Laura says:

    Hi Steve, can you tell me if you have rights to this matrix image? If I was to use this and add on other elements or layers to the image where do I get the rights to use the matrix coding background if it was used in public? Please can you let me know asap to my email thanks

    | Reply Posted 3 years, 6 months ago
  34. * Cheyenne says:

    The paragon of unirnstaeddng these issues is right here!

    | Reply Posted 6 months, 4 weeks ago

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: