Adobe Preview CC

In addition to Hue, Adobe also released Preview CC for iOS devices on June 15. I thought readers of this blog might be interested in a short overview of the capabilities of this app. Essentially, you develop your design comp (for either a mobile app or a mobile website) in Photoshop and then preview your comp directly on your device. This makes it easier to verify your work looks appropriate at various resolutions before actually coding anything. A the time I write this weblog post (mid-June), Preview is only available for iOS devices. I do hope it is also ported to Android phones and tablets.

When you first open the Preview app on your tablet or smartphone, you may see an image like the following. This means that you have not connected Photoshop on your desktop. You need to be on the same wireless network or physically connect your device to your laptop or desktop via USB. Otherwise, you won’t be able to preview your work.

Error screen on iOS device that Preview is not connected.

Once you do connect your iOS devices, you should also see them in the Device Panel within Photoshop on your desktop.

Device panel in Photoshop depicting connected devices

For purposes of this discussion, I am using assets supplied by Adobe with their initial tutorial. I just don’t see the need to reinvent anything to show the capabilities of this app and introduce the topic to readers of this blog. If you want, please visit the above link and download the files so you can try them out as well.

Essentially, you can preview the design comp on a specific device (iPad or iPhone). For example, the following screen capture shows what a design composition of a mobile website would look like on an iPhone (the comp was created in Photoshop. You can quickly see whether this will work on a given device.

Preview of Photoshop comp of a mobile website

 

You can also see what a mobile app comp would look like. If you wish, you can change the size of items in Photoshop and they will resize in the preview on your device. If you look closely at the screen capture below, you see that the initial scaling is present when the comp loads on the device.

Preview of app showing initial scaling

 

On my iPad, the same site (different artboard) looks like the following.

Preview of mobile app on iPad Air

This app seems to be a quick way to test whether your design comps will display properly on selected devices.

As always, I am curious if you have used this app or if you plan to. Let me know your thoughts.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Social media & sharing icons powered by UltimatelySocial