DevNexus 2014 PhoneGap Presentations

I’ve just wrapped up my presentations for this year’s DevNexus event in Atlanta – it has been a great event, filled with tons of information on web, mobile, and back-end development. I had 3 sessions on PhoneGap – One intro, one advanced, and one a mobile frameworks panel.

Below are my presentations.  I didn’t record them this time, since they were being recorded by the conference organizers, so expect to see a video once they’re released.

Just press the space bar, or use the arrow keys to view the presentation in your browser.

Getting Started with PhoneGap and Cross Platform Mobile Development

View Presentation …

intro_2_pg

(Lesson learned, never make changes to you presentation/environment after midnight when you have the first session of the day – it will always bite you)

Designing & Architecting for PhoneGap & the Mobile Web

View presentation …

architecture_pg

Enjoy, and feel free to reach out with any questions!

Believable Compositions & Creativity in Adobe Photoshop

What makes a great composition in Photoshop? Well, that all depends on what you’re trying to achieve and personal taste – I won’t even attempt to answer that.

What makes a composition believable? That one is a little bit easier… We’ve all seen bad Photoshop jobs – you know, those where colors are way off, lighting is terrible, or edges are left jagged and pixellated. For the most part, I’d attribute a believable Photoshop composition to having qualities that mimic realism. Consistent use of colors, none of those jagged edges, appropriate use of shadows and lighting, proper perspectives, and most importantly, attention to detail.

Not quite sure what I mean? Check out these examples of some inspiring and impressive Photoshop compositions…

“Drifting Away” by Erik Johansson

“Immortal” by Alex Koshelov

“Kings Landing” via Creative Station

Want more samples and inspiration, just search for Photoshop Speed Art on YouTube, and there is a plethora of content to get your creativity flowing.

Want to create these for yourself?

Just become a member of Adobe Creative Cloud – you’ll have everything you need. Then check out the Photoshop learning center to learn how to make the most of the creative tools.

3D Printing in Adobe Photoshop CC

The latest release of Photoshop has some amazing new features, one of which is 3D printer support. The new 3D printer support makes printing your 3D models easier, regardless of whether you modeled it within Photoshop or some other 3D modeling tool.  Photoshop will even inspect your 3D models for water tightness and generate support scaffolding to ensure a high quality 3D print.

Photoshop now supports local 3D printers from Makerbot and 3D Systems, but if you don’t have a 3D printer, don’t worry, you can still print 3D objects! Through a partnership between Adobe and Shapeways, you can now package 3D prints and send them to Shapeways’ 3D printing service directly from Photoshop.

I’ve been experimenting with 3D Printing support, and it is pretty amazing. 3D printing is being adopted in innumerable scenarios – in medicine for prosthetic limbs or replacement joints, to manufacturing and engineering for custom parts, to sculpture and jewelry, and much more.

I started out by creating a few simple models and downloading existing models from the web. Check out the video below to learn more and see 3D features within Photoshop in action.

All of my 3D printing so far has been through the Shapeways service. This service will automatically inspect your 3D models for thickness/printability, and gives you immediate feedback whether or not you need to make any changes. Be sure to pay attention to the details of Shapeways’ materials, since they have different characteristics, minimum thicknesses, and associated cost. Once your object is printed, it will be mailed right to your doorstep.

My first example is a 3D printed name plate, modeled entirely within Photoshop.  I took a text layer, extruded it into a 3D object, then added a cube (stretched to the size of the text) as a base. Just request a 3D print, and out comes a nice 3D model. This one is the “Coral Red Strong & Flexible Polished” material from Shapeways. Check out the video above for details on how I created this.

"Adobe" 3D Printed Name Plate
“Adobe” 3D Printed Name Plate

My second example is a dragon, which I downloaded from a free 3D models site. This model was not created in Photoshop. I believe this model was originally intended for video games or renderings, but Photoshop had no problem scaling and printing it. Photoshop can read many common 3D model formats (.obj, .3ds, .dae, etc…), and makes the printing process simple, regardless of where the model was created.

I had to go through a few iterations to find a material and size that was actually printable because the model is very intricate and delicate, but I was finally able print it using the “White Strong & Flexible” material.

3D Printed Dragon
3D Printed Dragon

If you’re wondering “did those cost a fortune”, the answer is NO!  The cost depends on type and amount of material you’ve selected. The dragon was $32.65, and the “Adobe” letters were $24.90 USD, including shipping.

Ready to create your own 3D prints yet?  Check out the videos below to learn more about 3D printing with Adobe Photoshop CC.

Overview of 3D Printing in Photoshop

Creating a custom iPhone Case with Adobe Photoshop

By fellow Adobe evangelist Paul Trani.

I’ve also used Paul’s technique to model a few custom iPhone cases myself.

Adobe iPhone Case v2 from andytrice on Sketchfab.

3D Printing in Photoshop Series

By Daniel Presedo from the Photoshop team:

If you’re already a member of Creative Cloud, then you have everything you need to create your own 3D prints with Photoshop. Just download the latest version, and you’re ready to go! If you’re not already a member of Creative Cloud, then become a member today!

Aerial Videography with the GoPro Camera and Adobe Creative Cloud Tools

Interested in aerial videography with remote control helicopters? Well, you’re in luck! This month’s issue of Adobe Inspire magazine features my article which introduces aerial videography with a DJI Phantom multirotor helicopter and a GoPro camera!

You can read it on the web or download the FREE digital publication version to learn more. I recommend the digital publication version, which was created with Adobe Digital Publishing Suite.

Interested in focusing on aerial photography instead of videography? Stay tuned for the March Adobe Inspire issue next month, which will feature a complimentary article focusing on still images captured with the same helicopter configuration. Subscribe today to be notified automatically when the new version is available.

Adobe Inspire-1

Be warned – flying helicopters with cameras attached is highly addictive. You may easily become obsessed with the endless possibilities, as I have.

Here are a few videos I’ve captured with this setup, and processed with Creative Cloud.

Some scenic shots in and around San Francisco…

A digital short where I was playing around with After Effects…

The sky really is the limit!

OK, do I have your attention yet? To learn more you can read the full article online or download the FREE digital publication, and don’t forget to become a member of Creative Cloud to take advantage of all the creative tools that Adobe has to offer.

Heard of the Creative Cloud Packager?

The Creative Cloud Packager is a tool for CC Enterprise and CC Team customers that enables them to easily package Creative Cloud products and updates for deployment within their organizations.  It lets you select specific Creative Cloud products and/or updates and package them into .pkg or .msi installers (optionally with a serial number for Enterprise customers).  These packages can then be deployed on their own or integrated with third-party deployment tools like JAMF Casper or Microsoft SCCM.  The Creative Cloud Packager even lets you control Creative Cloud update behaviors and more.

With the recent releases of Creative Cloud Packager, you can now edit existing deployment packages, create deployment packages from local media (DVDs), and even create deployment packages for older (CS6) creative applications, if you have the proper license.

Want to learn more about the Creative Cloud Packager or get specific information on deployment package details? Do not miss the Creative Cloud Packager help documentation.

If you’re looking for an overview, don’t miss these videos covering the Creative Cloud Packager for both Enterprise and Team customers.

Deploying Creative Cloud for teams with Creative Cloud Packager

Deploying Creative Cloud for enterprise with Creative Cloud Packager

Time-Lapse Photography with Creative Cloud

In addition to my addiction to aerial photography, I’m also fascinated by time-lapse photography. With time lapse photography, you set up your camera to take pictures on an interval. This could be every few seconds, every few minutes, every few hours, or heck, once a day. It’s really up to you how you want to set up your shots and what you want to shoot. In any case, you can end up with a lot images – each by itself could be great, but it only tells a limited story.  However, you can put all those images together in a sequence to create some truly amazing visuals. Subtle motion becomes pronounced, and you can clearly view the passage of time. Often, this ends up with an amazing visual story that would be hard to otherwise capture.

All that you need start diving into time-lapse photography is a camera that is capable of capturing images on an interval – normally there is some kind of time lapse mode that lets you set up your image frequency and duration. Then, once you’ve got your images, you can process them with Creative Cloud tools to bring out their full potential.

Here are two time-lapse sequences I created this week–one a snow storm, one a sunset.

Neither sequence required a lot of specialized or expensive equipment. I used a GoPro Hero 3 Black camera, set it on my window sill, and let it do it’s thing. (I do want to upgrade to better gear, but this still works fantastically, and I love the GoPro.)

GoPro Hero 3 Black Edition
GoPro Hero 3 Black Edition

The sunset was a ten second interval captured over about 2 hours and played back in 30 seconds. The snow storm was a 60 second interval captured over roughly 14 hours, played back in 40 seconds.

So, you’ve captured the images, what next? 

You can check out the video below, or read on for further explanation how I processed and assembled the images into a video sequence, complete with links to Adobe documentation and tutorials.

Before putting everything together as a sequence, I wanted to enhance the photos to bring out as much detail as possible. Here’s where Adobe Lightroom comes into the picture. I used Lightroom to import all of my photos, add them to a collection, and then perform bulk/batch processing to enhance all of the images.

Editing Photos with Lightroom
Editing Photos with Lightroom

First, select an image to use as your baseline for adjustments. I wouldn’t start with your darkest image, and I wouldn’t start with your lightest either. I normally start somewhere in the middle. Select the image, and then switch over to the “Develop” module. I use the basic panel to make adjustments to this image. For the GoPro, I like to bring up the shadows and bring down the highlights to pull out details out. If I’m shooting a landscape, I also like to bring up the clarity and maybe even the vibrance and saturation – just don’t over do it. You could also use one of Lightroom’s presets if you want; it’s really up to you. Just be extra careful that it is not too dark or too light b/c we’re going to apply these settings to all images in the sequence.

Adobe Photoshop Lightroom - Basic Panel
Lightroom – Basic Panel

If you want to adjust hue, saturation or luminance of specific colors, you can do that within the HSL/Color/B&W panel. Using this you can make specific colors more or less intense.  I normally try to tone down the yellows in my GoPro images after I’ve increased overall saturation.

Since I used the GoPro, there is a lot of fisheye distortion from the lens – the GoPro has a 2.77mm lens whichgives an ultra-wide 170 degree field of view. This makes for some awesome wide angle shots, but sometimes you don’t want that extreme distortion. This is where lens correction gets really handy. Next, I opened up the Lens Correction panel. As soon as you check the “Enable Profile Corrections” checkbox, Lightroom should automatically select the GoPro Hero 3 Black Edition lens profile based upon metadata within the image. I didn’t want to fully flaten the image, just reduce the wide angle, so I turned down the distortion correction using the “Distortion” slider.

Adobe Photoshop Lightroom - Lens Correction
Lightroom – Lens Correction

Once you have your baseline image the way you want it, you need to apply these settings to all of your images in the sequence. Just select them all, and then either click on the “Sync…” button in the bottom right of the Develop module, or use the Settings -> Synch Settings menu. This will apply you changes on this image to all of the images that were selected. This will happen automatically if you are using auto-sync. You can learn more about synchronizing metadata between photos in the Lightroom documentation.

Next, be sure to view several images in your collection, the lightest to the darkest, and make sure they all look decent. If you need to make any changes because they are too light, or too dark, or don’t have the right contrast, then now is your time to fix it. Once you’re happy with the images in your collection you next need to export them. I exported as JPG with 100% quality at full resolution with sequential names.

Now we’ve got a lot of processed images. What’s next? We need to make a video!

At this point, I switch over to Adobe Premiere. Premiere is an incredible tool for producing videos. It makes the process of arranging video compositions very easy. It’s easy enough for a beginner to use, yet powerful enough to create high-dollar Hollywood productions. If you haven’t used Premiere before, definitely check out my Crash Course in Premiere, check out Video Editing for Non-Video Professionals, and don’t miss the Adobe Premiere channel on Adobe TV.

The first thing to do is create a new video project, then create a new sequence. If you want full HD, you’ll want to select an one of the 1080p presets (or create a custom sequence). Once you have your sequence created, you need to import your images for editing.

To import your images, select the File -> Import menu, select the first image in your sequence, and select the “Image Sequence” checkbox. (DO NOT MISS THIS STEP!)

Premiere - Import Image Sequence
Premiere – Import Image Sequence

Once imported, the image sequence will be treated like a video clip within Premiere. Drag it onto your sequence timeline, then start editing. You can speed up or slow down playback with time remapping, apply color correction, add transitions, or more.  Then add a title, add some music, and export it.

Editing within Adobe Premiere
Editing within Adobe Premiere

If you’re wondering how I got the motion in the time lapse sequence, no I didn’t have the camera moving. There are devices which make this possible, but I just used a video editing trick. The images are 12 MP, or 4000 by 3000 pixels. A “standard” HD video sequence is 1920 by 1080 pixels. The image below reflects this scale – the red area represents the 4000 by 3000 still image, and the yellow represents the 1920 by 1080 video.

Video & Image Size Comparison
Video & Image Size Comparison

You’ll notice that leaves us with a lot of room to zoom and pan around the image. I zoom into the image so that it fills the entire horizontal space within the video sequence – you can zoom in more if you want. This leaves a fair amount of vertical content outside the clipping rectangle of the video. You can use this to your advantage by panning vertically within this area.  I just made the pan very slow and deliberate so it appears that there is constant motion of the camera throughout the entire video.

The final result is that the content in the video (yellow area) appears to move because the actual image sequence is moving relative to the video viewport.

Automating PhoneGap Builds

I’ve recently had several conversations with PhoneGap users around processes for automating the compilation of PhoneGap apps.  This could be either in automated tasks using GruntAntMaven, or any other task manager, or could be in continuous integration environments like Jenkins CI.

If you’re interested in this, here are a few options… First of all, PhoneGap Build has a REST API. You can use this to programmatically create new projects, update projects, trigger new builds (even just for specific platforms), etc… This can integrate with your build scripts and tie into any workflow.

If you’re using GitHub, it is possible to tie into hooks triggering PhoneGap Build to recompile every time you commit your code.  Here’s an example of it in action, or you can just use this service which is already setup: http://autobuild.monkeh.me/ (from the same author) – Just be careful with your user/pass in plain text. Update: You can also use the Autobuild service using a clientID variable instead of sending through username and password details via HTTP.

If you aren’t using PhoneGap Build, you’re not out of luck.  All PhoneGap CLI commands are based on scripts, which themselves can be scripted.  You could use ANT’s exec command, the Maven exec plugin, Grunt exec or Grunt shell plugins, Jenkins execute shell, or any other task runner to manually invoke the PhoneGap CLI. You just need to make sure all your environment and path variables are correct to access SDKs and required programs. However, there’s one caveat… iOS builds require Xcode/Apple developer tools, which have to be run on a Mac.

If you’re using Jenkins, this might be a good one to check out: Jenkins CI + PhoneGap & Cordova

Create Amazing Photo-Walks with Adobe Photoshop Lightroom and Microsoft Photosynth

Photosynth is an impressive service from Microsoft.  It enables you to upload photos and turn them into interactive 360 panoramas, photo walls, spins, or photo walks. The Photosynth team recently announced a new version of Photosynth, and it’s a really cool web experience. It leverages WebGL to visualize the content, and runs great on both desktop and mobile devices (as long as the devices support WebGL).

Those who know me well or regularly read the blog probably already know I have an obsession with aerial photography using remote controlled multirotor helicopters. Once I discovered Photosynth, my first thought was “Wow, these ‘Photo Walks’ will be incredible to visualize flights”.  I capture most of my flights in time-lapse photography mode with a GoPro camera attached to a DJI Phantom copter. The time-lapse images are perfect for Photosynth – I normally capture on a two second interval, though the Photosynth team suggested trying an even shorter interval for better results.

To generate the best Photosynths, you need to start with the best photos. This is where Lightroom comes into the picture. Lightroom is an incredible tool for editing photos and bringing out their details. You can enhance exposure, colors, clarity, saturation, reduce noise, and more. Even better, it excels at bulk image editing. Thus it’s perfect for processing your photos for preparation to create a Photosynth.

Check out the video below to get an overview of Photosynth, and preparing your photos with Lightroom.

Now, you’re ready to learn more about both Lightroom and Photosynth, right?

Don’t miss this series on Getting Started with Lightroom 5 on Adobe TV, or Terry White’s “How To Get Started With Lightroom“.  Don’t have Lightroom? Just become a member of Creative Cloud, and you can get Lightroom and Photoshop today!

Then check out Photosynth to learn more and sign up for the preview.

Below are Photosynths from a few of my flights.  If your browser supports WebGL, you’ll be able to see the fully interactive experience – you’ll be able to scrub through the photos, zoom in, and pan the images at full resolution. It’s best viewed in full-screen mode.

If your browser doesn’t support WebGL, then you’ll just see a video of the Photosynth playback, which is still cool, but nowhere near as cool as the interactive experience. Check here to see a matrix of browsers that support WebGL. Note: In Chrome on Android you have to manually enable WebGL support.

Virginia State Capital Building – Richmond, VA


Virginia State Capital by andrewtrice on Photosynth

Golden Gate Bridge – San Francisco, CA


Golden Gate Bridge by andrewtrice on Photosynth

ATT Park – San Francisco, CA


ATT Park, San Francisco, CA by andrewtrice on Photosynth

Ocean City Inlet – Ocean City, MD


Ocean City, MD – Aerial by andrewtrice on Photosynth

Linked Smart Objects in Adobe Photoshop CC

Another great feature in the latest release of Adobe Photoshop CC is Linked Smart Objects. Linked Smart Objects enable you to place another file inside of a composition as a smart object. Any time that the linked file is saved, those changes are automatically propagated to the linked documents that you have open. (If they’re not open, you will be prompted the next time you open the file.)

For example, you can place a .ai Illustrator file inside of a PSD as a Linked Smart Object, and when you update the content in Illustrator, the content in Photoshop is automatically updated. Check out the video below for more detail.

Be sure to check out the Creative Cloud learning resources to learn more about Linked Smart Objects.

This is a FREE update for Creative Cloud members.  If you’re not already a Creative Cloud member, join today to get the most out of all of the tools that Adobe has to offer!

Perspective Warp in Adobe Photoshop CC

Today new versions of Illustrator, InDesign, and Photoshop were released, and there are some amazing new features added for Creative Cloud members. I’d like to take this opportunity to show off a really cool new feature in Adobe Photoshop CCPerspective Warp! Perpsective warp was sneaked at Adobe MAX last year – it’s a new way to manipulate your images by changing their three dimensional perspective.  You can manipulate parts of the image to give the appearance that the camera perspective changes, all without having to create a complex 3D model! This filter can be used for changing entire images, and is especially useful when aligning perspectives while compositing content from multiple images.

Here’s a quick video I put together showing how you can use it within your own Photoshop creations.

All that you have to do is select the layer that you want to manipulate, then select the Edit -> Perspective Warp menu option. Using Perspective Warp is a two-step process.

  1. First you start in “Layout” mode.  Create planes within your images to match areas or geometries of content within your image. This might be the sides of a building, or other areas that you don’t want deformed.
  2. Next, Switch “Warp” mode.  In warp mode you can drag the pins/vertices to warp the content within the image. You can also hold shift and click on a line to lock that line to a horizontal or vertical position.

Drag the perspective warping where you want it, and then commit the changes by clicking on the “Commit” check button.

Perspective Warp Toolbar
Perspective Warp Toolbar

Now, let’s look at two scenarios where I’ve used perspective warp (see the video for step by step details).

The first example shows how you can change the perspective/focal area of the image.  In this case I applied perspective warp to the entire image.  I created planes to match the Adobe building in the center of the image, and then used Perspective Warp to shift the building focal area to the left.

Shifting Perspective with Perspective Warp
Shifting Perspective with Perspective Warp

Here’s my source image for this example.  The original image was captured with a DJI Phantom quadcopter and GoPro camera, I reduced the GoPro image’s fisheye distortion using Adaptive Wide Angle and corrected colors using the Camera RAW filter before applying the Perspective Warp.

In the second example I composited a truck onto a street.  In the original images, the truck’s perspective is close, but does not match the perspective of the street.  Using Perspective Warp, you can easily re-shape content to match perspectives within your composition.

Original Images:

Yes, that is Optimus Prime :)
Yes, that is Optimus Prime 🙂

Composite Image:

Composite using Perspective Warp
Composite using Perspective Warp

I also used layers masks to remove the truck’s background and the Camera RAW filter to remove saturation from the overlaid truck image.

Links to original images used in this composition are below, thanks to Google’s image search.  Did you know that there is a new setting to easily find images based on usage rights?  This is really useful!

  • Road (Creative Commons image by Patrick Feller via Flickr)
  • Truck (Public Domain from Wikimedia Commons)

Be sure to check out the Creative Cloud learning resources to learn more about Perspective Warp and all other tools and features available within Creative Cloud.

This is a FREE update for Creative Cloud members.  If you’re not already a Creative Cloud member, join today to get the most out of all of the tools that Adobe has to offer!