Android to Photoshop

Android 2.2 was unveiled a few days ago at Google I/O and the SDK is now available for download. Android 2.2 offers numerous improvements and new features and there is one I would like to talk about in detail, the new Capture PSD tool.

Capture PSD can be found in HierarchyViewer and requires an emulator or phone running at least Android 2.2. If you are not familiar with HierarchyViewer, I encourage you to give it a try right now. It is an extremely useful tool to inspect and debug user interfaces on Android devices. The screenshot below shows where you can access this new feature; after loading a view hierarchy, simply press the Capture PSD button in the toolbar:

HierarchyViewer and the new Capture PSD feature

With Capture PSD you can generate a Photoshop file from a running Android application. The generated document contains every view that draws as a separate layer. This can be very useful to quickly see what your UI would look like if you moved things around for instance. It is also an easy way to work with designers and let them try out new concepts in existing user interfaces. Of course, it is also a fine way to see how other applications are put together and understand how to achieve similar UI patterns. In the following examples, I exported a PSD file from the Android Market application and changed the UI a little bit to see what it would look like with the tabs at the top:

Android Market as a PSD file

Each layer is named either after the id of the corresponding view, or after the class name of the view. Views in the invisible state are exported but their layers are hidden by default, as shown in the following screenshot:

Photoshop layers for Android Market

The exported files are kept as simple as possible to ensure compatibility with as many applications as possible. For instance, recent versions of GIMP can open the generated documents without any problem. Finally, know that the generated files are not compressed and can therefore be quite large.

31 Responses to “Android to Photoshop”

  1. What an amazing feature ! This is a really great idea to export screenshots as PSD layered files especially for designers to understand how the UI has been built.

  2. Ivan says:

    That is so amazing!

  3. Matt Parker says:

    Seems like the natural next step is to have it so that you could somehow export the PSD back into an android layout. That would make this much more powerful.

  4. Romain Guy says:

    What you are describing is basically what Flash Catalyst does for Flex. It’s something I would love to do but it’s a bit more complicated to do right :)

  5. F8Full says:

    I do have the noob question concerning photoshop elements compatibility… ^^ Just kidding, I’ll RTFM :D
    Kudos Romain&Android Team, sounds like a great tool to have :)

  6. uiusplz says:

    excellent… but we desparetly need a professional UI designer. pleaseeeee

  7. n8 says:

    Would it be simple to create an export to XCF too? The PSD import in GIMP isn’t always perfect…

  8. Paris Vega says:

    Sweet. I’m actually going to get an Android phone today. One more reason to do it.

  9. Lars says:

    Really nice feature, a pity that no other and open vector formats are supported. Guess this is part of the deal with adobe :(

    Another question to romain: Why cant I see any of the article’s pictures (exception the layer panel capture of photoshop) with my Android’s browser? Shouldn’t your page be more mobile friendly ;)

    Greets from an ol’ G1

  10. Lars says:

    Edit to my previous post: ALL pictures are visible in the android browser, I was using Steel. Thought it uses the same browser view and does render identically.

  11. Romain Guy says:

    Lars: This feature has nothing to do with Adobe. I picked the PSD file format because it’s very popular amongst designers. It also has the benefit of being supported by many tools, both proprietary and Open Source. I made sure the generated files are simple enough to be opened by tools other than Photoshop.

  12. PoP says:

    If GIMP can process it, what else can we say? :)

  13. Johnny says:

    Hi, Romain

    I can’t get this work on OSX 10.6.3

    I’m using 2.2 SDK and connect to a 2.2 Nexus One.

    The HierarchyViewer successfully launched and showed the right device. But it seems the server start failed. When I click the startServer or F5, it log:
    protocol = 2
    version = 2
    and nothing happens. If I click other buttons, like “Display View”, it will introduce a NPE:
    Exception in thread “AWT-EventQueue-0″ java.lang.NullPointerException
    at com.android.hierarchyviewer.ui.Workspace.showNodeCapture(Workspace.java:1005)
    [boring stacktrace]

    would you please help me on this?

    Regards,
    Johnny

  14. Romain Guy says:

    HierarchyViewer does not work with user builds, for security reasons. It will work with the emulator though.

  15. Gary Wang says:

    Deay Sir,

    Can I use renderscript to create our android application in Android 2.1/2.2 emulator?
    http://www.anddev.org/post45158.html#p45158

    Anyway, Thanks for your help!

    Gary

  16. Romain Guy says:

    No you cannot, RenderScript is not a public API.

  17. Lars says:

    Romain: Thanks for the response, guess the popularity and ease of use with “standard” OS and software is a point. And if you made the decision to pick the format and implemented it, then I have to express both my respect to you and my astonishment that such a feature is put into action in such an apparently uncomplicated way.

    Saludos

  18. Werner says:

    That’s excellent…

    Now, how about fixing the Market, so we can upload apps again?

    It has been broken for the last four days now. Apps with CALL_PHONE and other permissions are not visible to users.

  19. qlimax says:

    I’m disappointed you are so an apple’s product hardcore fun (iphone/mac), and in the meantime you are in a central position for the android os/UI developement.
    Nice feature, though.

  20. Romain Guy says:

    Working on Android does not take anything away from the fact that Apple creates excellent products (not only though :). I don’t use an iPhone by the way, my phone is a NexusOne.

  21. qlimax says:

    Ok,so.. I’m sorry. I was wrong for the phone you own. I was thinking that, because your twitter posts says that you are posting from “Twitter for iphone” (so it’s a twitter error I suppose). My (unmotivated) disappoinment was more about the phone than for the os.

    Knowing that you are using the NexusOne make me feel really better :D
    Again, sorry. I really estimate your work, and your tips on the google IO videos!you are one of the best programmer on the world’s face IMHO

    I also think that mac osx is a robust os. I just prefer linux distros, because they are opensource.

    CIAO
    qlimax

    ps: sorry for my poor english

  22. Felix says:

    Great feature, but why PSD? Why Google, which is all about openness and things like that, chose to export hierarchies to PSD? Why not SVG, so that we can view/edit the files in free/open source software such as Inkscape? Photoshop handles SVGs as well!

  23. chander says:

    nice feature !!! love it

  24. Jay says:

    Very nice feature Romain. @Felix. Romain, already answered your question. Read the comments. Gimp is just as open source as Inkscape.

  25. marcos says:

    Hey Romain great post! Is there a way to load a psd back into this program? So it will do the opposite? in other words it will lay everything out back into my XML list?