Introduction: Afterimage Illusion

Picture of Afterimage Illusion

An afterimage is the persistence of a picture or shape after exposure to the original picture or shape has been removed. You've probably seen them before after looking away from a bright light and still being able to see a halo or glow in your vision. This phenomenon also happens with colours. Wikipedia defines afterimage as "prolonged viewing of a color induces an afterimage of the complementary color (for example, yellow color induces a bluish afterimage)."

Here's an example of an afterimage I made:

Mouse over image and stare at white dot for 30 seconds.
Move mouse off image and stare at B+W image to see colour.

Why does this happen?

Afterimages occur when the photoreceptors in our eyes are overstimulated and become fatigued. In everyday life your eyes are moving around and focusing on thousands of things every minute, allowing the rod and cone cells (photorecptors) to stay stimulated by an ever changing array of information. However when you focus on a picture the cone cells (used for colour) in our eyes become overstimulated. After a short period of time (about 5 seconds) these cone cells are only sending a weak signal to your brain telling you what colour you are looking at, making the colours seem muted. When you move your eyes to a blank space like a wall the photoreceptors compensate for this change in information and the brain interprets these new signals as colours complementary to what you were just viewing (an opposite, or negative).

The read on negative afterimage is fascinating stuff. Here's some further source information to enlarge your brain.

Making your own negative afterimage is a great way to demonstrate how our eyeballs work, or just have fun with your latest vacation pictures.

Step 1: Simple Negative Afterimage

Picture of Simple Negative Afterimage

Open an image in any photo editor and duplicate the layer twice, make one of the new layers desaturated and invert the colour of the second. I did this in Photoshop, but I've provided links to free alternatives.

Duplicate layer (make 2 additional layers):

Desaturate first layer:

  • Photoshop: ctrl + u
  • PIXLR: ctrl + u (saturation to -100)
  • GIMP: ctrl + shift + u
  • Paint.NET: ctrl + shift + u (saturation to -100)

Invert second layer:

  • Photoshop: ctrl + i
  • PIXLR: ctrl + i
  • GIMP: ctrl + shift + i
  • Paint.NET: ctrl + shift + i

Step 2: Add Focal Dot on Inverted Layer

Picture of Add Focal Dot on Inverted Layer

In the center of the inverted layer add a visible dot. Make sure the dot is identifiable and a neutral colour. I went with a white dot with a black outline to make it really stand out.

Step 3: Save Layers As New Images

Picture of Save Layers As New Images

Save the desaturated and inverted versions of your photo as separate images.

Step 4: Make a Rollover Image

To make a rollover image like I did in the intro step you'll need to use a little HTML. The "mouseover" HTML command determines what image is displayed when you move your mouse over the image, and which image to display when the mouse is moved off the image.

I've pasted the code I used below, you'll need to change the capitalized letters and underscores to wherever your file is located.

<pre><img onmouseout="this.src='LOCATION_OF_IMAGE/DESATURATED_IMAGE_NAME.jpg'" onmouseover="this.src='LOCATION_OF_IMAGE/INVERTED_IMAGE_NAME.jpg'">

I suggest hosting your files online, then copying the file locations into this code.

An example would be:
https://www.instructables.com/files/orig/FBC/J1A4/HS3GT1E0/FBCJ1A4HS3GT1E0.jpg

Step 5: Make a GIF

Picture of Make a GIF

I've made an entire Instructable about making your own animated GIF's. It's super easy to do, and there's a few options:


Have you made your own negative afterimage? I want to see it!
Share a picture of your version of this project in the comments below and be awarded a 3-month Pro Membership on Instructables.com and a digital patch.

3-month Pro Memberships remaining: 3 / 10

Comments

sabu.dawdy (author)2014-03-28
<pre><img onmouseout="this.src='https://www.instructables.com/file/F4LH6Z3HTB0WI2I/'" onmouseover="this.src='https://www.instructables.com/file/FNQMCDVHTB0WI39/'">
sabu.dawdy (author)sabu.dawdy2014-03-28

here :)

sabu.dawdy (author)sabu.dawdy2014-03-28

couldn't do the code.. *signs*

so here are the images and the gif

Matt2 Silver (author)2014-03-10

Hello Mikeasaurus,

Thank you very much for posting this cool instructable, I think these after images are amazing! I'm trying to use the roll over code you posted in an instructable I'm making to show how something that glows in the dark looks in the day and in the night. I'm having a bit of trouble making the code work. could you please provide explicit instructions on how you added the roll over images to this instructable?

mikeasaurus (author)Matt2 Silver2014-03-10

The exact code is in Step 4. Here it is in context of my example

<center>
<a href="www.instructables.com/id/afterimage-illusion">
<img onmouseout="this.src='https://www.instructables.com/files/orig/FY5/RPBL/HJKC2B4V/FY5RPBLHJKC2B4V.jpg'"
onmouseover="this.src='https://www.instructables.com/files/orig/FOQ/BLQK/HJKBZRXL/FOQBLQKHJKBZRXL.jpg'"
src="https://www.instructables.com/files/orig/FY5/RPBL/HJKC2B4V/FY5RPBLHJKC2B4V.jpg" /></a>
</center>

sspade1 (author)2014-03-05

10 sec delay GIF made in CS6

mikeasaurus (author)sspade12014-03-06

Wow, those colours really POP!

Thanks for sharing, enjoy the patch and Pro Membership.

videogame57 made it! (author)2014-02-27

I just made mine with Paint.NET and HTML.

I couldn't get it to work in the comment, so I uploaded it to my website:

http://www.videogame57.tk/afterimage.html

(Random Fact: The focal circle is 39x39 pixels if you know what I mean...)

mikeasaurus (author)videogame572014-02-28

Hmm, I don't see it in the link you provided. Maybe try uploading it to our site and linking from there?

videogame57 (author)mikeasaurus2014-02-28

How can I upload a .html file to Instructables?

I tried to make it on my website using the code you provided, but it didn't work.

Is there anything else I should know to use the HTML method?

mikeasaurus (author)videogame572014-03-03

If it's an animated GIF you can just upload that to our site, then link me to the limage URL in a reply. If it's the rollover HTML you'll need to make a complete HTML page (with the code between <HTML>rollover code here</HTML>).

videogame57 (author)mikeasaurus2014-03-04

I did exactly that and it didn't work at all.

Maybe the resolution of my images (1920x1200) is too high?

Try viewing the source of the page, I don't see any differences from your code (except my own images).

mikeasaurus (author)videogame572014-03-04

Try with a max resolution of 600 max.

Dakky made it! (author)2014-02-28

This is pretty cool tbh :3

http://puu.sh/7dSqi.gif

mikeasaurus (author)Dakky2014-03-03

Whoa, crazy!

Enjoy the patch and 3-month Pro.

Michael_Bell made it! (author)2014-02-28

Did this with a paper shape I built last month, turned out pretty nice. If anyone wants to build one of these shapes, the instructions are here.

Hmmm the Gif broke... I can't find any edit buttons so here is a link to the animated file...

http://i.picasion.com/pic76/621374c799d5db396f9d294c9aeadc3d.gif

mikeasaurus (author)Michael_Bell2014-03-03

Wow, that works so well with all those colours. I also like the brick background.

Thanks for sharing, enjoy the 3-month Pro and digital patch!

artducko (author)2014-02-28

i saw a simple demonstration of this effect in the perception chapter in my psych 101 text many years ago. this is rather elegant. i was surprised at how well this worked. eerie! i'm thinking i could make a screen saver with a slide show on a 30 second cycle? hmmm

krisztian1997 (author)2014-02-28

Nice instructable, the effect is very interesting on some images

Great colours! Thanks for sharing.

Noram27 made it! (author)2014-02-25

Nice Instructible! I have often wondered how these work and how to make one. Now I know, thank you.

I made mine with Corel PaintShop and GifAnimator:

mikeasaurus (author)Noram272014-02-27

Great stuff. Enjoy the patch and 3-month Pro.

Noram27 (author)mikeasaurus2014-02-27

Thanx mikeasaurus, I am learning more every day on this site!

CountJameZ made it! (author)2014-02-27

Nice Instructable! I've always liked these sorts of things.

I made this one in GIMP. You may have to click on it for the animation to work.

mikeasaurus (author)CountJameZ2014-02-27

Now where have I seen that robot before?

Enjoy the patch and 3-month Pro.

CountJameZ (author)mikeasaurus2014-02-27

Thanks!

azharz made it! (author)2014-02-26

I made this by using Pixlr express online and GIF Maker online. Got the image from Google images. An awesome instructable.

Duration is 15 seconds.

mikeasaurus (author)azharz2014-02-27

Whoa, nice colours.

Enjoy the patch and 3-month Pro.

azharz (author)mikeasaurus2014-02-27

Thanks Mike. I got my whole day better.

MonkiMan (author)2014-02-26

thats awesome

Ryan Wright (author)2014-02-25

Wow thats really cool, love the effect dude!

Penolopy Bulnick (author)2014-02-25

MAGIC! WITCH! WITCH!!!!

About This Instructable

20,409views

110favorites

License:

Bio: I'm Mike and I make crazy things at Instructables HQ in San Francisco. Follow me and try a few of my projects for yourself!
More by mikeasaurus:Sliced Wood CoastersTape Measuring ToolSqueeze Massage Tool
Add instructable to: