Tag Archives: anaglyph

Optom(etr)ist, With Both Eyes, in 3D


3D Glasses_FLAT Anaglyph-A-GIF BADGE GREY fill BLACK

Today’s The Daily Create, tdc1484 asks us to take a stand on the age-old “glass half-full or half-empty” point of view.
I say you are in charge of your own point of view, and if you’re going to have one, it should be informed from all perspectives.

And it might as well be in 3D!

You will need your red/cyan glasses to fully appreciate this GIF.

You can also see a static anaglyph as well as a non-anaglyph version of this image on my Flickr.



YEE HAW! It’s a Bronco Rider GIFfight!


“Bronco with Barn Boards” for GIFfight! by @aforgrave View with red-cyan 3D glasses (click for a larger image)

3D Glasses_FLAT Anaglyph-A-GIF BADGE GREY fill BLACK

@iamTalkyTina was calling for a GIFfight! last night, and today, in keeping with the #western106 theme, @mbransons called out “Draw!” and the bronco rider GIFfight! was on.  Quick to respond were @phb256 and @johnjohnston. Paul’s bronco is bucking while the world turns upside down, and John’s seems to be tumbling in a full 360º within the boundaries of the circular frame.

Given my recent foray back into the world of 3D, I decided to go with an anaglyph-a-GIF, and added some barnboards in the foreground. Somebody drilled a nice round hole for you to peek through.

YEE HAW! #western106 has begun!



In the early wild-west days of the Internet, animated GIFs promised the world to web explorers in the form of flashy-yet-soon-to-be-gaudy under-construction signs. Shunted aside as more refined web design arose, animated GIFs have experienced a resurgence in recent years, and are now accepted as a true Art Form, with annual competitions and juried art shows held around the world.

Participate in a hands-on workshop exploring the potential of the animated GIF, as both a professional tool for illustration and an art form for expression. Learn how to make and optimize GIFs, and explore the finer points of focus, timing, and envisioning so that you can develop your skills as a GIF Artiste. Who knows, you may even acquire a chronic case of GIF-EYE-tis, in which images presents themselves daily as an opportunity for interpretation as an animated GIF …

This workshop will occur as part of the annual conference of the Educational Computing Organization of Ontario (ECOO.org) at the annual BringITtogether.ca conference, held this year November 4th, 5th, 6th in Niagara Falls, Ontario. Details in Lanyrd. You will need to select this workshop as part of your Wednesday registration.  Register here.

Anaglyph Tutorial, Part 2 – Separating the Foreground and the Background


Think Before You Act. Save and Save and Save.

As you start to work with your image, please bear in mind that you should always work on a new duplicate layer each time move ahead in the process. Although Photoshop can be considerably forgiving with the wonderful Edit>>Step Backward, it is always good to be able to delete a layer attempt that isn’t working out and go back to a previous stage to start over.

As we work through the process of separating the foreground(s) from the background(s), it is prudent to carefully name each new layer and keep them logically organized so as to avoid confusion.

Isolating Elements

Let’s start with the foreground. In Part 1: Selecting the Image, we identified John’s hands and face as elements we decided to work with as our foreground.

My first step now is to isolate John’s hands and John’s body, making a layer for each of the left hand, right hand, and head/body. For your image, select what you want, and then use Layer>>New>>Layer Via Copy to get that selection on its own layer.

Here is my image of John with the hands and his head/body selected.

John is selected. The Marching Ants show what I want to use for the foreground.

John is selected. The Marching Ants show what I want to use for the foreground.

My technique for getting clean elements tends to depend on how close the Magic Wand or Quick Selection tool can get me to what I want. I will err on the side of getting more, and do some pixel cleaning of the new layer with the eraser (and sometimes the clone brush) to get as best an image as possible. What you select will depend on the image you are working with.

John is cutout. The Layer>>New>>Layer Via Copy action makes a new layer with only the selected parts of the picture.

Once each foreground element is its own layer (in this case: right hand, John, and left hand), we can move on to the background.

NOTE: The “marching ants” image above may be misleading in that I actually selected each element (2 hands, John) one at a time, and made each it’s own layer over three steps. For John’s image, it was a bit finicky and it was easier to work each one on its own. However, we are going to use a nice photoshop trick in a moment to get easily back to this same “marching ants” state from our 3 new layers.

Now for the background.

Although the foreground image will be in front of the background in the completed 3D Anaglyph, I have found that there can be artifacts or ghost images that can interfere, and so it helps to “remove” the foreground objects from the background wherever possible.

Select foreground layers (while hidden) using SHIFT+ COMMAND and then apply Edit>>Fill>>Content Aware to the background. Then tidy up.

At this point in time, I have 5 layers in my .psd file.

  1. left hand
  2. right hand
  3. John
  4. Background copy
  5. Background

We are going to “remove” the foreground element from the background copy layer using the Edit>>Fill>>Content Aware action.  This will create a sixth layer (in my example to the right it is shown as, “Background copy 2”)

First, we need to return to something that looks like the “marching ants” image above.

  1. Hide all layers except for the Background copy layer.  (watch the GIF to the right)
  2. Hold down SHIFT and COMMAND (or SHIFT and CTRL on PC) and click on the thumbnail images of the foreground layers (see the three clicks in the GIF on the right)
  3. This returns the “marching ants” for the foreground layers, but only the Background copy layer is visible and active.  In my example, I am back with something that looks like the marching ants image above.
  4. Use Edit>>Fill… >> and Content Aware option in the dialogue. After a bit of processing (spinning cursor), Photoshop will provide you with a new copy of your background layer with the foreground stuff removed.

In my case, this is what I got.

John is removed. There is still some cleanup to do, but it's a start!

John is removed. There is still some cleanup to do, but it’s a start!

And without the ants.

Messy Background after the Edit>>Fill...>> using Content Aware. We'll clean it up!

Messy Background after the Edit>>Fill…>> using Content Aware. We’ll clean it up!

To get something a bit neater, I just used the Clone Tool to make things more uniform. I lost the door lock and re-defined the back of the sofa, but it all works in the end. It doesn’t have to be super perfect, because the foreground will be back in front shortly, but something like this without the foreground elements is desirable.

Background Tidied Up Some

Here is an animated GIF that shows the process from start to finish.

  1. Original image
  2. Foreground elements selected.
  3. New Foreground layer created via selection
  4. Back to a copy of the original image
  5. Use SHIFT+COMMAND to select the foreground layers to apply Fill …>> Content Aware
  6. New Content Aware replaced background layer (showing selection)
  7. Content Aware background layer (no selection)
  8. Edited background layer (liberal use of the Clone Stamp Tool)
  9. Final Background with Right Hand (foreground)
  10. Final Background with Right Hand and John (foreground)
  11. Final Background with Right Hand, John, Left Hand (foreground)
"A GIF of the Process"

“A GIF of the Process”

 So exactly what do we have now?

We have our image now separated into independent layers that represent elements of foreground, mid ground, background, etc. With this saved, we will be ready to move on to colour treating our layers in preparation for making our anaglyph.

In the case of the “John Gets His 3D Glasses On” anaglyph, we have four layers

  1. our heavily edited background
  2. right hand
  3. John
  4. left hand

At this point, you may want advance to Part 3: Colour Filtering (link to follow), but first take a look at the result of separating the foregrounds, mid grounds, and backgrounds of the Sisyphus anaglyph:

Separated Layers for Sisyphus Anaglyph (animated)

Separated Layers for Sisyphus Anaglyph (animated)

In the case of the Sisyphus anaglyph, we have six discrete layers:

  1. Sisyphus and hill foreground
  2. Large Trees (to the right)
  3. Smaller Trees (behind)
  4. Village and Mountain
  5. Sky
  6. Ring

As you can imagine, with more layers, this took a bit longer, but some aspects of the separation were easier due to the fact that the edges are very clearly defined and thus easier to select. The monochromatic nature of the image also made it easier to retouch as well.

A couple of notes regarding this one:

  1. My first step was to remove the ring from the main image, and following that, I applied a 101% scale factor (very small) to the circular image so that its outer edges would be slightly hidden behind the inner edge of the ring. I did this because I noticed a bit of noise/artifacts at the inner ring edge of the pg 8 Skeleton anaglyph.
  2. Similarly, I extended the “sky” layer outwards slightly in a couple of places using the clone tool because there were a couple of “holes” visible between the ring and the sky.
  3. I also applied a similar minor scaling of the Large Trees layer, and translated them slightly so that they would blend nicely with the inner curve of the ring.

Some of these adjustments were made later (during steps 3 and 4) but I mention them here as they are part of the layer preparation process. In practice, it is sometimes necessary to return to Step 2 with a layer or two and make adjustments before re-processing that layer again with Steps 3 and 4.

As I said earlier — think and save as you go. Backup if you need to, and keep all of your experimental layers until you know you don’t need them.

  • At the end of Step 2, the “John Gets His 3D Glasses On” .psd file has 4 layers.
  • In my final .psd file: 29 layers  (not all used in the final image, but used in the getting there!)
  • At the end of Step 2, the “Sisyphus” .psd file has 6 discrete layers, plus a couple copies of the original image.
  • In my final .psd file: 22 layers  (again, not all used in the final image, but necessary along the way.)

Next up: Part 3

Next: Step 3: Colour Filtering (link to follow)
Then: Step 4: Positioning the Layers to Simulate Depth (link to follow)
Then: Step 5: Extending the Technique to make an Anaglyph-a-GIF (link to follow)

Get your 3D glasses ready! 

Anaglyph Tutorial, Part 1: Selecting the Image


Before You Start


You will be well served to have on hand a pair of red/cyan (or red/blue) 3D glasses so that you can view the images in the Tutorial (check out the Tutorial header image) and so you can test your images when they are done. I have also found that it can be quite helpful to actually wear the glasses during various parts of the process.

(Throughout the tutorial, you may wish to watch for the “Please Put On Your 3D Glasses Now” notices! ;-))


But you don’t need to wear them right now.

Unlike traditional stereo photography which makes use a pair of slightly different originals to create the perception of depth in 3D, we will be developing a 3D anaglyph making use of a single source image.  Before we delve into the process too deeply, first a little bit of foundational theory.

The Simple Explanation


Our perception of depth comes from the way our brain integrates two images from our two eyes — each eye seeing from a slightly different angle. We can simulate depth by providing each eye with it’s own discrete image — in this case, one red and one cyan. Without 3D anaglyph glasses we see both images (and so there is a “double image” effect — but with the use of such glasses, one image is filtered out with one lens, and the other image is filtered out by the other, so each eye gets its own discrete image. If the two images have been slightly adjusted in position (and this is emphasized if we do this differently for different layers) then we can be tricked into perceiving depth when the brain combines them. Click on the thumbnail to the right to enlarge the diagram.

Selecting An Image to Work With

Not all still images will be ideal for the creation of an anaglyph. The simplest image will have an object in the foreground and then a defined background behind. A more complex image may have a variety of foreground, mid ground, and background elements which can allow for a more interesting anaglyph.

Throughout this tutorial, we will understand the process through the exploration of the following original source images.

Sisyphus, by George Wither


“Sisyphus, Illustration 11” from Emblemes: Illust. by Geo Wither (1635)

While originally drawn/engraved on a flat surface, this image has considerable perspective detail that provides visual cues as to depth — the foreground hill with Sisyphus, the trees (two depths of them — the large ones on the right and the smaller ones behind), the city and mountains in the background, and the distant sky. If we wish to isolate each of these elements, we can emphasize their relative positions along the z-axis (into and out of the image).  As you can see, this image is an ideal candidate for turning into an anaglyph. (See the completed image)

John Gets His 3D Glasses On

John Gets His 3D Glasses

“John Gets His 3D Glasses,” original image by @johnjohnston, via Twitter/TwitPic

As a photograph, John’s image provides a good capture of foreground and background elements. John’s hands and face are forward and will provide our front layers, and the seat, door and wall are clearly behind him and will provide our background layer. (See the completed image)

Foreground and Background Elements from "John Gets His 3D Glasses On."

Foreground and Background Elements from “John Gets His 3D Glasses On.”

Your Image

If you start with a photo or image that allows you to perceive elements as belonging to either a foreground or background, then you have a candidate for an anaglyph.

If a focus element in your image is also centred in the foreground of your image then it is a candidate for emphasis. We will be emphasizing John’s hands (and his face, to a lesser degree) after we have isolated them.

Next: Part 2

Next: Part 2 – Separating the Foreground and the Background
Then: Part 3 – Colour Filtering (link to follow)
Then: Part 4 – Positioning the Layers to Simulate Depth (link to follow)
Then: Part 5 – Extending the Technique to make an Anaglyph-a-GIF  (link to follow)


What Is Your Question Today?

#prisoner106 Summer 2015

#noir106 Winter 2015

ECOO 2014 #bit14

#ecoo14 #bit14 Bring IT Together

#wire106 Fall 2014

Bava/Nobody WIRE106 T-Shirt

3D Anaglyphs

3D Glasses_FLAT AnaglyphBADGE GREY fill BLACK

3D Glasses_FLAT Anaglyph-A-GIF BADGE GREY fill BLACK

The Daily Create T-Shirt


ds106 Spring 2014

#ds106 The DS106 Workplace

ds106 Summer 2013

Posts by Date

February 2017
« Feb    

Creative Commons

Visitors to de•tri•tus


MiniCYHMN? | Status | 64K | Listening Options

Winampwindows Media PlayerReal PlayerQuickTime
Listening to 105theHive - details

ds106rad.io FAQs

What is ds106rad.io?
ds106rad.io is #4life.
Why do you ds106rad.io?
Who is ds106rad.io?
ds106rad.io is of The Earth. That's you, brother!

105theHive.org MiniPlayer

MiniCYHMN? | Status | 64K | Listening Options