360 Spherical Panoramas – The Creation of Planet Vegas

Here’s a fun tutorial for one of the last Friday afternoons of 2013… the creation of 360 degree panoramas, or “planets” as some like to call them.  If you’re not quite sure what I’m talking about, check out the image below:

Planet Vegas

A panorama is a wide-angle view, usually captured with either a special lens, or by stitching together multiple images to create the wide angle view.  A 360 degree panorama is a representation of the wide angle view into a sphere.

This image was created in Photoshop by taking multiple images which were captured by GoPro attached to a remote controlled helicopter, stitching them together to create a wide angle panorama, then creating a 360 panorama from the wide angle panorama.

Check out the video below to see a timelapse for the creation of this image. Details below…

Pretty cool, right?  I had a great time putting this together.  Just ask any of my friends, and they will tell you that I have been completely obsessed with this. It’s not a new technique – This has been around for years, but it’s one not everyone knows off of the top of their head.  You should know how to do it too!

Here’s how you go about creating a 360 degree spherical panorama:

Step 1: Start with the image  

You don’t have to have a massive panorama. You can use any image that you want. Though, I’ve had the best results by applying this to panoramas.  You could also crop an image to be much wider than it is tall.  If you want to learn how to create panoramas, check out these tutorials:

The starting panorama
The starting panorama

I did a manual process that is a variation of these… The original images I had were from a GoPro Hero 3 camera.  I applied lens profile correction in Lightroom, then loaded the images into Photoshop as separate layers of the same PSD composition.  Then I used auto-align layers and auto-blend layers to merge the images into a single panorama.

Step 2: Straighten the image (if needed)

Next, make sure that the image is straight. It’s best to have a level horizon, without significant curvature. You can straighten the horizon/lens distortion using Adaptive Wide Angle in Photoshop. Check out this video tutorial also from Russell Brown to learn more about Adaptive Wide Angle in Photoshop.

Straightening the image with the Adaptive Wide Angle filter
Straightening the image with the Adaptive Wide Angle filter

Step 3: Rotate and Crop

You’ll want to rotate and crop the image so that the horizon is level, and you get rid of missing areas within the image. If you’re missing part of the image, but you don’t want to crop any more, you can use content aware fill or the clone stamp to synthesize the missing parts.

Rotating and cropping in Photoshop
Rotating and cropping in Photoshop

Step 4: Get Rid of Seams

You don’t necessarily need a full view of 360 degrees to create these types of images, but you will get the best results if the image doesn’t have any glaring seams. The way that I usually go about doing this is by splitting the image in half, and swapping the two sides so that the seam is in the middle of the image, with some overlap.

Work in progress removing seams
Work in progress removing seams

Then I use Photoshop’s clone stamp, brushes, or content aware fill to get rid of any glaring visual seams so that it is one complete image. You’ll probably need to crop this again to get rid of any whitespace introduced from the overlapping.

Step 5: Make the image a square

Just go to Image->Image Size and make the width and the height of the image the exact same value (you’ll need to unlink width and height).  This will stretch your image out vertically – don’t worry, the stretching is OK and is part of the process.

"Squareifying" the image
“Squareifying” the image

Step 6: Flip the image

Next, you’ll want flip the image so that it is upside down.  You can do this either by going to Edit->Transform->Rotate 180, or Edit->Transform->Flip Vertical.

Flipped Image
Flipped Image

Step 7: Apply Polar Coordinates Distortion

Make sure that your image has been flattened or that all layers are within a smart object, so you are applying this filter to only one layer.  Select the target layer, then go to Filter->Distort->Polar Coordinates.  Make sure that the “Rectangular to Polar” option is selected, and hit “OK”.

Polar Coordinates to "spherize" the image
Polar Coordinates to “spherize” the image

When you apply the distortion filter, the content in the top 25-30% of your image will be stretched out, and the bottom 25-30% will be pinched/squeezed, so just be aware that this will happen.  You will want to play around with this feature with variations of image cropping to get a feel for what it will do to your images.

Step 8: Polish your image

At this point, you will now have a 360 spherical panorama, but you might not be 100% happy with the output.  If you don’t like how the distortion was applied, go back and change cropping and try again. If you want to make the colors “pop”, try applying Camera RAW as a filter.  You’ll also notice that the corners of the image are partially transparent and stretched badly… you can crop this area, retouch the area, or layer assets within a composition.  This is really up to you as the creator of the composition. Whatever you do, take advantage of Photoshop – it has a LOT of features you can use to enhance your creativity.

Color correction with Adobe Camera RAW
Color correction with Adobe Camera RAW

To see the final output at a higher resolution, check it out on my Flickr account! Or check out my Flickr set to see other spherical panoramas.

The Golden Gate
Salisbury University, Salisbury, MD
Another Angle at Las Vegas

Tools I used in this composition:

All of which are a part of Adobe Creative Cloud. If you’re not already, become a member today and unleash your creativity!

More Device Motion Experiments with HTML & Adobe DPS

I wanted to follow up my last post on 3D Parallax effects in HTML or Adobe DPS, I’ve decided to release some of the other experiments that I’ve been exploring with device motion in DPS publications. Check out the video below to see two new samples, and a corrected version of the strawberries example from my last post (the plants were going the wrong way in the last post).

All three of these samples leverage the same basic technique for responding to device motion inside of a DPS publication. The motion-interactive components are implemented using HTML and JavaScript, and are included in publications as web content overlays. In JavaScript, it takes advantage of the ondevicemotion event handler to respond to the physical orientation of the device.

In all three of samples, the web content overlay is set to autoplay, with user interaction disabled. This way the HTML & JavaScript automatically loads and the scripting is active, but it doesn’t block interaction or gestures for DPS navigation. I also enabled “Scale Content To Fit” so that HTML content scales appropriately between retina and non-retina devices.

Adobe InDesign - Web Content Overlay Options
Web Content Overlay Options

Strawberries

The strawberries sample is identical to the one from my previous post. This is just a capture of the updated motion. You can access the full source project to this sample at:
https://github.com/triceam/DPS-HTML-Samples/tree/master/strawberries

strawberries

Adobe San Francisco

The Adobe/inline content example is implemented in the same manner as the strawberries example. The large city image It is a two-layer composition created with Adobe Edge Animate. The foreground building and flag move independently from the background image. I used Photoshop to separate the content into layers and made them animate based on device orientation in the exact same fashion as the strawberries sample. All of the text and image content surrounding the cityscape panorama is laid out with InDesign.

adobe

You can check out the Adobe Edge Animate project at:
https://github.com/triceam/DPS-HTML-Samples/tree/master/adobe%20roof

AT&T Park/San Francisco Giants

The AT&T Park/San Francisco Giants example is implemented with basic HTML and JavaScript, no additional tools were used to create this interactive scenario.   The content on the left hand side was all laid out with InDesign. The content on the right side is the interactive HTML.

att_park

The image used in this example is a vertical panorama captured from a remote control helicopter. This image contains various perspectives that have been composited in Photoshop. The motion of the device is aligned to match the perspectives in the image/viewport; When the device is facing down, the image is looking down and when the device is vertical, the image faces forward. You can check out the vertical panorama image below. If you’re interested in creating a vertical panorama, be sure to check out this tutorial from Russell Brown.

Vertical Panorama over AT&T Park

The HTML and JavaScript used in this example is fairly minimal. The image is applied as the background of the root HTML <body> element, and the position of the background is shifted based upon the device motion event. This approach keeps the HTML DOM as flat and simple as possible.

Here’s the HTML that makes up this example:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Parallax Vertical Background</title>
        <link rel="stylesheet" href="assets/styles.css">
        <script src="assets/zepto.js"></script>
    </head>
    <body></body>
</html>

… and the CSS styles used to apply the background image.

body {
    background-image:url('att_park_vert_panorama.jpg');
    background-position: center;
}

… and the JavaScript used to shift the position based on the device orientation event. Note: this also uses the Zepto JavaScript library.

window.ondeviceorientation = function(event) {
        var gamma = event.gamma/90;
	var beta = event.beta/180;
	var temp = 0;

	// shift values/motion based upon device orientation
	switch (window.orientation) {
		case 90:
			temp = gamma;
			gamma = beta;
			beta = temp;
			break;
		case -90:
			temp = -gamma;
			gamma = beta;
			beta = temp;
			break;

	}

	// update positions to be used for CSS
	var yPosition = 1200 - (beta * 2200);
	var xPosition = -200 + (gamma * 300);
	xPosition = Math.max( -300, Math.min( 0,xPosition));
	yPosition = -Math.max( 100, Math.min( 1400,yPosition));
	//console.log(xPosition, yPosition);

	// apply css styles
	var css = xPosition + "px " + yPosition + "px";
	$("body").css( "background-position", css);
}

Textual content used in this example from: http://en.wikipedia.org/wiki/At%26t_park

Source code for the device motion in this example is available at: https://github.com/triceam/DPS-HTML-Samples/tree/master/ATT%20Park

All of the HTML, CSS and JavaScript code used for these examples is available in the GitHub repository at: https://github.com/triceam/DPS-HTML-Samples

Photorealistic 3D Parallax Effects in HTML or Adobe DPS with Adobe Photoshop and Adobe Edge Animate

A few weeks ago, a fellow Adobe colleague showed me a DPS publication that had an amazing design. All of the content looked great by itself, but what really made parts of it “pop” was that in certain areas there was a 3D parallax effect, which made it feel like you were looking into an image that had depth. You could rotate the device and see what’s hiding behind a person, or around the corner of a building.

Here’s what I mean… on the surface the image looked static, but as I rotated it, elements shifted to give the illusion of depth. The background and foreground elements all moved at different rates:

animation
3D Parallax Effects on a Device

I thought this was an incredible example of added interactivity and immersive experiences, and it’s not really that difficult to implement. In fact, I put together this tutorial to show exactly how you can create these types of effects in your own compositions.

To create this kind of an effect, the first thing you need to do is break apart an image into layers – note: you may need to synthesize edges so that there is an overlap in all transparent areas. Then you need to add interactivity in HTML. Align those images so that their default state looks just like the still image, then move the images based upon the device orientation. I move the foreground one way, keep the middle content more or less stationary, and move the background content the opposite direction (all based upon which way you are rotating the mobile device). Since this is all HTML, you can take this content and use it on the web, or import it into Adobe InDesign to export a DPS digital publication.

Step 1: Create Layered Images

You can either create your own layers, or break apart an existing image into layers so that each individual layer can be placed over top each other to form a seamless composition. In this case, I separated the strawberries, the rows of plants, my daughter, and the sky out to separate layers.

Break Apart Layers in Photoshop
Break Apart Layers in Photoshop

To achieve this, I used the following in Photoshop:

Yes, I did this quickly, and there are still some artifacts visible from the layering process.  :)

Step 2: Create Edge Animate Composition

Next, pull all of those images into an Edge Animate composition so you can create the parallax behavior on the timeline. I actually used the exact same technique that fellow Adobe evangelist Paul Trani uses in his parallax scrolling example.

Edge Animate Composition
Edge Animate Composition

The only difference in mine is that I added some simple HTML and JavaScript to handle device-specific behaviors. I added the following:

An HTML meta tag to the root HTML file to prevent device scaling:

<meta name = "viewport" content = "user-scalable=no, width=device-width"/>

JavaScript to disable touch interactions (prevents touch scrolling):

document.addEventListener('touchstart', function(event){
   event.preventDefault();
   return false;
});

JavaScript to handle device orientation – this jumps to a specific point in time in the timeline animation based on the device orientation:

window.ondeviceorientation = function(event) {
   var delta = Math.round(event.beta);

	switch (window.orientation) {
		case 0:
			delta = Math.round(event.gamma);
			break;
		case 180:
			delta = -Math.round(event.gamma);
			break;
	}

   var position = 15000 + (delta * 400);
   position = Math.floor(position);
   sym.stop(position);
   console.log(position);
}

Update 1/7/2014: I added logic to support both landscape and portrait orientation.

Be sure to add both of those JavaScript snippets inside of the creationComplete event for the Stage.  I also over-exaggerated the movement in the timeline.  I think it would look better with slightly less (more subtle) movement.

At this point, you could publish the composition and use it on the web – there’s nothing stopping you at all. In fact, you can check it out here, just load it on an iPad and rotate the device to see the effect. However, please keep in mind that 1) I haven’t added a preloader, 2) the assets are non-optimized and are all retina size , 3) I don’t have it auto scaling for the viewport size, so it will only look right on a retina iPad, and 4) I have only tested this on an iPad – no other devices.

Note: You could also do this without using Edge Animate, but you’d have to hand code the HTML/JS for it.

You can download the source for the Edge Animate project here.

Step 3: Include in InDesign/DPS Composition

To include this in a DPS publication, all that you need to do is export an Animate Deployment Package (.oam file) from Adobe Edge Animate. You can then just drag and drop this into InDesign for inclusion in a DPS publication.

Including the Animation in an InDesign layout for DPS
Including the Animation in an InDesign layout for DPS

Be sure to check out the DPS Getting Started Guide to learn more about DPS, and check out the docs on Web Content Overlays to learn about HTML usage inside of DPS publications.

If you aren’t already a member of Creative Cloud, join today to take advantage of all of our creative tools!

Update: After publishing this I realized that the movement of the plants should actually be reversed.  If you view this link, you’ll see the updated motion (which looks more realistic), but I can’t update the video that’s already been published.

Bringing Out the “Awesome” with Adobe Photoshop Lightroom

One of my favorite parts of Creative Cloud is that it gives you everything you need to be creative. Whether you are into photography, video, illustration, print design, web design, or just dabble in creativity, Creative Cloud has everything that you need. I’ve been doing a lot of photography lately. My main tools for retouching images are Photoshop and Lightroom – Photoshop for the heavy edits and re-composition, and Lightroom for retouching/color correcting and bulk edits.

Using either of these tools you can turn images that originally looked “blah” into “Awesome!” – hence my tag line “bringing out the awesome”.

One great feature that I use in both of these tools is the ability to retouch colors using Adobe Camera RAW (In Photoshop CC this is a filter, in Lightroom this is under the “Develop” tab). This gives you the ability to enhance colors, enhance clarity, add effects, heal, and much more, and it is all relatively easy once you get the hang of it. Check out the images below for before and after shots of a photo I recently captured from a flight over Charlotte, NC.

Before and after retouching in Lightroom
Before and after retouching in Lightroom

Now, check out a time-lapse video showing the retouching process, to get an idea how this was done (more details below)…

That entire composition retouch only took a few minutes. Here’s what I used inside of Adobe Photoshop Lightroom to put it all together.

The “Basic” panel gives you the ability to quickly adjust color temperature, tint, exposure, contrast, highlight/shadows/white balance, and enhance clarity and color saturation as it applies to the entire image. Just drag the sliders to see the impact in real time.

Basic Panel in Lightroom
Basic Panel in Lightroom

The “Effects” panel gives you the ability to add a vignette effect to your images. You can adjust the sliders to increase vignette amount, midpoint size, roudness, feather, and more.

Effects panel in Lightroom
Effects panel in Lightroom

The “Detail” panel gives you the ability to sharpen or reduce noise in your images. In this case I used it to reduce luminance (brightness) noise on the image, but you can also apply noise reduction to colors.

Detail panel in Lightroom
Detail panel in Lightroom

The Graduated Filter and Adjustment Brush allow you easily apply localized adjustments to areas within your image. In this case, I applied two graduated filters: one to bring out contrast and definition in the sky, and another to darken and unsharpen the ground. Read more in the Lightroom documentation to learn how to use both the graduated filters and adjustment brush.

Graduated Filter in Lightroom
Graduated Filter in Lightroom

… and that’s all I did. I didn’t even use a big fancy camera to take this photo. I used a Panasonic Lumix LX7, which is a pretty good point and shoot camera, but it’s definitely not a DSLR.

If you want to see a bit more detail, check out a higher resolution variation over on my Flickr page.

Skies over Charlotte, NC

Now, get out there and create amazing compositions and images. If you’re not already a member of Creative Cloud, join today at creative.adobe.com.

New UI Article and Architectural Presentation on PhoneGap

A couple of PhoneGap related activities I’ve been up to recently…

First, an article I recently wrote on Creating a Card-based UI in PhoneGap has been published on DZone.  Be sure to check it out for some tips on creating the user interface, all with just HTML, CSS, and JavaScript.   This covers both basic/static and dynamic use cases.

cards

Second, a video of my presentation on “Architectural Considerations for PhoneGap and Mobile Web Apps” has been published by the Atlanta HTML5 meetup group.  Check it out in the video below, and if you’re in the Atlanta area, be sure to check out the meetup group!  Here’s the presentation description:

Tired of Hello World? In this session, we explore best practices to build real-world PhoneGap applications. We investigate the Single Page Architecture, HTML templates, effective Touch events, performance techniques, modularization and more. We also compare and contrast the leading JavaScript and Mobile Frameworks. This session is a must If you plan to build a PhoneGap application that has more than a couple of screens.

… and here’s the actual presentation video:

If you’re reading this, and wondering what PhoneGap is:

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.

You should definitely check it out, and enjoy!