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!

Generating a PDF Inside of a PhoneGap App

A while back, I was asked if it’s possible to generate PDF documents inside of PhoneGap apps… The answer is definitely yes, and it’s not that hard at all!  I used the JSPDF library, which has a comprehensive JavaScript API for generating PDF documents.

Here’s a quick and easy sample…

First, create a new PhoneGap project using the command line tools, and add the console output and file writer plugins:

[code]phonegap create . "jspdf.sample" "JSPDF App"
phonegap local plugin add org.apache.cordova.file
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git[/code]

Next, download the JSPDF project code, and copy the jspdf library from the “dist” directory into your PhoneGap project.  I put it into the www/js directory.  Then, be sure to include the library inside of your main HTML file.

[html]<script type="text/javascript" src="js/jspdf.source.js"></script>[/html]

I used the uncompressed/minified source file in the “dist” directory.

Now, let’s generate a PDF document.  Here’s a code snippet that will generate a very simple PDF document and save it to the local file system on the device using PhoneGap’s File API.  This must be called *AFTER* the deviceready event.  All of the console.log statements are just used for debugging this snippet:

[js]//FIRST GENERATE THE PDF DOCUMENT
console.log("generating pdf…");
var doc = new jsPDF();

doc.text(20, 20, ‘HELLO!’);

doc.setFont("courier");
doc.setFontType("normal");
doc.text(20, 30, ‘This is a PDF document generated using JSPDF.’);
doc.text(20, 50, ‘YES, Inside of PhoneGap!’);

var pdfOutput = doc.output();
console.log( pdfOutput );

//NEXT SAVE IT TO THE DEVICE’S LOCAL FILE SYSTEM
console.log("file system…");
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {

console.log(fileSystem.name);
console.log(fileSystem.root.name);
console.log(fileSystem.root.fullPath);

fileSystem.root.getFile("test.pdf", {create: true}, function(entry) {
var fileEntry = entry;
console.log(entry);

entry.createWriter(function(writer) {
writer.onwrite = function(evt) {
console.log("write success");
};

console.log("writing to file");
writer.write( pdfOutput );
}, function(error) {
console.log(error);
});

}, function(error){
console.log(error);
});
},
function(event){
console.log( evt.target.error.code );
});[/js]

Notice that the PDF generation is actually the easy part.  Once you have created the document, you can get a string representation of the document using the doc.output() function, and with that you can do whatever you want with it.  You can save it to the local file system like I did, send it to a server, or even send it to a native PDF reader on the device.

Be sure to check out the JSPDF open source project on GitHub and review the docs and online examples for more details.

You can download the sample PDF here that was generated from this code snippet.

PhoneGap Presentations from HTML5DevConf

I was  searching the web earlier this week for an older presentation from a few months back, and just happened to stumble across my recent presentations from HTML5DevConf from this past October. Looks like the videos were posted in November, but I’m just seeing them now. I had two sessions: Designing and Architecting PhoneGap and Mobile Web Apps and Getting Started with PhoneGap and Cross-Platform Mobile Development, and if you weren’t able to attend them, you’re still in luck! Here are the videos from those sessions:

Designing and Architecting PhoneGap and Mobile Web Apps

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.

Getting Started with PhoneGap and Cross-Platform Mobile Development

Unfortunately, I ran into network issues which prevented some of my samples from working in this one, but you’ll still be able to get the point.

HTML has emerged as a powerful alternative to “native” to enable cross-platform mobile application development. In this session, you learn how to leverage your existing HTML and JavaScript skills to build cross-platform mobile applications, how to access the device features (camera, accelerometer, contacts, file system, etc) using JavaScript APIs, and how to package your HTML application as a native app for distribution through the different app stores.

You can also check out highlights from HTML5DevConf and find my presentation assets and materials online here.