Create a stereoscopic illustration using Illustrator and Photoshop

Default avatar.
July 26, 2011

Nowadays, 3‑D technology is being used a lot in many media. Since James Cameron’s Avatar brought this technique to a whole new level, everybody is using it to try to attract more attention and create a powerful visual experience for consumers. Today, we’ll learn how to create a simple but effective anaglyph illustration. Before we begin, I suggest you buy a pair of 3‑D glasses or read this guide on how to create your own. We’ve included the Photoshop and Illustrator files at the bottom of this post; download them to explore more. If you follow this tutorial to create your own anaglyph, please share your results and experience with us in the comments.

Step 1

First, open Adobe Illustrator and create an A4 canvas (21 × 29.7 cm or 8.27 × 11.69 inches).

Step 2

Create two circles using the Ellipse tool (the shortcut is L). Draw an elliptical shape on the bottom and a perfect circle above it (holding Shift + L will make it proportional).

Step 3

Use the Pen tool ℗ to create the fuse. To get square shapes using the Pen tool, hold Option/​Alt and click on the point on the curve that you want to turn into a vertex.

Step 4

To create the flame, just repeat the same procedure. Practice drawing round and square shapes with the Pen tool; with time, it will get easier.

Step 5

Now let’s add some color to our little bomb. Select the circle and bottom of the fuse using the Selection tool (V), and go to the Gradient panel. Let’s create a radial gradient that fades from white to black, using a perfect white (C:0, M:0, Y:0, K:0) and perfect black (C:0, M:0, Y:0, K:100). Using the Gradient tool (G), position the gradients as shown below. And add a 10-point black stroke to both, which should give you something like this:

Step 6

Let’s add some plain color to the fuse. Select it and choose a dark yellow (C:36, M:46, Y:100, K:10), with no strokes.

Step 7

Select the flame shape using the Selection tool (V). And in the Gradient panel, set a classic flame gradient, using some yellow (C:5, M:0, Y:90, K:0), orange (C:0, M:90, Y:85, K:0) and brown (C:15, M:100, Y:90, K:79). Don’t forget: unless it’s a radial gradient, it will not look as soft as we want. Using the Gradient tool (G), place it as in the screenshot below:

Step 8

Remember the first ellipse we did in the beginning? Select it, and choose a total black fill.  Now got to Effect → Blur → Gaussian Blur, and set a radius of 40 pixels.  You should get this shadowing:

Step 9

Now let’s create some reflections. Using the Pen tool ℗, draw this shape with a white fill:  Open the Gradient panel, and create a white gradient with a transparency. Just set the opacity of one of the colors to 0% to get this effect:  Open the Transparency panel, and set the opacity of the two shapes to 50%. Our bomb is done. Now let’s create the anaglyph effect.

Step 10

Open Adobe Photoshop and create a 550 × 550-pixel canvas, with a 72 DPI.

Step 11

Copy the bomb from Illustrator (Command/​Control + C), and paste it in Photoshop (Command/​Control + V). Pasting it as a Smart Object is better because you will be able to scale it without it looking pixelated.

Step 12

Create a simple gray-to-black gradient background using the Gradient tool (G).

Step 13

By clicking on the bomb layer using the Selection tool (V), you can select only the shape of the bomb, which is quite useful when you need to work with only this space.

Step 14

Let’s create a new layer (Command/​Control + Shift + N). With the bomb selected, go to the Color panel and choose a blood red (R:255, G:0, B:0). Using the Paintbucket tool (G: it’s in the same place as the Gradient tool — just hold your mouse over it), fill the entire selected area.

Step 15

Go to the Layers panel, and duplicate the original bomb layer by pressing Command/​Control + J. Then, group this new layer with the red shape layer, and call the group Red.”

Step 16

Select the red shape layer. In the Blending Modes panel, choose the one called Screen.” You should get this result:

Step 17

Let’s repeat the same procedure of creating a new layer, filling it with color, duplicating the bomb layer, creating a group (“Blue”) and blending the color layer with the bomb layer. This time, though, use a light blue (R:0, G:240, B:255).

Step 18

Pay attention to these next steps, or else you might not achieve the 3‑D effect. First, select the group Red,” and open the Blending Modes panel. Select the one called Multiply.” Repeat this procedure with the Blue” group. Your image should have gotten a bit darker.

Step 19

Using the Selection tool (V) move the Red” group gently to the left and the Blue” group to the right; not too much, just a bit so that they are out of the center. This will create a depth effect, so put on your 3‑D glasses to see if it works.

Step 20

Let’s try some depth effects. Group all of the layers (Command/​Control + G), and name it bomb_​1. Duplicate the group, and call the second one bomb_​2. Using the Free Transform tool (Command/​Control + T), resize bomb_​2 and flip it horizontally (right-click while using the Free Transform tool). Place this group behind the first one. You should get this, the final result:

The result

I hope you had a great time following this tutorial and that you learned a bit about how to create anaglyph images. There are a lot of other ways to achieve this effect; this is just a introduction. Keeping working hard, and please share your results with us. So, what were your results from following this tutorial?

Marcos Torres

Marcos Torres is a Brazilian freelance illustrator/​art director and also a contributor for Abduzeedo as a tutorial designer. You can get in touch with more of his work by accessing his Website or by following him on Twitter.

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…