What are you looking for?

What new features on Photoshop mean for UI app designers

In January 2014 Adobe released an update for Photoshop CC that offers a number of interesting new features. While perspective warping and 3D printing are pretty appealing, they are perhaps not so relevant to mobile app design – not at the moment anyway! Linked Smart Objects however, most certainly will be useful.

In January 2014 Adobe released an update for Photoshop CC that offers a number of interesting new features. While perspective warping and 3D printing are pretty appealing, they are perhaps not so relevant to mobile app design – not at the moment anyway! Linked Smart Objects however, most certainly will be useful. (File > Place Linked…)

Firstly, let’s look at what a smart object actually is.

“Smart Objects are layers that contain image data from raster or vector images, such as Photoshop or Illustrator files. Smart Objects preserve an image’s source content with all its original characteristics, enabling you to perform non-destructive editing to the layer.” Adobe

When a smart object layer is double clicked, Photoshop opens the object and allows editing. These objects were traditionally embedded in the document, until now.

We find smart objects particularly useful when we are incorporating bitmap (raster) images into our app designs. We can ensure they are much larger than our designs so when we scale up for high-resolution displays the bitmaps remain high quality (non-destructive).

The new Linked Smart Objects feature is great news for designers who want to update the elements of an app across a range of PSD files. None of us enjoy repetitive tasks and this can be a real time saver.  So how does it work?

Many Photoshop users will be familiar with Adobe InDesign. These InDesign files often contain linked objects such as PNG files. If you edit the PNGs the next time you open your InDesign file it will show you an alert to say the object has been updated.

Adobe Photoshop UI
This new, much sort after feature in Photoshop works in exactly the same way. As with InDesign you will still have to open up these PSD files, update the links and re-save the file. Annoyingly, when you open this master file it doesn’t ask you if you want to update all links (as per InDesign) but a quick right click on any linked layer and choosing “Update All Modified Content” will do the trick. You will see a small yellow alert triangle on the layer to indicate that it has been changed.

You might be wondering how it’s best to use these linked objects. At Mubaloo we usually save an individual PSD for each screen of an app, mapping these out in InDesign, which makes wireframe changes easy to manage. When using linked objects, a little forethought is needed to predict which elements might need updating at a later date. This is the case for logos and icons for example, which clients will often request changes for, so should be set as Linked Smart Objects. A prime example is tab bars which are always visible on every screen. A quick update of the linked PSD file (or other file type) will apply the change across all the screens. Don’t forget you will also need to open the screen designs and update the content and save the changes.

It’s also worth noting that you can choose “Place embedded…” from the file menu if you want external files to be embedded into the PSD in the traditional way. These smart objects will then work the same as they always have in Photoshop.

It would be useful if Photoshop allowed you to turn a smart object (or just a group/layer) into a linked object within the layers panel. It’s often the case that you want to design the whole screen as one so this would be a handy tool. As it is now, you will have to place the files back into your screen design or make the asset externally in the first place and then place it in. Despite this, it’s is a great new feature and I’m sure it will increase productivity in the Mubaloo design team.<

 

 

 

By Peter Horsham, Designer

If you would like more information please get in touch alternatively:

Contact Mubaloo by phone +44 (0)203 327 8333 or email

  • Deloitte Tech Fast 50 winner 2014
  • Appsters winner for best use of API 2014
  • Ranked as the top app developer outside of the US by research firm Clutch
  • UXUK Winner 2014
  • footer-TRW
  • Mubaloo innovation lab
  • footer-Mubaloo

Company registration number: 0‌6770774.

Registered address: Mubaloo, 3 Grosvenor Gardens, London, SW1W 0BD