Home > Adobe, CS5, Digital Photography, Digital Publishing Platform, InDesign > Create a 360° Image Sequence for Digital Publishing

Create a 360° Image Sequence for Digital Publishing

Click to see the car rotate!

One of the features of Adobe’s Digital Publishing System is that you can create an image sequence overlay through the new overlay panel. With this interaction, you can scrub back and forth through a sequence of images with a swipe of your finger. The sequence of images can be anything, but one popular implementation is to use it as a 360° product viewer. Let’s do this!

Some of the samples I’ve seen uses 3D rendering software to come up with the individual images. Since I’m not apt at 3D rendering, I’ll photograph my product.


To photograph your 360 image sequence I used the following:

  • A cheap plastic turn table.
  • A circle cutout with a mark every 10 degrees.
    I made my in Illustrator, but you can download a copy 10degree_circle.
    There is a start/stop marker. and a faint cross in the center to help you center it on the turn table.
  • Camera with Manual settings.
  • Tripod
  • Shutter Release

Shooting the Images

  • You can see my setup here.
  • I set my camera to full manual mode, with a locked shutter speed and aperture, the exposure will be the same every time. This will help in post processing. I also switched off auto focus after I found a good focal point.
  • Before shooting, I rotate the whole object around while looking through the camera viewfinder to make sure the object doesn’t drift off center.
  • I line up my start/stop marker on my circle to a pen, on the side away from the main light source. I don’t want to block the light each time I have to rotate the object.
  • A shutter release is nice because I don’t really need to, or want to, be in front of the camera at this point. I am off to the side, rotating and lining up my circle for the next shot.

Post Processing

  • After shooting, I open up all the images in Bridge and run a batch rename (for DPS)
  • Open everything up in Photoshop, crop and clean up your images. use only global adjustments so you can replicate it for each and every photo. Record an action to make this part easier.
  • Load the images into a stack in Bridge. You can “play” a Bridge stack as if it’s a movie. This will act as a preview of the rotation.

Make an Animated Gif

For this post, I made the sequence into an animated gif. Here’s how

  • Load all the images into one Photoshop file by using File > scripts > load files into stack…
  • Then, in the animation panel, choose Make Frames from Layers
  • Down sample the image so it’s small. (i made my 300 pixels wide)
  • Save as a Gif using the Save for web and devices dialog box

Now you have an image sequence ready to load into DPS!

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: