Create an Illusion With Photoshop

You can create an illusion in Photoshop using 3 different shades of grey. If you download the chess board image from the credited URL below, and open it with Photoshop or any image editing software that has a color picker, you will see that square “A” and “B” are actually the same shade of grey. Use the color picker and click over each square, you will notice that the color code does not change. Better yet, if you have an integrated color picker with your browser, like ColorZilla in firefox, simply visit the URL below, and use that. (The image above has been tampered and reduce in size that the process no longer works.) 

Credit: Image of chess board from Wikipedia
published by Edward H. Adelson, Professor of Vision Science at MIT in 1995

The first time I saw this I though Photoshop was playing tricks on me… I’m thinking to myself… no way man… those squares are NOT the same color… but they are. If you’re like me, and have to get to the bottom of why this is… this convinced me that your brain can play tricks on you when your eyes look at object through different shades of lights.

Quick Way to reproduce this illusion

Here is a quick way to reproduce this illusion effect… 4 steps

  1. Open your favorite images software, and pick 3 shades of grey.
  2. Go with a dark shade, a medium shade, and a light shade of greys.
  3. On 1 layer simply do a linear gradient using the dark shade and the most light
  4. Create a layer on top of this layer, draw a rectangle of any size you want, but do leave enough room that you can see a lot of the gradient background. Fill that rectangle with the medium grey.

Now look at that rectangle, you would swear that the left side is a different shade of the right side. Yet you just made the solid color fill yourself, using only 1 color, so you know that it’s your eyes playing a trick on you. Also, flicker ON and OFF the bottom layer, the one that has the gradient dark to light, and every time this bottom layer is OFF you see that the rectangle is indeed 1 solid color.

Actually I have the same illusion affect in the header of this website, including this page. The most top part of that image are different shades of grey. You see stripes going down on an angle. If you download and open my background image, and color pick anywhere inside the narrow part of the stripe, you will see that even though you are convince that those stripes are not of the same shade, they are. They look like they are coming off from the most top as a lighter shade of grey going to a darker shade as they go into the orange section of the design. This is the illusion, those stripes are the same color from top to bottom.

If you happen to be using a browser that has an intern color picker, like ColorZilla for Firefox, you can scroll to top of this page right now and check out the color code from top to bottom. You will get #D4D4D4 within the narrow part of the stripe from top to bottom.

If you click in between the stripes (wider section) then the color picker will change on any click of the mouse.


Leave a comment