by Rye Mason on September 11, 2014

We use Photoshop for the majority of our visual design work here at Hashrocket. These 10 tips can help improve your process (and make your life easier) when you're working on a design.

I usually create new documents for the web at ~1500px wide and create my final layout at 1000px. I used to drag guides to mark the center point and boundaries until I found GuideGuide (free), a Photoshop plugin that draws guides and grids for you.

If you've worked with Photoshop and the web for any length of time, you've probably come across color discrepancies that make you ask why, Photoshop, why? Turns out there are a few settings that need to be changed. I won't attempt to explain the process here, but I highly recommend reading this Bjango post to familiarize yourself with color management.

Speaking of color, it can be frustrating to pick one from a source outside of Photoshop. (Let's not talk about the times I've pasted in screenshots to get hex codes.) There's a great little standalone tool called Sip (free, Mac-only), which lets you color pick anything anywhere on your screen and copies the hex, RGB, or a host of other options to your clipboard.

I like to keep the layers palette clean with a minimal amount of visible info. From the menu in your layers palette, choose "Panel Options," select "None" for Thumbnail Size, and deselect both "Expand New Effects" and "Add 'Copy' to Copied Layers and Groups" if they're checked. This cuts down on all the thumbs, "rectangle copy 327" verbiage, and endless stair-stepping of effects that can quickly crowd your palette. (Just don't leave copied layers the way they are – adopt the habit of immediately naming them something specific.)

Also, a quick way to collapse your groups (and vice versa) is to alt/opt+shift+click the parent group, which I wish I'd known about sooner. You can also target visibility for a specific layer by alt/opt-clicking its eye icon.

Before I add any elements to my PSD, I like to create hierarchy with top-level layer groups. Start with the footer (or the lowest grouping of elements on the screen) and work your way up so you don't have to rearrange the groups later. Typically I'll have layer groups named footer, body, sidebar, nav, and header. Any elements that get added to the document are grouped within the appropriate parent group and organized top to bottom, left to right, and named specifically, which makes them a whole lot easier to modify later.

Work in vector for every shape you possibly can. If I create an icon with multiple parts, I'll merge the final shapes when I'm done if the design allows.

Smart objects can be helpful in situations when you might update an element's style across many instances of that element, but where possible, try to stay away from using them to cut down on file size and frustration (like trying to click the shape to find out where it is only to be foiled by its non-clickability).

Use color coding for different states (like Hover, Active, etc) – especially if their visibility will eventually be turned off – for quick visual indicators.

When your file is complete, turn on visibility for all the layers you'll use, leaving unused layers hidden. Then clean up those extraneous layers by choosing "Delete Hidden Layers" from the menu in your layers palette.

Exporting slices can be tricky. I use Slicy ($29, Mac-only) for just about everything, and it's been well worth the money. There's also Photoshop's new built-in slicing tool, and, if all else fails, slicing by hand.

Slicy is easy to use, and can handle pretty much anything you throw at it when you add a file extension to the end of your layer/group name. By default it slices directly around the bounds of your object, but you can customize boundaries for situations where you need uniformly- or specifically-sized assets – perfect for exporting multiple icons that need to have the same dimensions. You can choose where to save the slices and whether you want Slicy to automatically update them when your PSD is modified.

Photoshop's Image Asset Generator works similarly, but isn't quite as feature-rich. After appending your layer names with extensions, you select "Image Assets" from File > Generate and save your file, and the appropriately named layers are then saved in the background to a folder alongside your PSD. The save location is kind of annoying because I'd rather choose where the slices end up instead of being forced to save them in what's usually my assets folder.

Slicing by hand is my last resort when I can't get the results I want between Slicy and the Image Asset Generator. Sadly, nothing really helps with (good) retina image generation. You'll usually have to redraw those by hand.

This isn't about Photoshop per se, but rather a pair of post-Photoshop apps that are worth mentioning. Photoshop can't compress PNGs as well as ImageOptim and ImageAlpha (both free, Mac-only), so I shrink PNGs with these apps before sending them to the repo.

These tips have increased my productivity in Photoshop, and hopefully they'll improve your workflow, too.