Introduction: 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
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
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
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
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:
- Use an online service (free)
- Use Photoshop
- Use GIMP (free)
Have you made your own negative afterimage? I want to see it!
Happy making :)
Participated in the
Full Spectrum Laser Contest
