The design process is changing, and with collaboration and iteration at an all-time high, it can be hard to keep it all straight when there are a variety of ways to achieve the same result. If you’re using a tool like Photoshop, here are a few handy tools to streamline your workflow:
Layer Comps
If you are not used to layer comps, keeping them updated can be tricky at first, but they are an amazing tool once you understand how they work.
Layer comps are great for showing states of objects, such as the hover state of a navigation item or showing a different navigation menu altogether if the user is logged in. All of these instances have to be created first, then open Window > Layer Comps and create your new comp.
If you change anything, click the update comp icon. To show another state make the necessary layer changes to position, layer effects and visibility and click the create new comp button. You cannot change existing text or size of an element as it will be changed in all layer comps.
For more information about layer comps, please read Adobe’s documentation.
Linked Smart Objects
Linked smart objects will keep your design elements in a separate file–meaning there is one source of truth. This single files can be used in multiple PSD files or a single file and repeated as many times as you’d like. Need to make a change? Just double-click on that item in your layers panel, make your change, and save. When you return to your PSD file, it will be updated everywhere that smart object is being displayed.
To get started, right click on any layer (or multiple layers) and choose Convert to Smart Object (or go to Layer > Smart Objects > Convert to Smart Object). To edit this item just double-click its icon in the layers panel and it will open a temporary file (unless you have already selected “Convert to Linked”) in which you can make updates and save. When you go back to your original Photoshop document the instances of that smart object will all be updated as well.
If your linked object was built with layer comps, you can select which layer comp to show. I often include some visible guides in a layer comp so I can quickly see how to align an element.
Smart Guides
Smart guides are off by default, but you will want to turn these on right away! Just go to View > Show > and select Smart Guides. Now the item selected in the layer panels will be your base item. Hold down the command (Mac) or control key (PC) and move you cursor to hover over any other object to see the distance.
Character Styles
This is a big leap forward for iterating design ideas in Photoshop. Characters styles should be applied to all text within a file. To get started, open the Character Styles panel found in the Window menu. With the type tool, highlight an existing bit of type and click the Create new Character Style icon. Double-click on the new style to give it a more CSS friendly name. Your naming conventions begin during these early phases, which helps keep everyone speaking the same language throughout a project.
Once your new style is created, you can highlight other text that should share this style and select this new character style. Sometimes you may have to also use the “Override” icon if there are styles that have been modified.
If you would like the edit a style, you can either double click and make your edits manually, or you can change one block of text, highlight it, and select the “Redefine Character Style by merging Overrides” icon (very thoroughly named).
Paragraph styles are similar, but I only use them when I need to add some margin to my text. For instance, when I have a list I like to keep the line height the same, but add bottom margin in between items.
Libraries
While it is nice for type styles, I prefer to use the Character Styles panel. With the Libraries type styles, you have to make sure the type you are applying a style to is in its own separate text box (own layer). No mixed applications are allowed! Character styles is far more flexible and future proof.
Another issue I have with the current Libraries limitations is the fact that when you edit an item in the library, it does not update every instance of the item that is used in a file. It only updates it for any future use. For this reason, I still prefer to use linked smart objects.
Image Assets
Automating the extraction of assets allows you to have all assets needed for the development phase without doing any extra steps. Go to File > Generate > Image Assets to enable this feature.
In your layers panel, rename your layer to include at least one file extension. This will automatically extract it for you into the folder you specified or in an assets directory in your projects root folder.
How to name your layers
Single asset generation:
icon-facbook.svg
Multiple asset generation:
150% icon-facebook.jpg, 50% icon-facebook.png24, 100×100 icon-facebook_2.jpg90%, 250% icon-facebook.gif
The above layer name would produce the following:
8-quality JPG image scaled 150%
24-bit PNG image scaled 50%
90%-quality JPG image that has an absolute size of 100×100 px
a GIF image scaled 250%
For more information, check out this helpful article about layer naming conventions.
CSS Helpers
CSS Hat 2
CSS Hat 2 is a super handy extension that displays the CSS (or SCSS with or without Bourbon or Compass). It has a handful of settings to choose from and is helpful for quickly writing out CSS properties.
Adobe Extract
You can access Adobe Extract by logging in to your Adobe Creative Cloud account. If you use the Creative Cloud file sync, then all of your PSDs and image assets are available to you along with a short version history, commenting and more. You can share these assets with anyone you choose or keep them private. Extract is similar to CSS Hat 2 in that it will display the CSS properties in a more visual way. It also gives you an overview of:
Colors used
Font sizes, families and weights
Measurements
Overall, Adobe Extract is a very handy tools when starting to write your CSS.
I love finding ways to be more efficient in our design process. Photoshop has come a long way, but I have a few items on my wish list including editable, auto updating Library items and Paragraph Styles panel similar to the one in InDesign. If you have a favorite tool, extension, or tip that you use in your design workflow, I’d love to hear about it.