Chapter 3

Assets

Efficiency is key to a Photoshop workflow, and there’s no better example than exporting assets. Be sure to scrutinize what you’re extracting, down to its file size and format.

Be Nondestructive

Use Masks, Smart Objects & Adjustment Layers to avoid forever deleting precious pixels.

Use Blend Modes with Care

How’d you get that color? Make sure it’s not an amalgamation of 2 Overlays, 4 Multiplies and 16 Color Burns. i

Use Blend Modes with Care

Someone should be able to pull a hex value from a layer property, as opposed to eye-dropping it.

Be Aware of Screen Resolution and Density

Stop the Internet: the logo’s blurry and it’s all your fault. i

Be Aware of Screen Resolution and Density

@1x assets appear blurry on @2x/Retina screens because they don’t have enough pixels. Remedy this by exporting a resolution-independent format like SVG or multiple versions (@2x,@3x, etc.)

Compress

How dare you export jpegs via File > Save As. i

Compress

Uncompressed images are bigger images, and bigger images take more time to load than compressed ones. Use the bevy of Photoshop Export methods or at the very least run your images through a compressor.

No Unnecessary Space

No need to build in extra margin or padding for layout purposes. That’s what CSS is for. i

No Unnecessary Space

CSS excels at being easy to adjust positioning. Baking padding in to your images causes headaches, especially responsively.

Work Collaboratively

Long gone are the days of working in a silo. Use CC Libraries and Linked Smart Objects to work together. Voltron! i

Work Collaboratively

With Linked Smart Objects, components of a style guide or pattern library can be assigned to different designers. Your master PSD updates automagically.