by Tony Thomas
June 23, 2015
Tony creates pixel-perfect UI kits & icons. His pug, Wednesday, is Medialoot's beloved mascot.
Top New Features for Web, UX and Mobile App Designers in Photoshop CC 2015
Is Adobe still leading the way in the industry? or simply playing catch up?
Adobe released a major update to Photoshop last week with lots of new and exciting features for users, in particular there appears to have been a considerable amount of focus on features for web and user interface designers. This is good news, and we want to share and discuss these new features with you.
The makers of Photoshop and Illustrator have been facing some competition in the last few years from smaller software companies and indie developers who are trying to target the designer audience with new tools and fresh ideas. It is undeniable that this has pushed Adobe to make some very welcome changes to its strategy.Artboards
The feature which has been gaining the most attention is without a doubt Artboards. Much like Illustrator, and Sketch App you can now have multiple canvases in Photoshop. This feature is particularly useful for working on projects which have multiple pages or screens such as websites and mobile apps.
Artboards also open up the possibility of working 'off-canvas'. In the past any layer or object that wasn't within the document bounds was simply not visible, you now have more freedom to keep reference material or work that you don't need right now off to the side of your main Artboard, as many designers like to do in Illustrator.
Almost immediately after installing the update to Photoshop CC 2015, I was curious to find out how large the space outside of Artboards is. Although it appears to limitless as you zoom out, and out, and out some more. It does in fact appear to be limited by available disk space. This is unlike Sketch which as far as I know, is still the only app to have a truly infinite canvas.
Design Space (Preview)
This one is huge for designers, especially those who have criticised Photoshop's interface for being bloated and overly complicated. Design Space is whole new environment created to meet the needs of web, UX and mobile app designers. It is built on top of Photoshop and allows you to switch back and forth from the standard Photoshop interface and the Design Space.
One of the reasons why a lot of designers and developers are hesitant to move away from Photoshop to new software with cleaner, more streamlined interfaces is because their workflow revolves around opening, saving and sharing .psd files with collaborators. With Design Space we appear to have been given the best of both worlds, a brand new interface for designers without having to give up the power Photoshop or the benefits of working in an industry standard format.
Although Design Space is technically preview software and clearly still in progress, it is surprisingly stable and very useable. If you should should run into any issues, or find something you can't do in Design Space it is easy to switch back to regular Photoshop.
Multiple Layer Styles
This is a feature I personally have been wanting for a long time in Photoshop. Yes, we can finally have multiple instances of layer styles *Hooray*! Not only that, but we can now rearrange multiple instances of the same style to change the order in which they are rendered.
However there are a few drawbacks, one of which is that only a subset of styles can have multiple instances (Strokes, Inner/Drop Shadows and Color/Gradient Overlays). Which to be fair, may be the only styles you really need to have multiple instances of, but it still feels kind of limiting. I'm also a little disappointed that we still can't rearrange the order of all layer styles, for instance moving a Texture Overlay on top of a Gradient Overlay, or an Inner Shadow below a Color Overlay.
Export Options
'Save for Web' is dead. Well, kind of.. It's still there, but is now labelled 'Save for Web (Legacy)' and we have been given a brand new 'Export As' feature to replace it. The new interface simplifies exporting your documents, and notably includes the option to export as SVG.
Combined with the Generate Assets feature added in previous versions, this new Export feature makes Photoshop a very powerful tool for extracting individual graphics from designs.
Device Preview
Finally, Device Preview is a feature that allows you to get real-time previews of your Photoshop designs on mobile devices. This is done by downloading the companion app for iOS devices and connecting via USB or over Wi-Fi. If you have multiple Artboards in a document you can choose which Artboard is previewed on the mobile device and any changes that you make to your design will be automatically updated on the device. This can also be achieved by using plugins such as Skala for Photoshop, and Sketch also natively supports this function with its mirror app.
