Creating a Stereographic Projection in Photoshop

Several years ago, I came across a way to create cool and unique pieces of art from a photograph in Photoshop. This type of photograph is known as a stereographic projection or “little planet” and, while you don’t see too many people doing it anymore, it seems like it was kind of popular a few years ago. I made a few of these back then, and since I’ve always liked them I’ve recently started making them again.

To make this kind of art is actually pretty simple and requires only a couple of things: a great photograph and a copy of Adobe Photoshop or a similar image-editing program. The best stereographic projections use a type of picture called a 360-degree panorama. This means that the edge of one side of the panorama could be placed next to the opposite edge of the panorama and the two sides would form a continuous scene. These types of pictures are often created by standing in one place and taking continuous photographs while panning the camera in a 360-degree circle, then stitching the photos together in Photoshop or a similar program. Many smartphone cameras now have a panorama feature that makes this easier.

So what do you do if you can’t get a 360-degree panoramic photograph? There are two options: either fake it by editing the image you have, or mirror the image. I have done both, and both options can provide great results.

Faking It

First, I want to show you how to fake it. I’ll use a copy of my photograph, Hovenweep, taken at Hovenweep National Monument.
Hovenweep by K. Bradley Washburn

Photoshop Offset Dialog Box

After opening the photograph in Photoshop, I will go to the “Filter” menu, scroll down to “Other,” and choose “Offset…” from the pop-out menu. In the “Horizontal” text field in the dialog box that pops up, I will type “1000” and click the “OK” button. My image will now look like this:

Hovenweep Offset

I can now use the Clone Stamp tool to replace areas of the image along the seam so that the offset sides flow into each other without a noticeable difference. Since we are creating a stereographic projection the seam doesn’t have to be perfect, but I will still make it look really good. Once I am finished with that, my image will look like this:

Hovenweep Clone Stamped

You can still see a couple of places where I could have tried to make it look better, but it will be fine in the final result. Now that I have erased the seam, I will go to the “Image” menu, scroll down to “Image Rotation,” and choose “180°.” Back in the “Filter” menu, I will scroll down to “Distort,” and choose “Polar Coordinates…” In the dialog box, make sure the “Rectangluar to Polar” radio button in selected and click “OK.” My image will now look like this:

Hovenweep Polar Coordinates

The last step is to resize the image so that is a square. Some people do this step right after using the Clone Stamp tool, but I prefer to do it last. When I do it earlier in the process, I occasionally get weird artifacts in my final image. To complete this step, I will go to the “Image” menu again and choose “Image Size.” In the dialog box, I will make sure the “Resample” check box is selected and the link icon between Width and Height is not selected. I will choose “Pixels” from the drop down menu next to Width. Then I will change the value in the text box next to Width to match the value in the text box next to Height, and click “OK.”

Image Size Dialog Box

My final image looks like this:

Hovenweep Stereographic Projection Tutorial Final

Although not perfect, my seam is now not even visible. It’s a little different from my first version because the Offset value in my first version was different, but that’s how it’s done!

Mirroring

For this example, I will use a different image. I’ll open up a copy of my photograph Cottonwood Creek in Photoshop. The first thing I will do is go to the Layers panel, click the lock icon on the Background layer, right-click on the layer, and choose “Duplicate Layer.” I now have two layers, each with the Cottonwood Creek image.

From the “Image” menu, I will now choose “Canvas Size.” In the dropdown box next to Width, I will choose “Percent.” Then in the text field next to Width, I will change “100” to “200” and click “OK.” This will double the width of the canvas while keeping the height the same.

Cottonwood Creek Canvas Resized

Using the Selection Tool, I will drag one layer clear to the right of the canvas and drag the other layer clear to the left of the canvas. Then, with just one layer selected, I will go the “Edit” menu, scroll down to “Transform,” and choose “Flip Horizontal.” This creates a mirrored landscape and my image now looks like this:

Cottonwood Creek mirrored

With the top layer selected, I will now press “CMD+E” (Mac) or “CTRL+E” (Windows) to merge the two layers, and follow the steps I took above to rotate the image, map to polar coordinates, and resize to a square. My final image will look like this:

Cottonwood Creek Mirrored Stereographic Projection

That’s all there is to it! With a nice photograph and a decent image-editing program anyone can create a stereographic projection.


Flash Basics Tutorial #3: Creating 3d Text

How to create 3d looking text.


http://www.youtube.com/watch?v=gsIwH3LZiq4

In this tutorial, I demonstrate how to create text and make it look 3d.

Concepts learned:

  • Breaking Apart Objects
  • Changing Fill Colors
  • Copying and Pasting
  • Snapping
  • Using the Gradient Transform Tool
  • Using the Line Tool
  • Using the Text Tool
  • Using the Zoom Tool
  • Using Undo
  • Working with Text
  • Working with Gradients

Flash Basics Tutorial #2: Making the Ball Bounce Look Real

Part II of Creating a Bouncing Ball.


http://www.youtube.com/watch?v=rmHNh8hVMyU

In this tutorial, I demonstrate how to make the bouncing ball more realistic looking.

Concepts learned:

  • Moving Through the Timeline
  • Entering Keyframes
  • Easing In/Out
  • Demonstrating Object Materials
  • Using the Free Transform Tool

To create the bouncing ball, please watch Part I of this tutorial: Flash Basics Tutorial #1: Creating a Bouncing Ball
Or download the finished Part I file here.


Flash Basics Tutorial #1: Creating a Bouncing Ball

The first in my new series of Flash tutorials is now live on YouTube. Just click the video or the link below the video to watch it.


http://www.youtube.com/watch?v=2S9BXYiP9Tc

In this tutorial, I demonstrate how to create a bouncing ball.

Concepts learned:

  • Using the Oval Tool and Line Tool
  • Using the Color Palette
  • Creating Symbols
  • Inserting Frames and Keyframes
  • Using Guide Layers
  • Creating Classic Tweens

Adding ActionScript to Multiple Instances

I wrote a small snippet of ActionScript 2.0 the other day that I was quite proud of. It actually isn’t a very complicated block of code, but I was having trouble making a movieclip do what I wanted so I was quite pleased when I finally got it to work.

Here was my problem:

I had a movieclip, twenty-four frames long, with twenty-three buttons inside. When the mouse moved over each button, the movieclip was supposed to go to a different frame. I didn’t want to code each button individually because that can be tedious, so I employed a method I have often used to add the same code to multiple buttons. First I gave the timeline a name by assigning it to a variable:


var menus:MovieClip = this;
 

My buttons inside the movieclip were named btn1 through btn23, so I then created a for statement like so:


for (var i=1; i< =23; i++) {
    t = menus[“btn”+i];
    t.onRollOver = function() {
        gotoAndStop(i+1);
    }
    t.onRollOut = function() {
        gotoAndStop(1);
    }
}
 

Using the temporary variables t and i, I was able to assign onRollOver and onRollOut functions to each button. The code actually worked really well when the mouse rolled off the buttons, but when the mouse rolled over the buttons, the movieclip always went to Frame 24 (23 + 1), no matter which button it was over. Obviously, this wasn’t going to work.

I tried several things to make the code work, and had no luck. For some reason, whenever I used the i variable in referencing the frame to go to, it only registered as being equal to 23. I had to figure out a way to capture the value of i at each iteration. Then it occured to me. Since i wasn’t working, maybe I could reference the object directly, using the instance name to tell the movieclip which frame to go to. That was easy enough to do using this._name, but I still had the problem of getting rid of the btn part of the instance names. That was when I remembered substring. I rewrote my code to convert the substring of each instance name to an integer, added 1, and it worked perfectly. My code now looked like this:


var menus:MovieClip = this;

for (var i=1; i < =23; i++) {
    t = menus[“btn”+i];
    t.onRollOver = function() {
        gotoAndStop(int(substring(this._name, 4, this._name.length)) + 1);
    }
    t.onRollOut = function() {
        gotoAndStop(1);
    }
}