Creative Cloud Helps Me Fulfill My Creative Vision

In my last post, I proclaimed my love for Adobe Creative Cloud. This post will show you the reason why. I was playing around with some of the aerial footage I captured last week in San Francisco. Just for fun, I wanted to create a HUD (heads up display) to add to the first-person experience of the video. My inspiration was the HUD created for The Avengers & Iron Man, which was created using Adobe After Effects. This turned out far better and far more interesting than I could have possibly hoped, and it is all thanks to the power of Adobe Creative Cloud. Here’s the final video complete with special effects, and below I will discuss how I used Creative Cloud to get to this. (Best experienced at 1080p, with audio – preferably loud, with lots of bass.)

First things first, I had to design the HUD. I used Photoshop to pull in a still from the video footage, and started layering elements on top of it. I Googled images of real fighter jet HUD displays, and used those as inspiration. I obviously didn’t have all of the same information, so I couldn’t make my HUD absolutely real, but I could make it look “good enough”.

HUD Design in Adobe Photoshop
HUD Design in Adobe Photoshop

I got the mockup to a point that I thought looked good, and then it came time to implement it for real in the video. It turns out my initial design didn’t work great in the final implementation, so I came back to Photoshop played with colors, and sizes, and chopped pieces up into separate image assets that I could pull into the final composition.

Next, I pulled the video into After Effects, and started overlaying the HUD graphic elements.  I chose After Effects for this instead of Premiere because After Effects has better control over the visual output and effects – Premiere is my primary tool for sequencing multiple clips into a larger composition.

Editing in Adobe After Effects
Editing in Adobe After Effects

I added all of the HUD elements and manually animated rotation and position so that it fit well with the actual flight path. Everything seemed in place, but I felt like it needed more.

Why not have targeting indicators that follow the cars? With After Effects’ Track Motion feature, this was easily done. I created a “target” graphic, inserted it into the composition, and then used Track Motion to create a motion path for the graphic. To do this, select the video layer that you want to use for motion tracking, and go to a frame that has the object that you want to track. Then click on the “Track Motion” button in the “Tracker” panel. You’ll have to select an area that will be tracked. When you analyze frames, it will detect the movement of your selection over time, and translate that to x/y coordinates, which are applied to the motion target that you choose (the “target” symbol).

I repeated this step for a bunch of vehicles, and it started looking much better. Once I had the red target indicators in the HUD, I thought “that looks cool, but it’s still not enough, and it’s not believable.”

I added some color correction using After Effect’s Tritone color correction.  This made the HUD really stand out from the video, and gave it a nice cinematic look and feel, but I still wanted more.

I thought to myself… If you’re going to go “over the top”, you might as well go “way over the top”, so I started getting creative/ridiculous. I had this robotic fighter jet feel in the video, so I figured that something needed to blow up. I found this explosion and that’s when things started getting really interesting. I added one, then two, then three explosions to the scene by leveraging After Effects’ Linear Color Key effect so that the explosion was overlaid without the background. Add some color correction on the explosion, and voila… you have an explosion on top of the video with minimal artifacts.

Note: Keying is the process of removing pixels from the background based on pixel colors. You can also remove pieces of a video clip using the rotoscoping tool – it’s like a Photoshop selection over time.

This was really starting to come together. Since I had explosions, I needed more smoke. I first tried the After Effects particle system for producing smoke, but it didn’t seem real enough for this specific use case. I found some stock footage of smoke plumes and ambient smoke, and started going to town. Pairing the stock footage with Track Motion, I was able to add smoke to the landscape that followed buildings as the camera rotated to focus back on the building.

Like I said earlier, I wanted to go “way over the top”, so of course, why not add a flyby from some jets. So I added some stock footage of computer generated jets flying overhead, again with Keying to remove the background.

At this point, things were really coming together for this scene, so I wanted to add an intro title and some music… enter Adobe Premiere.

Composing/Sequencing in Adobe Premiere
Composing/Sequencing in Adobe Premiere

Here I added the title, and started adding the static effect overlaid in the beginning and the ending of the composition.  Next, I needed background music and sound effects.  Sound is critical to the experience of video.  It can help convey emotion, and tie everything together.

I pulled in some background music from Audio Jungle. Things were starting to come together really well, but I needed more sound effects… A while back I stumbled across freesound.org, which has a bunch of Creative Commons sound effects.  This has been a goldmine for me. I pulled in sound effects for the explosions, the ambient aircraft noise, ambient machine guns, and radar beeps.

Then I pulled some of the sounds into Adobe Audition for some fine-tuning…

Audio Processing with Adobe Audition
Audio Processing with Adobe Audition

Once I had everything sequenced where I wanted it, I just exported the video from Premiere, uploaded it to Youtube, and started sharing it.

The best parts of this entire process:

  1. I did this whole thing start to finish in a little over one day.  I started working with the video on Monday night, and uploaded it to YouTube this morning. Creative Cloud has an insanely productive workflow.
  2. My background is in software development, not in video production… I do that for fun. By using Creative Cloud, I already had all the tools I needed to put everything together.
  3. Creative Cloud helps me fulfill my vision.

Now, get out there, get creative, and have fun doing it!

Sound Attribution:

Why I Love Adobe Creative Cloud

Creative Cloud is absolutely incredible. Yes, I work for Adobe, so this may sound like a biased opinion, but even if I didn’t work for Adobe, I would say the same thing. “What’s so incredible?” you are wondering? Well, for starters, it has everything I need to bring a creative vision to life.

CC

I can hear it now… you are thinking “That’s awfully vague.”  Let me try to provide some context…

My background and all of my formal education is in computer science and software development. My career has been focused on building great applications and immersive experiences for the end user. This has taken me on a perilous journey between the client and the server; from the depths of C/C++/Objective C, to the outer regions of JavaScript, from the early interactive web with Flash/ActionScript, to the innermost workings of Java, from countless acronyms, realtime data streams, and REST/web services on towards the future with the evolution web standards.

One thing that is common across all of these roles and languages is that you have to create assets to build your user interface.  Throughout my career, I’ve used Photoshop and Illustrator to build the assets.  While my primary use case has been creating and manipulating assets for software, I occasionally would use other tools for other purposes.

Creative Cloud has everything that I need to execute on this workflow, plus more. A whole lot more.

Creative Cloud has everything I need to bring a creative vision to life.

For those cases where I need to switch roles and edit video, cleanup some audio, or retouch a series of images, I already have everything I could possibly need with Creative Cloud. Video tools, audio tools, print design tools, digital publishing tools, development tools… There’s something for everyone.

On occasion, I need to edit video.  Did you know that with Creative Cloud, you get THE BEST VIDEO EDITING WORKFLOW ON THE PLANET? No, that’s not a joke or an exaggeration. Avatar, Star Trek, Iron Man, Life of Pi, and many, many more movies and television shows leverage the Adobe toolchain to execute their creative vision.

Trying to recreate some of these movie visual effects is actually what inspired me to write this post. I was metaphorically “blown away” by the capability of everything I already had installed on my computer. The end result and video effects I’ll cover in my next post, but here’s a quick screenshot:

video-small

I’ve had an interest in art, photography, computer graphics, music, and audio production my entire life. I took my first Photoshop class back in the mid ’90s, and never looked back. I played in a band, and thought music and digital arts would be my entire life. Creative Cloud makes perfect sense to me. I get the tools I need on a daily basis, and so much more. Whatever I need, it’s there.

Update: that next post is live: Creative Cloud Helps Me Fulfill My Creative Vision

HTML5 Dev Conf Wrap-up: Snap.svg, Visual Storytelling & PhoneGap

HTML5 Developer Conference just wrapped up in San Francisco, and it was a great event. There was a lot to see and hear from the entire HTML/JS community. Adobe showed off some amazing showcases of the work that is being done with rich layout on the web and released an awesome new SVG library, Snap.svg.  I also had two sessions on PhoneGap.

First, news and announcements from Adobe…

Snap.svg

Adobe has released Snap.svg, the JavaScript SVG library for the modern web.  Snap.svg is focused on making the most out of everything that SVG can offer, including masking, clipping, patterns, gradients, groups, and much more.  It is definitely worth checking out.

Learn more at:

Check out a demo of Snap.svg in action below (the SVG shapes are interactive, so be sure to play around with them):

You can check out even more demos at http://snapsvg.io/demos, and see Snap.svg in use by PBS Kids.

Visual Storytelling with Rich Layout

Adobe’s web platform team also announced two new showcase experiences that demonstrate rich storytelling through expressive layout enabled by CSS Shapes, CSS Regions, and CSS Exclusions. These include an interactive experience with National Geographic and Baby Elephants, and a beautifully designed expressive interpretation of Alice in Wonderland. You can experience both of these examples with full source code from the Adobe Web Platform GitHub repository, but make sure you’ve enabled the cutting edge layout & graphical features.

css_regions

My Sessions on PhoneGap

Last, but certainly not least, I had two sessions on PhoneGap: one an intro, and the other a more advanced architecture topic.  Thanks to everyone who came out for my sessions. You were a great audience, and there were tons of great questions. These sessions were recorded by the conference organizers, and will be available at a later date.

You can access my presentation slides in the links below; just use the space bar to advance each slide:

However, I must also apologize that a few of my samples in the “Getting Started with PhoneGap and Cross-Platform Mobile Development” did not work. I was connected to the network, but wasn’t able to receive any data, so I couldn’t access PhoneGap Build, or even add device features to a PhoneGap project from the command line tools.  I promise, these features do work when you’re on a reliable network connection. Go check out phonegap.com to learn more and get started today.

Update: The videos from my two sessions are now available online, be sure to check them out!

Coming Soon – RC Aerial Photography in Adobe Inspire Magazine!

This week I was in the video studio recording some content for Adobe Inspire magazine on creative uses of quadcopters, GoPros and Creative Cloud for aerial photography and videography. Adobe Inspire is a great place to get new ideas or learn tips and tricks with Adobe Creative Cloud tools. Subscribe to the free Adobe Inspire newsletter or download the iOS app to check it out.

My series will be released in early 2014, but here are a few teasers to whet the appetite. I had a blast with this shoot, and can’t wait for the articles and videos to be released… radio-controlled aerial photography is my latest hobby/obsession.

In the studio:

Inspire Studio

Video from the shoot: Skies above the Adobe office in San Francisco. Captured with a DJI Phantom and GoPro:

If you look really closely, you can see us standing on top of the parking garage to the back left of the Baker & Hamilton sign.

Subscribe today or download the iOS app to be notified once this is live in Inspire. Now, go get creative and do amazing things!

PhoneGap & Hardware Session Video now Available

The recording for my session “PhoneGap and Hardware” from PhoneGap Day back in July is now available! Be sure to check it out. There were apparently some issues with the audio, but you can still hear everything.

I’d like to express a huge Thank You to everyone who attended, and to everyone who watches this video!

Below are the sample projects I showed in the presentation, including source code. However, keep in mind that all of these examples were written before PhoneGap 3.0. The native plugin syntax, and inclusion methods have changed.

Pressure Sensitive Sketching in PhoneGap

In this example, the pressure-sensitive Pogo Connect Stylus uses a low energy Bluetooth 4 connection to relay touch/pressure information back to the PhoneGap application. This makes for a unique drawing and sketching experience powered with the HTML5 Canvas element. I’ve written about this example previously… Check out the video below to see it in action, and read the blog post for technical details and source code.

Moga Gamepad

The second example that I explored is a PhoneGap native plugin that is used to handle input from a Moga game controller inside of a PhoneGap application on Android.

This implementation is intended to be a proof of concept demonstrating how you could integrate the gamepad within your application. It currently only supports input from the joysticks (axisX and axisY) and the A and B buttons, and it does not handle all possible input from the controller.

This implementation is adapted directly from the com.bda.controller.example.demo.listen example from the Moga developers SDK samples available for download at: http://www.mogaanywhere.com/developers/

Check out the video below to see it in action:

The game is based on the Universe prototype that was used as a sub-game inside of the MaxMe app for the recent Adobe MAX conference. I make no guarantees about the code for this game, it was in a huge rush!

Quick Links