Feedback, please: Mobile authoring with Photoshop

Are you now, or do you plan to start, designing mobile applications, Web content, etc. using Photoshop? If so, what kinds of changes would streamline the process? Are you looking for templates, better shape/drawing tools, linked file support, automated resizing/output for different screens, better handoff to other apps, etc.?

Note that Adobe’s Device Central application (screenshot) is probably hanging out on your hard drive, and you can use it to display your PS artwork on a variety of handsets. When you’re in the Save For Web and Devices dialog in PS, hit the “Device Central” link in the lower-left corner. I was motivated to ask for info because the Device Central guys in particular are looking for feedback on how to evolve that app.

Thanks,

J.

[Update: If you’re doing this kind of work, you may find this doc on Strategic Mobile Design (PDF) interesting. –J.]

17 thoughts on “Feedback, please: Mobile authoring with Photoshop

  1. I currently use Fireworks over Photoshop for my web design because of the following:
    – It has true vector drawing tools (the biggest reason I can’t use PS for web design).
    – It has more text anti-aliasing controls.
    – It’s easier to slice graphics (from auto-slicing to naming and optimizing those slices)
    – It can create rollover graphics.
    – I don’t have to keep going in and out of the Save for Web dialog.
    That said, FIreworks doesn’t do as good a retouching, so being able to design in Fireworks, and then bounce over to Photoshop to retouch a photo would be great. Kind of like I do with linked files in InDesign. I guess that’s more of a Fireworks request, but that would streamline the workflow for me.
    Without better vector drawing tools I can’t really imagine doing too much web design in Photoshop. That would be my biggest feature request for PS. But they’d have to be as good as Fireworks or Illustrator to be compelling for me.

  2. At the beginning of the year I was using PS as my main tool for mobile interface design, but found that is was becoming more and more time consuming. Then I switched to Illustrator and have become much more productive as a result. Multiple artboards, apart from some really annoying quirks, are easier to use and transformation of artwork allows for rapid screen generation.
    Multiple artboards are pretty good as mentioned but hopefully for CS 5 they will get an upgrade to allow for easy manipulation post setup.
    One of the issues that persuaded me to look elsewhere was not being able to easily generate multiple page PDFs from PS, but now with Illus it is easier. Plus being vector images they are easily scalable.
    Fireworks has never appealed – too Macromediary! Sorry John 🙂

  3. Smarter parametric objects. A perfect example is a rounded rectangle: draw one from scratch and the size of the corner radius is just what you would expect based on settings. But once the rectangle exists in the document, subsequent adjustment of the size and aspect ratio of the rectangle applies those transforms to the corners as well, and leave you with distorted corners, or corners that are too big or too small. The only workaround is to use the white arrow to select the individual points and resize one side at a time, but this is tedious. Solution: rounded rectangles should always respect their “live” radius settings, unless the user explicitly goes out of his way to override the settings. This would allow for quick layout adjustment of interfaces, secure that corners are consistent throughout. There are other examples, but you get the gist.

  4. For web design: Live preview – button rollovers and the actual slicing. Perhaps even an “interactive” mode, that continually auto-saves the newly adjusted images so they are immediately available without extra save steps. On a similar note, for that to work, simply get rid of Save for Web and make it part of the main UI. That was actually what was so nice about Image ready. Currently, especially working selectively, only updating certain slices is a drag. Adjust, open Save for Web, select the slices, change options, save… And yes, multi-resolution/ multi-quality saving is definitely required even for people not doing any web at all, but just trying to generate different size versions for online/offline/DVD-slideshow or whatever. As much as I always remind people of using nested action constructs, there are simply limits as to how far this can be taken.

  5. I’m a web developer/designer and PS does not fit at all in my budget, workflow, time constraints and computer resources.

  6. I do a lot of work getting existing apps out to the web for smartphones. I use PS And AI all the time.
    Device central only seems to include details for Flash capable devices. Most of the smartphone work for businesses is iPhone & Blackberry with interest now in Palm Pre and Goggle Android.
    I’d love to use it but it would need to support the the current best devices in business not just Flash. Using HTML to get to these devices is the only choice for people not wanting to code for platforms and some support to view a design in multiple devices would be very good.

  7. Well… I don’t do much, if any web design and especially not for mobile devices BUT… one thing I would find very convenient is to give “Save for Web and Devices” a preset for portfolio images on the iPhone or iPod Touch, something that scales and adjusts for aspect ratio (adding black so that the image displays without cropping) – I would use that ALL thew time!

  8. Now that you ask, one feature would be to make rounded corners and boxes more obvious in Photoshop. The way Fireworks has the ability to have a rounded corner box but you can change just a single corner. This is doable in Photoshop but it is not immediately obvious from the UI.
    [Yeah, to say the least. I’ve wanted for a long time to make progress here. –J.]
    Because you have to intersect paths and it is confusing what the resultant shape will be.
    Basically better path tools in photoshop and make working with custom shapes in photoshop more intuitive. That is one thing that the Macromedia products always did better IMHO. Ideally, I should be able to do 90% of the curved vector graphic elements for the web or mobile assets directly in photoshop without illustrator or fireworks. Why even have two products. Why not merge fireworks and photoshop and just have different “modes” that can be toggled between in the UI.

  9. The direction I would go with PS regarding mobile and other interactive projects would be to enhance the layer comps feature. Currently it only allows for keeping stateful views of which layers are on or off. It would be very interesting to see if that could be extended to allow for different canvas sizes as well and allow artwork and layers to have unique positions and non-destructive transformations applied to them tied to the comp.
    You could use the smart object concept within a single file to provide most of this, ie: any smart object could be adjusted on a comp without modifying the original pixels and editing the smart object itself would result in those changes propagating to all variation comps…
    So to sum up:
    1) multiple canvas sizes in the same document using the layer comps method of statefulness to create variation comps
    2) smart objects (possibly just layer groups) that can be adjusted non-destructively within each variation comp
    This would help mobile design specifically as it would allow for targeting multiple resolutions and aspect ratios within a single file using the same graphic elements which can be globally adjusted for all variation comps by editing the original pixels.

  10. Quick post note… Layer comps do already store position and appearance (layer style) in addition to on/off state… which only makes them a better fit for where the features I described could live (rather than a new control mechanism).

  11. Maybe it’s not an appropriate place for feature requests, but you are free to ignore it 🙂 This one should be easy to implement while super useful.
    Add a search (aka filter) box to Layers palette. For complex web design PSDs this will be a great time saver. Make it just work like a filter: display only matching layers in the list. Also, make it accessible via standard for all Mac apps Cmd+Opt+F shortcut.
    (And, you ignored it in my other comment, but bring back Change Layer Content! And fix Spaces, of course)
    Thanks.

  12. a 16 bit and 18 bit depth mode.
    [“18 bit”? Why? –J.]
    -i would like a page mode where i could have create references “smart objects” by selecting several layers and saving a page. The extension of this would be to be able to print all of the pages.

  13. lots of cheap LCD displays use 18 bit…. but 16 bit is the real need, I just want to be able to work in it and see the horrible gradients i am creating.

Leave a Reply

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