Photoshop has evolved from back in the day when we only had one layer and no undo ability. Now the Adobe workhorse is used in almost all aspects of design, from photo retouching to video editing.
At Matmi one of the main uses for Photoshop is for UI design. With the advent of Sketch, a program specially made for UI & web assets, Photoshop has been under fire for being bloated and sluggish in comparison. But with a small amount of setup and a couple of plugins, Photoshop can be made to perform in a rather nice and intuitive way when designing for UI and web.
First on the list of must have plugins would have to be GuideGuide. One of the main issues with Photoshop for design is the lack of a proper grid system, ala inDeisgn, even illustrator has a rather unintuitive way of dealing with a proper grid setup. GuideGuide fixes this, the ability to setup margins, column counts and and gutter widths in a few seconds helps no end in UI and web design. For me this is ‘the’ must have plugin for Photoshop — and it’s free!
2. Actions and Workflows
Marc Edwards’ Actions and Workflows setup for Photoshop is the next on the list. It’s a huge set of actions, that streamlines some of the more tedious points when designing for scene in Photoshop. Scaling up and down for different pixel densities, centering the current layer on canvas and making a quick selection shot for the latest Dribbble vanity shot! After working with these actions and workflows for a week you will find that things that used to take five minutes now are at the push of a button!
3. PNG Hat
PNG Hat (was Enigma64) is another great time saver. For a good workflow in UI design you will find working in sprite sheets and being able to export assets straight from the mock-ups is a god send. PNG hat allows for just that, at the click of a button the layer will have its transparency trimmed to fit the current pixels and then exported to your export path of choice — and in a recent update to the cloud! Some nice features for the compression make this plugin indispensable, exporting with a file size saving of up to 70% for pngs using three different compression processors!
Coolorus has been around for a while now but is still a better option for a colour picker within Photoshop. The ability to quickly find a good colour triangle and set up your working palette is a vast improvement over Photoshop’s standard colour picker tool. It also integrates some shortcuts into the Photoshop workflow for ease of use, like the ability to copy paste the hex code value of that colour at the touch of a key.
Finally PixelDropr is really easy to recommend for UI designers. Never again will you have to find your way through that huge UI mockup psd — all of the buttons and styles you have created for various aspects of the design can be dropped into the PixelDropr panel. If you need that button again at any point, drag it from the panel to the document and it will create a 1:1 version of that asset. The best thing about working with this plugin is that with the ability of dragging smart objects. Gone are the days of replacing the clients new colour on all 99 of that buttons — you change it once in the smart object and it will change them all across the board!
By no means was Photoshop designed to be used for creating UI or web design (or the other 1001 ways that it is used in the design industry) — but it is also by no means dead in the water with the advent of Sketch and the next up and coming design app. With a little bit of time learning and creating a setup that suits your needs, you have an environment that is near perfect for the task at hand!